@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/select-wrapper/nest-grid.spec.ts

@@ -0,0 +1,95 @@
+import { test, expect } from '@playwright/test'
+
+test('嵌套表格（单选）', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-grid')
+
+  const wrap = page.locator('#nest-grid')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
+  const row = dropdown.getByRole('row')
+
+  await expect(suffixSvg).toHaveCount(1)
+  await expect(suffixSvg).toBeVisible()
+
+  await input.click()
+  await expect(dropdown).toBeVisible()
+  await expect(row).toHaveCount(6)
+
+  await row.nth(1).getByRole('cell').first().click()
+  await expect(input).toHaveValue('深圳 1')
+  await input.click()
+  await expect(row.filter({ hasText: '深圳 1' })).toHaveClass(/row__current/)
+})
+
+test('嵌套表格（多选）', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-grid')
+
+  const wrap = page.locator('#nest-grid')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
+  const row = dropdown.getByRole('row')
+  const tag = select.locator('.tiny-tag')
+  const currentRow = dropdown.locator('.row__selected')
+
+  await expect(tag).toHaveCount(0)
+  await suffixSvg.click()
+
+  await expect(row).toHaveCount(6)
+  await expect(currentRow).toHaveCount(0)
+  await expect(row.nth(0).getByRole('cell').first().locator('.icon-half-select')).toBeHidden()
+  await expect(row.nth(0).getByRole('cell').first().locator('.icon-checked-sur')).toBeHidden()
+
+  await row.nth(1).getByRole('cell').first().click()
+  await row.nth(2).getByRole('cell').first().click()
+  await row.nth(3).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(3)
+  await expect(currentRow).toHaveCount(3)
+  await expect(row.nth(0).getByRole('cell').first().locator('.icon-half-select')).toBeVisible()
+
+  await row.nth(0).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(5)
+  await expect(currentRow).toHaveCount(5)
+  await expect(row.nth(0).getByRole('cell').first().locator('.icon-checked-sur')).toBeVisible()
+
+  await row.nth(0).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(0)
+  await expect(currentRow).toHaveCount(0)
+  await expect(row.nth(0).getByRole('cell').first().locator('.icon-half-select')).toBeHidden()
+  await expect(row.nth(0).getByRole('cell').first().locator('.icon-checked-sur')).toBeHidden()
+})
+
+test('嵌套表格 + 可搜索 + 可清除', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-grid')
+
+  const wrap = page.locator('#nest-grid')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
+  const row = dropdown.getByRole('row')
+
+  await input.click()
+
+  // 可搜索
+  await expect(row).toHaveCount(6)
+  await input.fill('深圳')
+  await input.press('Enter')
+  await page.waitForTimeout(200)
+  await expect(row).toHaveCount(3)
+  await row.nth(1).getByRole('cell').first().click()
+  await expect(input).toHaveValue('深圳 1')
+  await input.click()
+  await page.waitForTimeout(200)
+  await expect(row.filter({ hasText: '深圳 1' })).toHaveClass(/row__current/)
+  await page.waitForTimeout(200)
+  // 可清除
+  await input.hover()
+  await suffixSvg.nth(0).click()
+  await expect(input).toHaveValue('')
+})

package/demos/pc/app/select-wrapper/nest-grid.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="demo-select">
+    <p>场景 1：嵌套表格（单选）</p>
+    <br />
+    <tiny-select
+      v-model="value1"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpSingle"
+    ></tiny-select>
+    <br /><br />
+    <p>场景 2：嵌套表格（多选）</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      multiple
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpMulti"
+    ></tiny-select>
+    <br /><br />
+    <p>场景 3：嵌套表格 + 可搜索 + 可清除</p>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="value3"
+      filterable
+      :filter-method="filter"
+      clearable
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpSingle"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  methods: {
+    filter(value) {
+      if (!value) {
+        return this.gridOpSingle.data
+      }
+
+      return this.gridOpSingle.data.filter((item) => {
+        return item.city.includes(value)
+      })
+    }
+  },
+  data() {
+    return {
+      value1: '',
+      value2: [],
+      value3: '',
+      gridOpSingle: {
+        data: [
+          { id: '001', area: '华南区', province: '广东省', city: '深圳 1' },
+          { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+          { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+          { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+          { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+        ],
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      },
+      gridOpMulti: {
+        data: [
+          { id: '001', area: '华南区', province: '广东省', city: '深圳 1' },
+          { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+          { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+          { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+          { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+        ],
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/nest-radio-grid-much-data-composition-api.vue

@@ -0,0 +1,43 @@
+<template>
+  <tiny-select v-model="radioValue" value-field="id" text-field="city" render-type="grid" :grid-op="gridOpRadio">
+  </tiny-select>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const radioValue = ref('')
+const gridOpRadio = ref({
+  height: 200,
+  data: [],
+  columns: [
+    { type: 'radio', title: '' },
+    { field: 'area', title: '区域', width: 90 },
+    { field: 'province', title: '省份', width: 60 },
+    { field: 'city', title: '城市', width: 60 }
+  ]
+})
+
+onMounted(() => {
+  const arr = []
+
+  for (let i = 0; i <= 800; i++) {
+    const obj = {
+      id: i,
+      area: '华南区 ' + i,
+      province: '广东省',
+      city: '广州市'
+    }
+    arr.push(obj)
+  }
+
+  gridOpRadio.value.data = arr
+})
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/nest-radio-grid-much-data.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+test('下拉表格大数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-radio-grid-much-data')
+
+  const wrap = page.locator('#nest-radio-grid-much-data')
+  const select = wrap.locator('.tiny-select')
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-input__suffix .tiny-base-select__caret')
+  const row = dropdown.getByRole('row')
+
+  await expect(suffixSvg).toHaveCount(1)
+  await expect(suffixSvg).toBeVisible()
+  await expect(dropdown).toBeHidden()
+
+  await input.click()
+  await expect(dropdown).toBeVisible()
+  await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+  await row.nth(1).getByRole('cell').first().click()
+  await expect(input).toHaveValue('广州市')
+
+  await input.click()
+  await page.waitForTimeout(200)
+  await expect(row.nth(1)).toHaveClass(/row__current/)
+  await expect(row).toHaveCount(8)
+  await expect(page.getByRole('row', { name: '华南区 12 广东省 广州市' })).toBeHidden()
+  await row.nth(5).scrollIntoViewIfNeeded()
+  await expect(row).toHaveCount(8)
+  await row.nth(5).scrollIntoViewIfNeeded()
+  await expect(row).toHaveCount(8)
+  await row.nth(5).scrollIntoViewIfNeeded()
+  await expect(row).toHaveCount(8)
+})

package/demos/pc/app/select-wrapper/nest-radio-grid-much-data.vue

@@ -0,0 +1,50 @@
+<template>
+  <tiny-select v-model="radioValue" value-field="id" text-field="city" render-type="grid" :grid-op="gridOpRadio">
+  </tiny-select>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      radioValue: '',
+      gridOpRadio: {
+        height: 200,
+        data: [],
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      }
+    }
+  },
+  mounted() {
+    const arr = []
+
+    for (let i = 0; i <= 800; i++) {
+      const obj = {
+        id: i,
+        area: '华南区 ' + i,
+        province: '广东省',
+        city: '广州市'
+      }
+      arr.push(obj)
+    }
+
+    this.gridOpRadio.data = arr
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="demo-select">
+    <p>场景 1：下拉树单选</p>
+    <br />
+    <tiny-select
+      v-model="treeValue1"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <br /><br />
+    <p>场景 2：下拉树多选</p>
+    <br />
+    <tiny-select
+      v-model="treeValue2"
+      multiple
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <br /><br />
+    <p>场景 3：下拉树可搜索</p>
+    <br />
+    <tiny-select
+      v-model="treeValue3"
+      filterable
+      :filter-method="filter"
+      clearable
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const treeValue1 = ref(10)
+const treeValue2 = ref([9, 6])
+const treeValue3 = ref('')
+
+const treeOp = ref({
+  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'
+        }
+      ]
+    }
+  ]
+})
+
+const filter = (value, data) => {
+  if (!value) return true
+
+  return data.label.includes(value)
+}
+</script>
+
+<style scoped>
+.demo-select .tiny-select {
+  width: 270px;
+}
+</style>

package/demos/pc/app/select-wrapper/nest-tree.spec.ts

@@ -0,0 +1,84 @@
+import { test, expect } from '@playwright/test'
+
+test('下拉树单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-tree')
+
+  const wrap = page.locator('#nest-tree')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-input__suffix .tiny-base-select__caret')
+  const treeNode = dropdown.locator('.tiny-tree-node')
+
+  await expect(suffixSvg).toHaveCount(1)
+  await expect(suffixSvg).toBeVisible()
+  await expect(input).toHaveValue('三级 1-1-2')
+
+  await input.click()
+  await expect(treeNode.filter({ hasText: /^三级 1-1-2$/ })).toHaveClass(/is-current/)
+
+  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/)
+})
+
+test('下拉树多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-tree')
+
+  const wrap = page.locator('#nest-tree')
+  const select = wrap.locator('.tiny-select').nth(1)
+
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-input__suffix .tiny-base-select__caret')
+  const treeNode = dropdown.locator('.tiny-tree-node')
+  const checkedTreeNodes = dropdown.locator('.tiny-tree-node.is-checked')
+  const tag = select.locator('.tiny-tag')
+
+  await expect(tag).toHaveCount(2)
+
+  await suffixSvg.click()
+  await expect(checkedTreeNodes).toHaveCount(2)
+  await expect(treeNode).toHaveCount(7)
+  await page
+    .locator('div')
+    .filter({ hasText: /^一级 2$/ })
+    .locator('.tiny-checkbox')
+    .click()
+
+  await expect(checkedTreeNodes).toHaveCount(4)
+  await expect(tag).toHaveCount(4)
+})
+
+test('下拉树可搜索', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-tree')
+
+  const wrap = page.locator('#nest-tree')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const treeNode = dropdown.locator('.tiny-tree-node')
+  const hiddenTreeNodes = dropdown.locator('.tiny-tree-node.is-hidden')
+  const checkedTreeNodes = dropdown.locator('.tiny-tree-node.is-current')
+
+  await expect(input).toHaveValue('')
+  await expect(dropdown).toBeHidden()
+
+  await input.click()
+  await expect(treeNode).toHaveCount(7)
+
+  await input.fill('2-')
+  await input.press('Enter')
+  await expect(hiddenTreeNodes).toHaveCount(4)
+  await expect(checkedTreeNodes).toHaveCount(0)
+
+  await treeNode.getByText(/^一级 2$/).click()
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('一级 2')
+
+  await input.click()
+  await expect(checkedTreeNodes.locator('.tiny-tree-node__content').nth(0)).toHaveText(/^一级 2$/)
+})

package/demos/pc/app/select-wrapper/nest-tree.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <div>场景 1：下拉树（单选）</div>
+    <br />
+    <tiny-select
+      v-model="treeValue1"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 2：下拉树（多选）</div>
+    <br />
+    <tiny-select
+      v-model="treeValue2"
+      multiple
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 3：下拉树可搜索</div>
+    <br />
+    <tiny-select
+      v-model="treeValue3"
+      filterable
+      :filter-method="filter"
+      clearable
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 4：下拉树懒加载（单选）</div>
+    <br />
+    <tiny-select
+      v-model="treeValue4"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOpLazy"
+      placeholder="请选择"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 5：下拉树懒加载（多选）</div>
+    <br />
+    <tiny-select
+      v-model="treeValue5"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOpLazy"
+      multiple
+      placeholder="请选择"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      treeValue1: 10,
+      treeValue2: [1, 9],
+      treeValue3: '',
+      treeValue4: 3,
+      treeValue5: [1],
+      treeOp: {
+        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'
+              }
+            ]
+          }
+        ]
+      },
+      treeOpLazy: {
+        lazy: true,
+        load(node, resolve) {
+          if (node.level === 0) {
+            return resolve([
+              {
+                id: 3,
+                label: '一级 3'
+              }
+            ])
+          }
+          if (node.level > 1) return resolve([])
+
+          setTimeout(() => {
+            const data = [
+              {
+                id: 1,
+                label: '一级 1'
+              },
+              {
+                id: 2,
+                label: '一级 2',
+                isLeaf: true
+              }
+            ]
+
+            resolve(data)
+          }, 500)
+        }
+      }
+    }
+  },
+  methods: {
+    filter(value, data) {
+      if (!value) return true
+
+      return data.label.includes(value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-select {
+  width: 270px;
+}
+</style>