@opentiny/vue-docs 2.1.10 → 2.2.1

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

@@ -0,0 +1,129 @@
+<template>
+  <tiny-tree-menu :data="treeData" :props="mapField"></tiny-tree-menu>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+
+const mapField = reactive({
+  label: 'name',
+  children: 'zones'
+})
+
+const treeData = reactive([
+  {
+    id: 100,
+    name: '首页'
+  },
+  {
+    id: 200,
+    name: '指南',
+
+    zones: [
+      {
+        id: 201,
+        name: '引入组件',
+        zones: [
+          { id: 20101, name: '按需引入' },
+          { id: 20102, name: '完整引入' }
+        ]
+      },
+      { id: 202, name: '后端适配器' },
+      { id: 203, name: '服务代理' },
+      { id: 204, name: '构建部署' }
+    ]
+  },
+  {
+    id: 300,
+    name: '组件',
+
+    zones: [
+      {
+        id: 300,
+        name: '组件'
+      },
+      {
+        id: 301,
+        name: '表单组件',
+        zones: [
+          {
+            id: 30101,
+            name: 'Button 按钮',
+            url: 'button'
+          },
+          { id: 30102, name: 'Datepicker 日期', url: '' },
+          { id: 30103, name: 'Dropdown 下拉框', url: '' },
+          { id: 30104, name: 'DropTimes 下拉时间', url: '' },
+          { id: 30105, name: 'Input 输入框', url: '' }
+        ]
+      },
+      { id: 302, name: '数据组件' },
+      { id: 303, name: '导航组件' },
+      { id: 304, name: '业务组件' }
+    ]
+  },
+  {
+    id: 400,
+    name: '教程',
+    zones: [
+      {
+        id: 401,
+        name: '页面布局',
+        zones: [
+          { id: 40101, name: '添加标签页', url: '' },
+          { id: 40102, name: '标签页配置', url: '' }
+        ]
+      },
+      {
+        id: 402,
+        name: '查询功能',
+        zones: [
+          { id: 40201, name: '添加查询页面', url: '' },
+          { id: 40202, name: '列表属性配置', url: '' },
+          { id: 40203, name: '通讯录查询', url: '' }
+        ]
+      },
+      {
+        id: 403,
+        name: '新增功能',
+        zones: [
+          { id: 40301, name: '表单新增功能', url: '' },
+          { id: 40302, name: '表单数据验证', url: '' }
+        ]
+      },
+      {
+        id: 404,
+        name: '编辑功能',
+        zones: [
+          { id: 40401, name: '开启编辑功能', url: '' },
+          { id: 40402, name: '保存表格数据', url: '' }
+        ]
+      }
+    ]
+  },
+  {
+    id: 500,
+    name: '规范'
+  },
+  {
+    id: 600,
+    name: '性能'
+  },
+  {
+    id: 700,
+    name: '案例'
+  },
+  {
+    id: 800,
+    name: '更新日志'
+  }
+])
+</script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+</style>

package/demos/pc/app/tree-menu/props.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test'
+
+
+test('字段映射', async ({ page }) => {
+ 
+})

package/demos/pc/app/tree-menu/props.vue

@@ -0,0 +1,129 @@
+<template>
+  <tiny-tree-menu :data="treeData" :props="mapField"></tiny-tree-menu>
+</template>
+
+<script>
+import { TreeMenu, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeMenu: TreeMenu
+  },
+  data() {
+    return {
+      mapField: {
+        label: 'name',
+        children: 'zones'
+      },
+      treeData: [
+        {
+          id: 100,
+          name: '首页'
+        },
+        {
+          id: 200,
+          name: '指南',
+
+          zones: [
+            {
+              id: 201,
+              name: '引入组件',
+              zones: [
+                { id: 20101, name: '按需引入' },
+                { id: 20102, name: '完整引入' }
+              ]
+            },
+            { id: 202, name: '后端适配器' },
+            { id: 203, name: '服务代理' },
+            { id: 204, name: '构建部署' }
+          ]
+        },
+        {
+          id: 300,
+          name: '组件',
+
+          zones: [
+            {
+              id: 300,
+              name: '组件'
+            },
+            {
+              id: 301,
+              name: '表单组件',
+              zones: [
+                {
+                  id: 30101,
+                  name: 'Button 按钮',
+                  url: 'button'
+                },
+                { id: 30102, name: 'Datepicker 日期', url: '' },
+                { id: 30103, name: 'Dropdown 下拉框', url: '' },
+                { id: 30104, name: 'DropTimes 下拉时间', url: '' },
+                { id: 30105, name: 'Input 输入框', url: '' }
+              ]
+            },
+            { id: 302, name: '数据组件' },
+            { id: 303, name: '导航组件' },
+            { id: 304, name: '业务组件' }
+          ]
+        },
+        {
+          id: 400,
+          name: '教程',
+          zones: [
+            {
+              id: 401,
+              name: '页面布局',
+              zones: [
+                { id: 40101, name: '添加标签页', url: '' },
+                { id: 40102, name: '标签页配置', url: '' }
+              ]
+            },
+            {
+              id: 402,
+              name: '查询功能',
+              zones: [
+                { id: 40201, name: '添加查询页面', url: '' },
+                { id: 40202, name: '列表属性配置', url: '' },
+                { id: 40203, name: '通讯录查询', url: '' }
+              ]
+            },
+            {
+              id: 403,
+              name: '新增功能',
+              zones: [
+                { id: 40301, name: '表单新增功能', url: '' },
+                { id: 40302, name: '表单数据验证', url: '' }
+              ]
+            },
+            {
+              id: 404,
+              name: '编辑功能',
+              zones: [
+                { id: 40401, name: '开启编辑功能', url: '' },
+                { id: 40402, name: '保存表格数据', url: '' }
+              ]
+            }
+          ]
+        },
+        {
+          id: 500,
+          name: '规范'
+        },
+        {
+          id: 600,
+          name: '性能'
+        },
+        {
+          id: 700,
+          name: '案例'
+        },
+        {
+          id: 800,
+          name: '更新日志'
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/tree-menu/show-checkbox-composition-api.vue

@@ -1,11 +1,17 @@
 <template>
-  <tiny-tree-menu :data="treeData" :show-checkbox="true"></tiny-tree-menu>
+  <div>
+    <p>场景1：节点可勾选 + 默认选中</p>
+    <tiny-tree-menu node-key="id" show-checkbox :data="treeData" :default-checked-keys="expandeArr"></tiny-tree-menu>
+    <p>场景2：节点可勾选 + 父子级不相关联</p>
+    <tiny-tree-menu :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
+  </div>
 </template>
 
-<script setup lang="jsx">
-import { ref } from 'vue'
+<script setup>
+import { ref, reactive } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
+const expandeArr = reactive([100])
 const treeData = ref([
   {
     id: 100,
@@ -32,10 +38,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -165,3 +167,14 @@ const treeData = ref([
   }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/tree-menu/show-checkbox.spec.ts

@@ -39,3 +39,30 @@ test('节点可勾选', async ({ page }) => {
     treeMenu.getByRole('treeitem', { name: '引入组件' }).first().locator('.tiny-checkbox__input').first()
   ).not.toHaveClass(/is-indeterminate/)
 })
+
+
+test('父子级不相关联', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#check-strictly')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const checkedClass = /is-checked/
+
+  // 父节点勾选不会改变子节点
+  await treeMenu.getByRole('treeitem', { name: '指南' }).locator('svg').first().click()
+  await expect(treeMenu.getByRole('treeitem', { name: '引入组件' }).locator('svg').first()).not.toHaveClass(
+    checkedClass
+  )
+  await expect(page.getByRole('treeitem', { name: '构建部署' }).first().locator('span').nth(1)).not.toHaveClass(
+    checkedClass
+  )
+
+  // 子节点勾选不改变父节点
+  await page.getByRole('treeitem', { name: '引入组件' }).first().click()
+  await page.getByRole('treeitem', { name: '按需引入' }).locator('span').nth(2).click()
+  await page.getByRole('treeitem', { name: '完整引入' }).locator('span').nth(2).click()
+  await expect(page.getByRole('treeitem', { name: '引入组件' }).locator('span').nth(1)).not.toHaveClass(checkedClass)
+})
+
+test('可勾选节点默认选中', async ({ page }) => {
+})

package/demos/pc/app/tree-menu/show-checkbox.vue

@@ -1,8 +1,13 @@
 <template>
-  <tiny-tree-menu :data="treeData" :show-checkbox="true"></tiny-tree-menu>
+  <div>
+    <p>场景1：节点可勾选 + 默认选中</p>
+    <tiny-tree-menu node-key="id" show-checkbox :data="treeData" :default-checked-keys="expandeArr"></tiny-tree-menu>
+    <p>场景2：节点可勾选 + 父子级不相关联</p>
+    <tiny-tree-menu :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -12,6 +17,7 @@ export default {
 
   data() {
     return {
+      expandeArr: [100],
       treeData: [
         {
           id: 100,
@@ -38,10 +44,6 @@ export default {
           id: 300,
           label: '组件',
           children: [
-            {
-              id: 300,
-              label: '组件'
-            },
             {
               id: 301,
               label: '表单组件',
@@ -174,3 +176,14 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/tree-menu/{check-strictly-composition-api.vue → show-expand-composition-api.vue}

@@ -1,19 +1,22 @@
 <template>
-  <tiny-tree-menu :data="treeData" :show-checkbox="true" :check-strictly="true"></tiny-tree-menu>
+  <tiny-tree-menu :data="treeData" show-expand></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
-import { ref } from 'vue'
+<script setup>
+import { reactive } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { iconApp, iconExpressSearch, iconTotal, iconUnfreeze, iconFile } from '@opentiny/vue-icon'
 
-const treeData = ref([
+const treeData = reactive([
   {
     id: 100,
-    label: '首页'
+    label: '首页',
+    customIcon: iconApp()
   },
   {
     id: 200,
     label: '指南',
+    customIcon: iconExpressSearch(),
     children: [
       {
         id: 201,
@@ -31,6 +34,7 @@ const treeData = ref([
   {
     id: 300,
     label: '组件',
+    customIcon: iconTotal(),
     children: [
       {
         id: 300,
@@ -59,6 +63,7 @@ const treeData = ref([
   {
     id: 400,
     label: '教程',
+    customIcon: iconUnfreeze(),
     children: [
       {
         id: 401,
@@ -97,19 +102,23 @@ const treeData = ref([
   },
   {
     id: 500,
-    label: '规范'
+    label: '规范',
+    customIcon: iconFile()
   },
   {
     id: 600,
-    label: '性能'
+    label: '性能',
+    customIcon: iconFile()
   },
   {
     id: 700,
-    label: '案例'
+    label: '案例',
+    customIcon: iconFile()
   },
   {
     id: 800,
-    label: '更新日志'
+    label: '更新日志',
+    customIcon: iconFile()
   }
 ])
 </script>

package/demos/pc/app/tree-menu/show-expand.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+
+test('底部一键展开', async ({ page }) => {
+ 
+})
+
+test('自定义节点图标', async ({ page }) => {
+ 
+})

package/demos/pc/app/tree-menu/show-expand.vue

@@ -0,0 +1,132 @@
+<template>
+  <tiny-tree-menu :data="treeData" show-expand></tiny-tree-menu>
+</template>
+
+<script>
+import { TreeMenu } from '@opentiny/vue'
+import { iconApp, iconExpressSearch, iconTotal, iconUnfreeze, iconFile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTreeMenu: TreeMenu
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          id: 100,
+          label: '首页',
+          customIcon: iconApp()
+        },
+        {
+          id: 200,
+          label: '指南',
+          customIcon: iconExpressSearch(),
+          children: [
+            {
+              id: 201,
+              label: '引入组件',
+              children: [
+                { id: 20101, label: '按需引入' },
+                { id: 20102, label: '完整引入' }
+              ]
+            },
+            { id: 202, label: '后端适配器' },
+            { id: 203, label: '服务代理' },
+            { id: 204, label: '构建部署' }
+          ]
+        },
+        {
+          id: 300,
+          label: '组件',
+          customIcon: iconTotal(),
+          children: [
+            {
+              id: 300,
+              label: '组件'
+            },
+            {
+              id: 301,
+              label: '表单组件',
+              children: [
+                {
+                  id: 30101,
+                  label: 'Button 按钮',
+                  url: 'button'
+                },
+                { id: 30102, label: 'Datepicker 日期', url: '' },
+                { id: 30103, label: 'Dropdown 下拉框', url: '' },
+                { id: 30104, label: 'DropTimes 下拉时间', url: '' },
+                { id: 30105, label: 'Input 输入框', url: '' }
+              ]
+            },
+            { id: 302, label: '数据组件' },
+            { id: 303, label: '导航组件' },
+            { id: 304, label: '业务组件' }
+          ]
+        },
+        {
+          id: 400,
+          label: '教程',
+          customIcon: iconUnfreeze(),
+          children: [
+            {
+              id: 401,
+              label: '页面布局',
+              children: [
+                { id: 40101, label: '添加标签页', url: '' },
+                { id: 40102, label: '标签页配置', url: '' }
+              ]
+            },
+            {
+              id: 402,
+              label: '查询功能',
+              children: [
+                { id: 40201, label: '添加查询页面', url: '' },
+                { id: 40202, label: '列表属性配置', url: '' },
+                { id: 40203, label: '通讯录查询', url: '' }
+              ]
+            },
+            {
+              id: 403,
+              label: '新增功能',
+              children: [
+                { id: 40301, label: '表单新增功能', url: '' },
+                { id: 40302, label: '表单数据验证', url: '' }
+              ]
+            },
+            {
+              id: 404,
+              label: '编辑功能',
+              children: [
+                { id: 40401, label: '开启编辑功能', url: '' },
+                { id: 40402, label: '保存表格数据', url: '' }
+              ]
+            }
+          ]
+        },
+        {
+          id: 500,
+          label: '规范',
+          customIcon: iconFile()
+        },
+        {
+          id: 600,
+          label: '性能',
+          customIcon: iconFile()
+        },
+        {
+          id: 700,
+          label: '案例',
+          customIcon: iconFile()
+        },
+        {
+          id: 800,
+          label: '更新日志',
+          customIcon: iconFile()
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/tree-menu/{text-wrap-composition-api.vue → show-filter-composition-api.vue}

@@ -1,15 +1,20 @@
 <template>
-  <tiny-tree-menu :data="treeData" wrap show-filter show-title></tiny-tree-menu>
+  <div>
+    <p>场景1：默认 可过滤 + 原生 title 属性提示</p>
+    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <p>场景2：不可过滤 + 不设置原生 title 属性</p>
+    <tiny-tree-menu :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
     id: 100,
-    label: '首页111111111111111111111111111111111111111'
+    label: '首页'
   },
   {
     id: 200,
@@ -32,10 +37,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -165,3 +166,14 @@ const treeData = ref([
   }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/tree-menu/show-filter.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test'
+
+test('不可搜索不显示 title', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+ 
+})