@opentiny/vue-docs 2.1.9 → 2.1.10

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

@@ -1,40 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('grid-filterable', async ({ page }) => {
-  await page.goto('select#nest-checkbox-grid-clearable')
-  const input = page.locator('#preview .tiny-input__inner')
-
-  await input.click()
-  await page.waitForTimeout(500)
-  const tr = page.locator('.tiny-select-dropdown .tiny-grid__body-wrapper .tiny-grid-body__row')
-  await expect(tr).toHaveCount(5)
-  await input.fill('深圳')
-  await input.press('Enter')
-  await page.waitForTimeout(500)
-  await expect(tr).toHaveCount(2)
-  await page.getByRole('row', { name: '华南区 广东省 深圳1' }).getByRole('cell').first().click()
-  await expect(input).toHaveValue('深圳1')
-  await input.click()
-  await page.waitForTimeout(500)
-  await expect(tr.filter({ hasText: '深圳1' })).toHaveClass(/row__current/)
-})
-
-test('grid-clearable', async ({ page }) => {
-  await page.goto('select#nest-checkbox-grid-clearable')
-  const input = page.locator('#preview .tiny-input__inner')
-  const suffix = page.locator('#preview .tiny-input__suffix')
-
-  await input.click()
-  await page.waitForTimeout(500)
-  const tr = page.locator('.tiny-select-dropdown .tiny-grid__body-wrapper .tiny-grid-body__row')
-  await expect(tr).toHaveCount(5)
-  await input.fill('深圳')
-  await input.press('Enter')
-  await page.waitForTimeout(500)
-  await expect(tr).toHaveCount(2)
-  await page.getByRole('row', { name: '华南区 广东省 深圳1' }).getByRole('cell').first().click()
-  await expect(input).toHaveValue('深圳1')
-  await input.hover()
-  await suffix.click()
-  await expect(input).toHaveValue('')
-})

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

@@ -1,64 +0,0 @@
-<template>
-  <div class="demo-select">
-    <tiny-select
-      v-model="treeValue"
-      value-field="id"
-      :multiple="true"
-      text-field="label"
-      render-type="tree"
-      :tree-op="treeOp"
-      placeholder="请选择"
-    ></tiny-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
-
-const treeValue = ref([1, 9])
-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'
-        }
-      ]
-    }
-  ]
-})
-</script>
-
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-}
-</style>

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

@@ -1,27 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('tree-multiple', async ({ page }) => {
-  await page.goto('select#nest-checkbox-tree')
-  const suffix = page.locator('#preview .tiny-input__suffix')
-  const select = page.locator('#preview .tiny-select')
-  const selectDropdown = page.locator('.tiny-select-dropdown')
-  const tag = select.locator('.tiny-tag')
-
-  await expect(tag).toHaveCount(2)
-  await suffix.click()
-  await page.waitForTimeout(500)
-  const treeNodes = selectDropdown.getByRole('treeitem')
-  const checkedTreeNodes = selectDropdown.locator('.tiny-tree-node.is-checked')
-
-  await page.waitForTimeout(500)
-  await expect(checkedTreeNodes).toHaveCount(4)
-  await expect(treeNodes).toHaveCount(7)
-  await page
-    .locator('div')
-    .filter({ hasText: /^一级 2$/ })
-    .locator('.tiny-checkbox')
-    .click()
-  await page.waitForTimeout(500)
-  await expect(checkedTreeNodes).toHaveCount(7)
-  await expect(tag).toHaveCount(7)
-})

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

@@ -1,72 +0,0 @@
-<template>
-  <div class="demo-select">
-    <tiny-select
-      v-model="treeRadio"
-      :filter-method="filter"
-      value-field="id"
-      clearable
-      filterable
-      text-field="label"
-      render-type="tree"
-      :tree-op="treeOp"
-      placeholder="请选择"
-    ></tiny-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
-
-const treeRadio = 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/nest-filterable-tree.spec.ts

@@ -1,30 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('filterable-tree', async ({ page }) => {
-  await page.goto('select#nest-filterable-tree')
-  const input = page.locator('#preview .tiny-input__inner')
-  const selectDropdown = page.locator('.tiny-select-dropdown')
-
-  await expect(input).toHaveValue('')
-  await expect(selectDropdown).toBeHidden()
-  await input.click()
-  await page.waitForTimeout(500)
-  const treeNodes = selectDropdown.getByRole('treeitem')
-  await expect(treeNodes).toHaveCount(7)
-  await input.fill('2-')
-  await input.press('Enter')
-  await page.waitForTimeout(500)
-  const hiddenTreeNodes = selectDropdown.locator('.tiny-tree-node.is-hidden')
-  await expect(hiddenTreeNodes).toHaveCount(4)
-  const checkedTreeNodes = selectDropdown.locator('.tiny-tree-node.is-checked')
-  await expect(checkedTreeNodes).toHaveCount(0)
-  await page.getByRole('treeitem', { name: '一级 2' }).locator('div').filter({ hasText: '一级 2' }).click()
-  await page.waitForTimeout(500)
-  await expect(selectDropdown).toBeHidden()
-  await page.waitForTimeout(1000)
-  await expect(input).toHaveValue('一级 2')
-  await input.click()
-  await page.waitForTimeout(1000)
-  await expect(checkedTreeNodes).toHaveCount(3)
-  await expect(page.locator('.is-current .tiny-tree-node__content')).toHaveText('二级 2-2')
-})

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

@@ -1,81 +0,0 @@
-<template>
-  <div class="demo-select">
-    <tiny-select
-      v-model="treeRadio"
-      :filter-method="filter"
-      value-field="id"
-      clearable
-      filterable
-      text-field="label"
-      render-type="tree"
-      :tree-op="treeOp"
-      placeholder="请选择"
-    ></tiny-select>
-  </div>
-</template>
-
-<script>
-import { Select } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select
-  },
-  data() {
-    return {
-      treeRadio: '',
-      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'
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  methods: {
-    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/nest-radio-grid-composition-api.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="demo-select">
-    <tiny-select
-      v-model="radioValue"
-      value-field="id"
-      :multiple="false"
-      text-field="city"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-      placeholder="请选择"
-    ></tiny-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
-
-const radioValue = ref('')
-const gridOpRadio = ref({
-  data: [
-    { id: '001', area: '华南区', province: '广东省', city: '广州市' },
-    { 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 }
-  ]
-})
-</script>
-
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-}
-</style>

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

@@ -1,19 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('radio-grid', async ({ page }) => {
-  await page.goto('select#nest-radio-grid')
-  const input = page.locator('#preview .tiny-input__inner')
-  const suffixSvg = await page.locator('#preview .tiny-select__caret').first()
-
-  await expect(suffixSvg).toHaveCount(1)
-  await expect(suffixSvg).toBeVisible()
-
-  await input.click()
-  await page.getByRole('row', { name: '华南区 广东省 广州市' }).getByRole('cell').first().click()
-  await page.waitForTimeout(1000)
-  await expect(input).toHaveValue('广州市')
-  await input.click()
-  await page.getByRole('row', { name: '华南区 广东省 深圳市' }).getByRole('cell').first().click()
-  await page.waitForTimeout(1000)
-  await expect(input).toHaveValue('深圳市')
-})

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

@@ -1,49 +0,0 @@
-<template>
-  <div class="demo-select">
-    <tiny-select
-      v-model="radioValue"
-      value-field="id"
-      :multiple="false"
-      text-field="city"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-      placeholder="请选择"
-    ></tiny-select>
-  </div>
-</template>
-
-<script>
-import { Select } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select
-  },
-  data() {
-    return {
-      radioValue: '',
-      gridOpRadio: {
-        data: [
-          { id: '001', area: '华南区', province: '广东省', city: '广州市' },
-          { 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 }
-        ]
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-}
-</style>

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

@@ -1,20 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('radio-tree', async ({ page }) => {
-  await page.goto('select#nest-radio-tree')
-  const input = page.locator('#preview .tiny-input__inner')
-  const suffixSvg = await page.locator('#preview .tiny-select__caret').first()
-
-  await expect(suffixSvg).toHaveCount(1)
-  await expect(suffixSvg).toBeVisible()
-  await expect(input).toHaveValue('三级 1-1-2')
-  await input.click()
-  await page.waitForTimeout(1000)
-  await expect(page.getByRole('treeitem', { name: '三级 1-1-2' })).toHaveClass(/is-current/)
-  await page.getByRole('treeitem', { name: '二级 2-1' }).locator('div').filter({ hasText: '二级 2-1' }).click()
-  await page.waitForTimeout(1000)
-  await expect(input).toHaveValue('二级 2-1')
-  await input.click()
-  await page.waitForTimeout(1000)
-  await expect(page.getByRole('treeitem', { name: '二级 2-1' })).toHaveClass(/is-current/)
-})

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

@@ -1,71 +0,0 @@
-<template>
-  <div class="demo-select">
-    <tiny-select
-      v-model="treeRadio"
-      value-field="id"
-      text-field="label"
-      render-type="tree"
-      :tree-op="treeOp"
-      placeholder="请选择"
-    ></tiny-select>
-  </div>
-</template>
-
-<script>
-import { Select } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select
-  },
-  data() {
-    return {
-      treeRadio: 10,
-      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'
-              }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-}
-</style>

package/demos/pc/app/select/no-match-text-composition-api.vue

@@ -1,19 +0,0 @@
-<template>
-  <tiny-select v-model="value" placeholder="请选择" filterable no-match-text="No Match">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
-
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
-])
-const value = ref('')
-</script>

package/demos/pc/app/select/no-match-text.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('no-match-text', async ({ page }) => {
-  await page.goto('select#no-match-text')
-  const input = page.locator('#preview .tiny-input__inner')
-  await input.click()
-  const listItems = page.locator('.tiny-select-dropdown__list').getByRole('listitem')
-  await expect((await listItems.all()).length).toEqual(5)
-  await expect(page.getByText('No Match')).toBeHidden()
-  await input.fill('1')
-  await input.press('Enter')
-  await expect(page.getByText('No Match')).toBeVisible()
-})

package/demos/pc/app/select/no-match-text.vue

@@ -1,28 +0,0 @@
-<template>
-  <tiny-select v-model="value" placeholder="请选择" filterable no-match-text="No Match">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script>
-import { Select, Option } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option
-  },
-  data() {
-    return {
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
-      ],
-      value: ''
-    }
-  }
-}
-</script>

package/demos/pc/app/select/option-group-disable-composition-api.vue

@@ -1,38 +0,0 @@
-<template>
-  <tiny-select v-model="value" placeholder="请选择" multiple>
-    <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="group.disabled">
-      <tiny-option
-        v-for="item in group.options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      ></tiny-option>
-    </tiny-option-group>
-  </tiny-select>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, OptionGroup as TinyOptionGroup } from '@opentiny/vue'
-
-const options3 = ref([
-  {
-    label: '热门城市',
-    disabled: true,
-    options: [
-      { value: 'Shanghai', label: '上海' },
-      { value: 'Beijing', label: '北京' }
-    ]
-  },
-  {
-    label: '城市名',
-    options: [
-      { value: 'Chengdu', label: '成都' },
-      { value: 'Shenzhen', label: '深圳' },
-      { value: 'Guangzhou', label: '广州' },
-      { value: 'Dalian', label: '大连' }
-    ]
-  }
-])
-const value = ref('')
-</script>

package/demos/pc/app/select/option-group-disable.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('option-group-disable', async ({ page }) => {
-  await page.goto('select#option-group-disable')
-  const select = page.locator('#preview .tiny-select')
-  await select.click()
-  const listitems = page.locator('.tiny-option')
-  await expect(listitems.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)
-  await expect(listitems.filter({ hasText: '北京' })).toHaveClass(/is-disabled/)
-})

package/demos/pc/app/select/option-group-disable.vue

@@ -1,48 +0,0 @@
-<template>
-  <tiny-select v-model="value" placeholder="请选择" multiple>
-    <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="group.disabled">
-      <tiny-option
-        v-for="item in group.options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      ></tiny-option>
-    </tiny-option-group>
-  </tiny-select>
-</template>
-
-<script>
-import { Select, Option, OptionGroup } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyOptionGroup: OptionGroup
-  },
-  data() {
-    return {
-      options3: [
-        {
-          label: '热门城市',
-          disabled: true,
-          options: [
-            { value: 'Shanghai', label: '上海' },
-            { value: 'Beijing', label: '北京' }
-          ]
-        },
-        {
-          label: '城市名',
-          options: [
-            { value: 'Chengdu', label: '成都' },
-            { value: 'Shenzhen', label: '深圳' },
-            { value: 'Guangzhou', label: '广州' },
-            { value: 'Dalian', label: '大连' }
-          ]
-        }
-      ],
-      value: ''
-    }
-  }
-}
-</script>