@opentiny/vue-docs 3.24.6 → 3.25.0

package/demos/apis/button.js

@@ -63,6 +63,21 @@ export default {
           pcDemo: 'dynamic-disabled',
           mfDemo: ''
         },
+        {
+          name: 'custom-style',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置 custom-style 属性按钮样式',
+            'en-US': 'Set the custom-style attribute to customize the button style'
+          },
+          meta: {
+            stable: '3.25.0'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'icon',
+          mfDemo: 'type'
+        },
         {
           name: 'ghost',
           type: 'boolean',

package/demos/apis/calendar-view.js

@@ -195,9 +195,10 @@ export default {
             'en-US': 'Should the upper left button be displayed, Default Display'
           },
           meta: {
-            stable: '3.22.0'
+            stable: '3.25.0'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-mode',
           mfDemo: 'calendar-mode'
         }
       ],

package/demos/apis/chart-demo.js

@@ -53,7 +53,7 @@ export default {
         {
           name: 'extend',
           typeAnchorName: 'chart#IChartProps',
-          type: 'objcet',
+          type: 'object',
           defaultValue: '',
           desc: {
             'zh-CN': 'echarts 的配置项',

package/demos/apis/chart-docs.js

@@ -53,7 +53,7 @@ export default {
         {
           name: 'extend',
           typeAnchorName: 'chart#IChartProps',
-          type: 'objcet',
+          type: 'object',
           defaultValue: '',
           desc: {
             'zh-CN': 'echarts 的配置项',

package/demos/apis/chart-events.js

@@ -53,7 +53,7 @@ export default {
         {
           name: 'extend',
           typeAnchorName: 'chart#IChartProps',
-          type: 'objcet',
+          type: 'object',
           defaultValue: '',
           desc: {
             'zh-CN': 'echarts 的配置项',

package/demos/apis/chart-question.js

@@ -53,7 +53,7 @@ export default {
         {
           name: 'extend',
           typeAnchorName: 'chart#IChartProps',
-          type: 'objcet',
+          type: 'object',
           defaultValue: '',
           desc: {
             'zh-CN': 'echarts 的配置项',

package/demos/apis/chart.js

@@ -53,7 +53,7 @@ export default {
         {
           name: 'extend',
           typeAnchorName: 'chart#IChartProps',
-          type: 'objcet',
+          type: 'object',
           defaultValue: '',
           desc: {
             'zh-CN': 'echarts 的配置项',

package/demos/apis/form.js

@@ -153,6 +153,9 @@ export default {
           name: 'overflow-title',
           type: 'boolean',
           defaultValue: 'false',
+          meta: {
+            stable: '3.15.0'
+          },
           desc: {
             'zh-CN': '标签超长是否显示提示',
             'en-US': 'Does the label display a prompt if it is too long'

package/demos/apis/grid.js

@@ -57,8 +57,8 @@ export default {
         },
         {
           name: 'cell-class-name',
-          typeAnchorName: 'IClassNameArgs',
-          type: 'string | (args: IClassNameArgs) => string',
+          typeAnchorName: 'ICellClassNameArgs',
+          type: 'string | (args: ICellClassNameArgs) => string',
           defaultValue: '',
           desc: {
             'zh-CN': '给单元格附加 className，也可以是函数',
@@ -2008,10 +2008,10 @@ export default {
         },
         {
           name: 'handleFetch',
-          type: '() => Promise',
+          type: '(code: "reload") => Promise<null>',
           defaultValue: '',
           desc: {
-            'zh-CN': '触发表格的 fetch-data ',
+            'zh-CN': '触发表格的 fetch-data，当 code="reload" 时会将分支重置为 1，且清除筛选、排序等条件',
             'en-US': 'Trigger the fetch-data of the table'
           },
           mode: ['pc', 'mobile-first'],
@@ -2949,8 +2949,14 @@ export default {
           name: 'default',
           defaultValue: '',
           desc: {
-            'zh-CN':
-              '自定义显示内容模板，作用插槽参数说明：slots.default({ $table, column, row },h)，$table：表格组件对象，column：当前列配置，row：当前行数据,h：vue的渲染函数',
+            'zh-CN': `自定义显示内容模板，作用域插槽参数说明：<br/>
+            slots.default({ $table, column, row, level, data, rowIndex, $rowIndex, columnIndex, $columnIndex, seq }, h)，<br/>
+               $table：表格组件对象，column：当前列配置，row：当前行数据，<br/>
+               level：当前行在树表中的层级，data：表格数据，<br/>
+               rowIndex：所有行中(包含虚拟滚动等隐藏列)下标，$rowIndex:已渲染行中的下标，<br/>
+               columnIndex：所有列中(包含虚拟滚动等隐藏列)下标，$columnIndex:已渲染列中的下标，<br/>
+               seq：单元格所在行的序号，$seq:已弃用，<br/>
+               h：vue的渲染函数`,
             'en-US': 'Customized display content template'
           },
           mode: ['pc', 'mobile-first'],
@@ -2960,13 +2966,25 @@ export default {
           name: 'edit',
           defaultValue: '',
           desc: {
-            'zh-CN':
-              '自定义可编辑组件模板，作用插槽参数说明：slots.edit({ $table, column, row },h)，$table：表格组件对象，column：当前列配置，row：当前行数据,h：vue的渲染函数',
+            'zh-CN': '自定义可编辑组件模板，作用域插槽参数同 <code>default</code> 插槽',
             'en-US': 'Customized Editable Component Template'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'grid-slot#slot-editor-slot'
         },
+        {
+          name: 'expand-trigger',
+          defaultValue: '',
+          meta: {
+            stable: '3.25.0'
+          },
+          desc: {
+            'zh-CN': '自定义展开行图标，作用域插槽参数同 <code>default</code> 插槽',
+            'en-US': 'Customized expand row icon'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'grid-expand#expand-trigger-slot'
+        },
         {
           name: 'filter',
           defaultValue: '',
@@ -2982,8 +3000,11 @@ export default {
           name: 'header',
           defaultValue: '',
           desc: {
-            'zh-CN':
-              '自定义表头内容的模板，作用插槽参数说明：slots.header({ $table, column, columnIndex，$rowIndex},h)，$table：表格组件对象，column：当前列配置，columnIndex：当前列索引,$rowIndex:当前行索引,h：vue的渲染函数',
+            'zh-CN': `自定义表头内容的模板，作用插槽参数说明：<br/>
+            slots.header({ $table, column, columnIndex，$columnIndex，} ,h)，<br/>
+              $table：表格组件对象，column：当前列配置，<br/>
+              columnIndex：所有列中(包含虚拟滚动等隐藏列)下标，$columnIndex:已渲染列中的下标，<br/>
+              h：vue的渲染函数`,
             'en-US': 'Template of custom table header content'
           },
           mode: ['pc', 'mobile-first'],
@@ -3194,18 +3215,24 @@ interface IRow {
       depTypes: ['IValidRules'],
       code: `
 interface IColumnConfig {
-  type: 'index' | 'radio' | 'checkbox'
+  // 功能列的类型， 'index'行索引，'radio' 单选行， 'selection' 多选行
+  type: 'index' | 'radio' | 'selection'
+  // 列id
   id: string
-  prop: string
+  // 校验规则
   rules: IValidRules
+  // 是否必填
   required: boolean
   property: string
   title: string
-  label: string
+  // 列宽度
   width: string | number
+  // 自动分配宽度时的最小宽度
   minWidth: string | number
+  // 是否可以调整列宽
   resizable: boolean
-  fixed: boolean
+  // 是否左、右冻结
+  fixed: 'left' | 'right'
   align: 'left' | 'center' | 'right'
   headerAlign: 'left' | 'center' | 'right'
   footerAlign: 'left' | 'center' | 'right'
@@ -3475,6 +3502,8 @@ interface ITreeConfig {
   expandRowKeys?: string[]
   // 对于同一级的多个子节点，是否只能同时展开一个子节点
   accordion?: boolean
+  // 3.25.0版本新新增，当trigger为 'default' 时，点击按钮事件是否冒泡，默认为false
+  bubbling?: boolean
 }
       `
     },
@@ -3563,9 +3592,11 @@ interface IEditConfig {
   showStatus?: boolean
   // 自定义编辑规则，返回true可以编辑返回false则禁止编辑
   activeMethod?: ({row: IRow, column: IColumnConfig})=> boolean
-  // （3.19新增）当mode为'row'时，行编辑激活状态下默认会忽略activeMethod，配置为true使其生效
+  // （3.19.0新增）当mode为'row'时，行编辑激活状态下默认会忽略activeMethod，配置为true使其生效
   activeStrictly?: boolean
-}
+  //（3.25.0新增）自定义编辑态的退出逻辑。当返回true时，不会退出编辑态。
+  blurOutside?: ({ cell, event, $table }: { cell: HTMLElement, event: Event, $table: Component }) => boolean
+} 
       `
     },
     {
@@ -4133,6 +4164,8 @@ interface IFilterConfig {
     // 设置枚举数据的实际值属性字段， 默认'value'
     value: string 
   }[] | () => Promise
+  // 3.25.0新增，设置过滤面板根节点属性
+  attrs: { [props: string]: string }
 }
       `
     },
@@ -4153,6 +4186,33 @@ interface IFilterConfig {
         sortable?: Sortable 
       }
       `
+    },
+    {
+      name: 'ICellClassNameArgs',
+      type: 'type',
+      depTypes: ['IColumnConfig', 'IRow'],
+      code: `
+interface ICellClassNameArgs {
+  // 当前行在树表中的层级
+  level: number
+  // 当前行数据
+  row: IRow
+  // 表格数据
+  data: IRow[]
+  // 所有行中(包含虚拟滚动等隐藏列)下标
+  rowIndex: number
+  // 已渲染行中的下标
+  $rowIndex: number
+  // 表格列配置
+  column: IColumnConfig
+  // 所有列中(包含虚拟滚动等隐藏列)下标
+  columnIndex: number
+  // 已渲染列中的下标
+  $columnIndex: number
+  // 单元格所在行的序号
+  seq: number
+  $seq: string // 已弃用
+}`
     }
   ]
 }

package/demos/mobile-first/app/button/type.vue

@@ -4,7 +4,7 @@
     <tiny-button type="primary"> 主要按钮 </tiny-button>
     <tiny-button type="success"> 成功按钮 </tiny-button>
     <tiny-button type="info"> 信息按钮 </tiny-button>
-    <tiny-button type="warning"> 警告按钮 </tiny-button>
+    <tiny-button type="warning" :custom-style="{ maxWidth: 'none' }"> 警告按钮 警告按钮警告按钮警告按钮</tiny-button>
     <tiny-button type="danger"> 危险按钮 </tiny-button>
     <tiny-button type="text"> 文本按钮 </tiny-button>
   </div>

package/demos/mobile-first/app/button/webdoc/button.js

@@ -72,9 +72,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>type</code> 属性可以设置不同的主题样式，主要包括 primary、success、info、warning、danger、text。<p>',
+          '<p>通过 <code>type</code> 属性可以设置不同的主题样式，主要包括 primary、success、info、warning、danger、text。设置 <code>custom-style</code> 属性按钮样式<p>',
         'en-US':
-          '<p>You can use the <code>type</code> attribute to set different theme styles, including primary, success, info, warning, danger, and text.</p>'
+          '<p>You can use the <code>type</code> attribute to set different theme styles, including primary, success, info, warning, danger, and text. The <code>custom-style</code> property sets the button style.</p>'
       },
       codeFiles: ['type.vue']
     },

package/demos/pc/app/action-menu/basic-usage-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/basic-usage.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/card-mode-composition-api.vue

@@ -9,7 +9,7 @@ import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon
 
 const options = ref([
   {
-    label: '远程登陆',
+    label: '远程登录',
     icon: iconWebPlus()
   },
   {

package/demos/pc/app/action-menu/card-mode.vue

@@ -14,7 +14,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆',
+          label: '远程登录',
           icon: iconWebPlus()
         },
         {

package/demos/pc/app/action-menu/disabled-composition-api.vue

@@ -15,7 +15,7 @@ import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机',
@@ -38,7 +38,7 @@ const options = ref([
 
 const options1 = ref([
   {
-    label: '远程登陆',
+    label: '远程登录',
     icon: iconWebPlus()
   },
   {

package/demos/pc/app/action-menu/disabled.vue

@@ -20,7 +20,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机',
@@ -43,7 +43,7 @@ export default {
       ],
       options1: [
         {
-          label: '远程登陆',
+          label: '远程登录',
           icon: iconWebPlus()
         },
         {

package/demos/pc/app/action-menu/events-composition-api.vue

@@ -15,7 +15,7 @@ import { TinyActionMenu, TinyNotify } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/events.vue

@@ -20,7 +20,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

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

@@ -23,7 +23,7 @@ import { iconWebPlus, iconSuccessful, iconShutdown, iconEllipsis } from '@openti
 
 const options = ref([
   {
-    label: '远程登陆',
+    label: '远程登录',
     icon: iconWebPlus()
   },
   {
@@ -45,7 +45,7 @@ const options = ref([
 
 const options1 = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/icon.vue

@@ -27,7 +27,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆',
+          label: '远程登录',
           icon: iconWebPlus()
         },
         {
@@ -48,7 +48,7 @@ export default {
       ],
       options1: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/max-show-num-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/max-show-num.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/more-text-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/more-text.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/popper-class-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/popper-class.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/slot-item-composition-api.vue

@@ -14,7 +14,7 @@ import { iconSmile } from '@opentiny/vue-icon'
 
 const options = ref([
   {
-    name: '远程登陆'
+    name: '远程登录'
   },
   {
     name: '开机'

package/demos/pc/app/action-menu/slot-item.vue

@@ -20,7 +20,7 @@ export default {
     return {
       options: [
         {
-          name: '远程登陆'
+          name: '远程登录'
         },
         {
           name: '开机'

package/demos/pc/app/action-menu/spacing-composition-api.vue

@@ -12,7 +12,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/spacing.vue

@@ -17,7 +17,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/text-field-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    name: '远程登陆'
+    name: '远程登录'
   },
   {
     name: '开机'

package/demos/pc/app/action-menu/text-field.spec.ts

@@ -8,6 +8,6 @@ test('映射字段', async ({ page }) => {
   const actionMenu = wrap.locator('.tiny-action-menu')
   const visibleItem = actionMenu.locator('.tiny-action-menu__item')
 
-  await expect(visibleItem.first()).toHaveText('远程登陆')
+  await expect(visibleItem.first()).toHaveText('远程登录')
   await expect(visibleItem.nth(1)).toHaveText('开机')
 })

package/demos/pc/app/action-menu/text-field.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          name: '远程登陆'
+          name: '远程登录'
         },
         {
           name: '开机'

package/demos/pc/app/button/icon-composition-api.vue

@@ -3,7 +3,9 @@
     <tiny-layout>
       <tiny-row>
         <tiny-button type="primary" :icon="TinyIconEdit"> 图标按钮 </tiny-button>
-        <tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
+        <tiny-button :icon="TinyIconSearch" :custom-style="{ maxWidth: 'none' }">
+          图标按钮图标按钮图标按钮图标按钮
+        </tiny-button>
         <tiny-button type="success" :icon="TinyIconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="TinyIconMail"> 图标按钮 </tiny-button>
         <tiny-button type="warning" :icon="TinyIconStarO"> 图标按钮 </tiny-button>

package/demos/pc/app/button/icon.vue

@@ -3,7 +3,9 @@
     <tiny-layout>
       <tiny-row>
         <tiny-button type="primary" :icon="IconEdit"> 图标按钮 </tiny-button>
-        <tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
+        <tiny-button :icon="IconSearch" :custom-style="{ maxWidth: 'none' }">
+          图标按钮图标按钮图标按钮图标按钮
+        </tiny-button>
         <tiny-button type="success" :icon="IconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="IconMail"> 图标按钮 </tiny-button>
         <tiny-button type="warning" :icon="IconStarO"> 图标按钮 </tiny-button>

package/demos/pc/app/button/webdoc/button.js

@@ -47,8 +47,9 @@ export default {
         'en-US': 'Icon Button'
       },
       desc: {
-        'zh-CN': '通过 <code>icon</code> 属性，设置按钮展示图标。',
-        'en-US': 'Display icons and receive an icon component through the <code>icon</code> settings button'
+        'zh-CN': '通过 <code>icon</code> 属性，设置按钮展示图标。<code>custom-style</code>属性设置按钮样式。',
+        'en-US':
+          'Display icons and receive an icon component through the <code>icon</code> settings button. The <code>custom-style</code> property sets the button style.'
       },
       codeFiles: ['icon.vue']
     },

package/demos/pc/app/calendar-view/calendar-mode-composition-api.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="6"
+    :modes="['month', 'timeline', 'schedule']"
+    :show-back-today="false"
+  >
   </tiny-calendar-view>
 </template>
 

package/demos/pc/app/calendar-view/calendar-mode.spec.ts

@@ -9,6 +9,9 @@ test('显示模式', async ({ page }) => {
   const dmonthDom = page.locator('.tiny-calendar-view-month__main')
   const timelineDom = page.locator('.tiny-calendar-view-week__timeline')
   const scheduleDom = page.locator('.tiny-calendar-view-week__schedule')
+
+  const calendarHeader = page.locator('.tiny-calendar-view__header')
+  await expect(calendarHeader.locator('div').first()).not.toHaveClass('.tiny-button .tiny-button--default')
   // 验证按钮是否选中，验证时间组件页面是否正确
   await expect(monthBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
   await expect(dmonthDom).toBeVisible()

package/demos/pc/app/calendar-view/calendar-mode.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="6"
+    :modes="['month', 'timeline', 'schedule']"
+    :show-back-today="false"
+  >
   </tiny-calendar-view>
 </template>