@opentiny/vue-docs 3.17.3 → 3.18.0

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

@@ -312,6 +312,7 @@ export default {
         'zh-CN': `
           通过 <code> filter-node-method </code> 属性, 指定过滤节点时的函数，函数返回<code>true</code>时节点显示，否则节点隐藏。<br>
           通过 <code> filter </code> 组件方法，触发组件进行过滤。<br>
+          通过 <code> highlightQuery </code> 属性，是否在匹配的节点中，高亮搜索文字。<br>
           通过 <code> view-type </code> 属性，设置组件的视图模式，可选值为<code> tree </code> 和 <code> plain </code>,默认为<code> tree </code>。<br>
           通过 <code> show-auxi </code> 属性，设置在平铺视图时，是否显示节点的辅助信息，默认为<code>true</code>。<br>
           <div class="tip custom-block">
@@ -321,6 +322,7 @@ export default {
           `,
         'en-US': `The <code> filter-node-method </code> property is used to specify the function for filtering nodes. The function returns <code>true</code> to display the nodes. <br>
           Run the <code> filter </code> component method to trigger the component to filter. <br>
+          Use the <code>highlightQuery </code> attribute to determine whether to highlight the search text in the matched node.<br>
           Use the <code> view-type </code> property to set the component view mode. The optional values are <code> tree </code> and <code> plain </code>. The default value is <code> tree </code>. <br>
           The <code> show-auxi </code> property is used to set whether to display auxiliary node information in tiled view. The default is <code>true</code>. <br>
           <div class="tip custom-block">

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu :search-icon="tinyIconCalendar" :prefix-icon="tinyIconDoubleRight"></tiny-tree-menu>
+  <tiny-tree-menu :search-icon="tinyIconCalendar" :suffix-icon="tinyIconDoubleRight"></tiny-tree-menu>
 </template>
 
 <script setup>

package/demos/pc/app/tree-menu/custom-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu :search-icon="tinyIconCalendar" :prefix-icon="tinyIconDoubleRight"></tiny-tree-menu>
+  <tiny-tree-menu :search-icon="tinyIconCalendar" :suffix-icon="tinyIconDoubleRight"></tiny-tree-menu>
 </template>
 
 <script>

package/demos/pc/app/tree-menu/webdoc/tree-menu.js

@@ -156,9 +156,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>search-icon</code> 属性自定义搜索图标， <code>prefix-icon</code> 自定义前置图标。</p>\n',
+          '<p>通过 <code>search-icon</code> 属性设置自定义搜索图标。</p>\n <p>通过 <code>suffix-icon</code> 属性全局设置带图标树形菜单。</p>\n',
         'en-US':
-          '<p>Customize the search icon through the <code>search-icon</code> attribute, and through the <code>prefix-icon</code> attribute customize prefix icon.</p>\n'
+          '<p>Set a custom search icon through the <code>search icon</code> attribute .</p> \n  <code>suffix icon</code> attribute global settings with icon tree menu</p>\n'
       },
       codeFiles: ['custom-icon.vue']
     },

package/demos/pc/app/tree-select/basic-usage-composition-api.vue

@@ -0,0 +1,55 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp"></tiny-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/tree-select/basic-usage.spec.ts

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test'
+
+test('测试基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#basic-usage')
+
+  const wrap = page.locator('#basic-usage')
+  const select = wrap.locator('.tiny-tree-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const treeNode = dropdown.locator('.tiny-tree-node')
+
+  await input.click()
+  await expect(treeNode).toHaveCount(7)
+
+  await treeNode.filter({ hasText: /^二级 2-1$/ }).click()
+  await expect(input).toHaveValue('二级 2-1')
+  await input.click()
+  await expect(treeNode.filter({ hasText: /^二级 2-1$/ })).toHaveClass(/is-current/)
+})

package/demos/pc/app/tree-select/basic-usage.vue

@@ -0,0 +1,62 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp"></tiny-tree-select>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/tree-select/collapse-tags-composition-api.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <p>场景1： collapse-tags 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
+    <p>场景2： hover-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景3： click-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand :max-visible-rows="1"></tiny-tree-select>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref([])
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: 'OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/collapse-tags.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <p>场景1： collapse-tags 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
+    <p>场景2： hover-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景3： click-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand :max-visible-rows="1"></tiny-tree-select>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: [],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: 'OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/copy-composition-api.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <p>场景1：一键复制所有标签</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable></tiny-tree-select>
+    <p>场景2：设置复制文本分隔符</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
+    <p>粘贴至此处：</p>
+    <tiny-input v-model="inputVal" type="text"></tiny-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect, Input as TinyInput } from '@opentiny/vue'
+
+const value = ref('')
+const value2 = ref([])
+const inputVal = ref('')
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select,
+.tiny-input {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/copy.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <p>场景1：一键复制所有标签</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable></tiny-tree-select>
+    <p>场景2：设置复制文本分隔符</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
+    <p>粘贴至此处：</p>
+    <tiny-input v-model="inputVal" type="text"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TreeSelect, Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect,
+    TinyInput: Input
+  },
+  data() {
+    return {
+      value1: '',
+      value2: [],
+      inputVal: '',
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select,
+.tiny-input {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/disabled-composition-api.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <p>场景1： 未选择</p>
+    <tiny-tree-select v-model="value1" :tree-op="treeOp" disabled></tiny-tree-select>
+    <p>场景2： 单选</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" disabled></tiny-tree-select>
+    <p>场景3： 多选</p>
+    <tiny-tree-select v-model="value3" :tree-op="treeOp" multiple disabled></tiny-tree-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value1 = ref('')
+const value2 = ref(1)
+const value3 = ref([1, 4, 9, 10])
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/disabled.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <p>场景1： 未选择</p>
+    <tiny-tree-select v-model="value1" :tree-op="treeOp" disabled></tiny-tree-select>
+    <p>场景2： 单选</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" disabled></tiny-tree-select>
+    <p>场景3： 多选</p>
+    <tiny-tree-select v-model="value3" :tree-op="treeOp" multiple disabled></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value1: '',
+      value2: 1,
+      value3: [1, 4, 9, 10],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/map-field-composition-api.vue

@@ -0,0 +1,55 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeOp = ref({
+  data: [
+    {
+      val: 1,
+      text: '一级 1',
+      children: [
+        {
+          val: 4,
+          text: '二级 1-1',
+          children: [
+            {
+              val: 9,
+              text: '三级 1-1-1'
+            },
+            {
+              val: 10,
+              text: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      val: 2,
+      text: '一级 2',
+      children: [
+        {
+          val: 5,
+          text: '二级 2-1'
+        },
+        {
+          val: 6,
+          text: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>