@opentiny/vue-docs 2.1.10 → 2.2.0

package/demos/pc/app/tree/check-on-click-node.vue

@@ -1,111 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="getCheckedKeys" title="获取选中数据的 keys">获取选中数据的 keys</tiny-button>
-    <tiny-button @click="getCheckedNodes" title="获取选中标识的数据">获取选中标识的数据</tiny-button>{{ checkedNodes }}
-    <tiny-button @click="getHalfCheckedKeys" title="获取半勾选数据的 keys">获取半勾选数据的 keys</tiny-button>
-    <tiny-button @click="getHalfCheckedNodes" title="获取半勾选的数据">获取半勾选的数据</tiny-button
-    >{{ halfCheckedNodes }}
-    <tiny-tree
-      :data="data"
-      default-expand-all
-      show-checkbox
-      ref="tree"
-      node-key="id"
-      :check-on-click-node="true"
-      icon-trigger-click-node
-      @node-click="nodeClick"
-    ></tiny-tree>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Tree, Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTree: Tree,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      data: [
-        {
-          id: 1,
-          label: '一级 1',
-          children: [
-            {
-              id: 4,
-              label: '二级 1-1',
-              children: [
-                {
-                  id: 9,
-                  label: '三级 1-1-1'
-                },
-                {
-                  id: 10,
-                  label: '三级 1-1-2'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 2,
-          label: '一级 2',
-          children: [
-            {
-              id: 5,
-              label: '二级 2-1'
-            },
-            {
-              id: 6,
-              label: '二级 2-2'
-            }
-          ]
-        },
-        {
-          id: 3,
-          label: '一级 3',
-          children: [
-            {
-              id: 7,
-              label: '二级 3-1'
-            },
-            {
-              id: 8,
-              label: '二级 3-2'
-            }
-          ]
-        }
-      ],
-      checkedNodes: [],
-      halfCheckedNodes: []
-    }
-  },
-  methods: {
-    getCheckedKeys() {
-      Modal.alert({
-        message: JSON.stringify(this.$refs.tree.getCheckedKeys()),
-        lockView: false,
-        mask: false
-      })
-    },
-    getCheckedNodes() {
-      this.checkedNodes = this.$refs.tree.getCheckedNodes()
-    },
-    getHalfCheckedKeys() {
-      Modal.alert({
-        message: JSON.stringify(this.$refs.tree.getHalfCheckedKeys()),
-        lockView: false,
-        mask: false
-      })
-    },
-    getHalfCheckedNodes() {
-      this.halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes()
-    },
-    nodeClick() {
-      Modal.message('点击节点后的事件')
-    }
-  }
-}
-</script>

package/demos/pc/app/tree/check-strictly-composition-api.vue

@@ -1,59 +0,0 @@
-<template>
-  <tiny-tree :data="data5" default-expand-all show-checkbox check-strictly></tiny-tree>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
-
-const data5 = ref([
-  {
-    id: 1,
-    label: '一级 1',
-    children: [
-      {
-        id: 4,
-        label: '二级 1-1',
-        children: [
-          {
-            id: 9,
-            label: '三级 1-1-1'
-          },
-          {
-            id: 10,
-            label: '三级 1-1-2'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 2,
-    label: '一级 2',
-    children: [
-      {
-        id: 5,
-        label: '二级 2-1'
-      },
-      {
-        id: 6,
-        label: '二级 2-2'
-      }
-    ]
-  },
-  {
-    id: 3,
-    label: '一级 3',
-    children: [
-      {
-        id: 7,
-        label: '二级 3-1'
-      },
-      {
-        id: 8,
-        label: '二级 3-2'
-      }
-    ]
-  }
-])
-</script>

package/demos/pc/app/tree/check-strictly.spec.ts

@@ -1,48 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('父子节点互不关联', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#check-strictly')
-
-  const checkedClass = /is-checked/
-  const tree = page.locator('#preview .tiny-tree')
-  const nodes = tree.locator('.tiny-tree-node')
-  const parantNode1 = nodes.nth(1)
-  const childNodes1 = [
-    nodes.nth(2).locator('.tiny-checkbox__input').first(),
-    nodes.nth(3).locator('.tiny-checkbox__input').first()
-  ]
-  const parantNode2 = nodes.nth(4)
-  const childNodes2 = [
-    page.getByRole('treeitem', { name: '二级 2-1' }).first().locator('.tiny-checkbox__input').nth(1),
-    page.getByRole('treeitem', { name: '二级 2-2' }).first().locator('.tiny-checkbox__input').nth(1)
-  ]
-  const parantNode3 = nodes.nth(7)
-  const childNodes3 = [page.getByRole('treeitem', { name: '二级 3-1' }).first().locator('.tiny-checkbox__input').nth(1)]
-
-  // 子节点选中不影响父节点
-  await childNodes1[0].click()
-  await childNodes1[1].click()
-  await expect(parantNode1).not.toHaveClass(checkedClass)
-
-  // 子节点取消选中, 不影响父节点
-  await parantNode1.locator('.tiny-checkbox__input').first().click()
-  await childNodes1[0].click()
-  await childNodes1[1].click()
-  await expect(parantNode1).toHaveClass(checkedClass)
-
-  // 父节点选中, 子节点不变
-  await parantNode2.locator('.tiny-checkbox__input').first().click()
-  await expect(childNodes2[0]).not.toHaveClass(checkedClass)
-  await expect(childNodes2[1]).not.toHaveClass(checkedClass)
-  await childNodes3[0].click()
-  await parantNode3.click()
-  await expect(childNodes3[0]).toHaveClass(checkedClass)
-
-  // 父节点取消选中, 子节点不变
-  await childNodes1[0].click()
-  await childNodes1[1].click()
-  await parantNode1.click()
-  await expect(childNodes1[0]).toHaveClass(checkedClass)
-  await expect(childNodes1[1]).toHaveClass(checkedClass)
-})

package/demos/pc/app/tree/check-strictly.vue

@@ -1,67 +0,0 @@
-<template>
-  <tiny-tree :data="data5" default-expand-all show-checkbox check-strictly></tiny-tree>
-</template>
-
-<script lang="jsx">
-import { Tree } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTree: Tree
-  },
-  data() {
-    return {
-      data5: [
-        {
-          id: 1,
-          label: '一级 1',
-          children: [
-            {
-              id: 4,
-              label: '二级 1-1',
-              children: [
-                {
-                  id: 9,
-                  label: '三级 1-1-1'
-                },
-                {
-                  id: 10,
-                  label: '三级 1-1-2'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 2,
-          label: '一级 2',
-          children: [
-            {
-              id: 5,
-              label: '二级 2-1'
-            },
-            {
-              id: 6,
-              label: '二级 2-2'
-            }
-          ]
-        },
-        {
-          id: 3,
-          label: '一级 3',
-          children: [
-            {
-              id: 7,
-              label: '二级 3-1'
-            },
-            {
-              id: 8,
-              label: '二级 3-2'
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/app/tree/current-node-key-composition-api.vue

@@ -1,59 +0,0 @@
-<template>
-  <tiny-tree :data="data5" default-expand-all node-key="id" :current-node-key="2"></tiny-tree>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
-
-const data5 = ref([
-  {
-    id: 1,
-    label: '一级 1',
-    children: [
-      {
-        id: 4,
-        label: '二级 1-1',
-        children: [
-          {
-            id: 9,
-            label: '三级 1-1-1'
-          },
-          {
-            id: 10,
-            label: '三级 1-1-2'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 2,
-    label: '一级 2',
-    children: [
-      {
-        id: 5,
-        label: '二级 2-1'
-      },
-      {
-        id: 6,
-        label: '二级 2-2'
-      }
-    ]
-  },
-  {
-    id: 3,
-    label: '一级 3',
-    children: [
-      {
-        id: 7,
-        label: '二级 3-1'
-      },
-      {
-        id: 8,
-        label: '二级 3-2'
-      }
-    ]
-  }
-])
-</script>

package/demos/pc/app/tree/current-node-key.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('当前选中节点标志', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#current-node-key')
-
-  const selectedNodeClass = /is-current/
-  const tree = page.locator('#preview .tiny-tree')
-  await expect(page.getByRole('treeitem', { name: '一级 2' }).first()).toHaveClass(selectedNodeClass)
-  await expect(page.getByRole('treeitem', { name: '一级 1' }).first()).not.toHaveClass(selectedNodeClass)
-  await expect(tree.locator('.tiny-tree-node').filter({ hasText: '二级 2-1' }).nth(1)).not.toHaveClass(
-    selectedNodeClass
-  )
-  await expect(page.getByRole('treeitem', { name: '二级 3-2' }).first()).not.toHaveClass(selectedNodeClass)
-})

package/demos/pc/app/tree/current-node-key.vue

@@ -1,67 +0,0 @@
-<template>
-  <tiny-tree :data="data5" default-expand-all node-key="id" :current-node-key="2"></tiny-tree>
-</template>
-
-<script lang="jsx">
-import { Tree } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTree: Tree
-  },
-  data() {
-    return {
-      data5: [
-        {
-          id: 1,
-          label: '一级 1',
-          children: [
-            {
-              id: 4,
-              label: '二级 1-1',
-              children: [
-                {
-                  id: 9,
-                  label: '三级 1-1-1'
-                },
-                {
-                  id: 10,
-                  label: '三级 1-1-2'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 2,
-          label: '一级 2',
-          children: [
-            {
-              id: 5,
-              label: '二级 2-1'
-            },
-            {
-              id: 6,
-              label: '二级 2-2'
-            }
-          ]
-        },
-        {
-          id: 3,
-          label: '一级 3',
-          children: [
-            {
-              id: 7,
-              label: '二级 3-1'
-            },
-            {
-              id: 8,
-              label: '二级 3-2'
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/app/tree/custom-empty-text-composition-api.vue

@@ -1,14 +0,0 @@
-<template>
-  <tiny-tree :data="data">
-    <template #empty>
-      <span>没有提供有效数据</span>
-    </template>
-  </tiny-tree>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
-
-const data = ref([])
-</script>

package/demos/pc/app/tree/custom-empty-text.spec.ts

@@ -1,9 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义空数据文本', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#custom-empty-text')
-
-  const emptyText = '没有提供有效数据'
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]')).toHaveText(emptyText)
-})

package/demos/pc/app/tree/custom-empty-text.vue

@@ -1,22 +0,0 @@
-<template>
-  <tiny-tree :data="data">
-    <template #empty>
-      <span>没有提供有效数据</span>
-    </template>
-  </tiny-tree>
-</template>
-
-<script lang="jsx">
-import { Tree } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTree: Tree
-  },
-  data() {
-    return {
-      data: []
-    }
-  }
-}
-</script>

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

@@ -1,61 +0,0 @@
-<template>
-  <tiny-tree :data="data5" show-checkbox default-expand-all :icon="IconRightO"></tiny-tree>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
-import { iconRightO } from '@opentiny/vue-icon'
-
-const IconRightO = iconRightO()
-const data5 = ref([
-  {
-    id: 1,
-    label: '一级 1',
-    children: [
-      {
-        id: 4,
-        label: '二级 1-1',
-        children: [
-          {
-            id: 9,
-            label: '三级 1-1-1'
-          },
-          {
-            id: 10,
-            label: '三级 1-1-2'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 2,
-    label: '一级 2',
-    children: [
-      {
-        id: 5,
-        label: '二级 2-1'
-      },
-      {
-        id: 6,
-        label: '二级 2-2'
-      }
-    ]
-  },
-  {
-    id: 3,
-    label: '一级 3',
-    children: [
-      {
-        id: 7,
-        label: '二级 3-1'
-      },
-      {
-        id: 8,
-        label: '二级 3-2'
-      }
-    ]
-  }
-])
-</script>

package/demos/pc/app/tree/custom-node-icon.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义展开折叠图标', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#custom-node-icon')
-
-  await expect(
-    page.getByRole('treeitem', { name: '二级 1-1' }).locator('.tree-node-icon .expanded').first()
-  ).toBeVisible()
-  await page
-    .locator('div')
-    .filter({ hasText: /^一级 2$/ })
-    .first()
-    .click()
-  await expect(page.getByRole('treeitem', { name: '一级 2' }).locator('.tree-node-icon').first()).not.toHaveClass(
-    /expanded/
-  )
-})

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

@@ -1,69 +0,0 @@
-<template>
-  <tiny-tree :data="data5" show-checkbox default-expand-all :icon="IconRightO"></tiny-tree>
-</template>
-
-<script lang="jsx">
-import { Tree } from '@opentiny/vue'
-import { IconRightO } from '@opentiny/vue-icon'
-
-export default {
-  components: {
-    TinyTree: Tree
-  },
-  data() {
-    return {
-      IconRightO: IconRightO(),
-      data5: [
-        {
-          id: 1,
-          label: '一级 1',
-          children: [
-            {
-              id: 4,
-              label: '二级 1-1',
-              children: [
-                {
-                  id: 9,
-                  label: '三级 1-1-1'
-                },
-                {
-                  id: 10,
-                  label: '三级 1-1-2'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 2,
-          label: '一级 2',
-          children: [
-            {
-              id: 5,
-              label: '二级 2-1'
-            },
-            {
-              id: 6,
-              label: '二级 2-2'
-            }
-          ]
-        },
-        {
-          id: 3,
-          label: '一级 3',
-          children: [
-            {
-              id: 7,
-              label: '二级 3-1'
-            },
-            {
-              id: 8,
-              label: '二级 3-2'
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/app/tree/data-source-composition-api.vue

@@ -1,59 +0,0 @@
-<template>
-  <tiny-tree :data="data5"></tiny-tree>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
-
-const data5 = ref([
-  {
-    id: 1,
-    label: '一级 1',
-    children: [
-      {
-        id: 4,
-        label: '二级 1-1',
-        children: [
-          {
-            id: 9,
-            label: '三级 1-1-1'
-          },
-          {
-            id: 10,
-            label: '三级 1-1-2'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 2,
-    label: '一级 2',
-    children: [
-      {
-        id: 5,
-        label: '二级 2-1'
-      },
-      {
-        id: 6,
-        label: '二级 2-2'
-      }
-    ]
-  },
-  {
-    id: 3,
-    label: '一级 3',
-    children: [
-      {
-        id: 7,
-        label: '二级 3-1'
-      },
-      {
-        id: 8,
-        label: '二级 3-2'
-      }
-    ]
-  }
-])
-</script>

package/demos/pc/app/tree/data-source.spec.ts

@@ -1,14 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试数据源是否正常显示', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#data-source')
-
-  const tree = page.locator('#preview .tiny-tree')
-  await expect(tree.locator('.tiny-tree-node').first()).toHaveText('一级 1')
-  await tree.locator('.tiny-tree-node').first().click()
-  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveText('二级 1-1')
-  await tree.locator('.tiny-tree-node').nth(1).click()
-  await expect(tree.locator('.tiny-tree-node').nth(2)).toHaveText('三级 1-1-1')
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[3]/div')).toHaveText('一级 3')
-})