@opentiny/vue-docs 3.28.1 → 3.30.0

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

@@ -0,0 +1,131 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="dataSource" @change="onChange" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinySearchBox from '@opentiny/vue-search-box'
+
+const tags = ref([])
+const dataSource = ref([
+  {
+    label: '名称',
+    field: 'testName',
+    idMapKey: 'nameId', // 指定筛选项暴露 nameId 键值，可用来检索过滤
+    options: [
+      {
+        label: 'ecs-1',
+        nameId: 0
+      },
+      {
+        label: 'obs-2',
+        nameId: 2
+      },
+      {
+        label: 'vpc-1',
+        nameId: 3
+      },
+      {
+        label: 'evs-2',
+        nameId: 4
+      },
+      {
+        label: 'tms-1',
+        nameId: 5
+      }
+    ]
+  },
+  {
+    label: '可用地区',
+    field: 'testRegion',
+    type: 'checkbox',
+    options: [
+      {
+        label: '华南区',
+        id: '2-1' // idMapKey默认是id
+      },
+      {
+        label: '华北区',
+        id: '2-2'
+      },
+      {
+        label: '西北区',
+        id: '2-3'
+      },
+      {
+        label: '西南区',
+        id: '2-4'
+      }
+    ]
+  },
+  {
+    label: '标签',
+    field: 'testTag',
+    type: 'map',
+    idMapKey: 'tagId',
+    options: [
+      {
+        label: 'aaa',
+        tagId: 'id-1',
+        allValues: false,
+        options: [
+          {
+            label: '空值',
+            tagId: 'aaa-ddd'
+          },
+          {
+            label: '所有值',
+            tagId: 'aaa-eee'
+          },
+          {
+            label: '123',
+            tagId: 'aaa-fff'
+          }
+        ]
+      },
+      {
+        label: 'bbb',
+        tagId: 'id-2',
+        options: [
+          {
+            label: 'hhh',
+            tagId: 'bbb-hhh'
+          },
+          {
+            label: 'iii',
+            tagId: 'bbb-iii'
+          },
+          {
+            label: 'jjj',
+            tagId: 'bbb-jjj'
+          }
+        ]
+      },
+      {
+        label: 'ccc',
+        tagId: 'id-3',
+        options: [
+          {
+            label: 'kkk',
+            tagId: 'ccc-kkk'
+          },
+          {
+            label: 'lll',
+            tagId: 'ccc-lll'
+          },
+          {
+            label: 'mmm',
+            tagId: 'ccc-mmm'
+          }
+        ]
+      }
+    ]
+  }
+])
+
+function onChange(newFilters, oldFilters) {
+  console.log('changeEvent:', JSON.stringify(newFilters), oldFilters)
+}
+</script>

package/demos/pc/app/search-box/id-map-key.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="dataSource" @change="onChange" />
+  </div>
+</template>
+
+<script>
+import TinySearchBox from '@opentiny/vue-search-box'
+
+export default {
+  components: {
+    TinySearchBox
+  },
+  data() {
+    return {
+      tags: [],
+      dataSource: [
+        {
+          label: '名称',
+          field: 'testName',
+          idMapKey: 'nameId', // 指定筛选项暴露 nameId 键值，可用来检索过滤
+          options: [
+            {
+              label: 'ecs-1',
+              nameId: 0
+            },
+            {
+              label: 'obs-2',
+              nameId: 2
+            },
+            {
+              label: 'vpc-1',
+              nameId: 3
+            },
+            {
+              label: 'evs-2',
+              nameId: 4
+            },
+            {
+              label: 'tms-1',
+              nameId: 5
+            }
+          ]
+        },
+        {
+          label: '可用地区',
+          field: 'testRegion',
+          type: 'checkbox',
+          options: [
+            {
+              label: '华南区',
+              id: '2-1' // idMapKey默认是id
+            },
+            {
+              label: '华北区',
+              id: '2-2'
+            },
+            {
+              label: '西北区',
+              id: '2-3'
+            },
+            {
+              label: '西南区',
+              id: '2-4'
+            }
+          ]
+        },
+        {
+          label: '标签',
+          field: 'testTag',
+          type: 'map',
+          idMapKey: 'tagId',
+          options: [
+            {
+              label: 'aaa',
+              tagId: 'id-1',
+              allValues: false,
+              options: [
+                {
+                  label: '空值',
+                  tagId: 'aaa-ddd'
+                },
+                {
+                  label: '所有值',
+                  tagId: 'aaa-eee'
+                },
+                {
+                  label: '123',
+                  tagId: 'aaa-fff'
+                }
+              ]
+            },
+            {
+              label: 'bbb',
+              tagId: 'id-2',
+              options: [
+                {
+                  label: 'hhh',
+                  tagId: 'bbb-hhh'
+                },
+                {
+                  label: 'iii',
+                  tagId: 'bbb-iii'
+                },
+                {
+                  label: 'jjj',
+                  tagId: 'bbb-jjj'
+                }
+              ]
+            },
+            {
+              label: 'ccc',
+              tagId: 'id-3',
+              options: [
+                {
+                  label: 'kkk',
+                  tagId: 'ccc-kkk'
+                },
+                {
+                  label: 'lll',
+                  tagId: 'ccc-lll'
+                },
+                {
+                  label: 'mmm',
+                  tagId: 'ccc-mmm'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    onChange(newFilters, oldFilters) {
+      console.log('changeEvent:', JSON.stringify(newFilters), oldFilters)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,119 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="items" editable />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinySearchBox from '@opentiny/vue-search-box'
+
+const tags = ref([
+  {
+    field: 'testRegion',
+    label: '可用地区',
+    type: 'checkbox',
+    value: '华南区 | 西北区 | 华北区 | 西南区 | 东南区',
+    options: [
+      {
+        label: '华南区',
+        id: '2-1'
+      },
+      {
+        label: '西北区',
+        id: '2-3'
+      },
+      {
+        label: '华北区',
+        id: '2-2'
+      },
+      {
+        label: '西南区',
+        id: '2-4'
+      },
+      {
+        label: '东南区',
+        id: '2-5'
+      }
+    ]
+  }
+])
+const items = ref([
+  {
+    label: '名称',
+    field: 'testName',
+    replace: true,
+    placeholder: '我是自定义名称的占位符',
+    options: [
+      {
+        label: 'ecs-1'
+      },
+      {
+        label: 'obs-2'
+      },
+      {
+        label: 'vpc-1'
+      },
+      {
+        label: 'evs-2'
+      },
+      {
+        label: 'tms-1'
+      }
+    ]
+  },
+  {
+    label: '可用地区',
+    field: 'testRegion',
+    type: 'checkbox',
+    mergeTag: true,
+    allowCreate: true,
+    placeholder: '我是自定义可选地区的占位符',
+    editAttrDisabled: true, // 编辑状态此属性禁用，不可变更
+    options: [
+      {
+        label: '华南区',
+        id: '2-1'
+      },
+      {
+        label: '华北区',
+        id: '2-2'
+      },
+      {
+        label: '西北区',
+        id: '2-3'
+      },
+      {
+        label: '西南区',
+        id: '2-4'
+      },
+      {
+        label: '东南区',
+        id: '2-5'
+      },
+      {
+        label: '东北区',
+        id: '2-6'
+      },
+      {
+        label: '华东区',
+        id: '2-7'
+      },
+      {
+        label: '华西区',
+        id: '2-8'
+      }
+    ]
+  },
+  {
+    label: '大小',
+    field: 'size',
+    type: 'numRange',
+    placeholder: '我是自定义大小的占位符',
+    unit: 'GB',
+    start: -1,
+    min: -1,
+    max: 20
+  }
+])
+</script>

package/demos/pc/app/search-box/item-placeholder.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="items" editable />
+  </div>
+</template>
+
+<script>
+import TinySearchBox from '@opentiny/vue-search-box'
+
+export default {
+  components: {
+    TinySearchBox
+  },
+  data() {
+    return {
+      items: [
+        {
+          label: '名称',
+          field: 'testName',
+          replace: true,
+          placeholder: '我是自定义名称的占位符',
+          options: [
+            {
+              label: 'ecs-1'
+            },
+            {
+              label: 'obs-2'
+            },
+            {
+              label: 'vpc-1'
+            },
+            {
+              label: 'evs-2'
+            },
+            {
+              label: 'tms-1'
+            }
+          ]
+        },
+        {
+          label: '可用地区',
+          field: 'testRegion',
+          type: 'checkbox',
+          mergeTag: true,
+          allowCreate: true,
+          placeholder: '我是自定义可选地区的占位符',
+          editAttrDisabled: true, // 编辑状态此属性禁用，不可变更
+          options: [
+            {
+              label: '华南区',
+              id: '2-1'
+            },
+            {
+              label: '华北区',
+              id: '2-2'
+            },
+            {
+              label: '西北区',
+              id: '2-3'
+            },
+            {
+              label: '西南区',
+              id: '2-4'
+            },
+            {
+              label: '东南区',
+              id: '2-5'
+            },
+            {
+              label: '东北区',
+              id: '2-6'
+            },
+            {
+              label: '华东区',
+              id: '2-7'
+            },
+            {
+              label: '华西区',
+              id: '2-8'
+            }
+          ]
+        },
+        {
+          label: '大小',
+          field: 'size',
+          type: 'numRange',
+          placeholder: '我是自定义大小的占位符',
+          unit: 'GB',
+          start: -1,
+          min: -1,
+          max: 20
+        }
+      ],
+      tags: [
+        {
+          field: 'testRegion',
+          label: '可用地区',
+          type: 'checkbox',
+          value: '华南区 | 西北区 | 华北区 | 西南区 | 东南区',
+          options: [
+            {
+              label: '华南区',
+              id: '2-1'
+            },
+            {
+              label: '西北区',
+              id: '2-3'
+            },
+            {
+              label: '华北区',
+              id: '2-2'
+            },
+            {
+              label: '西南区',
+              id: '2-4'
+            },
+            {
+              label: '东南区',
+              id: '2-5'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="dataSource" :maxlength="maxlength" @exceed="handleExceed" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinySearchBox from '@opentiny/vue-search-box'
+
+const tags = ref([])
+const maxlength = ref(8)
+const dataSource = ref([
+  {
+    label: '名称',
+    field: 'testName',
+    replace: true,
+    options: [
+      {
+        label: '不能超过8个字符'
+      }
+    ]
+  }
+])
+
+function handleExceed(number) {
+  alert(`不能超过${number}个字符`)
+}
+</script>

package/demos/pc/app/search-box/max-length.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="dataSource" :maxlength="maxlength" @exceed="handleExceed" />
+  </div>
+</template>
+
+<script>
+import TinySearchBox from '@opentiny/vue-search-box'
+
+export default {
+  components: {
+    TinySearchBox
+  },
+  data() {
+    return {
+      tags: [],
+      maxlength: 8,
+      dataSource: [
+        {
+          label: '名称',
+          field: 'testName',
+          replace: true,
+          options: [
+            {
+              label: '不能超过8个字符'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    handleExceed(number) {
+      alert(`不能超过${number}个字符`)
+    }
+  }
+}
+</script>

package/demos/pc/app/search-box/max-time-length-composition-api.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="items" @change="onChange" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinySearchBox from '@opentiny/vue-search-box'
+
+// 获取当前时间
+const now = new Date()
+// 获取一年的毫秒数：设置只能选择一年的时间区间
+const year = 365 * 24 * 60 * 60 * 1000
+// 获取半年的毫秒数：设置只能选择半年的时间区间
+const halfYear = (365 / 2) * 24 * 3600 * 1000
+// 获取一天的毫秒数
+const day = 24 * 60 * 60 * 1000
+
+const tags = ref([])
+const items = ref([
+  {
+    label: '日期',
+    field: 'date',
+    type: 'dateRange',
+    format: 'yyyy/MM/dd', // 默认格式
+    // 默认开始时间
+    start: new Date(),
+    // 默认结束时间
+    end: undefined,
+    maxTimeLength: year, // 可选择的时间跨度为一年内
+    // 最小时间（当前时间前5天）
+    min: new Date(now.getTime() - 5 * day),
+    // 最大时间（当前时间后1年2个月）
+    max: new Date(now.getTime() + year + 2 * 30 * day)
+  },
+  {
+    label: '时间日期',
+    field: 'datetime',
+    type: 'datetimeRange',
+    format: 'yyyy/MM/dd HH:mm:ss', // 默认格式
+    // 最小时间（当前时间前半年）
+    // min: new Date(now.getTime() - halfYear),
+    // 最大时间（当前时间后半年）
+    // max: new Date(now.getTime() + halfYear),
+    maxTimeLength: halfYear // 可选择的时间跨度为半年内
+  }
+])
+
+function onChange(newFilters, oldFilters) {
+  console.log('changeEvent:', newFilters, oldFilters)
+}
+</script>

package/demos/pc/app/search-box/max-time-length.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="demo">
+    <tiny-search-box v-model="tags" :items="items" @change="onChange" />
+  </div>
+</template>
+
+<script>
+import TinySearchBox from '@opentiny/vue-search-box'
+
+export default {
+  components: {
+    TinySearchBox
+  },
+  data() {
+    // 获取当前时间
+    const now = new Date()
+    // 获取一年的毫秒数：设置只能选择一年的时间区间
+    const year = 365 * 24 * 60 * 60 * 1000
+    // 获取半年的毫秒数：设置只能选择半年的时间区间
+    const halfYear = (365 / 2) * 24 * 3600 * 1000
+    // 获取一天的毫秒数
+    const day = 24 * 60 * 60 * 1000
+
+    return {
+      tags: [],
+      items: [
+        {
+          label: '日期',
+          field: 'date',
+          type: 'dateRange',
+          format: 'yyyy/MM/dd', // 默认格式
+          // 默认开始时间
+          start: new Date(),
+          // 默认结束时间
+          end: undefined,
+          maxTimeLength: year, // 可选择的时间跨度为一年内
+          // 最小时间（当前时间前5天）
+          min: new Date(now.getTime() - 5 * day),
+          // 最大时间（当前时间后1年2个月）
+          max: new Date(now.getTime() + year + 2 * 30 * day)
+        },
+        {
+          label: '时间日期',
+          field: 'datetime',
+          type: 'datetimeRange',
+          format: 'yyyy/MM/dd HH:mm:ss', // 默认格式
+          // 最小时间（当前时间前半年）
+          // min: new Date(now.getTime() - halfYear),
+          // 最大时间（当前时间后半年）
+          // max: new Date(now.getTime() + halfYear),
+          maxTimeLength: halfYear // 可选择的时间跨度为半年内
+        }
+      ]
+    }
+  },
+  methods: {
+    onChange(newFilters, oldFilters) {
+      console.log('changeEvent:', newFilters, oldFilters)
+    }
+  }
+}
+</script>