@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/cascader/size.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="tiny-demo-cascader-size">
+    <tiny-cascader v-model="value" :options="options" size="mini"></tiny-cascader>
+    <tiny-cascader v-model="value" :options="options" size="small"></tiny-cascader>
+    <tiny-cascader v-model="value" :options="options" size="medium"></tiny-cascader>
+  </div>
+</template>
+
+<script>
+import { Cascader } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCascader: Cascader
+  },
+  data() {
+    return {
+      value: ['zhinan', 'anzhuang', 'xiangmudengji'],
+      options: [
+        {
+          value: 'zhinan',
+          label: '指南',
+          children: [
+            {
+              value: 'anzhuang',
+              label: '安装',
+              children: [
+                {
+                  value: 'xiangmudengji',
+                  label: '项目登记'
+                },
+                {
+                  value: 'huanjingzhunbei',
+                  label: '环境准备'
+                },
+                {
+                  value: 'anzhuangcli',
+                  label: '安装 CLI'
+                },
+                {
+                  value: 'chuangjianxiangmu',
+                  label: '创建项目'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-demo-cascader-size {
+  display: flex;
+  gap: 12px;
+}
+</style>

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

@@ -27,10 +27,14 @@ export default {
       'demoId': 'disabled-items',
       'name': { 'zh-CN': '禁用选项', 'en-US': 'Disable Options' },
       'desc': {
-        'zh-CN': 
-          `<p>通过在数据源中设置 <code>disabled</code> 字段来声明该选项是禁用的，在默认情况下，Cascader 会检查数据中每一项的 <code>disabled</code> 字段是否为 <code>true</code></p>`,
-        'en-US':
-          '<p>Declare that the option is disabled by setting the <code>disabled</code> field in the data source; by default, Cascader checks to see if the <code>disabled</code> field is <code>true</code> for each item in the data. </p>'
+        'zh-CN': `<p>
+            <div>通过在数据源<code>option</code>中设置 <code>disabled</code> 字段来声明该选项是禁用的，在默认情况下，Cascader 会检查数据中每一项的 <code>disabled</code> 字段是否为 <code>true</code>。</div>
+            <div>也可以通过直接设置 <code>disabled</code> 可以禁用组件。</div>
+          </p>`,
+        'en-US': `<p>
+            <div>Declare that the option is disabled by setting the <code>disabled</code> field in the data source; by default, Cascader checks to see if the <code>disabled</code> field is <code>true</code> for each item in the data. </div>
+            <div> Components can also be disabled by setting <code>disabled</code> directly.</div>
+          </p>`
       },
       'codeFiles': ['disabled-items.vue']
     },
@@ -53,13 +57,13 @@ export default {
       'codeFiles': ['clearable.vue']
     },
     {
-      'demoId': 'clearable2',
+      'demoId': 'size',
       'name': { 'zh-CN': '尺寸', 'en-US': 'Dimension' },
       'desc': {
         'zh-CN': '<p>通过 <code>size</code> 属性设置尺寸。</p>\n',
         'en-US': '<p>Sets the size through the <code>size</code> attribute. </p>\n'
       },
-      'codeFiles': ['clearable.vue']
+      'codeFiles': ['size.vue']
     },
     {
       'demoId': 'default-multiple',
@@ -75,9 +79,9 @@ export default {
       'name': { 'zh-CN': '折叠展示 Tag', 'en-US': 'Fold Tag' },
       'desc': {
         'zh-CN':
-          '<p>在开启多选模式后，默认情况下会展示所有已选中的选项的 Tag，可以使用 <code>collapse-tags</code> 来折叠 Tag 。\n通过 <code>disabled</code> 设置组件是否禁用，默认值为 false 。</p>\n',
+          '<p>在开启多选模式后，默认情况下会展示所有已选中的选项的 Tag，可以使用 <code>collapse-tags</code> 来折叠 Tag 。</p>',
         'en-US':
-          '<p>After the multi-selection mode is enabled, tags of all selected options are displayed by default. You can use <code>collapse-tags</code> to collapse tags. \n Use <code>disabled</code> to set whether to disable the component. The default value is false. </p>\n'
+          '<p>After the multi-selection mode is enabled, tags of all selected options are displayed by default. You can use <code>collapse-tags</code> to collapse tags. </p>'
       },
       'codeFiles': ['collapse-tags.vue']
     },
@@ -106,7 +110,7 @@ export default {
       'demoId': 'auto-load',
       'name': { 'zh-CN': '动态加载', 'en-US': 'Dynamic loading' },
       'desc': {
-        'zh-CN':`
+        'zh-CN': `
           <p>
             当选中某一级时，动态加载该级下的选项。通过 <code>props</code> 属性中的 <code>lazy</code> 开启动态加载，并通过 <code>lazyload</code> 来设置加载数据源的方法。</br>
             <code>lazyload</code> 方法有两个参数，第一个参数 node 为当前点击的节点，第二个 resolve 为数据加载完成的回调(必须调用)。</br>
@@ -149,16 +153,14 @@ export default {
       'demoId': 'filterable',
       'name': { 'zh-CN': '可搜索', 'en-US': 'Searchable' },
       'desc': {
-        'zh-CN':
-          `<p>
+        'zh-CN': `<p>
             将 <code>filterable</code> 赋值为 <code>true</code> 即可打开搜索功能，默认会匹配节点的 <code>label</code> 或所有父节点的 <code>label</code> (由 <code>show-all-levels</code> 决定)中包含输入值的选项。</br>
-            使用<code>empty</code> 插槽设置无匹配选项时显示的内容，使用<code>debounce</code>设置搜索延迟
+            使用<code>empty</code> 插槽设置无匹配选项时显示的内容，使用<code>debounce</code>设置搜索延迟。
           </p>`,
-        'en-US':
-          `<p>
+        'en-US': `<p>
             Set <code>filterable</code> to <code>true</code> to turn on the search function, By default, the <code>label</code> of the node or the <code>label</code> of all parent nodes (as determined by <code>show-all-levels</code>) will match the option containing the input value. </br>
-            Use the <code>empty</code> slot to set what will be displayed if there is no matching option, and use <code>debounce</code> to set the search delay
-          </p>`,
+            Use the <code>empty</code> slot to set what will be displayed if there is no matching option, and use <code>debounce</code> to set the search delay.
+          </p>`
       },
       'codeFiles': ['filterable.vue']
     },
@@ -197,19 +199,17 @@ export default {
       'demoId': 'events',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN':
-          `<p>
+        'zh-CN': `<p>
             Cascader 级联选择器的事件有：<code>change</code>、<code>expand-change</code>、<code>blur</code>、<code>focus</code>、<code>visible-change</code>。
-            使用 <code>props.emitPath</code> 能设置节点的返回类型。
+            <div>使用 <code>props.emitPath</code> 能设置节点的返回类型。</div>
           </p>`,
-        'en-US':
-          `<p>
+        'en-US': `<p>
             Cascader cascade selector events include: <code>change</code>, <code>expand-change</code>, <code>blur</code>, <code>focus</code>, < code>visible-change</code>. 
             Use <code>props.emitPath</code> to set the return type of the node.
           </p>`
       },
       'codeFiles': ['events.vue']
-    },
+    }
   ],
   apis: [
     {
@@ -221,7 +221,11 @@ export default {
           'type': 'ICascaderPanelNodePropValue',
           'typeAnchorName': 'ICascaderPanelNodeValue',
           'defaultValue': '',
-          'desc': { 'zh-CN': '选中项绑定值, 其类型由props.multiple、props.emitPath共同决定', 'en-US': 'Binding value of the selected item, its type is determined by props.multiple, props.emitPath together.' },
+          'desc': {
+            'zh-CN': '选中项绑定值, 其类型由 props.multiple、props.emitPath 共同决定',
+            'en-US':
+              'Binding value of the selected item, its type is determined by props.multiple, props.emitPath together.'
+          },
           'demoId': 'clearable'
         },
         {
@@ -270,18 +274,18 @@ export default {
         },
         {
           'name': 'size',
-          'type': '"medium" | "small" | "mini"',
+          'type': `'medium' | 'small' | 'mini'`,
           'defaultValue': '',
           'desc': {
             'zh-CN': '尺寸',
             'en-US': 'Dimension;'
           },
-          'demoId': 'clearable2'
+          'demoId': 'size'
         },
         {
           'name': 'placeholder',
           'type': 'string',
-          'defaultValue': '请选择',
+          'defaultValue': `'请选择'`,
           'desc': { 'zh-CN': '输入框占位文本', 'en-US': 'Placeholder text in the text box' },
           'demoId': 'filterable'
         },
@@ -319,7 +323,7 @@ export default {
         {
           'name': 'separator',
           'type': 'string',
-          'defaultValue': '/',
+          'defaultValue': `'/'`,
           'desc': { 'zh-CN': '选项分隔符', 'en-US': 'Option separator' },
           'demoId': 'clearable1'
         },
@@ -333,6 +337,7 @@ export default {
         {
           'name': 'filter-method',
           'type': '(node: ICascaderPanelNode, keyword: string) => boolean',
+          'typeAnchorName': 'ICascaderPanelNode',
           'defaultValue': '',
           'desc': {
             'zh-CN':
@@ -375,17 +380,18 @@ export default {
         {
           'name': 'change',
           'type': '(value: ICascaderPanelNodePropValue) => void',
+          'typeAnchorName': 'ICascaderPanelNodePropValue',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当选中节点变化时触发',
-            'en-US':
-              'This event is triggered when the selected node changes.'
+            'en-US': 'This event is triggered when the selected node changes.'
           },
           'demoId': 'events'
         },
         {
           'name': 'expand-change',
           'type': '(value: ICascaderPanelNodeValue[]) => void',
+          'typeAnchorName': 'ICascaderPanelNodeValue',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当展开节点发生变化时触发',
@@ -400,8 +406,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '当失去焦点时触发',
-            'en-US':
-              'This event is triggered when the focus is lost.'
+            'en-US': 'This event is triggered when the focus is lost.'
           },
           'demoId': 'events'
         },
@@ -411,8 +416,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '当获得焦点时触发',
-            'en-US':
-              'This event is triggered when the focus is obtained.'
+            'en-US': 'This event is triggered when the focus is obtained.'
           },
           'demoId': 'events'
         },
@@ -422,19 +426,18 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉框出现/隐藏时触发',
-            'en-US':
-              'This event is triggered when the drop-down list box is displayed or hidden.'
+            'en-US': 'This event is triggered when the drop-down list box is displayed or hidden.'
           },
           'demoId': 'events'
         },
         {
           'name': 'remove-tag',
           'type': '(removeValue: ICascaderPanelNodeValue[]) => void',
+          'typeAnchorName': 'ICascaderPanelNodeValue',
           'defaultValue': '',
           'desc': {
             'zh-CN': '在多选模式下，移除Tag时触发',
-            'en-US':
-              'In multi-choice mode, this event is triggered when a tag is removed.'
+            'en-US': 'In multi-choice mode, this event is triggered when a tag is removed.'
           },
           'demoId': 'default-multiple'
         }
@@ -452,7 +455,8 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '自定义备选项的节点内容，参数为 { node: ICascaderPanelNode, data: ICascaderPanelData }，分别为当前节点的 Node 对象和数据',
+            'zh-CN':
+              '自定义备选项的节点内容，参数为 { node: ICascaderPanelNode, data: ICascaderPanelData }，分别为当前节点的 Node 对象和数据',
             'en-US':
               'User-defined candidate node content. The parameter is {node, data}, which indicates the node object and data of the current node.'
           }
@@ -462,11 +466,11 @@ export default {
         {
           'name': 'getCheckedNodes',
           'type': '(leafOnly: boolean = false) => ICascaderPanelNode[]',
+          'typeAnchorName': 'ICascaderPanelNode',
           'defaultValue': '',
           'desc': {
             'zh-CN': '获取选中的节点',
-            'en-US':
-              'Obtain the selected node'
+            'en-US': 'Obtain the selected node'
           },
           'demoId': 'events'
         }
@@ -474,7 +478,7 @@ export default {
       'casprops: ICascaderPanelConfig': [
         {
           'name': 'expandTrigger',
-          'type': '"click" | "hover"',
+          'type': `'click' | 'hover'`,
           'defaultValue': 'click',
           'desc': {
             'zh-CN': '次级菜单的展开方式',

package/demos/pc/app/cascader-panel/basic-usage.spec.ts

@@ -3,11 +3,10 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader-panel#basic-usage')
-  await page
-    .locator('div')
-    .filter({ hasText: /^指南组件$/ })
-    .nth(2)
-    .click()
   await page.getByRole('menuitem', { name: '指南' }).click()
-  await expect(page.getByText('安装开发')).toBeVisible()
+  await page.getByRole('menuitem', { name: '安装', exact: true }).click()
+  await page.getByRole('menuitem', { name: '项目登记' }).click()
+
+  await expect(page.getByRole('menuitem', { name: '项目登记' })).toHaveClass('tiny-cascader-node is-active')
+  await expect(page.getByRole('menuitem', { name: '项目登记' })).toHaveCSS('background-color', 'rgb(94, 124, 224)')
 })

package/demos/pc/app/cascader-panel/cascader-panel-props-composition-api.vue

@@ -1,16 +1,18 @@
 <template>
-  <tiny-cascader-panel
-    v-model="value"
-    class="cascader-panel-demo"
-    :options="optionsCascader"
-    :props="{
-      children: 'children',
-      emitPath: true,
-      label: 'label',
-      value: 'value',
-      leaf: 'leaf'
-    }"
-  ></tiny-cascader-panel>
+  <div class="cascader-panel-demo-props">
+    <div>选中值：<span>{{ value }}</span></div>
+    <tiny-cascader-panel
+      v-model="value"
+      :options="optionsCascader"
+      :props="{
+        children: 'children',
+        emitPath: false,
+        label: 'text',
+        value: 'id',
+        leaf: 'leaf'
+      }"
+    ></tiny-cascader-panel>
+  </div>
 </template>
 
 <script setup>
@@ -20,193 +22,193 @@ import { CascaderPanel as TinyCascaderPanel } from '@opentiny/vue'
 const value = ref('')
 const optionsCascader = ref([
   {
-    value: 'zhinan',
-    label: '指南',
+    id: 'zhinan',
+    text: '指南',
     children: [
       {
-        value: 'anzhuang',
-        label: '安装',
+        id: 'anzhuang',
+        text: '安装',
         children: [
           {
-            value: 'xiangmudengji',
-            label: '项目登记',
+            id: 'xiangmudengji',
+            text: '项目登记',
             disabled: true
           },
           {
-            value: 'huanjingzhunbei',
-            label: '环境准备'
+            id: 'huanjingzhunbei',
+            text: '环境准备'
           },
           {
-            value: 'anzhuangcli',
-            label: '安装 CLI'
+            id: 'anzhuangcli',
+            text: '安装 CLI'
           },
           {
-            value: 'chuangjianxiangmu',
-            label: '创建项目'
+            id: 'chuangjianxiangmu',
+            text: '创建项目'
           }
         ]
       },
       {
-        value: 'kaifa',
-        label: '开发',
+        id: 'kaifa',
+        text: '开发',
         children: [
           {
-            value: 'yinruzujian',
-            label: '引入组件'
+            id: 'yinruzujian',
+            text: '引入组件'
           },
           {
-            value: 'monishuju',
-            label: '模拟数据'
+            id: 'monishuju',
+            text: '模拟数据'
           }
         ]
       }
     ]
   },
   {
-    value: 'zujian',
-    label: '组件',
+    id: 'zujian',
+    text: '组件',
     children: [
       {
-        value: 'basic',
-        label: '框架风格',
+        id: 'basic',
+        text: '框架风格',
         children: [
           {
-            value: 'layout',
-            label: 'Layout 布局'
+            id: 'layout',
+            text: 'Layout 布局'
           },
           {
-            value: 'color',
-            label: 'Color 色彩'
+            id: 'color',
+            text: 'Color 色彩'
           },
           {
-            value: 'font',
-            label: 'Font 字体'
+            id: 'font',
+            text: 'Font 字体'
           },
           {
-            value: 'icon',
-            label: 'Icon 图标'
+            id: 'icon',
+            text: 'Icon 图标'
           }
         ]
       },
       {
-        value: 'form',
-        label: '表单组件',
+        id: 'form',
+        text: '表单组件',
         children: [
           {
-            value: 'radio',
-            label: 'Radio 单选框'
+            id: 'radio',
+            text: 'Radio 单选框'
           },
           {
-            value: 'checkbox',
-            label: 'Checkbox 多选框'
+            id: 'checkbox',
+            text: 'Checkbox 多选框'
           },
           {
-            value: 'input',
-            label: 'Input 输入框'
+            id: 'input',
+            text: 'Input 输入框'
           },
           {
-            value: 'number',
-            label: 'Numeric 计数器'
+            id: 'number',
+            text: 'Numeric 计数器'
           },
           {
-            value: 'select',
-            label: 'Select 选择器'
+            id: 'select',
+            text: 'Select 选择器'
           },
           {
-            value: 'cascader',
-            label: 'Cascader 级联选择器'
+            id: 'cascader',
+            text: 'Cascader 级联选择器'
           },
           {
-            value: 'switch',
-            label: 'Switch 开关'
+            id: 'switch',
+            text: 'Switch 开关'
           },
           {
-            value: 'slider',
-            label: 'Slider 滑块'
+            id: 'slider',
+            text: 'Slider 滑块'
           },
           {
-            value: 'time-picker',
-            label: 'TimePicker 时间选择器'
+            id: 'time-picker',
+            text: 'TimePicker 时间选择器'
           },
           {
-            value: 'date-picker',
-            label: 'DatePicker 日期选择器'
+            id: 'date-picker',
+            text: 'DatePicker 日期选择器'
           },
           {
-            value: 'form',
-            label: 'Form 表单'
+            id: 'form',
+            text: 'Form 表单'
           }
         ]
       },
       {
-        value: 'data',
-        label: '数据组件',
+        id: 'data',
+        text: '数据组件',
         children: [
           {
-            value: 'tree',
-            label: 'Tree 树形控件'
+            id: 'tree',
+            text: 'Tree 树形控件'
           },
           {
-            value: 'pager',
-            label: 'Pager 分页'
+            id: 'pager',
+            text: 'Pager 分页'
           }
         ]
       },
       {
-        value: 'notice',
-        label: '提示组件',
+        id: 'notice',
+        text: '提示组件',
         children: [
           {
-            value: 'alert',
-            label: 'Alert 警告'
+            id: 'alert',
+            text: 'Alert 警告'
           },
           {
-            value: 'loading',
-            label: 'Loading 加载'
+            id: 'loading',
+            text: 'Loading 加载'
           }
         ]
       },
       {
-        value: 'navigation',
-        label: '导航组件',
+        id: 'navigation',
+        text: '导航组件',
         children: [
           {
-            value: 'menu',
-            label: 'NavMenu 导航菜单'
+            id: 'menu',
+            text: 'NavMenu 导航菜单'
           },
           {
-            value: 'tabs',
-            label: 'Tabs 标签页'
+            id: 'tabs',
+            text: 'Tabs 标签页'
           },
           {
-            value: 'breadcrumb',
-            label: 'Breadcrumb 面包屑'
+            id: 'breadcrumb',
+            text: 'Breadcrumb 面包屑'
           },
           {
-            value: 'steps',
-            label: 'Steps 步骤条'
+            id: 'steps',
+            text: 'Steps 步骤条'
           }
         ]
       },
       {
-        value: 'others',
-        label: '其他组件',
+        id: 'others',
+        text: '其他组件',
         children: [
           {
-            value: 'rate',
-            label: 'Rate 评分'
+            id: 'rate',
+            text: 'Rate 评分'
           },
           {
-            value: 'tag',
-            label: 'Tag 标签'
+            id: 'tag',
+            text: 'Tag 标签'
           },
           {
-            value: 'usercontact',
-            label: 'UserContact 联系人'
+            id: 'usercontact',
+            text: 'UserContact 联系人'
           },
           {
-            value: 'slidebar',
-            label: 'SlideBar 滚动块'
+            id: 'slidebar',
+            text: 'SlideBar 滚动块'
           }
         ]
       }
@@ -216,7 +218,7 @@ const optionsCascader = ref([
 </script>
 
 <style scoped>
-.cascader-panel-demo {
-  min-height: 200px;
+.cascader-panel-demo-props > :not(:last-child) {
+  margin-bottom: 12px;
 }
 </style>

package/demos/pc/app/cascader-panel/cascader-panel-props.spec.ts

@@ -3,9 +3,13 @@ import { test, expect } from '@playwright/test'
 test('Props 选项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader-panel#cascader-panel-props')
-  await expect(page.getByText('指南组件')).toBeVisible()
   await page.getByRole('menuitem', { name: '指南' }).click()
-  await expect(page.getByText('安装开发')).toBeVisible()
-  await page.getByText('安装').click()
-  await expect(page.getByText('项目登记环境准备安装 CLI创建项目')).toBeVisible()
+  await page.getByRole('menuitem', { name: '安装', exact: true }).click()
+  await page.getByRole('menuitem', { name: '项目登记' }).click()
+
+  // 不可选中
+  await expect(page.getByText('选中值：xiangmudengji')).not.toBeVisible()
+
+  await page.getByRole('menuitem', { name: '环境准备' }).click()
+  await expect(page.getByText('选中值：huanjingzhunbei')).toBeVisible()
 })