Merge pull request #2518 from opentiny/sync-3.19.0-zzc-1112

feat: sync 3.19.0 to dev

examples/sites/demos/apis/drawer.js

@@ -172,7 +172,7 @@ export default {
         {
           name: 'height',
           type: 'string',
-          defaultValue: "'500px'",
+          defaultValue: "'100vh'",
           desc: {
             'zh-CN': '设置抽屉的高度',
             'en-US': 'Set the height of the drawer'

examples/sites/demos/pc/app/action-menu/icon-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：只显示图标</p>
+    <p>场景1：显示图标</p>
     <tiny-action-menu
       class="custom-icon"
       :options="options"

examples/sites/demos/pc/app/action-menu/icon.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：只显示图标</p>
+    <p>场景1：显示图标</p>
     <tiny-action-menu
       class="custom-icon"
       :options="options"

examples/sites/demos/pc/app/amount/size-composition-api.vue

@@ -1,5 +1,11 @@
 <template>
   <tiny-amount size="medium" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="small" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="mini" v-model="value" :date="date"></tiny-amount>
 </template>
 
 <script setup lang="jsx">

examples/sites/demos/pc/app/amount/size.vue

@@ -1,5 +1,11 @@
 <template>
   <tiny-amount size="medium" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="small" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="mini" v-model="value" :date="date"></tiny-amount>
 </template>
 
 <script lang="jsx">

examples/sites/demos/pc/app/area/custom-service-composition-api.vue

@@ -23,7 +23,7 @@ function getJCR() {
       id: '3623',
       id_and_type: '3623JCR',
       parent_and_type: null,
-      name: 'A公司 Marketing与销售服务部',
+      name: 'A公司销售服务部',
       date_from: '2005/06/21 00:00:00',
       name_en: 'Consumer BG Marketing and Sales Service Dept',
       parent_type: null,
@@ -36,7 +36,7 @@ function getJCR() {
       id: '650561',
       id_and_type: '650561JCR',
       parent_and_type: null,
-      name: 'A公司 Marketing与销售服务部（东莞）',
+      name: 'A公司销售服务部（东莞）',
       date_from: '2012/09/27 00:00:00',
       name_en: 'Consumer BG Marketing and Sales Service Dept (Dongguan)',
       parent_type: null,

examples/sites/demos/pc/app/area/custom-service.spec.ts

@@ -34,7 +34,7 @@ test('测试自定义服务', async ({ page }) => {
   await getSelectItem(areaRep).first().click()
   await areaInput.nth(3).click()
   await getSelectItem(areaOffice).first().click()
-  await expect(areaInput.first()).toHaveValue('A公司 Marketing与销售服务部')
+  await expect(areaInput.first()).toHaveValue('A公司销售服务部')
   await expect(areaInput.nth(1)).toHaveValue('火星终端子公司')
   await expect(areaInput.nth(2)).toHaveValue('北京代表处')
   await expect(areaInput.nth(3)).toHaveValue('牙买加办事处')

examples/sites/demos/pc/app/area/custom-service.vue

@@ -30,7 +30,7 @@ export default {
           id: '3623',
           id_and_type: '3623JCR',
           parent_and_type: null,
-          name: 'A公司 Marketing与销售服务部',
+          name: 'A公司销售服务部',
           date_from: '2005/06/21 00:00:00',
           name_en: 'Consumer BG Marketing and Sales Service Dept',
           parent_type: null,
@@ -43,7 +43,7 @@ export default {
           id: '650561',
           id_and_type: '650561JCR',
           parent_and_type: null,
-          name: 'A公司 Marketing与销售服务部（东莞）',
+          name: 'A公司销售服务部（东莞）',
           date_from: '2012/09/27 00:00:00',
           name_en: 'Consumer BG Marketing and Sales Service Dept (Dongguan)',
           parent_type: null,

examples/sites/demos/pc/app/company/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-company-class">
     <tiny-company
       v-model="value"
       placeholder="请选择"
@@ -32,6 +32,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-company-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/company/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-company-class">
     <tiny-company
       v-model="value"
       placeholder="请选择"
@@ -39,6 +39,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-company-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/company/custom-service-composition-api.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="demo-company-class">
     <tiny-company
       v-model="value"
       placeholder="请输入"
@@ -10,6 +11,7 @@
       is-drop-inherit-width
       clearable
     ></tiny-company>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -53,3 +55,9 @@ function change(value) {
   TinyModal.message({ message: `change:${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/company/custom-service.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="demo-company-class">
     <tiny-company
       v-model="value"
       placeholder="请输入"
@@ -10,6 +11,7 @@
       is-drop-inherit-width
       clearable
     ></tiny-company>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -60,3 +62,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-company-class">
     <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyCompany } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/company/custom-show-num.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-company-class">
     <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/country/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-country-class">
     <tiny-country v-model="value" @change="change"></tiny-country>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -17,6 +17,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-country-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/country/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-country-class">
     <tiny-country v-model="value" @change="change"></tiny-country>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-country-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/country/custom-service-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-country-class">
     <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +41,9 @@ function getCountryData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/country/custom-service.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-country-class">
     <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/country/fields-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-country-class">
     <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +41,9 @@ function getCountryData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/country/fields.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-country-class">
     <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -17,6 +17,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/currency/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/currency/custom-service-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -65,3 +67,9 @@ function getCurrencyData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/custom-service.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -74,3 +76,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <br />
     <tiny-currency v-model="value" placeholder="请选择" @change="change" :disabled="disabled"></tiny-currency>
@@ -21,3 +21,9 @@ function Switchover() {
   disabled.value = !disabled.value
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/disable-currency.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <br />
     <tiny-currency v-model="value" placeholder="请选择" @change="change" :disabled="disabled"></tiny-currency>
@@ -30,3 +30,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/fields-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -32,3 +34,9 @@ function getCurrencyData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/fields.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -41,3 +43,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/filter-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency
       v-model="value"
       :drop-style="{ width: '200px', 'min-width': '200px' }"
@@ -22,3 +22,14 @@ const change = (value) => {
   TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

examples/sites/demos/pc/app/currency/filter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency
       v-model="value"
       :drop-style="{ width: '200px', 'min-width': '200px' }"
@@ -31,3 +31,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

examples/sites/demos/pc/app/currency/set-default-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyCurrency } from '@opentiny/vue'
 
 const value = ref('CNY')
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="demo-currency-class">
     <tiny-currency
       v-model="value"
       placeholder="请选择"
@@ -7,6 +8,7 @@
       :set-default-currency="setDefaultCurrency"
       @change="change"
     ></tiny-currency>
+  </div>
 </template>
 
 <script setup>
@@ -41,3 +43,9 @@ const instance = getCurrentInstance()
 const { $service } = instance.appContext.config.globalProperties
 console.log($service?.base.getEnvInfo())
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/set-default-custom-service.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="demo-currency-class">
     <tiny-currency
       v-model="value"
       placeholder="请选择"
@@ -7,6 +8,7 @@
       :set-default-currency="setDefaultCurrency"
       @change="change"
     ></tiny-currency>
+  </div>
 </template>
 
 <script>
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/set-default.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/currency/size-composition-api.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" size="medium" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="small" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="mini" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -17,6 +23,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/currency/size.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" size="medium" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="small" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="mini" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -26,6 +32,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/dept/auto-select-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/auto-select.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/basic-usage.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
     <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
   </div>
-  </div>
 </template>
 
 <script setup lang="jsx">
@@ -23,8 +21,8 @@ function beforeConfirm() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

examples/sites/demos/pc/app/dept/before-confirm.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
     <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
   </div>
-  </div>
 </template>
 
 <script lang="jsx">
@@ -32,8 +30,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

examples/sites/demos/pc/app/dept/custom-service-composition-api.vue

@@ -1,10 +1,12 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept
       v-model="value"
       :fetch-dept-by-value="getfetchDeptByValue"
       :fetch-dept="getfetchDept"
       :fetch-dept-list="getDeptList"
     ></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -274,3 +276,9 @@ function getDeptList(upperCode) {
   })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/custom-service.vue

@@ -1,10 +1,12 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept
       v-model="value"
       :fetch-dept-by-value="getfetchDeptByValue"
       :fetch-dept="getfetchDept"
       :fetch-dept-list="getDeptList"
     ></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -281,3 +283,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
     <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
   </div>
-  </div>
 </template>
 
 <script setup lang="jsx">
@@ -19,8 +17,8 @@ function cancel() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

examples/sites/demos/pc/app/dept/dept-cancel.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
     <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
   </div>
-  </div>
 </template>
 
 <script lang="jsx">
@@ -28,8 +26,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

examples/sites/demos/pc/app/dept/dept-close-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" @close="close"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ function close() {
   TinyModal.message('关闭弹出框')
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/dept-close.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" @close="close"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -21,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
     <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
   </div>
-  </div>
 </template>
 
 <script setup lang="jsx">
@@ -19,8 +17,8 @@ function confirm() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

examples/sites/demos/pc/app/dept/dept-confirm.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
     <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
   </div>
-  </div>
 </template>
 
 <script lang="jsx">
@@ -28,8 +26,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

examples/sites/demos/pc/app/dept/dept-events-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -16,3 +18,9 @@ function change(value) {
   TinyModal.message({ message: '改变的部门值: ' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/dept-events.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ function selected(value) {
   TinyModal.message({ message: '下拉选项值改变为: ' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/dept-selected.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -21,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" disabled></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/dynamic-disable.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" disabled></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/size-composition-api.vue

@@ -1,5 +1,13 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" size="medium"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="small"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="mini"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +16,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/size.vue

@@ -1,5 +1,13 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" size="medium"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="small"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="mini"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue

@@ -1,9 +1,11 @@
 <template>
-  <tiny-dept :value="value" size="medium">
+  <div class="demo-dept-class">
+    <tiny-dept :value="value">
       <template #hrapprover="data">
         <div>{{ data.slotScope.hrapprover }}</div>
       </template>
     </tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/slot-hrapprover.vue

@@ -1,9 +1,11 @@
 <template>
-  <tiny-dept :value="value" size="medium">
+  <div class="demo-dept-class">
+    <tiny-dept :value="value">
       <template #hrapprover="data">
         <div>{{ data.slotScope.hrapprover }}</div>
       </template>
     </tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -20,3 +22,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/title-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" title="部门"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/dept/title.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-dept-class">
     <tiny-dept v-model="value" title="部门"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/drawer/dragable-composition-api.vue

@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -35,9 +36,3 @@ const drag = ({ width, height }) => {
   TinyModal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>

examples/sites/demos/pc/app/drawer/dragable.vue

@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -44,9 +45,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>

examples/sites/demos/pc/app/drawer/placement-composition-api.vue

@@ -10,6 +10,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>

examples/sites/demos/pc/app/drawer/placement.vue

@@ -9,6 +9,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>

examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ function change(role) {
 </script>
 
 <style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/drop-roles/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -34,6 +34,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -21,3 +23,9 @@ function change(role) {
   })
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/drop-roles/change-role-event.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -29,3 +31,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles
       v-model="value"
       placeholder="选择角色"
@@ -7,6 +8,7 @@
       :fetch-current-role="getCurrentRole"
       @change="change"
     ></tiny-drop-roles>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -41,3 +43,9 @@ function change(role) {
   )
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/drop-roles/custom-service.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles
       v-model="value"
       placeholder="选择角色"
@@ -7,6 +8,7 @@
       :fetch-current-role="getCurrentRole"
       @change="change"
     ></tiny-drop-roles>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/drop-roles/size-composition-api.vue

@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -26,9 +33,7 @@ function change(role) {
 </script>
 
 <style scoped>
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
+.demo-drop-roles-class {
+  width: 280px;
 }
 </style>

examples/sites/demos/pc/app/drop-roles/size.vue

@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -34,9 +41,7 @@ export default {
 </script>
 
 <style scoped>
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
+.demo-drop-roles-class {
+  width: 280px;
 }
 </style>

examples/sites/demos/pc/app/form/basic-usage-composition-api.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="demo-form">
     <tiny-form label-width="100px">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -16,7 +16,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { reactive } from 'vue'
 import {
   TinyForm,
   TinyFormItem,

examples/sites/demos/pc/app/form/basic-usage.spec.ts

@@ -30,10 +30,6 @@ test('测试基本表单', async ({ page }) => {
   await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 
-  // 其他输入
-  await demo.getByPlaceholder('click').first().hover()
-  await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()
-
   // 提交按钮
   const dialog = page.locator('.tiny-modal.active')
   await demo.getByRole('button', { name: '提交' }).click()

examples/sites/demos/pc/app/form/basic-usage.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="demo-form">
     <tiny-form label-width="100px">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -16,7 +16,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">

examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue

@@ -9,7 +9,7 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
+        <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

examples/sites/demos/pc/app/form/custom-validation-rule.vue

@@ -9,7 +9,7 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
+        <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

examples/sites/demos/pc/app/form/display-only-composition-api.vue

@@ -2,13 +2,22 @@
   <div class="demo-form">
     <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
-      <tiny-form-item label="超长文字">
-        <tiny-input v-model="formData.input"></tiny-input>
+      <tiny-form-item label="开关">
+        <tiny-switch></tiny-switch>
       </tiny-form-item>
       <tiny-form-item label="radio">
         <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
         <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="复选框">
+        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
+      </tiny-form-item>
+      <tiny-form-item label="复选框组">
+        <tiny-checkbox-group v-model="formData.checkedArr">
+          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+        </tiny-checkbox-group>
+      </tiny-form-item>
       <tiny-form-item label="select">
         <tiny-select v-model="formData.select">
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
         </tiny-select>
       </tiny-form-item>
-      <tiny-form-item label="文本域">
-        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
-      </tiny-form-item>
       <tiny-form-item label="我的密码">
         <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字">
         <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="复选框">
-        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
-      </tiny-form-item>
-      <tiny-form-item label="复选框组">
-        <tiny-checkbox-group v-model="formData.checkedArr">
-          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
-          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
-        </tiny-checkbox-group>
-      </tiny-form-item>
-      <tiny-form-item label="开关">
-        <tiny-switch></tiny-switch>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
       <tiny-form-item label="datePicker">
         <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
       </tiny-form-item>
+      <tiny-form-item label="超长文字">
+        <tiny-input v-model="formData.input"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本域">
+        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
+      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
@@ -146,7 +146,7 @@ const pickerOptions = ref({
 })
 const formData = ref({
   input:
-    '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+    'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
   radioValue: '1',
   select: '选项1',
   select1: ['选项1', '选项2'],
@@ -164,7 +164,7 @@ const formData = ref({
   monthrange: ['2022-01', '2023-01'],
   quantity: 1,
   textareaValue:
-    '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
+    'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
   checked: true,
   checkedArr: ['复选框1'],
   rate1: 2,
@@ -202,7 +202,6 @@ function createFilter(queryString) {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 16px;
   font-size: 14px;
 }
 </style>

examples/sites/demos/pc/app/form/display-only.spec.ts

@@ -9,13 +9,13 @@ test('表单仅展示', async ({ page }) => {
   const getItem = (index: number) => demo.locator('.tiny-form-item__content').nth(index)
 
   await switchBtn.click()
-  await expect(demo.locator('.tiny-form-item').first().locator('input')).toBeVisible()
+  await expect(getItem(10).locator('input')).toBeVisible()
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-form-item').first().locator('input')).not.toBeVisible()
   await expect(getItem(1).locator('.tiny-radio__inner')).not.toBeVisible()
   await expect(getItem(1)).toHaveText('男')
-  await expect(getItem(2).locator('input')).not.toBeVisible()
-  await expect(getItem(2).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
-  await expect(getItem(3).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
+  await expect(getItem(4).locator('input')).not.toBeVisible()
+  await expect(getItem(4).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
+  await expect(getItem(5).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
 })

examples/sites/demos/pc/app/form/display-only.vue

@@ -2,13 +2,22 @@
   <div class="demo-form">
     <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
-      <tiny-form-item label="超长文字">
-        <tiny-input v-model="formData.input"></tiny-input>
+      <tiny-form-item label="开关">
+        <tiny-switch></tiny-switch>
       </tiny-form-item>
       <tiny-form-item label="radio">
         <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
         <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="复选框">
+        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
+      </tiny-form-item>
+      <tiny-form-item label="复选框组">
+        <tiny-checkbox-group v-model="formData.checkedArr">
+          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+        </tiny-checkbox-group>
+      </tiny-form-item>
       <tiny-form-item label="select">
         <tiny-select v-model="formData.select">
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
         </tiny-select>
       </tiny-form-item>
-      <tiny-form-item label="文本域">
-        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
-      </tiny-form-item>
       <tiny-form-item label="我的密码">
         <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字">
         <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="复选框">
-        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
-      </tiny-form-item>
-      <tiny-form-item label="复选框组">
-        <tiny-checkbox-group v-model="formData.checkedArr">
-          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
-          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
-        </tiny-checkbox-group>
-      </tiny-form-item>
-      <tiny-form-item label="开关">
-        <tiny-switch></tiny-switch>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
       <tiny-form-item label="datePicker">
         <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
       </tiny-form-item>
+      <tiny-form-item label="超长文字">
+        <tiny-input v-model="formData.input"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本域">
+        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
+      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
@@ -162,7 +162,7 @@ export default {
       },
       formData: {
         input:
-          '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+          'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
         radioValue: '1',
         select: '选项1',
         select1: ['选项1', '选项2'],
@@ -180,7 +180,7 @@ export default {
         monthrange: ['2022-01', '2023-01'],
         quantity: 1,
         textareaValue:
-          '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
+          'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
         checked: true,
         checkedArr: ['复选框1'],
         rate1: 2,
@@ -219,7 +219,6 @@ export default {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 16px;
   font-size: 14px;
 }
 </style>

examples/sites/demos/pc/app/form/form-disabled-composition-api.vue

@@ -2,21 +2,12 @@
   <div class="demo-form">
     <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
-      <tiny-form-item label="Input">
-        <tiny-input v-model="createData.user"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="Select">
-        <tiny-select v-model="createData.select" placeholder="请选择">
-          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-          </tiny-option>
-        </tiny-select>
-      </tiny-form-item>
-      <tiny-form-item label="Numeric">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="Switch">
         <tiny-switch v-model="createData.sw"></tiny-switch>
       </tiny-form-item>
+      <tiny-form-item label="Link">
+        <tiny-link>默认链接</tiny-link>
+      </tiny-form-item>
       <tiny-form-item label="Radio">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
           <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
         </tiny-checkbox-group>
       </tiny-form-item>
+      <tiny-form-item label="IpAddress">
+        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="ButtonGroup">
+        <tiny-button-group :data="groupData"></tiny-button-group>
+      </tiny-form-item>
+      <tiny-form-item label="Input">
+        <tiny-input v-model="createData.user"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="Select">
+        <tiny-select v-model="createData.select" placeholder="">
+          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+          </tiny-option>
+        </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="Datepicker">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -38,7 +47,6 @@
         <tiny-time-picker
           v-model="createData.timePicker"
           :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
-          placeholder="任意时间点"
         ></tiny-time-picker>
       </tiny-form-item>
       <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
       </tiny-form-item>
       <tiny-form-item label="Tooltip">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="Textarea">
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
       </tiny-form-item>
       <tiny-form-item label="Autocomplete">
-        <tiny-autocomplete
-          v-model="createData.autocomplete"
-          placeholder="请输入内容"
-          :fetch-suggestions="querySearch"
-        ></tiny-autocomplete>
-      </tiny-form-item>
-      <tiny-form-item label="ButtonGroup">
-        <tiny-button-group :data="groupData"></tiny-button-group>
+        <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
       </tiny-form-item>
       <tiny-form-item label="Cascader">
-        <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item label="IpAddress">
-        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
-      </tiny-form-item>
-      <tiny-form-item label="Link">
-        <tiny-link>默认链接</tiny-link>
+        <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
       </tiny-form-item>
       <tiny-form-item label="PopEditor">
         <tiny-popeditor
           v-model="createData.popEditor"
-          placeholder="请选择"
           :grid-op="gridOp"
           text-field="name"
           value-field="id"
@@ -100,7 +94,6 @@ import {
   TinyDropTimes,
   TinyTooltip,
   TinyInput,
-  TinyButton,
   TinyAutocomplete,
   TinyButtonGroup,
   TinyCascader,
@@ -172,7 +165,7 @@ const gridOp = ref({
     {
       field: 'id',
       title: 'ID',
-      width: 40
+      width: 60
     },
     {
       field: 'name',
@@ -268,7 +261,7 @@ function createFilter(queryString) {
 
 .title {
   margin-bottom: 30px;
-  margin-left: 100px;
+  margin-left: 80px;
   font-size: 14px;
 }
 </style>

examples/sites/demos/pc/app/form/form-disabled.spec.js

@@ -18,22 +18,22 @@ test('测试表单禁用', async ({ page }) => {
   })
 
   await switchBtn.click()
-  await expect(formItem.first().locator('input')).toBeDisabled()
-  await expect(formItem.nth(1).locator('input')).toBeDisabled()
-  await expect(formItem.nth(2).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
-  await expect(formItem.nth(3).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
-  await expect(formItem.nth(4).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(5).locator('input').nth(1)).toBeDisabled()
-  await expect(formItem.nth(6).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(7).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(8).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(9).locator('input')).toBeDisabled()
-  await expect(formItem.nth(10).locator('input')).toBeDisabled()
-  await expect(formItem.nth(11).locator('textarea')).toBeDisabled()
+  await expect(formItem.nth(0).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
+  await expect(formItem.nth(2).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(3).locator('input').nth(1)).toBeDisabled()
+  await expect(formItem.nth(3).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(6).locator('button').first()).toHaveClass(/disabled/)
+  await expect(formItem.nth(7).locator('input')).toBeDisabled()
+  await expect(formItem.nth(8).locator('input')).toBeDisabled()
+  await expect(formItem.nth(9).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
+  await expect(formItem.nth(10).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(11).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(12).locator('input')).toBeDisabled()
-  await expect(formItem.nth(13).locator('button').first()).toHaveClass(/disabled/)
-  await expect(formItem.nth(14).locator('input')).toBeDisabled()
-  await expect(formItem.nth(15).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(13).locator('input')).toBeDisabled()
+  await expect(formItem.nth(14).locator('textarea')).toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).toBeDisabled()
+  await expect(formItem.nth(16).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(17).locator('input').first()).toBeDisabled()
   // 尝试拖到滑块,应是无法拖动状态
   const { x, y, height } = await slider.boundingBox()
@@ -45,22 +45,22 @@ test('测试表单禁用', async ({ page }) => {
   expect(newX).toEqual(x)
 
   await switchBtn.click()
-  await expect(formItem.first().locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(1).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(2).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
-  await expect(formItem.nth(3).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
-  await expect(formItem.nth(4).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(5).locator('input').nth(1)).not.toBeDisabled()
-  await expect(formItem.nth(6).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(7).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(8).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(9).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(10).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(11).locator('textarea')).not.toBeDisabled()
+  await expect(formItem.nth(0).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
+  await expect(formItem.nth(2).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(3).locator('input').nth(1)).not.toBeDisabled()
+  await expect(formItem.nth(3).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(6).locator('button').first()).not.toHaveClass(/disabled/)
+  await expect(formItem.nth(7).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(8).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(9).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
+  await expect(formItem.nth(10).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(11).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(12).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(13).locator('button').first()).not.toHaveClass(/disabled/)
-  await expect(formItem.nth(14).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(15).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(13).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(14).locator('textarea')).not.toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(16).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(17).locator('input').first()).not.toBeDisabled()
   // 尝试拖到滑块,应是可以拖动状态
   const sliderBox = await slider.boundingBox()

examples/sites/demos/pc/app/form/form-disabled.vue

@@ -2,21 +2,12 @@
   <div class="demo-form">
     <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
-      <tiny-form-item label="Input">
-        <tiny-input v-model="createData.user"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="Select">
-        <tiny-select v-model="createData.select" placeholder="请选择">
-          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-          </tiny-option>
-        </tiny-select>
-      </tiny-form-item>
-      <tiny-form-item label="Numeric">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="Switch">
         <tiny-switch v-model="createData.sw"></tiny-switch>
       </tiny-form-item>
+      <tiny-form-item label="Link">
+        <tiny-link>默认链接</tiny-link>
+      </tiny-form-item>
       <tiny-form-item label="Radio">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
           <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
         </tiny-checkbox-group>
       </tiny-form-item>
+      <tiny-form-item label="IpAddress">
+        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="ButtonGroup">
+        <tiny-button-group :data="groupData"></tiny-button-group>
+      </tiny-form-item>
+      <tiny-form-item label="Input">
+        <tiny-input v-model="createData.user"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="Select">
+        <tiny-select v-model="createData.select" placeholder="">
+          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+          </tiny-option>
+        </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="Datepicker">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -38,7 +47,6 @@
         <tiny-time-picker
           v-model="createData.timePicker"
           :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
-          placeholder="任意时间点"
         ></tiny-time-picker>
       </tiny-form-item>
       <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
       </tiny-form-item>
       <tiny-form-item label="Tooltip">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="Textarea">
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
       </tiny-form-item>
       <tiny-form-item label="Autocomplete">
-        <tiny-autocomplete
-          v-model="createData.autocomplete"
-          placeholder="请输入内容"
-          :fetch-suggestions="querySearch"
-        ></tiny-autocomplete>
-      </tiny-form-item>
-      <tiny-form-item label="ButtonGroup">
-        <tiny-button-group :data="groupData"></tiny-button-group>
+        <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
       </tiny-form-item>
       <tiny-form-item label="Cascader">
-        <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item label="IpAddress">
-        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
-      </tiny-form-item>
-      <tiny-form-item label="Link">
-        <tiny-link>默认链接</tiny-link>
+        <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
       </tiny-form-item>
       <tiny-form-item label="PopEditor">
         <tiny-popeditor
           v-model="createData.popEditor"
-          placeholder="请选择"
           :grid-op="gridOp"
           text-field="name"
           value-field="id"
@@ -99,7 +93,6 @@ import {
   TinyDropTimes,
   TinyTooltip,
   TinyInput,
-  TinyButton,
   TinyAutocomplete,
   TinyButtonGroup,
   TinyCascader,
@@ -125,7 +118,6 @@ export default {
     TinyDropTimes,
     TinyTooltip,
     TinyInput,
-    TinyButton,
     TinyAutocomplete,
     TinyButtonGroup,
     TinyCascader,
@@ -198,7 +190,7 @@ export default {
           {
             field: 'id',
             title: 'ID',
-            width: 40
+            width: 60
           },
           {
             field: 'name',
@@ -296,7 +288,7 @@ export default {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 100px;
+  margin-left: 80px;
   font-size: 14px;
 }
 </style>

examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue

@@ -12,8 +12,8 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

examples/sites/demos/pc/app/form/form-validate-field.vue

@@ -12,8 +12,8 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

examples/sites/demos/pc/app/form/form-validation-composition-api.vue

@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,18 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

examples/sites/demos/pc/app/form/form-validation.spec.ts

@@ -27,7 +27,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   const requiredTip = page.getByRole('tooltip', { name: '必填' })
 
   // 对长度有要求的检验
-  const firstInput = formItem.first().locator('input')
+  const firstInput = formItem.nth(2).locator('input')
   await firstInput.click()
   await firstInput.blur()
   await expect(requiredTip.first()).toBeVisible()
@@ -48,7 +48,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()
 
   // url输入框
-  const urlInput = formItem.nth(2).locator('input')
+  const urlInput = formItem.nth(4).locator('input')
   const validUrl = 'https://test.com'
   urlInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).toBeVisible()
@@ -56,7 +56,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).not.toBeVisible()
 
   // email输入框
-  const emailInput = formItem.nth(4).locator('input')
+  const emailInput = formItem.nth(5).locator('input')
   const validEmail = '111@test.com'
   emailInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).toBeVisible()

examples/sites/demos/pc/app/form/form-validation.vue

@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,19 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
+
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

examples/sites/demos/pc/app/form/size-composition-api.vue

@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">

examples/sites/demos/pc/app/form/size.vue

@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">

examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue

@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

examples/sites/demos/pc/app/form/validate-debounce.vue

@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue

@@ -86,7 +86,7 @@ function getPopEditorOp() {
         {
           field: 'id',
           title: 'ID',
-          width: 40
+          width: 60
         },
         {
           field: 'name',

examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue

@@ -89,7 +89,7 @@ export default {
             {
               field: 'id',
               title: 'ID',
-              width: 40
+              width: 60
             },
             {
               field: 'name',

examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue

@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: red">没有更多数据了！</span>
+        <span style="color: #ff8800">没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />

examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue

@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: red">没有更多数据了！</span>
+        <span style="color: #ff8800">没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />

examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue

@@ -5,7 +5,6 @@
       ref="gridRef"
       :select-config="selectConfig"
       highlight-current-row
-      border
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     >
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>

examples/sites/demos/pc/app/grid/webdoc/grid-editor.js

@@ -10,7 +10,7 @@ export default {
         <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
           <p class="custom-block-title">特别说明：</p>
-          <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
+          <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件且均为浏览器原生组件并非TinyVue组件，需要使用其他组件可参考自定义编辑器。</p>
         </div>
         `,
         'en-US':
@@ -44,7 +44,7 @@ export default {
     {
       'demoId': 'editor-popeditor-in-grid-remote-search',
       'name': {
-        'zh-CN': 'Popeditor 弹窗编辑',
+        'zh-CN': '弹窗编辑',
         'en-US': 'Edit the Popeditor pop-up window and configure remote search.'
       },
       'desc': {