@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,119 @@
+<template>
+  <div class="demo-select">
+    <div>场景 1：下拉表格远程搜索初始化查询（单选）</div>
+    <br />
+    <tiny-grid-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"
+      text-field="city"
+      :grid-op="gridOpRadio"
+    ></tiny-grid-select>
+    <br />
+    <br />
+    <div>场景 2：下拉表格远程搜索初始化查询（多选）</div>
+    <br />
+    <tiny-grid-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"
+      text-field="city"
+      multiple
+      :grid-op="gridOpRadio2"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TinyGridSelect } from '@opentiny/vue'
+
+const radioValue1 = ref('001')
+const radioValue2 = ref(['001', '002'])
+
+const allData = Array.from({ length: 10000 }, (item, index) => {
+  return {
+    id: '00' + index,
+    area: '华南区' + index,
+    province: '广东省' + index,
+    city: '广州市' + index
+  }
+})
+
+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: '城市' }
+  ]
+})
+
+const initQuery = (value) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(allData)
+    }, 500)
+  })
+}
+
+const remoteMethod = (value) => {
+  let filterData = allData.filter((item) => {
+    return item.city.includes(value)
+  })
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(filterData)
+    }, 500)
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.demo-select {
+  .tiny-grid-select {
+    width: 280px;
+  }
+}
+</style>
+

package/demos/pc/app/grid-select/init-query.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test'
+
+test('测试下拉表格初始化查询', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-select#init-query')
+
+  const wrap = page.locator('#init-query')
+  const select = wrap.locator('.tiny-grid-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const rows = dropdown.getByRole('row')
+
+  // 选中广州市1
+  await page.waitForTimeout(1000)
+  await expect(input).toHaveValue('广州市1')
+
+  await input.click()
+  await expect(dropdown).toBeVisible()
+  await page.waitForTimeout(1000)
+
+  // 选中广州市0
+  await rows.nth(1).getByRole('cell').nth(0).click()
+  await expect(input).toHaveValue('广州市0')
+
+  // 选中华南区0
+  await page.getByRole('textbox').nth(2).click()
+  await page.waitForTimeout(1000)
+  await page.getByRole('row', { name: '华南区0 广东省0 广州市' }).locator('path').first().click()
+  await expect(page.getByText('广州市1广州市2广州市')).toBeVisible()
+})

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

@@ -0,0 +1,127 @@
+<template>
+  <div id="init-query" class="demo-select">
+    <div>场景 1：下拉表格远程搜索初始化查询（单选）</div>
+    <br />
+    <tiny-grid-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"
+      text-field="city"
+      :grid-op="gridOpRadio"
+    ></tiny-grid-select>
+    <br />
+    <br />
+    <div>场景 2：下拉表格远程搜索初始化查询（多选）</div>
+    <br />
+    <tiny-grid-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"
+      text-field="city"
+      multiple
+      :grid-op="gridOpRadio2"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  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-grid-select {
+    width: 280px;
+  }
+}
+</style>
+

package/demos/pc/app/grid-select/radio-bigdata-composition-api.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="radio-bigdata">
+    <tiny-grid-select
+      v-model="value"
+      text-field="city"
+      value-field="id"
+      :grid-op="gridOp"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { TinyGridSelect } from '@opentiny/vue'
+
+const value = ref('')
+const gridOp = reactive({
+  height: 220,
+  data: [],
+  columns: [
+    { type: 'radio', width: 50 },
+    { field: 'area', title: '区域', width: 120 },
+    { field: 'province', title: '省份' },
+    { field: 'city', title: '城市' }
+  ]
+})
+
+onMounted(() => {
+  gridOp.data = Array.from({ length: 800 }, (item, index) => ({
+    id: `ID_${index}`,
+    area: `华南区 ${index}`,
+    province: '广东省',
+    city: `广州市 ${index}`
+  }))
+  window.gridSelectRadioBigData = gridOp.data.length
+})
+</script>
+
+<style scoped>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>
+

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

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('grid-select 大量数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-select#radio-bigdata')
+
+  await page.waitForFunction(() => window.gridSelectRadioBigData === 800)
+
+  const select = page.locator('#radio-bigdata .tiny-grid-select')
+  const input = select.locator('.tiny-input__inner')
+
+  await input.click()
+
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const rows = dropdown.getByRole('row')
+
+  await rows.nth(1).getByRole('cell').first().click()
+  await expect(input).toHaveValue('广州市 0')
+})

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

@@ -0,0 +1,52 @@
+<template>
+  <div id="radio-bigdata">
+    <tiny-grid-select
+      v-model="value"
+      text-field="city"
+      value-field="id"
+      :grid-op="gridOp"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  data() {
+    return {
+      value: '',
+      gridOp: {
+        height: 220,
+        data: [],
+        columns: [
+          { type: 'radio', width: 50 },
+          { field: 'area', title: '区域', width: 120 },
+          { field: 'province', title: '省份' },
+          { field: 'city', title: '城市' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    const data = Array.from({ length: 800 }, (item, index) => ({
+      id: `ID_${index}`,
+      area: `华南区 ${index}`,
+      province: '广东省',
+      city: `广州市 ${index}`
+    }))
+    this.gridOp.data = data
+    window.gridSelectRadioBigData = data.length
+  }
+}
+</script>
+
+<style scoped>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>
+

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

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test'
+
+test('grid-select 远程搜索', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-select#remote')
+
+  const wrap = page.locator('#remote')
+  const select = wrap.locator('.tiny-grid-select').first()
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+
+  await input.click()
+  await page.waitForTimeout(1000)
+  await expect(dropdown).toBeVisible()
+
+  await input.fill('10')
+  await input.press('Enter')
+  await page.waitForTimeout(1000)
+
+  // 选中城市10
+  await page.getByRole('row', { name: '区域10 省份10 城市' }).getByRole('cell').first().click()
+  await expect(input).toHaveValue('省10-市10')
+})

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="remote">
     <p>场景 1：单选</p>
     <br />
     <tiny-grid-select
@@ -18,6 +18,7 @@
       multiple
       filterable
       remote
+      reserve-keyword
       :remote-method="remoteMethod"
     ></tiny-grid-select>
   </div>

package/demos/pc/app/grid-select/webdoc/grid-select.js

@@ -1,74 +1,93 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   meta: {
-    experimental: '3.20.0'
+    experimental: '3.27.0'
   },
   demos: [
     {
       demoId: 'basic-usage',
       name: {
-        'zh-CN': '基本用法',
+        'zh-CN': '基本下拉表格',
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          '<p>最基础的用法，通过 <code>grid-op</code> 设置下拉表格的数据源，<code>v-model</code> 设置绑定值。</p>',
-        'en-US': ''
+        'zh-CN': '<p>通过 <code>grid-op</code> 设置表格列与数据，<code>v-model</code> 绑定选中值。</p>',
+        'en-US': '<p>Configure the internal grid via <code>grid-op</code> and bind the selection with <code>v-model</code>.</p>'
       },
       codeFiles: ['basic-usage.vue']
     },
     {
-      demoId: 'multiple',
+      demoId: 'config',
       name: {
-        'zh-CN': '多选',
-        'en-US': 'Multiple'
+        'zh-CN': '禁用选项',
+        'en-US': 'Disable option'
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组，默认选中值会以标签形式展示。</p>',
-        'en-US': ''
+          '<p>通过 <code>radio-config</code> / <code>select-config</code> 的 <code>checkMethod</code> 控制某些行不可选，并支持 <code>trigger: row</code> 开启整行点击。</p>',
+        'en-US':
+          '<p>Use <code>radio-config</code> / <code>select-config</code> with <code>checkMethod</code> to disable rows and enable row-click selection.</p>'
       },
-      codeFiles: ['multiple.vue']
+      codeFiles: ['config.vue']
     },
     {
-      demoId: 'filter',
+      demoId: 'remote',
       name: {
-        'zh-CN': '可过滤',
-        'en-US': 'Filterable'
+        'zh-CN': '远程搜索',
+        'en-US': 'Remote'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>filterable</code> 设置是否可过滤，<code>filter-method</code> 设置自定义过滤逻辑。</p>',
-        'en-US': ''
+        'zh-CN':
+          '<p>配合 <code>remote</code>、<code>remote-method</code> 与 <code>reserve-keyword</code> 实现远程搜索，并分别展示单选与多选场景。</p>',
+        'en-US':
+          '<p>Demonstrates remote searching with <code>remote</code>, <code>remote-method</code> and keyword reservation for both single and multiple selection.</p>'
       },
-      codeFiles: ['filter.vue']
+      codeFiles: ['remote.vue']
     },
     {
-      demoId: 'remote',
+      demoId: 'init-query',
       name: {
-        'zh-CN': '远程搜索',
-        'en-US': 'Remote search'
+        'zh-CN': '表格初始化查询',
+        'en-US': 'Init query'
       },
       desc: {
         'zh-CN':
-          '<p>同时使用 <code>remote</code> 和 <code>remote-method</code> 和 <code>filterable</code> 3 个属性开启远程搜索。通过 <code>remote-config</code> 设置自动搜索和显示展开按钮。<br>在多选模式下，可通过 <code>reserve-keyword</code> 设置选中一个选项后依然保留搜索关键字。</p>',
-        'en-US': ''
+          '<p>利用 <code>init-query</code> 在远程模式下初始化表格数据，并展示单选与多选的默认值回显。</p>',
+        'en-US':
+          '<p>Loads remote data at startup via <code>init-query</code> and shows how default values are rendered for both modes.</p>'
       },
-      codeFiles: ['remote.vue']
+      codeFiles: ['init-query.vue']
     },
     {
-      demoId: 'config',
+      demoId: 'extra-query-params',
       name: {
-        'zh-CN': '配置项',
-        'en-US': 'Config'
+        'zh-CN': '表格初始化查询传参',
+        'en-US': 'Extra query params'
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>select-config</code> （多选）或 <code>radio-config</code> （单选）属性的 <code>checkMethod</code> 自定义禁用逻辑，返回 true (启用) / false (禁用)。<br>配置 <code>{ trigger: "row" }</code> 可以设置点击行选中数据。</p>',
+          '<p>通过 <code>extra-query-params</code> 将父级选择结果传递给子级下拉表格，实现级联查询与选项联动。</p>',
         'en-US':
-          "<p>By customizing the disable logic through the <code>select-config</code> (multiple selection) or <code>radio-config</code> (single selection) attribute's <code>checkMethod</code>, return true (Enable) / false (disable).Configure {trigger: 'row'} to set the selected data in the click row.</p>"
+          '<p>Shows how <code>extra-query-params</code> passes parent selections to a child dropdown to build cascading queries.</p>'
       },
-      codeFiles: ['config.vue']
+      codeFiles: ['extra-query-params.vue']
+    },
+    {
+      demoId: 'radio-bigdata',
+      name: {
+        'zh-CN': '下拉表格大数据',
+        'en-US': 'Large dataset'
+      },
+      desc: {
+        'zh-CN':
+          '<p>一次性加载数百条记录，结合 Grid 的虚拟滚动仍可保持顺畅的选择体验。</p>',
+        'en-US':
+          '<p>Loads hundreds of rows to illustrate how TinyGrid’s virtual scrolling keeps the dropdown responsive.</p>'
+      },
+      codeFiles: ['radio-bigdata.vue']
     }
   ]
 }

package/demos/pc/app/guide/basic-usage-composition-api.vue

@@ -41,7 +41,10 @@ const domData = ref([
         text: '完成',
         action: 'complete'
       }
-    ]
+    ],
+    destroy: () => {
+      showStep.value = false
+    }
   }
 ])
 

package/demos/pc/app/guide/basic-usage.vue

@@ -48,7 +48,10 @@ export default {
               text: '下一步',
               action: 'next'
             }
-          ]
+          ],
+          destroy: () => {
+            this.showStep = false
+          }
         }
       ]
     }

package/demos/pc/app/guide/callback-composition-api.vue

@@ -131,6 +131,7 @@ const domData = ref([
     ],
     destroy: () => {
       label.value = 'destroy'
+      showStep.value = false
     },
     complete: () => {
       label.value = 'complete'

package/demos/pc/app/guide/callback.vue

@@ -137,6 +137,7 @@ export default {
           ],
           destroy: () => {
             this.label = 'destroy'
+            this.showStep = false
           },
           complete: () => {
             this.label = 'complete'