@opentiny/vue-docs 2.1.9 → 2.1.10

package/demos/pc/app/cascader-panel/cascader-panel-props.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>
@@ -25,193 +27,193 @@ export default {
       value: '',
       optionsCascader: [
         {
-          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 滚动块'
                 }
               ]
             }
@@ -224,7 +226,7 @@ export default {
 </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/change-composition-api.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
+  <div class="cascader-panel-demo-event">
     <tiny-button @click="clearCheckedNodes">清除选中节点</tiny-button>
     <tiny-cascader-panel
       v-model="value"
-      ref="CascaderPanelRef"
-      class="cascader-panel-demo"
+      ref="CascaderPanel"
       :options="optionsCascader"
       @change="change"
       @expand-change="expandChange"
@@ -211,14 +210,14 @@ const optionsCascader = ref([
     ]
   }
 ])
-const CascaderPanelRef = ref()
+const cascaderPanelRef = ref()
 
 function clearCheckedNodes() {
-  CascaderPanelRef.value.clearCheckedNodes()
+  cascaderPanelRef.value.clearCheckedNodes()
 }
 
 function change(value) {
-  const checkVal = CascaderPanelRef.value.getCheckedNodes()
+  const checkVal = cascaderPanelRef.value.getCheckedNodes()
   let mess = ''
 
   if (checkVal.length) {
@@ -238,7 +237,7 @@ function expandChange(value) {
 </script>
 
 <style scoped>
-.cascader-panel-demo {
-  min-height: 200px;
+.cascader-panel-demo-event > :not(:last-child) {
+  margin-bottom: 12px;
 }
 </style>

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

@@ -4,6 +4,17 @@ test('选中节点变化', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader-panel#change')
   await page.getByRole('menuitem', { name: '指南' }).click()
-  await page.getByRole('menuitem', { name: '安装' }).getByRole('radio').click()
-  await expect(page.getByText('change 事件，当前选中的值为:安装；传入的值为:zhinan,anzhuang')).toBeVisible()
+
+  await expect(page.getByText('节点展开：zhinan')).toBeVisible()
+
+  await page.getByRole('menuitem', { name: '安装' }).click()
+  await page.getByRole('menuitem', { name: '项目登记' }).click()
+
+  await expect(page.getByText('change 事件，当前选中的值为:项目登记；传入的值为:zhinan,anzhuang,xiangmudengji')).toBeVisible()
+
+  // 清除节点
+  await expect(page.getByRole('menuitem', { name: '项目登记' })).toHaveClass('tiny-cascader-node is-active')
+  await page.getByRole('button', { name: '清除选中节点' }).click()
+  await expect(page.getByRole('menuitem', { name: '项目登记' })).not.toHaveClass('tiny-cascader-node is-active')
+
 })

package/demos/pc/app/cascader-panel/change.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
+  <div class="cascader-panel-demo-event">
     <tiny-button @click="clearCheckedNodes">清除选中节点</tiny-button>
     <tiny-cascader-panel
       v-model="value"
-      ref="CascaderPanel"
-      class="cascader-panel-demo"
+      ref="cascaderPanel"
       :options="optionsCascader"
       @change="change"
       @expand-change="expandChange"
@@ -221,13 +220,13 @@ export default {
   },
   methods: {
     clearCheckedNodes() {
-      this.$refs.CascaderPanel.clearCheckedNodes()
+      this.$refs.cascaderPanel.clearCheckedNodes()
     },
     expandChange(value) {
       Modal.message({ message: `节点展开：${value}`, status: 'info' })
     },
     change(value) {
-      const checkVal = this.$refs.CascaderPanel.getCheckedNodes()
+      const checkVal = this.$refs.cascaderPanel.getCheckedNodes()
       let mess = ''
 
       if (checkVal.length) {
@@ -244,7 +243,7 @@ export default {
 </script>
 
 <style scoped>
-.cascader-panel-demo {
-  min-height: 200px;
+.cascader-panel-demo-event > :not(:last-child){
+  margin-bottom: 12px;
 }
 </style>

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

@@ -13,25 +13,18 @@ export default {
       },
       'codeFiles': ['basic-usage.vue']
     },
-    {
-      'demoId': 'change',
-      'name': { 'zh-CN': '事件与方法', 'en-US': 'Selected node changes' },
-      'desc': {
-        'zh-CN':
-          '<p>通过 <code>change</code> 点击节点后触发的事件，回调参数为 选中节点的值\n通过 <code>clearCheckedNodes</code> 清除选中的节点。\n通过 <code>getCheckedNodes</code> 获取选中的节点。</p>\n',
-        'en-US':
-          '<p>The event is triggered after a node is clicked through <code>change</code>. The callback parameter is the value of the selected node.\nYou can clear the selected node through <code>clearCheckedNodes</code>. \n Obtain the selected node through <code>getCheckedNodes</code>. </p>\n'
-      },
-      'codeFiles': ['change.vue']
-    },
     {
       'demoId': 'custom-option-content',
       'name': { 'zh-CN': '自定义节点内容', 'en-US': 'Custom Node Content' },
       'desc': {
-        'zh-CN':
-          '<p>可以通过 <code>scoped slot</code> 对级联面板的备选项的节点内容进行自定义，<code>scoped slot</code> 会传入两个字段 <code>node</code> 和 <code>data</code>，分别表示当前节点的 Node 对象和数据。</p>\n',
-        'en-US':
-          '<p>You can use <code>scoped slot</code> to customize the node content of the options of the cascading panel. <code>scoped slot</code> transfers two fields: <code>node</code> and <code>data</code>, indicating the node object and data of the current node, respectively. </p>\n'
+        'zh-CN': `<p>
+            <div>可以通过 <code>scoped slot</code> 对级联面板的备选项的节点内容进行自定义。</div>
+            <div><code>scoped slot</code> 会传入两个字段 <code>node</code> 和 <code>data</code>，分别表示当前节点的 Node 对象和数据。</div>
+          </p>`,
+        'en-US': `<p>
+          The <div> can customize the node contents of the cascade panel's alternatives through the <code>scoped slot</code>. </div>
+          <div><code>scoped slot</code> passes in two fields, <code>node</code> and <code>data</code>, representing the Node object and data of the current node, respectively. </div>
+        </p>`
       },
       'codeFiles': ['custom-option-content.vue']
     },
@@ -39,12 +32,37 @@ export default {
       'demoId': 'cascader-panel-props',
       'name': { 'zh-CN': 'Props 选项', 'en-US': 'Props Options' },
       'desc': {
-        'zh-CN':
-          '<div class="tip custom-block"><p class="custom-block-title">Props</p>\n<p>通过 <code>children</code> 指定子级选项，默认值为 children。\n通过 <code>emitPath</code> 是否返回由该节点所在的各级菜单的值所组成的数组。\n通过 <code>label</code> 指定显示选项 label 值，默认为 label。\n通过 <code>value</code> 指定值选项 value 值，默认为 value</p>\n</div>\n',
-        'en-US':
-          '<div class="tip custom-block"><p class="custom-block-title">Props</p>\n<p> specifies child options with <code>children</code>. The default value is children. \n Indicates whether to return an array consisting of the values of the menus where the node is located through <code>emitPath</code>. \n Use <code>label</code> to specify the label value of the display option. The default value is label. \n Use <code>value</code> to specify the value of the value option. The default value is value</p>\n</div>\n'
+        'zh-CN': `<p>
+              <div>通过 <code>children</code> 指定子级选项，默认值为 children。</div>
+              <div>通过 <code>emitPath</code> 是否返回由该节点所在的各级菜单的值所组成的数组。</div>
+              <div>通过 <code>label</code> 指定显示选项 label 值，默认为 label。</div>
+              <div>通过 <code>value</code> 指定值选项 value 值，默认为 value。</div>
+            </p>`,
+        'en-US': `<p>
+            <div> specifies the child options through <code>children</code>, which defaults to children. </div>
+            <div> Whether to return an array of values from the menu levels where the node resides via <code>emitPath</code>. </div>
+            <div> specifies the display option label value by <code>label</code>, which defaults to label. </div>
+            <div> Specifies the value option value by <code>value</code>, which defaults to value. </div>
+          </p>`
       },
       'codeFiles': ['cascader-panel-props.vue']
+    },
+    {
+      'demoId': 'change',
+      'name': { 'zh-CN': '事件与方法', 'en-US': 'Selected node changes' },
+      'desc': {
+        'zh-CN': `<p>
+            <div>通过 <code>change</code> 点击节点后触发的事件，回调参数为"选中节点的值"。</div>
+            <div>通过 <code>clearCheckedNodes</code> 清除选中的节点。</div>
+            <div>通过 <code>getCheckedNodes</code> 获取选中的节点。</dic>
+          </p>`,
+        'en-US': `<p>
+            <div> The event triggered by clicking the node through <code>change</code>, with the callback parameter "Select the value of the node". </div>
+            <div> Clear the selected nodes with <code>clearCheckedNodes</code>. </div>
+            <div> Get the selected nodes from <code>getCheckedNodes</code>. </dic>
+          </p>`
+      },
+      'codeFiles': ['change.vue']
     }
   ],
   apis: [
@@ -55,9 +73,12 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'ICascaderPanelNodePropValue',
-          'typeAnchorName': 'ICascaderPanelNodeValue',
+          'typeAnchorName': 'ICascaderPanelNodePropValue',
           'defaultValue': '',
-          'desc': { 'zh-CN': '选中项绑定值', 'en-US': 'Bound value of the selected item' },
+          'desc': {
+            'zh-CN': `选中项绑定值, 其类型由 props.multiple、props.emitPath 共同决定`,
+            'en-US': `Select an item binding value whose type is determined by both props.multiple and props.emitPath`
+          },
           'demoId': 'basic-usage'
         },
         {
@@ -87,6 +108,7 @@ export default {
         {
           'name': 'change',
           'type': '(value: ICascaderPanelNodePropValue) => void',
+          'typeAnchorName': 'ICascaderPanelNodePropValue',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当选中节点变化时触发; 回调参数为 选中节点的值',
@@ -98,9 +120,10 @@ export default {
         {
           'name': 'expand-change',
           'type': '(value: ICascaderPanelNodeValue[]) => void',
+          'typeAnchorName': 'ICascaderPanelNodeValue',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '当展开节点发生变化时触发; 回调参数为 各父级选项值组成的数组 (Array类型)',
+            'zh-CN': '当展开节点发生变化时触发; 回调参数为 各父级选项值组成的数组 (Array 类型)',
             'en-US':
               'This event is triggered when the expanded node changes. arg: The callback parameter is an array (Array type) consisting of parent option values.'
           },
@@ -113,7 +136,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.'
           },
@@ -124,6 +148,7 @@ export default {
         {
           'name': 'getCheckedNodes',
           'type': '(leafOnly: boolean = false) => ICascaderPanelNode[]',
+          'typeAnchorName': 'ICascaderPanelNode',
           'defaultValue': '',
           'desc': {
             'zh-CN': '获取选中的节点;参数为 (leafOnly) 是否只是获取子节点，默认值为 false',
@@ -143,7 +168,7 @@ export default {
       'casprops: ICascaderPanelConfig': [
         {
           'name': 'expandTrigger',
-          'type': '"click" | "hover"',
+          'type': `'click' | 'hover'`,
           'defaultValue': 'click',
           'desc': {
             'zh-CN': '次级菜单的展开方式',
@@ -194,7 +219,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '加载动态数据的方法，仅在 lazy 为 true 时有效;参数说明： node为当前点击的节点，resolve为数据加载完成的回调(必须调用)',
+              '加载动态数据的方法，仅在 lazy 为 true 时有效;参数说明： node 为当前点击的节点，resolve 为数据加载完成的回调(必须调用)',
             'en-US':
               'Method for loading dynamic data. This parameter is valid only when lazy is set to true. Parameter description: node indicates the currently clicked node. resolve indicates the callback after data loading is complete (mandatory).'
           }

package/demos/pc/app/checkbox/border-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-checkbox v-model="checked" border>
-    <tiny-tooltip content="备选项1 提示文字 提示文字" effect="light" placement="top">
+    <tiny-tooltip content="备选项1 提示文字 提示文字">
       <div class="content-overflow">备选项1 提示文字 提示文字</div>
     </tiny-tooltip>
   </tiny-checkbox>

package/demos/pc/app/checkbox/border.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-checkbox v-model="checked" border>
-    <tiny-tooltip content="备选项1 提示文字 提示文字" effect="light" placement="top">
+    <tiny-tooltip content="备选项1 提示文字 提示文字">
       <div class="content-overflow">备选项1 提示文字 提示文字</div>
     </tiny-tooltip>
   </tiny-checkbox>

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

@@ -1,24 +1,13 @@
 <template>
-  <div>
-    <div>
-      自定义背景：
-      <tiny-switch v-model="isCustom"></tiny-switch>
-    </div>
-    <tiny-checkbox-group v-model="checked" :fill="isCustom ? '#409EFF' : ''">
-      <tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
-      <tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
-    </tiny-checkbox-group>
-  </div>
+  <tiny-checkbox-group v-model="checked">
+    <tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
+    <tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
+  </tiny-checkbox-group>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import {
-  CheckboxButton as TinyCheckboxButton,
-  CheckboxGroup as TinyCheckboxGroup,
-  Switch as TinySwitch
-} from '@opentiny/vue'
+import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
 
 const checked = ref(['复选框1'])
-const isCustom = ref(false)
 </script>

package/demos/pc/app/checkbox/checkbox-button-multiple-composition-api.vue

@@ -1,9 +1,7 @@
 <template>
-  <div style="margin-top: 20px">
-    <tiny-checkbox-group v-model="checkboxGroup" size="small">
-      <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
-    </tiny-checkbox-group>
-  </div>
+  <tiny-checkbox-group v-model="checkboxGroup" size="small">
+    <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
+  </tiny-checkbox-group>
 </template>
 
 <script setup>

package/demos/pc/app/checkbox/checkbox-button-multiple.vue

@@ -1,9 +1,7 @@
 <template>
-  <div style="margin-top: 20px">
-    <tiny-checkbox-group v-model="checkboxGroup" size="small">
-      <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
-    </tiny-checkbox-group>
-  </div>
+  <tiny-checkbox-group v-model="checkboxGroup" size="small">
+    <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
+  </tiny-checkbox-group>
 </template>
 
 <script>