@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/mobile-first/app/grid-select/basic-usage.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="basic-usage">
+    <p>场景 1：单选</p>
+    <br />
+    <tiny-grid-select v-model="value" :grid-op="gridOpSingle" value-field="id" text-field="city"></tiny-grid-select>
+    <br />
+    <br />
+    <p>场景 2：多选</p>
+    <br />
+    <tiny-grid-select
+      v-model="value2"
+      multiple
+      :grid-op="gridOpMulti"
+      value-field="id"
+      text-field="city"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  data() {
+    return {
+      value: '',
+      value2: [],
+      gridOpSingle: {
+        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 }
+        ]
+      },
+      gridOpMulti: {
+        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: 'checkbox', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+#basic-usage {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/grid-select/config.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="config">
+    <p>场景 1：单选</p>
+    <br />
+    <tiny-grid-select
+      v-model="valueSingle"
+      value-field="id"
+      text-field="city"
+      :grid-op="gridOpSingle"
+      :radio-config="radioConfig"
+    ></tiny-grid-select>
+    <br /><br />
+    <p>场景 2：多选</p>
+    <br />
+    <tiny-grid-select
+      v-model="valueMulti"
+      multiple
+      value-field="id"
+      text-field="city"
+      :grid-op="gridOpMulti"
+      :select-config="selectConfig"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  data() {
+    return {
+      valueSingle: '',
+      valueMulti: [],
+      gridOpSingle: {
+        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 }
+        ]
+      },
+      gridOpMulti: {
+        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: 'selection', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      },
+      radioConfig: {
+        trigger: 'row',
+        checkMethod({ rowIndex }) {
+          return rowIndex % 2 === 1
+        }
+      },
+      selectConfig: {
+        trigger: 'row',
+        checkMethod({ rowIndex }) {
+          return rowIndex % 2 === 0
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+#config {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/grid-select/extra-query-params.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="extra-query-params" class="demo-select">
+    <div>父选项：</div>
+    <br />
+    <tiny-grid-select
+      v-model="parentValue"
+      multiple
+      clearable
+      filterable
+      remote
+      text-field="label"
+      value-field="id"
+      :grid-op="gridOpParent"
+      :init-query="loadParents"
+      :remote-method="remoteParents"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      @change="handleParentChange"
+    ></tiny-grid-select>
+    <br /><br />
+    <div>子选项：</div>
+    <br />
+    <tiny-grid-select
+      v-model="childValue"
+      multiple
+      clearable
+      filterable
+      remote
+      text-field="label"
+      value-field="id"
+      :extra-query-params="parentValue"
+      :grid-op="gridOpChild"
+      :init-query="loadChildren"
+      :remote-method="remoteChildren"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  created() {
+    this.parentOptions = [
+      { id: '001', label: '指南' },
+      { id: '002', label: '组件' }
+    ]
+    this.childOptions = [
+      { id: '001', label: '安装', parent: '001' },
+      { id: '002', label: '开发', parent: '001' },
+      { id: '004', label: '框架风格', parent: '002' },
+      { id: '005', label: '表单组件', parent: '002' },
+      { id: '006', label: '数据组件', parent: '002' },
+      { id: '007', label: '提示组件', parent: '002' },
+      { id: '008', label: '导航组件', parent: '002' },
+      { id: '009', label: '其他组件', parent: '002' }
+    ]
+  },
+  data() {
+    return {
+      parentValue: ['001'],
+      childValue: ['001'],
+      gridOpParent: {
+        data: [],
+        height: 260,
+        optimization: {
+          animat: true,
+          scrollY: { gt: 20 }
+        },
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'label', title: '父级' }
+        ]
+      },
+      gridOpChild: {
+        data: [],
+        height: 260,
+        optimization: {
+          animat: true,
+          scrollY: { gt: 20 }
+        },
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'label', title: '子级' }
+        ]
+      }
+    }
+  },
+  methods: {
+    loadParents() {
+      return Promise.resolve(this.parentOptions)
+    },
+    remoteParents(keyword) {
+      const list = this.parentOptions.filter((item) => item.label.includes(keyword || ''))
+      return Promise.resolve(list)
+    },
+    loadChildren(value, extraQueryParams) {
+      return this.filterChildren(extraQueryParams)
+    },
+    remoteChildren(keyword, extraQueryParams) {
+      return this.filterChildren(extraQueryParams, keyword)
+    },
+    filterChildren(parentIds, keyword = '') {
+      const list = this.childOptions
+        .filter((child) => parentIds.includes(child.parent))
+        .filter((child) => child.label.includes(keyword || ''))
+      return new Promise((resolve) => {
+        setTimeout(() => resolve(list), 300)
+      })
+    },
+    handleParentChange(parents) {
+      const childIds = this.childOptions.filter((child) => parents.includes(child.parent)).map((child) => child.id)
+      this.childValue = this.childValue.filter((value) => childIds.includes(value))
+    }
+  }
+}
+</script>
+
+<style scoped>
+#extra-query-params {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/grid-select/init-query.vue

@@ -0,0 +1,124 @@
+<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>
+#init-query {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/grid-select/radio-bigdata.vue

@@ -0,0 +1,46 @@
+<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>
+#radio-bigdata {
+  width: 350px;
+}
+</style>

package/demos/mobile-first/app/grid-select/remote.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="remote">
+    <p>场景 1：单选</p>
+    <br />
+    <tiny-grid-select
+      v-model="valueSingle"
+      :grid-op="gridOpSingle"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+    ></tiny-grid-select>
+    <br /><br />
+    <p>场景 2：多选</p>
+    <br />
+    <tiny-grid-select
+      v-model="valueMultiple"
+      :grid-op="gridOpMultiple"
+      multiple
+      filterable
+      remote
+      reserve-keyword
+      :remote-method="remoteMethod"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  data() {
+    return {
+      valueSingle: '',
+      valueMultiple: [],
+      gridOpSingle: {
+        data: [],
+        height: 300,
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      },
+      gridOpMultiple: {
+        data: [],
+        height: 300,
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      },
+      allData: Array.from({ length: 1000 }, (a, i) => {
+        return {
+          value: '00' + i,
+          province: '省份' + i,
+          city: '城市' + i,
+          area: '区域' + i,
+          label: `省${i}-市${i}`
+        }
+      })
+    }
+  },
+  methods: {
+    filter(value) {
+      return this.allData.filter((item) => item.city.includes(value))
+    },
+    remoteMethod(value) {
+      const filterData = this.filter(value)
+
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(filterData)
+        }, 500)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#remote {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/grid-select/webdoc/grid-select.cn.md

@@ -0,0 +1,7 @@
+---
+title: GridSelect 下拉表格选择器
+---
+
+# GridSelect 下拉表格选择器
+
+结合了 BaseSelect 和 Grid 组件的选择器，用于从一个下拉表格中选择一个或多个选项。

package/demos/mobile-first/app/grid-select/webdoc/grid-select.en.md

@@ -0,0 +1,8 @@
+---
+title: GridSelect
+---
+
+# GridSelect
+
+A selector that combines the BaseSelect and Grid components to select one or more options from a drop-down table.
+

package/demos/mobile-first/app/grid-select/webdoc/grid-select.js

@@ -0,0 +1,92 @@
+export default {
+  column: '2',
+  owner: '',
+  show: true,
+  cloud: true,
+  meta: {
+    experimental: '3.27.0'
+  },
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本下拉表格',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        '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: 'config',
+      name: {
+        'zh-CN': '禁用选项',
+        'en-US': 'Disable option'
+      },
+      desc: {
+        'zh-CN':
+          '<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: ['config.vue']
+    },
+    {
+      demoId: 'remote',
+      name: {
+        'zh-CN': '远程搜索',
+        'en-US': 'Remote'
+      },
+      desc: {
+        '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: ['remote.vue']
+    },
+    {
+      demoId: 'init-query',
+      name: {
+        'zh-CN': '表格初始化查询',
+        'en-US': 'Init query'
+      },
+      desc: {
+        'zh-CN': '<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: ['init-query.vue']
+    },
+    {
+      demoId: 'extra-query-params',
+      name: {
+        'zh-CN': '表格初始化查询传参',
+        'en-US': 'Extra query params'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>extra-query-params</code> 将父级选择结果传递给子级下拉表格，实现级联查询与选项联动。</p>',
+        'en-US':
+          '<p>Shows how <code>extra-query-params</code> passes parent selections to a child dropdown to build cascading queries.</p>'
+      },
+      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']
+    }
+  ]
+}