@opentiny/vue-docs 3.28.0 → 3.30.0

package/demos/pc/app/search-box/events-composition-api.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="demo">
+    <tiny-search-box
+      v-model="tags"
+      :items="items"
+      editable
+      @first-level-select="FirstLevelSelect"
+      @second-level-enter="SecondLevelEnter"
+      @search="onSearch"
+      @change="onChange"
+      @clear="onClear"
+      @tag-click="tagClick"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinySearchBox from '@opentiny/vue-search-box'
+
+const tags = ref([])
+const items = ref([
+  {
+    // 该种单选情况没有可选项。
+    label: '名称',
+    field: 'testName',
+    options: [] // 告知组件有异步options
+  },
+  {
+    // 该种单选情况没有可选项。
+    label: '名称1',
+    field: 'testName1'
+  },
+  {
+    label: '状态',
+    type: 'checkbox',
+    field: 'status',
+    options: []
+  },
+  {
+    label: '地区',
+    type: 'checkbox',
+    field: 'region'
+  },
+  {
+    label: '标签',
+    field: 'testTag',
+    type: 'map',
+    searchKeys: ['label', 'id'],
+    options: []
+  }
+])
+
+function FirstLevelSelect(field) {
+  console.log('FirstLevelSelect:', field)
+
+  setTimeout(() => {
+    if (field === 'testName' && items.value[0].options.length === 0) {
+      items.value[0].options = [
+        {
+          label: 'ecs-1'
+        },
+        {
+          label: 'obs-2'
+        },
+        {
+          label: 'vpc-1'
+        },
+        {
+          label: 'evs-2'
+        },
+        {
+          label: 'tms-1'
+        }
+      ]
+    } else if (field === 'status' && items.value[2].options.length === 0) {
+      items.value[2].options = [
+        {
+          label: '运行中'
+        },
+        {
+          label: '已关机'
+        },
+        {
+          label: '已注销'
+        }
+      ]
+    } else if (field === 'testTag' && items.value[4].options.length === 0) {
+      items.value[4].options = [
+        {
+          label: 'aaa',
+          id: 'id-1',
+          allValues: false,
+          options: [
+            {
+              label: '空值',
+              id: 'aaa-ddd'
+            },
+            {
+              label: '所有值',
+              id: 'aaa-eee'
+            },
+            {
+              label: '123',
+              id: 'aaa-fff'
+            }
+          ]
+        },
+        {
+          label: 'bbb',
+          id: 'id-2',
+          options: [
+            {
+              label: 'hhh',
+              id: 'bbb-hhh'
+            },
+            {
+              label: 'iii',
+              id: 'bbb-iii'
+            },
+            {
+              label: 'jjj',
+              id: 'bbb-jjj'
+            }
+          ]
+        },
+        {
+          label: 'ccc',
+          id: 'id-3',
+          options: [
+            {
+              label: 'kkk',
+              id: 'ccc-kkk'
+            },
+            {
+              label: 'lll',
+              id: 'ccc-lll'
+            },
+            {
+              label: 'mmm',
+              id: 'ccc-mmm'
+            }
+          ]
+        }
+      ]
+    }
+  }, 1000)
+}
+
+function SecondLevelEnter(item, options) {
+  console.log('SecondLevelEnter:', item, options)
+}
+
+function onSearch(filters) {
+  console.log('searchEvent:', filters)
+}
+
+function onChange(newFilters, oldFilters) {
+  console.log('changeEvent:', newFilters, oldFilters)
+}
+
+function onClear() {
+  console.log('onClear')
+}
+
+function tagClick(tag) {
+  console.log('tagClick:', tag)
+}
+</script>

package/demos/pc/app/search-box/events.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="demo">
+    <tiny-search-box
+      v-model="tags"
+      :items="items"
+      editable
+      @first-level-select="FirstLevelSelect"
+      @second-level-enter="SecondLevelEnter"
+      @search="onSearch"
+      @change="onChange"
+      @clear="onClear"
+      @tag-click="tagClick"
+    />
+  </div>
+</template>
+
+<script>
+import TinySearchBox from '@opentiny/vue-search-box'
+
+export default {
+  components: {
+    TinySearchBox
+  },
+  data() {
+    return {
+      items: [
+        {
+          // 该种单选情况没有可选项。
+          label: '名称',
+          field: 'testName',
+          options: [] // 告知组件有异步options
+        },
+        {
+          // 该种单选情况没有可选项。
+          label: '名称1',
+          field: 'testName1'
+        },
+        {
+          label: '状态',
+          type: 'checkbox',
+          field: 'status',
+          options: []
+        },
+        {
+          label: '地区',
+          type: 'checkbox',
+          field: 'region'
+        },
+        {
+          label: '标签',
+          field: 'testTag',
+          type: 'map',
+          searchKeys: ['label', 'id'],
+          options: []
+        }
+      ],
+      tags: []
+    }
+  },
+  methods: {
+    FirstLevelSelect(field) {
+      console.log('FirstLevelSelect:', field)
+
+      setTimeout(() => {
+        if (field === 'testName' && this.items[0].options.length === 0) {
+          this.items[0].options = [
+            {
+              label: 'ecs-1'
+            },
+            {
+              label: 'obs-2'
+            },
+            {
+              label: 'vpc-1'
+            },
+            {
+              label: 'evs-2'
+            },
+            {
+              label: 'tms-1'
+            }
+          ]
+        } else if (field === 'status' && this.items[2].options.length === 0) {
+          this.items[2].options = [
+            {
+              label: '运行中'
+            },
+            {
+              label: '已关机'
+            },
+            {
+              label: '已注销'
+            }
+          ]
+        } else if (field === 'testTag' && this.items[4].options.length === 0) {
+          this.items[4].options = [
+            {
+              label: 'aaa',
+              id: 'id-1',
+              allValues: false,
+              options: [
+                {
+                  label: '空值',
+                  id: 'aaa-ddd'
+                },
+                {
+                  label: '所有值',
+                  id: 'aaa-eee'
+                },
+                {
+                  label: '123',
+                  id: 'aaa-fff'
+                }
+              ]
+            },
+            {
+              label: 'bbb',
+              id: 'id-2',
+              options: [
+                {
+                  label: 'hhh',
+                  id: 'bbb-hhh'
+                },
+                {
+                  label: 'iii',
+                  id: 'bbb-iii'
+                },
+                {
+                  label: 'jjj',
+                  id: 'bbb-jjj'
+                }
+              ]
+            },
+            {
+              label: 'ccc',
+              id: 'id-3',
+              options: [
+                {
+                  label: 'kkk',
+                  id: 'ccc-kkk'
+                },
+                {
+                  label: 'lll',
+                  id: 'ccc-lll'
+                },
+                {
+                  label: 'mmm',
+                  id: 'ccc-mmm'
+                }
+              ]
+            }
+          ]
+        }
+      }, 1000)
+    },
+    SecondLevelEnter(item, options) {
+      console.log('SecondLevelEnter:', item, options)
+    },
+    onSearch(filters) {
+      console.log('searchEvent:', filters)
+    },
+    onChange(newFilters, oldFilters) {
+      console.log('changeEvent:', newFilters, oldFilters)
+    },
+    onClear() {
+      console.log('onClear')
+    },
+    tagClick(tag) {
+      console.log('tagClick:', tag)
+    }
+  }
+}
+</script>

package/demos/pc/app/search-box/group-key-composition-api.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="items" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinySearchBox from '@opentiny/vue-search-box'
+
+const tags = ref([])
+const items = ref([
+  {
+    label: '1级学科',
+    field: 'subjects',
+    replace: true,
+    options: [
+      {
+        label: '哲学'
+      },
+      {
+        label: '经济学'
+      },
+      {
+        label: '教育学'
+      },
+      {
+        label: '文学'
+      },
+      {
+        label: '历史学'
+      },
+      {
+        label: '理学'
+      },
+      {
+        label: '工学'
+      },
+      {
+        label: '农学'
+      }
+    ]
+  },
+  {
+    groupKey: '前端搜索',
+    label: '名称',
+    field: 'testName',
+    options: [
+      {
+        label: 'ecs-1'
+      },
+      {
+        label: 'obs-2'
+      },
+      {
+        label: 'vpc-1'
+      },
+      {
+        label: 'evs-2'
+      },
+      {
+        label: 'tms-1'
+      }
+    ]
+  },
+  {
+    // 该种单选情况没有可选项。
+    groupKey: '前端搜索',
+    label: '名称1',
+    field: 'testName1'
+  },
+  {
+    groupKey: '前端搜索',
+    label: '可用地区',
+    field: 'testRegion',
+    type: 'checkbox',
+    options: [
+      {
+        label: '华南区',
+        id: '2-1'
+      },
+      {
+        label: '华北区',
+        id: '2-2'
+      },
+      {
+        label: '西北区',
+        id: '2-3'
+      }
+    ]
+  },
+  {
+    groupKey: '后端搜索',
+    label: '可用地区1',
+    field: 'testRegion1',
+    type: 'checkbox',
+    options: [
+      {
+        label: '华南区1',
+        id: '2-11'
+      },
+      {
+        label: '华北区1',
+        id: '2-21'
+      },
+      {
+        label: '西北区1',
+        id: '2-31'
+      }
+    ]
+  },
+  {
+    groupKey: '后端搜索',
+    label: '状态',
+    type: 'checkbox',
+    field: 'status',
+    options: [
+      {
+        label: '运行中'
+      },
+      {
+        label: '已关机'
+      },
+      {
+        label: '已注销'
+      }
+    ]
+  },
+  {
+    groupKey: '后端搜索',
+    label: '规格/镜像/磁盘',
+    field: 'testMirror',
+    options: [
+      {
+        label: '1vCPUs'
+      },
+      {
+        label: '2vCPUs'
+      },
+      {
+        label: '3vCPUs'
+      },
+      {
+        label: '2vGPUs'
+      }
+    ]
+  },
+  {
+    groupKey: '前端搜索',
+    label: '私有IP地址',
+    field: 'testIp',
+    // 单选可以设置此参数，设置false
+    replace: false,
+    options: [
+      {
+        label: '110.110.110.1'
+      },
+      {
+        label: '110.110.110.2'
+      },
+      {
+        label: '110.110.110.3'
+      },
+      {
+        label: '110.110.110.4'
+      }
+    ]
+  },
+  {
+    groupKey: '后端搜索',
+    label: '标签',
+    field: 'testTag',
+    type: 'map',
+    options: [
+      {
+        label: 'aaa',
+        allValues: false,
+        options: [
+          {
+            label: 'ddd'
+          },
+          {
+            label: 'eee'
+          },
+          {
+            label: 'fff'
+          }
+        ]
+      },
+      {
+        label: 'bbb',
+        options: [
+          {
+            label: 'hhh'
+          },
+          {
+            label: 'iii'
+          },
+          {
+            label: 'jjj'
+          }
+        ]
+      },
+      {
+        label: 'ccc',
+        options: [
+          {
+            label: 'kkk'
+          },
+          {
+            label: 'lll'
+          },
+          {
+            label: 'mmm'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    groupKey: '前端搜索',
+    label: '大小',
+    field: 'size',
+    type: 'numRange',
+    unit: 'GB',
+    start: 4,
+    min: 3,
+    max: 20
+  },
+  {
+    groupKey: '后端搜索',
+    label: '日期',
+    field: 'date',
+    type: 'dateRange',
+    // 默认开始时间
+    start: new Date(2020, 5, 10),
+    // 默认结束时间
+    end: new Date(2020, 5, 25),
+    // 最小时间
+    min: new Date(2020, 5, 5),
+    max: undefined
+  },
+  {
+    groupKey: '后端搜索',
+    label: '时间日期',
+    field: 'datetime',
+    type: 'datetimeRange',
+    // 默认开始时间
+    start: new Date(2020, 5, 10, 10, 23, 45),
+    // 默认结束时间
+    end: new Date(2020, 5, 25, 10, 25, 46),
+    // 最小时间
+    min: new Date(2020, 5, 5, 10, 5, 5),
+    max: undefined
+  }
+])
+</script>