Sync release 3.16.0 (#1671)

* fix(grid): fix right fixed table header gutter style (#1542)

* fix(grid): [grid] fix grid no emit filter-change bug (#1536)

* fix(grid): [grid] fix grid not emit filter-change bug

* fix(grid): [grid] fix grid not emit filter-change bug

* docs: add v3.15.0 changelog (#1544)

* fix(tree): remove leaf node's padding-left (#1546)

* fix(action-menu): [action-menu] fix no divided bug (#1538)

* fix(action-menu): [action-menu] fix no divided bug

* fix(action-menu): [action-menu] fix no divided bug

* refactor(unplugin): rewrite unplugin for autoimport Vue components (#1553)

* fix(tabs): [tabs] Fixed issue with default slot and template/v-if/v-for usage in vue2 and vue3 (#1558)

* fix(tabs): [tabs] Fix the bug where the name is empty caused by using v-if in tabstem

* fix(tabs): [tabs] update renderless version

* fix(tabs): [tabs] Fix the issue with rendering in the default slot of Vue3

* fix(tabs): [tabs] Fix the issue of inconsistent highlighting when multiple V-ifs are used

* fix(tabs): [tabs] update opentiny/vue-tabs version

* fix(theme-saas): update theme saas dependencies (#1582)

* Update package.json

* feat(unplugin-tiny-vue): add TinyVueResolver (#1585)

* docs: add breaking changes to changelog (#1562)

* fix(chart): delete chart duplicate key (#1624)

* fix(select): [select] add showAllTextTag prop for select (#1627)

* fix(select): add showAllTextTag prop for select

* fix(select): update select  version in  package.json

* fix: [chart]fix chart height error and area chart empty data error (#1631)

* fix: 修复面积图空数据报错问题

* fix: 修复图表高度设置为100%的高度异常问题

* fix: 修改boxplot图表案例引入

* fix(drop-times): [drop-times] modify style (#1635)

* feat(theme): update theme version

* fix(chart): fix chart extend bugs (#1638)

* fix: 修复chart图表的extend未生效问题

* fix: 优化图表extend逻辑

* fix: 优化图表extend逻辑

* docs: optimize component category (#1626) (#1641)

* docs: update changelog v3.16.0 (#1642)

* feat(version): add npmmirror cdn link (#1646)

* feat(version): update docs version

* feat(alert): [alert] add type title text color css var (#1653)

* feat(alert): [alert] add type title text color css var

* feat(alert): [alert] add type title text color css var

* fix(select): [select] Fix the issue of invalid select component click events and remove inheritAttrs (#1657)

* fix(theme): [grid] fix tree node text overflow (#1661)

* fix(vue): [grid] fix multi toolbar can not get tableColumns config (#1656)

* fix(vue): [grid] fix multi toolbar can not get tableColumns config

* fix(vue): [grid] fix multi toolbar can not get tableColumns config

* fix(select,grid): fix select click event bug and grid toolbar bug

* fix(modal): adjust the title icon display of the modal (#1658)

* fix(modal): adjust the title icon display of the modal

* fix: update modal package.json

* fix(statistic): optimized the style, test, and example of the statistics component (#1660)

* fix: update style and demo statistic of component

* fix: update e2e-test

* fix: when num is equal to 0

---------

Co-authored-by: gimmyhehe <975402925@qq.com>
Co-authored-by: Kagol <kagol@sina.com>
Co-authored-by: 申君健 <40288193@qq.com>
Co-authored-by: chenxi-20 <76168465+chenxi-20@users.noreply.github.com>
Co-authored-by: Davont <davontz@icloud.com>
Co-authored-by: 李天佑 <66231260+You-Hw-Y@users.noreply.github.com>
Co-authored-by: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com>
Co-authored-by: James <72028410+James-9696@users.noreply.github.com>

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

@@ -3,18 +3,6 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('statistic#basic-usage')
-  await page
+  await page.locator('#basic-usage').getByText('306,526', { exact: true })
-    .locator('div')
+  await page.getByText('306,526.23')
-    .filter({ hasText: /123\/100$/ })
-    .first()
-    .click()
-  await page
-    .locator('div')
-    .filter({ hasText: /^基本用法$/ })
-    .first()
-    .click()
-  await page
-    .locator('div')
-    .filter({ hasText: /^306,526\.23$/ })
-    .click()
 })

examples/sites/demos/pc/app/statistic/prefix-suffix-slot-composition-api.vue

@@ -2,15 +2,21 @@
   <div>
     <tiny-layout>
       <tiny-row :flex="true">
-        <tiny-col :span="8">
+        <tiny-col :span="4">
-          <tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="8">
           <tiny-statistic :value="306">
-            <template #prefix>已使用容量(GB)</template>
+            <template #prefix><div style="margin-right: 15px">已使用容量(GB)</div></template>
-            <template #suffix><span style="font-size: 32px">GB</span></template>
+            <template #suffix><div style="font-size: 24px">GB</div></template>
           </tiny-statistic>
         </tiny-col>
+        <tiny-col :span="4">
+          <tiny-statistic :value="1280" :precision="2">
+            <template #prefix><div style="font-size: 24px; font-weight: 600">￥</div></template>
+            <template #suffix><div>/年</div></template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="4">
+          <tiny-statistic suffix="GB"></tiny-statistic>
+        </tiny-col>
       </tiny-row>
     </tiny-layout>
   </div>

examples/sites/demos/pc/app/statistic/prefix-suffix-slot.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('前后缀', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('statistic#prefix-suffix-slot')
+  await page
+    .locator('div')
+    .filter({ hasText: /^已使用容量\(GB\)306GB$/ })
+    .first()
+  await page
+    .locator('div')
+    .filter({ hasText: /^￥1,280\.00\/年$/ })
+    .first()
+  await page
+    .locator('div')
+    .filter({ hasText: /^300GB$/ })
+    .first()
+  await expect(page.getByText(/^￥1,280\.00\/年$/)).toHaveClass(/tiny-statistic__slots/)
+})

examples/sites/demos/pc/app/statistic/prefix-suffix-slot.vue

@@ -2,15 +2,21 @@
   <div>
     <tiny-layout>
       <tiny-row :flex="true">
-        <tiny-col :span="8">
+        <tiny-col :span="4">
-          <tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="8">
           <tiny-statistic :value="306">
-            <template #prefix>已使用容量(GB)</template>
+            <template #prefix><div style="margin-right: 15px">已使用容量(GB)</div></template>
-            <template #suffix><span style="font-size: 32px">GB</span></template>
+            <template #suffix><div style="font-size: 24px">GB</div></template>
           </tiny-statistic>
         </tiny-col>
+        <tiny-col :span="4">
+          <tiny-statistic :value="1280" :precision="2">
+            <template #prefix><div style="font-size: 24px; font-weight: 600">￥</div></template>
+            <template #suffix><div>/年</div></template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="4">
+          <tiny-statistic :value="300" suffix="GB"></tiny-statistic>
+        </tiny-col>
       </tiny-row>
     </tiny-layout>
   </div>

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

@@ -3,7 +3,10 @@
     <tiny-layout>
       <tiny-row :flex="true">
         <tiny-col :span="8">
-          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
+          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }">
+            <template #prefix>已使用容量(GB)</template>
+            <template #suffix><span style="font-size: 24px">GB</span></template>
+          </tiny-statistic>
         </tiny-col>
         <tiny-col :span="8">
           <tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">

examples/sites/demos/pc/app/statistic/statistic-slot.spec.ts

@@ -3,11 +3,9 @@ import { test, expect } from '@playwright/test'
 test('插槽用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('statistic#statistic-slot')
-  await page.locator('div').filter({ hasText: /^10,010,258$/ })
   await page
     .locator('div')
-    .filter({ hasText: /^306,526\.23$/ })
+    .filter({ hasText: /^存储总量已使用容量\(GB\)10,010,258GB$/ })
     .first()
-  await page.getByText('Like:306,526').click()
+  await page.getByText('306,526存储平均值').click()
-  await page.getByText('600/').click()
 })

examples/sites/demos/pc/app/statistic/statistic-slot.vue

@@ -3,7 +3,10 @@
     <tiny-layout>
       <tiny-row :flex="true">
         <tiny-col :span="8">
-          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
+          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }">
+            <template #prefix>已使用容量(GB)</template>
+            <template #suffix><span style="font-size: 24px">GB</span></template>
+          </tiny-statistic>
         </tiny-col>
         <tiny-col :span="8">
           <tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">

examples/sites/demos/pc/app/statistic/statistic-style-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-layout>
       <tiny-row :flex="true">
-        <tiny-col :span="6">
+        <tiny-col :span="8">
           <tiny-statistic
             :value="306526"
             :value-style="{ 'color': '#3ac295' }"
@@ -10,10 +10,10 @@
           >
           </tiny-statistic>
         </tiny-col>
-        <tiny-col :span="6">
+        <tiny-col :span="8">
           <tiny-statistic
             :value="306526.23"
-            :value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
+            :value-style="[{ 'color': '#eb1212', 'text-align': 'center' }]"
             :title="{ position: 'bottom' }"
           >
             <template #title>
@@ -32,8 +32,9 @@ import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col a
 
 <style scoped>
 .title-content {
-  width: 200px;
+  width: 90px;
   text-align: center;
   color: #a9a9a9;
+  font-weight: 600;
 }
 </style>

examples/sites/demos/pc/app/statistic/statistic-style.spec.ts

@@ -3,5 +3,10 @@ import { test, expect } from '@playwright/test'
 test('样式用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('statistic#statistic-style')
-  await expect(page.getByText('Like:306,526').first()).toHaveClass(/tiny-statistic__slots/)
+  await page
+    .locator('div')
+    .filter({ hasText: /^进行中306,526$/ })
+    .first()
+  await page.getByText('306,526失败').click()
+  await expect(page.getByText(/^进行中306,526$/).first()).toHaveClass(/tiny-statistic/)
 })

examples/sites/demos/pc/app/statistic/statistic-style.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-layout>
       <tiny-row :flex="true">
-        <tiny-col :span="6">
+        <tiny-col :span="8">
           <tiny-statistic
             :value="306526"
             :value-style="{ 'color': '#3ac295' }"
@@ -10,10 +10,10 @@
           >
           </tiny-statistic>
         </tiny-col>
-        <tiny-col :span="6">
+        <tiny-col :span="8">
           <tiny-statistic
             :value="306526.23"
-            :value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
+            :value-style="[{ 'color': '#eb1212', 'text-align': 'center' }]"
             :title="{ position: 'bottom' }"
           >
             <template #title>
@@ -41,8 +41,9 @@ export default {
 
 <style scoped>
 .title-content {
-  width: 200px;
+  width: 90px;
   text-align: center;
   color: #a9a9a9;
+  font-weight: 600;
 }
 </style>

examples/sites/demos/pc/app/statistic/webdoc/statistic.js

@@ -1,5 +1,5 @@
 export default {
-  column: '2',
+  column: '1',
   owner: '',
   demos: [
     {

internals/vue-test-utils/src/index.ts

@@ -5,7 +5,7 @@ const mount = (inputComponent: any, options: MountingOptions<any> = {}) => {
   let mount$ = _mount
 
   if (isVue2) {
-    ; (options as any).localVue = createLocalVue()
+    ;(options as any).localVue = createLocalVue()
 
     if (options.props) {
       options.propsData = options.props

packages/renderless/src/statistic/index.ts

@@ -18,5 +18,14 @@ export const getIntegerAndDecimal =
     let displayValue = props.value ? String(props.value).split('.') : ''
     let integer = displayValue[0]?.replace(/\B(?=(\d{3})+(?!\d))/g, props.groupSeparator)
     let decimal = displayValue[1]?.padEnd(props.precision, '0').slice(0, props.precision > 0 ? props.precision : 0)
+    // 处理当数字为0的情况
+    if (!displayValue) {
+      integer = '0'
+    }
+    // 当无小数点值且传入精度值，须默认用 0 补充精度值
+    if (!decimal && props.precision) {
+      let display = '0'
+      decimal = display.padEnd(props.precision, '0')
+    }
     return [integer, decimal].join(decimal ? '.' : '')
   }

packages/theme-saas/src/grid/table.less

@@ -989,6 +989,7 @@
           &__title:has(.tiny-grid-tree__indent:nth-last-child(2):first-child),
           &__ellipsis:has(.tiny-grid-tree__indent:nth-last-child(2):first-child) {
             @apply inline-block;
+            @apply max-w-full;
           }
         }
       }

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.16.2",
+  "version": "3.16.4",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "main": "index.css",
   "homepage": "https://opentiny.design/tiny-vue",

packages/theme/src/alert/index.less

@@ -79,7 +79,7 @@
   }
 
   &&--success {
-    .alert-variant(var(--ti-alert-title-text-color);
+    .alert-variant(var(--ti-alert-success-title-text-color);
       var(--ti-alert-success-border-color);
       var(--ti-alert-success-icon-color);
       var(--ti-alert-success-link-text-color);
@@ -92,7 +92,7 @@
   }
 
   &&--info {
-    .alert-variant(var(--ti-alert-title-text-color);
+    .alert-variant(var(--ti-alert-info-title-text-color);
       var(--ti-alert-info-border-color);
       var(--ti-alert-info-icon-color);
       var(--ti-alert-info-link-text-color);
@@ -105,7 +105,7 @@
   }
 
   &&--warning {
-    .alert-variant(var(--ti-alert-title-text-color);
+    .alert-variant(var(--ti-alert-warning-title-text-color);
       var(--ti-alert-warning-border-color);
       var(--ti-alert-warning-icon-color);
       var(--ti-alert-warning-link-text-color);
@@ -118,7 +118,7 @@
   }
 
   &&--error {
-    .alert-variant(var(--ti-alert-title-text-color);
+    .alert-variant(var(--ti-alert-error-title-text-color);
       var(--ti-alert-error-border-color);
       var(--ti-alert-error-icon-color);
       var(--ti-alert-error-link-text-color);
@@ -131,7 +131,7 @@
   }
 
   &&--simple {
-    .alert-variant(var(--ti-alert-title-text-color);
+    .alert-variant(var(--ti-alert-simple-title-text-color);
       var(--ti-alert-simple-border-color);
       var(--ti-alert-simple-icon-color);
       var(--ti-alert-simple-link-text-color);

packages/theme/src/alert/vars.less

@@ -36,6 +36,16 @@
   --ti-alert-border-radius: var(--ti-common-border-radius-normal, 2px);
   // 标题文本色
   --ti-alert-title-text-color: var(--ti-common-color-text-primary, #252b3a);
+  // success类型标题文本色
+  --ti-alert-success-title-text-color: var(--ti-common-color-text-primary, #252b3a);
+  // info类型标题文本色
+  --ti-alert-info-title-text-color: var(--ti-common-color-text-primary, #252b3a);
+  // warning类型标题文本色
+  --ti-alert-warning-title-text-color: var(--ti-common-color-text-primary, #252b3a);
+  // error类型标题文本色
+  --ti-alert-error-title-text-color: var(--ti-common-color-text-primary, #252b3a);
+  // simple类型标题文本色
+  --ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #252b3a);
   // 标题字号
   --ti-alert-title-font-size: var(--ti-common-font-size-1, 14px);
   // 标题图标顶部外边距

packages/theme/src/grid/header.less

@@ -74,6 +74,7 @@
     line-height: 14px;
     font-size: var(--ti-common-font-size-1);
     align-self: baseline;
+    display: inline-block;
 
     &:before {
       content: '*';

packages/theme/src/grid/table.less

@@ -833,6 +833,7 @@
           &__title:has(.tiny-grid-tree__indent:nth-last-child(2):first-child),
           &__ellipsis:has(.tiny-grid-tree__indent:nth-last-child(2):first-child) {
             display: inline-block;
+            max-width: 100%;
           }
         }
       }

packages/theme/src/statistic/aurora-theme.js

@@ -0,0 +1,3 @@
+export const tinyStatisticAuroraTheme = {
+  'ti-statistic-font-color': 'var(--ti-common-color-text-primary)'
+}

packages/theme/src/statistic/index.less

@@ -13,36 +13,31 @@
     color: var(--ti-statistic-font-color);
     font-weight: var(--ti-statistic-title-font-weight);
     line-height: var(--ti-statistic-title-line-height);
-    // margin-top: var(--ti-statistic-title-margin-top);
     margin-bottom: var(--ti-statistic-title-margin-bottom);
-    margin-left: var(--ti-statistic-description-margin-left);
   }
 
   &__slots {
     font-weight: var(--ti-statistic-font-weight);
     font-size: var(--ti-statistic-title-font-size);
     color: var(--ti-statistic-font-color);
+    display: flex;
+    align-items: baseline;
   }
 
   &__prefix {
-    margin-right: var(--ti-statistic-prefix-margin-right);
     font-weight: var(--ti-statistic-prefix-font-weight);
-    display: inline-block;
     font-size: var(--ti-statistic-font-size);
-    vertical-align: middle;
   }
 
   &__description {
     font-size: var(--ti-statistic-description-font-size);
-    display: inline-block;
+    font-weight: var(--ti-statistic-description-font-weight);
-    margin-left: var(--ti-statistic-description-margin-left);
   }
 
   &__suffix {
-    font-size: var(--ti-statistic-suffix-font-size);
     margin-left: var(--ti-statistic-suffix-margin-left);
+    font-size: var(--ti-statistic-suffix-font-size);
     font-weight: var(--ti-statistic-suffix-font-weight);
-    display: inline-block;
   }
 
   &__description-margin {

packages/theme/src/statistic/smb-theme.js

@@ -1,5 +1,6 @@
 export const tinyStatisticSmbTheme = {
   'ti-statistic-description-font-size': 'var(--ti-common-font-size-5)',
   'ti-statistic-font-color': 'var(--ti-common-color-primary-normal)',
-  'ti-statistic-suffix-font-size': 'var(--ti-common-font-size-0)'
+  'ti-statistic-suffix-font-size': 'var(--ti-common-font-size-0)',
+  'ti-statistic-description-font-weight': 'var(--ti-common-font-weight-normal)'
 }

packages/theme/src/statistic/vars.less

@@ -5,8 +5,6 @@
   --ti-statistic-suffix-font-size: var(--ti-common-font-size-base);
   // 标题内容字体大小
   --ti-statistic-title-font-size: var(--ti-common-font-size-6);
-  // 标题内容左间距
-  --ti-statistic-description-margin-left: var(--ti-common-space-4x);
   // 标题字体颜色
   --ti-statistic-font-color: var(--ti-common-color-info-text);
   // 标题字体粗细
@@ -23,14 +21,14 @@
   --ti-statistic-title-line-height: var(ti-common-line-height-4);
   // 前缀插槽字体粗细
   --ti-statistic-font-weight: var(--ti-common-font-weight-5);
-  // 前缀插槽间距值
-  --ti-statistic-prefix-margin-right: var(--ti-common-space-6);
   // 前缀字体粗细
   --ti-statistic-prefix-font-weight: var(--ti-common-font-weight-5);
-  // 后缀插槽间距值
-  --ti-statistic-suffix-margin-left: var(--ti-common-space-6);
   // 后缀字体粗细
   --ti-statistic-suffix-font-weight: var(--ti-common-font-weight-5);
+  // 数字内容字体粗细
+  --ti-statistic-description-font-weight: var(--ti-common-font-weight-normal);
+  // 后缀左边距
+  --ti-statistic-suffix-margin-left: var(--ti-common-space-base);
   // 数字内容字体
   --ti-statistic-description-font-size: var(--ti-common-font-size-6);
 }

packages/vue/src/grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-grid",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/grid/src/grid/grid.ts

@@ -447,7 +447,9 @@ export default defineComponent({
       if (type === 'pageSizeChangeCallback') {
         this._pageSizeChangeCallback = callback
       } else if (type === 'updateCustomsCallback') {
-        this._updateCustomsCallback = callback
+        // 表格可能有多个工具栏，因此工具栏个性化配置的回调应该是个数组
+        this._updateCustomsCallback = this._updateCustomsCallback || []
+        this._updateCustomsCallback.push(callback)
       }
     },
     // 从缓存获取实例
@@ -460,8 +462,10 @@ export default defineComponent({
     handleColumnInitReady() {
       // 如果存在更新工具栏动态列回调，就执行
       if (this._updateCustomsCallback) {
-        this._updateCustomsCallback()
+        this._updateCustomsCallback.forEach((fn) => {
-        this._updateCustomsCallback = null
+          fn()
+        })
+        this._updateCustomsCallback = []
       }
     },
     handleRowClassName(params) {

packages/vue/src/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-modal",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/modal/src/pc.vue

@@ -166,7 +166,7 @@ export default defineComponent({
                     }
                   },
                   [
-                    status && state.theme === 'saas'
+                    status
                       ? h(
                           'div',
                           {
@@ -188,18 +188,7 @@ export default defineComponent({
                       {
                         class: 'tiny-modal__title'
                       },
-                      [
+                      title || t('ui.alert.title')
-                        typeof status === 'string'
-                          ? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
-                              class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]],
-                              style: 'display: inline-block; margin-right: 5px;'
-                            })
-                          : h(status, {
-                              class: ['tiny-modal__status-icon'],
-                              style: 'display: inline-block; margin-right: 5px;'
-                            }),
-                        h('span', title || t('ui.alert.title'))
-                      ]
                     ),
                     resize
                       ? h(zoomLocat ? iconMinscreenLeft() : iconFullscreenLeft(), {
@@ -224,14 +213,14 @@ export default defineComponent({
                 class: ['tiny-modal__body', type === 'message' ? 'is-message' : '']
               },
               [
-                status && state.theme !== 'saas'
+                type === 'message'
                   ? h(
                       'div',
                       {
                         class: 'tiny-modal__status-wrapper'
                       },
                       [
-                        typeof status === 'string' && type === 'message'
+                        typeof status === 'string'
                           ? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
                               class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
                             })
@@ -310,6 +299,18 @@ export default defineComponent({
                           )
                         ]
                       : [
+                          type === 'confirm'
+                            ? h(
+                                Button,
+                                {
+                                  on: {
+                                    click: this.cancelEvent
+                                  },
+                                  props: { ...cancelButtonProps }
+                                },
+                                cancelButtonText
+                              )
+                            : null,
                           h(
                             Button,
                             {
@@ -322,19 +323,7 @@ export default defineComponent({
                               }
                             },
                             confirmButtonText
-                          ),
+                          )
-                          type === 'confirm'
-                            ? h(
-                                Button,
-                                {
-                                  on: {
-                                    click: this.cancelEvent
-                                  },
-                                  props: { ...cancelButtonProps }
-                                },
-                                cancelButtonText
-                              )
-                            : null
                         ]
                 )
               : null,

packages/vue/src/select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-select",
-  "version": "3.16.1",
+  "version": "3.16.2",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/select/src/pc.vue

@@ -26,7 +26,6 @@
       clickExpand ? 'is-click-expand' : '',
       state.showCollapseTag ? 'collapse-tag-clicked' : '',
       state.selectDisabled ? 'is-disabled' : '',
-      $parent.$attrs.class,
       inputBoxType === 'underline' ? 'tiny-select__underline' : ''
     ]"
     @mouseleave.self="
@@ -43,7 +42,6 @@
     "
     @click="toggleMenu"
     v-clickoutside="handleClose"
-    v-bind="a($attrs, ['class', 'style'], true)"
   >
     <div
       ref="tagsGroup"
@@ -631,7 +629,6 @@ const getReference = (el, binding, vnode) => {
 }
 
 export default defineComponent({
-  inheritAttrs: false,
   emits: [
     'update:modelValue',
     'change',

packages/vue/src/statistic/src/pc.vue

@@ -2,7 +2,7 @@
   <div class="tiny-statistic">
     <div
       class="tiny-statistic__title"
-      v-if="!(title instanceof Object) || (title instanceof Object && title.position !== 'bottom')"
+      v-if="title && (!(title instanceof Object) || (title instanceof Object && title.position !== 'bottom'))"
     >
       <div v-if="$slots.title">
         <slot name="title"> </slot>