@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/select-wrapper/nest-grid-init-query-composition-api.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="demo-select">
+    <div>场景 1：下拉表格远程搜索初始化查询（单选）</div>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="radioValue1"
+      placeholder="请输入关键词"
+      clearable
+      :init-query="initQuery"
+      :remote-method="remoteMethod"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      remote
+      filterable
+      value-field="id"
+      :multiple="false"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 2：下拉表格远程搜索初始化查询（多选）</div>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="radioValue2"
+      placeholder="请输入关键词"
+      clearable
+      :init-query="initQuery"
+      :remote-method="remoteMethod"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      remote
+      filterable
+      value-field="id"
+      :multiple="true"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio2"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const allData = ref([])
+const radioValue1 = ref('001')
+const radioValue2 = ref(['001', '002'])
+
+const gridOpRadio = reactive({
+  data: [],
+  height: 300,
+  optimization: {
+    animat: true,
+    delayHover: 250,
+    scrollX: { gt: 20 },
+    scrollY: { gt: 20 }
+  },
+  columns: [
+    { type: 'radio', title: '' },
+    { field: 'area', title: '区域' },
+    { field: 'province', title: '省份' },
+    { field: 'city', title: '城市' }
+  ]
+})
+
+const gridOpRadio2 = reactive({
+  data: [],
+  height: 300,
+  optimization: {
+    animat: true,
+    delayHover: 250,
+    scrollX: { gt: 20 },
+    scrollY: { gt: 20 }
+  },
+  columns: [
+    { type: 'selection', title: '' },
+    { field: 'area', title: '区域' },
+    { field: 'province', title: '省份' },
+    { field: 'city', title: '城市' }
+  ]
+})
+
+allData.value = Array.from({ length: 10000 }, (item, index) => {
+  return {
+    id: '00' + index,
+    area: '华南区' + index,
+    province: '广东省' + index,
+    city: '广州市' + index
+  }
+})
+
+const initQuery = (value) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(allData.value)
+    }, 500)
+  })
+}
+
+const remoteMethod = (value) => {
+  const filterData = allData.value.filter((item) => {
+    return item.city.includes(value)
+  })
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(filterData)
+    }, 500)
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.demo-select {
+  .tiny-select {
+    width: 280px;
+  }
+}
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="demo-select">
+    <div>场景 1：下拉表格远程搜索初始化查询（单选）</div>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="radioValue1"
+      placeholder="请输入关键词"
+      clearable
+      :init-query="initQuery"
+      :remote-method="remoteMethod"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      remote
+      filterable
+      value-field="id"
+      :multiple="false"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 2：下拉表格远程搜索初始化查询（多选）</div>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="radioValue2"
+      placeholder="请输入关键词"
+      clearable
+      :init-query="initQuery"
+      :remote-method="remoteMethod"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      remote
+      filterable
+      value-field="id"
+      :multiple="true"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio2"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  created() {
+    this.allData = Array.from({ length: 10000 }, (item, index) => {
+      return {
+        id: '00' + index,
+        area: '华南区' + index,
+        province: '广东省' + index,
+        city: '广州市' + index
+      }
+    })
+  },
+  data() {
+    return {
+      allData: [],
+      radioValue1: '001',
+      radioValue2: ['001', '002'],
+      gridOpRadio: {
+        data: [],
+        height: 300,
+        optimization: {
+          animat: true,
+          delayHover: 250,
+          scrollX: { gt: 20 },
+          scrollY: { gt: 20 }
+        },
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域' },
+          { field: 'province', title: '省份' },
+          { field: 'city', title: '城市' }
+        ]
+      },
+      gridOpRadio2: {
+        data: [],
+        height: 300,
+        optimization: {
+          animat: true,
+          delayHover: 250,
+          scrollX: { gt: 20 },
+          scrollY: { gt: 20 }
+        },
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'area', title: '区域' },
+          { field: 'province', title: '省份' },
+          { field: 'city', title: '城市' }
+        ]
+      }
+    }
+  },
+  methods: {
+    initQuery(value) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(this.allData)
+        }, 500)
+      })
+    },
+    remoteMethod(value) {
+      let filterData = this.allData.filter((item) => {
+        return item.city.includes(value)
+      })
+
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(filterData)
+        }, 500)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-select {
+  .tiny-select {
+    width: 280px;
+  }
+}
+</style>

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

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <p>场景 1：单选，下拉表格远程搜索基础用法</p>
+    <br />
+    <tiny-select
+      v-model="value1"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 2：单选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 3：多选，下拉表格远程搜索基础用法</p>
+    <br />
+    <tiny-select
+      v-model="value3"
+      placeholder="请输入关键词"
+      multiple
+      render-type="grid"
+      reserve-keyword
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 4：多选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
+    <tiny-select
+      v-model="value4"
+      placeholder="请输入关键词"
+      multiple
+      reserve-keyword
+      filterable
+      remote
+      render-type="grid"
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const allData = Array.from({ length: 1000 }, (a, i) => {
+  return {
+    value: '00' + i,
+    province: '省份 ' + i,
+    city: '城市 ' + i,
+    area: '区域 ' + i,
+    label: `省 ${i}-市 ${i}`
+  }
+})
+const baseGridOp = {
+  data: [],
+  height: 300,
+  optimization: {
+    animat: true,
+    delayHover: 250,
+    scrollX: { gt: 20 },
+    scrollY: { gt: 20 }
+  }
+}
+const baseCols = [
+  { field: 'province', title: '省份' },
+  { field: 'city', title: '城市' },
+  { field: 'area', title: '区域' }
+]
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref([])
+const value4 = ref([])
+const gridOpRadio = {
+  ...baseGridOp,
+  columns: [{ type: 'radio', title: '' }, ...baseCols]
+}
+const gridOpMultiple = {
+  ...baseGridOp,
+  columns: [{ type: 'selection', title: '' }, ...baseCols]
+}
+
+const filter = (value) => {
+  return allData.filter((item) => item.city.includes(value))
+}
+
+const remoteMethod = (value) => {
+  const filterData = filter(value)
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(filterData)
+    }, 500)
+  })
+}
+</script>
+
+<style scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,136 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('下拉表格远程搜索', () => {
+  test('单选,下拉表格远程搜索基础用法', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select-wrapper#nest-grid-remote')
+
+    const wrap = page.locator('#nest-grid-remote')
+    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 = dropdown.locator('.tiny-input__suffix .tiny-base-select__caret')
+
+    await expect(suffixSvg).toBeHidden()
+    await expect(dropdown).toBeHidden()
+    await input.focus()
+    await input.fill(' ')
+    await input.press('Enter')
+    await page.waitForTimeout(200)
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+    await input.fill('1')
+    await input.press('Enter')
+    await page.waitForTimeout(200)
+    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+
+    const row1 = page.getByRole('row', { name: '省份 1 城市 1 区域' })
+    const row2 = page.getByRole('row', { name: '省份 2 城市 2 区域' })
+    await expect(row2).not.toBeVisible()
+    await row1.getByRole('cell').first().click()
+    await expect(row1).toHaveClass(/row__current/)
+    await expect(input).toHaveValue('省 1-市 1')
+
+    const row3 = page.getByRole('row', { name: '省份 10 城市 10 区域 10' })
+    await input.click()
+    await row3.getByRole('cell').first().click()
+    await expect(input).toHaveValue('省 10-市 10')
+  })
+
+  test('单选,下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select-wrapper#nest-grid-remote')
+
+    const wrap = page.locator('#nest-grid-remote')
+    const select = wrap.locator('.tiny-select').nth(1)
+    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')
+
+    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 page.getByRole('row', { name: '省份 2 城市 2 区域 2' }).getByRole('cell').first().click()
+    await expect(input).toHaveValue('省 2-市 2')
+    await input.click()
+    await expect(page.getByRole('row', { name: '省份 2 城市 2 区域 2' })).toHaveClass(/row__current/)
+    await page.getByRole('row', { name: '省份 6 城市 6 区域 6' }).getByRole('cell').first().click()
+    await expect(input).toHaveValue('省 6-市 6')
+    await input.click()
+    await expect(page.getByRole('row', { name: '省份 6 城市 6 区域 6' })).toHaveClass(/row__current/)
+    // 由于修改示例，增加了空格。所以1个空格匹配全部行， 2个空格才空数据
+    await input.fill(' ' + ' ')
+    await input.press('Enter')
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody tr').first()).toBeHidden()
+  })
+
+  test('多选,下拉表格远程搜索基础用法', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select-wrapper#nest-grid-remote')
+    const wrap = page.locator('#nest-grid-remote')
+    const select = wrap.locator('.tiny-select').nth(2)
+    const input = select.locator('.tiny-base-select__input')
+    const dropdown = page.locator('body > .tiny-select-dropdown')
+    const suffixSvg = select.locator('.tiny-input__suffix .tiny-base-select__caret').first()
+
+    // 下拉按钮不显示
+    await expect(suffixSvg).toBeHidden()
+    await expect(dropdown).toBeHidden()
+
+    await input.fill(' ' + ' ')
+    await input.press('Enter')
+    await page.waitForTimeout(1000)
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+    await input.fill(' ')
+    await input.press('Enter')
+    await page.waitForTimeout(1000)
+    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+    await page.getByRole('row', { name: '省份 0 城市 0 区域 0' }).getByRole('cell').first().click()
+    const tags = page.locator('.tiny-select .tiny-tag')
+    expect((await tags.all()).length).toEqual(1)
+    await expect(tags.first()).toContainText(/市 0/)
+    await page.getByRole('row', { name: '省份 1 城市 1 区域 1' }).getByRole('cell').first().click()
+    expect((await tags.all()).length).toEqual(2)
+    await expect(tags.first()).toContainText(/市 0/)
+    await expect(tags.nth(1)).toContainText(/市 1/)
+  })
+
+  test('多选,下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select-wrapper#nest-grid-remote')
+
+    const wrap = page.locator('#nest-grid-remote')
+    const select = wrap.locator('.tiny-select').nth(3)
+    const input = select.locator('.tiny-base-select__input')
+    const dropdown = page.locator('body > .tiny-select-dropdown')
+    const suffixSvg = select.locator('.tiny-input__suffix .tiny-base-select__caret').first()
+    const tag = select.locator('.tiny-tag')
+
+    await expect(suffixSvg).toBeVisible()
+    await expect(dropdown).toBeHidden()
+    await select.click()
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+
+    await dropdown.getByRole('row', { name: '省份 0 城市 0 区域 0' }).getByRole('cell').first().click()
+
+    expect((await tag.all()).length).toEqual(1)
+    await expect(tag.first()).toContainText(/市 0/)
+
+    await dropdown.getByRole('row', { name: '省份 1 城市 1 区域 1' }).getByRole('cell').first().click()
+    expect((await tag.all()).length).toEqual(2)
+    await expect(tag.first()).toContainText(/市 0/)
+    await expect(tag.nth(1)).toContainText(/市 1/)
+    await tag.nth(0).locator('.tiny-svg').click()
+    await tag.nth(0).locator('.tiny-svg').click()
+    await expect((await tag.all()).length).toEqual(0)
+    await input.fill(' ' + ' ')
+    await input.press('Enter')
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody tr').first()).toBeHidden()
+  })
+})

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

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <p>场景 1：单选，下拉表格远程搜索基础用法</p>
+    <br />
+    <tiny-select
+      v-model="value1"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 2：单选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 3：多选，下拉表格远程搜索基础用法</p>
+    <br />
+    <tiny-select
+      v-model="value3"
+      placeholder="请输入关键词"
+      multiple
+      render-type="grid"
+      reserve-keyword
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+    ></tiny-select>
+    <br /><br />
+
+    <p>场景 4：多选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
+    <tiny-select
+      v-model="value4"
+      placeholder="请输入关键词"
+      multiple
+      reserve-keyword
+      filterable
+      remote
+      render-type="grid"
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  created() {
+    this.allData = Array.from({ length: 1000 }, (a, i) => {
+      return {
+        value: '00' + i,
+        province: '省份 ' + i,
+        city: '城市 ' + i,
+        area: '区域 ' + i,
+        label: `省 ${i}-市 ${i}`
+      }
+    })
+  },
+  data() {
+    const baseGridOp = {
+      data: [],
+      height: 300,
+      optimization: {
+        animat: true,
+        delayHover: 250,
+        scrollX: { gt: 20 },
+        scrollY: { gt: 20 }
+      }
+    }
+    const baseCols = [
+      {
+        field: 'province',
+        title: '省份'
+      },
+      { field: 'city', title: '城市' },
+      {
+        field: 'area',
+        title: '区域'
+      }
+    ]
+
+    return {
+      allData: [],
+      value1: '',
+      value2: '',
+      value3: [],
+      value4: [],
+      gridOpRadio: {
+        ...baseGridOp,
+        columns: [{ type: 'radio', title: '' }, ...baseCols]
+      },
+      gridOpMultiple: {
+        ...baseGridOp,
+        columns: [{ type: 'selection', title: '' }, ...baseCols]
+      }
+    }
+  },
+  methods: {
+    remoteMethod(value) {
+      const filterData = this.filter(value)
+      console.log(filterData, value)
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(filterData)
+        }, 500)
+      })
+    },
+    filter(value) {
+      return this.allData.filter((item) => item.city.includes(value))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>