@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/dialog-select/webdoc/dialog-select.js

@@ -244,7 +244,7 @@ export default {
           'defaultValue': '{}',
           'desc': {
             'zh-CN': '使用树展示数据时，树组件的配置对象',
-            'en-US': ''
+            'en-US': 'When using a tree to display data, the configuration object of the tree component'
           },
           'demoId': 'nest-tree-multi'
         },
@@ -254,7 +254,7 @@ export default {
           'defaultValue': "'id'",
           'desc': {
             'zh-CN': '数据项的选中值字段',
-            'en-US': ''
+            'en-US': 'Selected value fields for data items'
           },
           'demoId': 'nest-grid-multi'
         },
@@ -264,7 +264,7 @@ export default {
           'defaultValue': "';'",
           'desc': {
             'zh-CN': '多选时用于拼接数据项的选中值',
-            'en-US': ''
+            'en-US': 'The selected value used for concatenating data items during multiple selection'
           },
           'demoId': ''
         },
@@ -274,19 +274,19 @@ export default {
           'defaultValue': 'false',
           'desc': {
             'zh-CN': '控制弹出框显示与关闭',
-            'en-US': ''
+            'en-US': 'Control pop-up display and closing'
           },
           'demoId': 'nest-grid-multi'
         }
       ],
       'methods': [
         {
-          'name': 'queryGridData()',
-          'type': '() => {}',
+          'name': 'queryGridData',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '使用表格展示数据时，加载表格数据的方法',
-            'en-US': ''
+            'en-US': 'The method of loading table data when using tables to display data'
           },
           'demoId': 'nest-grid-multi'
         }
@@ -294,121 +294,133 @@ export default {
       'events': [
         {
           'name': 'before-page-change',
-          'type': '() => {}',
+          'type': '(beforeChangeParam:IBeforeChangeParam) => void',
+          'typeAnchorName': 'IBeforeChangeParam',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 Pager 的 before-page-change 事件',
-            'en-US': ''
+            'en-US': 'Before page change event of the transparent sub component Pager'
           },
           'demoId': ''
         },
         {
           'name': 'close',
-          'type': '() => {}',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 DialogBox 的 close 事件',
-            'en-US': ''
+            'en-US': 'Close event for transparent sub component DialogBox'
           },
           'demoId': ''
         },
         {
           'name': 'closed',
-          'type': '() => {}',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 DialogBox 的 closed 事件',
-            'en-US': ''
+            'en-US': 'The closed event of the transparent sub component DialogBox'
           },
           'demoId': ''
         },
+        {
+          'name': 'change',
+          'type': '(changeParam:IChangeParam) => void',
+          'typeAnchorName': 'IChangeParam',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '监听弹窗选择的值发生变化的事件',
+            'en-US': 'Event where the value selected in the monitoring pop-up changes'
+          },
+          'demoId': 'nest-grid-multi'
+        },
         {
           'name': 'current-change',
-          'type': '() => {}',
+          'type': '(currentPage: number) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 Pager 的 current-change 事件',
-            'en-US': ''
+            'en-US': 'The current change event of the transparent sub component Pager'
           },
           'demoId': 'nest-grid-multi'
         },
         {
           'name': 'drag-end',
-          'type': '() => {}',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 DialogBox 的 drag-end 事件',
-            'en-US': ''
+            'en-US': 'The drag end event of the transparent sub component DialogBox'
           },
           'demoId': ''
         },
         {
           'name': 'drag-move',
-          'type': '() => {}',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 DialogBox 的 drag-move 事件',
-            'en-US': ''
+            'en-US': 'The drag move event of the transparent sub component DialogBox'
           },
           'demoId': ''
         },
         {
           'name': 'drag-start',
-          'type': '() => {}',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 DialogBox 的 drag-start 事件',
-            'en-US': ''
+            'en-US': 'The drag start event of the transparent sub component DialogBox'
           },
           'demoId': ''
         },
         {
           'name': 'next-click',
-          'type': '() => {}',
+          'type': '(currentPage: number) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 Pager 的 next-click 事件',
-            'en-US': ''
+            'en-US': 'Next click event for transparent sub component Pager'
           },
           'demoId': ''
         },
         {
           'name': 'open',
-          'type': '() => {}',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 DialogBox 的 open 事件',
-            'en-US': ''
+            'en-US': 'Open event for transparent sub component DialogBox'
           },
           'demoId': ''
         },
         {
           'name': 'opened',
-          'type': '() => {}',
-          'defaultValue': '() => {}',
+          'type': '() => void',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 DialogBox 的 opened 事件',
-            'en-US': ''
+            'en-US': 'The opened event of the transparent sub component DialogBox'
           },
           'demoId': ''
         },
         {
           'name': 'prev-click',
-          'type': '() => {}',
-          'defaultValue': '() => {}',
+          'type': '(currentPage: number) => void',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 Pager 的 prev-click 事件',
             'en-US': ''
           },
-          'demoId': ''
+          'demoId': 'The pre click event of the transparent sub component Pager'
         },
         {
           'name': 'size-change',
-          'type': '() => {}',
-          'defaultValue': '() => {}',
+          'type': '(pageSize: number) => void',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '透传子组件 Pager 的 size-change 事件',
-            'en-US': ''
+            'en-US': 'The size change event of the transparent sub component Pager'
           },
           'demoId': 'nest-grid-multi'
         }
@@ -420,7 +432,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '使用表格展示数据时，自定义已选栏的自定义按钮区域',
-            'en-US': ''
+            'en-US': 'When displaying data in a table, customize the custom button area of the selected column'
           },
           'demoId': ''
         },
@@ -430,7 +442,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '使用表格展示数据时，自定义已选栏的清空按钮区域',
-            'en-US': ''
+            'en-US': 'When displaying data in a table, customize the clear button area of the selected column'
           },
           'demoId': ''
         },
@@ -440,7 +452,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '使用表格展示数据时，自定义已选栏的选项的删除按钮',
-            'en-US': ''
+            'en-US': 'Customize the delete button for the selected column options when displaying data in a table'
           },
           'demoId': 'nest-tree-multi'
         },
@@ -450,7 +462,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '自定义弹窗底部',
-            'en-US': ''
+            'en-US': 'Custom Pop Up Bottom'
           },
           'demoId': ''
         },
@@ -460,7 +472,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '使用表格展示数据时，自定义已选栏的选项',
-            'en-US': ''
+            'en-US': 'Customize options for selected columns when displaying data in a table'
           },
           'demoId': 'nest-tree-multi'
         },
@@ -470,7 +482,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '使用表格展示数据时，自定义搜索区域',
-            'en-US': ''
+            'en-US': 'Customize the search area when displaying data in a table'
           },
           'demoId': 'nest-grid-multi'
         },
@@ -480,7 +492,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '使用表格展示数据时，自定义已选栏的已选提示区域',
-            'en-US': ''
+            'en-US': 'When displaying data in a table, customize the selected prompt area for the selected column'
           },
           'demoId': ''
         },
@@ -490,7 +502,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '自定义弹窗标题',
-            'en-US': ''
+            'en-US': 'Custom pop-up title'
           },
           'demoId': ''
         }
@@ -629,6 +641,42 @@ interface ITreeNodeData {
   "children"?: ITreeNodeData[]  
 }        
 `
+    },
+    {
+      name: 'IChangeParam',
+      type: 'interface',
+      code: `
+// 树组件的节点数据信息
+interface ItreeData = {
+  id: number|string
+  label: string
+  pid: number|string
+}
+
+// 用户自定义的表格行数据
+interface IGridData = {
+  id: number|string
+ [otherKeys] :any
+}
+
+interface IChangeParam = {
+ values: Array<number|string>|number|string
+ texts: string|Array<string>
+ selectedDatas: ItreeData[]|IGridData[]
+}
+`
+    },
+    {
+      name: 'IBeforeChangeParam',
+      type: 'interface',
+      code: `interface IBeforeChangeParam {
+callback: () => void   // 回调函数，调用则继续本次变更
+rollback: () => void   // 回滚函数，调用则阻止本次变更
+newPage: number // 变更后所在页
+newPageSize: number // 变更后分页大小
+currentPage: number // 当前所在页
+currentPageSize: number // 当前分页大小
+}`
     }
   ]
 }

package/demos/pc/app/drawer/confirm-event-composition-api.vue

@@ -28,6 +28,6 @@ function fn() {
 }
 
 function confirm() {
-  Modal.message('确认事件')
+  Modal.message({ message: '确认事件', status: 'info' })
 }
 </script>

package/demos/pc/app/drawer/confirm-event.vue

@@ -35,7 +35,7 @@ export default {
       this.visible = true
     },
     confirm() {
-      Modal.message('确认事件')
+      Modal.message({ message: '确认事件', status: 'info' })
     }
   }
 }

package/demos/pc/app/drawer/webdoc/drawer.cn.md

@@ -4,4 +4,4 @@ title: Drawer 抽屉
 
 # Drawer 抽屉
 
-<div></div>
+<div>从页面侧边弹出的内容容器。</div>

package/demos/pc/app/drawer/webdoc/drawer.en.md

@@ -0,0 +1,7 @@
+---
+title: Drawer
+---
+
+# Drawer
+
+<div>The content container that pops out from the side of the page.</div>

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

@@ -5,15 +5,14 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>详细用法参考如下示例</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>详细用法参考如下示例。</p>', 'en-US': '' },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'placement',
       'name': { 'zh-CN': '抽屉方向', 'en-US': '' },
       'desc': {
-        'zh-CN':
-          '<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 <code>left | right | top | bottom</code>，默认值为 <code>right</code>。</p>',
+        'zh-CN': `<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 <code>'left' | 'right' | 'top' | 'bottom'</code>，默认值为 <code>'right'</code>。</p>`,
         'en-US': ''
       },
       'codeFiles': ['placement.vue']
@@ -21,7 +20,10 @@ export default {
     {
       'demoId': 'width',
       'name': { 'zh-CN': '抽屉宽度', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 <code>500px</code></p>', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 <code>500px</code>。</p>',
+        'en-US': ''
+      },
       'codeFiles': ['width.vue']
     },
     {
@@ -83,7 +85,7 @@ export default {
     {
       'demoId': 'default-slot',
       'name': { 'zh-CN': '默认插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>自定义抽屉主体内容</p>', 'en-US': '' },
+      'desc': { 'zh-CN': '<p>自定义抽屉主体内容。</p>', 'en-US': '' },
       'codeFiles': ['default-slot.vue']
     },
     {
@@ -128,39 +130,24 @@ export default {
       'name': 'drawer',
       'type': 'component',
       'props': [
-        {
-          'name': 'visible',
-          'type': 'boolean',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '控制抽屉显示与关闭', 'en-US': '' },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'placement',
-          'type': `'left' | 'right' | 'top' | 'bottom' `,
-          'defaultValue': 'right',
-          'desc': { 'zh-CN': '添加 placement 属性设置抽屉的方向', 'en-US': '' },
-          'demoId': 'placement'
-        },
-        {
-          'name': 'width',
-          'type': 'string',
-          'defaultValue': '500px',
-          'desc': { 'zh-CN': '设置抽屉的宽度', 'en-US': '' },
-          'demoId': 'width'
-        },
         {
           'name': 'dragable',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '控制抽屉开启或关闭宽度拖拽功能', 'en-US': '' },
+          'desc': {
+            'zh-CN': '控制抽屉开启或关闭宽度拖拽功能',
+            'en-US': ''
+          },
           'demoId': 'dragable'
         },
         {
           'name': 'mask',
           'type': 'boolean',
           'defaultValue': 'true',
-          'desc': { 'zh-CN': '控制遮罩层显示隐藏 ', 'en-US': '' },
+          'desc': {
+            'zh-CN': '控制遮罩层显示隐藏 ',
+            'en-US': ''
+          },
           'demoId': 'mask'
         },
         {
@@ -173,32 +160,74 @@ export default {
           },
           'demoId': 'mask-closable'
         },
+        {
+          'name': 'placement',
+          'type': "'left' | 'right' | 'top' | 'bottom' ",
+          'defaultValue': "'right'",
+          'desc': {
+            'zh-CN': '添加 placement 属性设置抽屉的方向',
+            'en-US': ''
+          },
+          'demoId': 'placement'
+        },
         {
           'name': 'show-close',
           'type': 'boolean',
           'defaultValue': 'true',
-          'desc': { 'zh-CN': '控制关闭图标显示', 'en-US': '' },
+          'desc': {
+            'zh-CN': '控制关闭图标显示',
+            'en-US': ''
+          },
           'demoId': 'show-close'
         },
+        {
+          'name': 'show-footer',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '控制底部显示',
+            'en-US': ''
+          },
+          'demoId': 'show-footer'
+        },
         {
           'name': 'show-header',
           'type': 'boolean',
           'defaultValue': 'true',
-          'desc': { 'zh-CN': '控制头部显示', 'en-US': '' },
+          'desc': {
+            'zh-CN': '控制头部显示',
+            'en-US': ''
+          },
           'demoId': 'show-header'
         },
         {
-          'name': 'show-footer',
+          'name': 'visible',
           'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': { 'zh-CN': '控制底部显示', 'en-US': '' },
-          'demoId': 'show-footer'
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '控制抽屉显示与关闭',
+            'en-US': ''
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'width',
+          'type': 'string',
+          'defaultValue': "'500px'",
+          'desc': {
+            'zh-CN': '设置抽屉的宽度',
+            'en-US': ''
+          },
+          'demoId': 'width'
         },
         {
           'name': 'z-index',
           'type': 'number',
           'defaultValue': '2000',
-          'desc': { 'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）', 'en-US': '' },
+          'desc': {
+            'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
+            'en-US': ''
+          },
           'demoId': 'z-index'
         }
       ],
@@ -207,14 +236,20 @@ export default {
           'name': 'close',
           'type': '()=> void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '关闭抽屉事件', 'en-US': '' },
+          'desc': {
+            'zh-CN': '关闭抽屉事件',
+            'en-US': ''
+          },
           'demoId': 'close-event'
         },
         {
           'name': 'confirm',
           'type': '()=> void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '确认事件，设置 :show-footer="true" 时有效', 'en-US': '' },
+          'desc': {
+            'zh-CN': '确认事件，设置 :show-footer="true" 时有效',
+            'en-US': ''
+          },
           'demoId': 'confirm-event'
         }
       ],
@@ -223,29 +258,41 @@ export default {
           'name': 'default',
           'type': '--',
           'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
+          'desc': {
+            'zh-CN': '默认插槽',
+            'en-US': ''
+          },
           'demoId': 'default-slot'
         },
         {
-          'name': 'header',
+          'name': 'footer',
           'type': '--',
           'defaultValue': '',
-          'desc': { 'zh-CN': '头部插槽', 'en-US': '' },
-          'demoId': 'header-slot'
+          'desc': {
+            'zh-CN': '底部插槽',
+            'en-US': ''
+          },
+          'demoId': 'footer-slot'
         },
         {
-          'name': 'header-right',
+          'name': 'header',
           'type': '--',
           'defaultValue': '',
-          'desc': { 'zh-CN': '头部右侧插槽', 'en-US': '' },
-          'demoId': 'header-right-slot'
+          'desc': {
+            'zh-CN': '头部插槽',
+            'en-US': ''
+          },
+          'demoId': 'header-slot'
         },
         {
-          'name': 'footer',
+          'name': 'header-right',
           'type': '--',
           'defaultValue': '',
-          'desc': { 'zh-CN': '底部插槽', 'en-US': '' },
-          'demoId': 'footer-slot'
+          'desc': {
+            'zh-CN': '头部右侧插槽',
+            'en-US': ''
+          },
+          'demoId': 'header-right-slot'
         }
       ]
     }

package/demos/pc/app/drawer/z-index-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 自定义z-index </tiny-button>
+    <tiny-button @click="fn" type="primary"> 自定义 z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
       <div>
         <br />

package/demos/pc/app/drawer/z-index.spec.ts

@@ -5,6 +5,6 @@ test('自定义堆叠顺序', async ({ page }) => {
   await page.goto('drawer#z-index')
 
   const drawer = page.locator('.tiny-drawer__main')
-  await page.getByRole('button', { name: '自定义z-index' }).click()
+  await page.getByRole('button', { name: '自定义 z-index' }).click()
   await expect(drawer).toHaveCSS('z-index', '3000')
 })

package/demos/pc/app/drawer/z-index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 自定义z-index </tiny-button>
+    <tiny-button @click="fn" type="primary"> 自定义 z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
       <div>
         <br />

package/demos/pc/app/drop-times/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 270px">
+  <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -15,3 +15,9 @@ function change(value) {
   Modal.message({ message: 'change 事件，当前值为 ' + value })
 }
 </script>
+
+<style scoped>
+.drop-time-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/drop-times/basic-usage.spec.ts

@@ -4,7 +4,7 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drop-times#basic-usage')
 
-  const droptimes = page.getByPlaceholder('请选择')
+  const droptimes = page.locator('#basic-usage').getByRole('textbox', { name: '请选择' })
   const option = page.getByRole('listitem').filter({ hasText: '01:00' })
 
   await droptimes.click()