feat(grid-select): [grid-select] add filter/config features and optim…

…ize demo/api docs (#2521) * docs(grid-select): optimize demo/api * docs(grid-select): add radio-config/select-config demo/api docs * feat(grid-select): add filter and optimize demo/api docs
opentiny · Nov 14, 2024 · 554e778 · 554e778
1 parent 7ad17d8
commit 554e778
Show file tree

Hide file tree

Showing 10 changed files with 505 additions and 14 deletions.
diff --git a/examples/sites/demos/apis/grid-select.js b/examples/sites/demos/apis/grid-select.js
@@ -5,6 +5,40 @@ export default {
       name: 'grid-select',
       type: 'component',
       props: [
+        {
+          name: 'clearable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用一键清除的功能',
+            'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
+          },
+          mode: ['pc'],
+          pcDemo: 'clearable',
+          mfDemo: 'clearable'
+        },
+        {
+          name: 'filterable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否可搜索',
+            'en-US': 'Is it searchable'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter-method'
+        },
+        {
+          name: 'filter-method',
+          type: '(query: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义过滤方法',
+            'en-US': 'Custom filtering method'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter-method'
+        },
         {
           name: 'grid-op',
           typeAnchorName: 'IGridOption',
@@ -39,6 +73,64 @@ export default {
           mode: ['pc'],
           pcDemo: 'multiple'
         },
+        {
+          name: 'radio-config',
+          typeAnchorName: 'IRadioConfig',
+          type: 'IRadioConfig',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '单选配置项',
+            'en-US': 'Radio config'
+          },
+          mode: ['pc'],
+          pcDemo: 'config'
+        },
+        {
+          name: 'remote',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否为远程搜索',
+            'en-US': 'Is it a remote search'
+          },
+          mode: ['pc'],
+          pcDemo: 'remote-method'
+        },
+        {
+          name: 'remote-method',
+          type: '(query:string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '远程搜索的方法',
+            'en-US': 'Remote search methods'
+          },
+          mode: ['pc'],
+          pcDemo: 'remote-method'
+        },
+        {
+          name: 'reserve-keyword',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '多选可搜索时，是否在选中一个选项后仍然保留当前的搜索关键词',
+            'en-US':
+              'When selecting multiple searchable options, do you still keep the current search keywords after selecting one option'
+          },
+          mode: ['pc'],
+          pcDemo: 'remote-method'
+        },
+        {
+          name: 'select-config',
+          typeAnchorName: 'ISelectConfig',
+          type: 'ISelectConfig',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '多选配置项',
+            'en-US': 'Select config'
+          },
+          mode: ['pc'],
+          pcDemo: 'config'
+        },
         {
           name: 'text-field',
           type: 'string',
@@ -70,14 +162,23 @@ export default {
       type: 'interface',
       code: `
 interface IGridOption {
-  data: Record<string, any>
-  columns: {
-    type: string
-    field: string
-    title: string
-    width: number
-  }[] // 表格列数据，用法同 Grid
+  data: Record<string, unknown>
+  columns: IColumnConfig[] // 表格列数据，同 Grid 组件的 IColumnConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
 }
+`
+    },
+    {
+      name: 'IRadioConfig',
+      type: 'interface',
+      code: `
+同 Grid 组件的 IRadioConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
+`
+    },
+    {
+      name: 'ISelectConfig',
+      type: 'interface',
+      code: `
+同 Grid 组件的 ISelectConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
 `
     }
   ]

diff --git a/examples/sites/demos/pc/app/grid-select/config-composition-api.vue b/examples/sites/demos/pc/app/grid-select/config-composition-api.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <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 setup>
+import { ref, reactive } from 'vue'
+import { TinyGridSelect } from '@opentiny/vue'
+
+const valueSingle = ref('')
+const valueMulti = ref([])
+
+const gridOpSingle = reactive({
+  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 }
+  ]
+})
+
+const gridOpMulti = reactive({
+  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 }
+  ]
+})
+
+const radioConfig = ref({
+  trigger: 'row',
+  checkMethod({ rowIndex }) {
+    return rowIndex % 2 === 1
+  }
+})
+
+const selectConfig = ref({
+  trigger: 'row',
+  checkMethod({ rowIndex }) {
+    return rowIndex % 2 === 0
+  }
+})
+</script>
+
+<style scoped>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid-select/config.vue b/examples/sites/demos/pc/app/grid-select/config.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <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>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid-select/filter-composition-api.vue b/examples/sites/demos/pc/app/grid-select/filter-composition-api.vue
@@ -0,0 +1,49 @@
+<template>
+  <tiny-grid-select
+    v-model="valueSingle"
+    filterable
+    :filter-method="filter"
+    value-field="id"
+    text-field="city"
+    :grid-op="gridOpSingle"
+  ></tiny-grid-select>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TinyGridSelect } from '@opentiny/vue'
+
+const valueSingle = ref('')
+
+const gridOpSingle = reactive({
+  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 }
+  ]
+})
+
+const filter = (value) => {
+  if (!value) {
+    return gridOpSingle.data
+  }
+
+  return gridOpSingle.data.filter((item) => {
+    return item.city.includes(value)
+  })
+}
+</script>
+
+<style scoped>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>