feat(base-select,grid-select): moobile-first base-select and grid-select doc

examples/docs/newsrc/utils/componentsDoc.js

@@ -1,12 +1,15 @@
 export const apis = import.meta.glob('../../../sites/demos/apis/*.js', { eager: false })
 
 export const getPath = (path) => {
-  if (path.startsWith('grid-')) {
+  if (path === 'grid-select') {
+    return 'grid-select'
+  } else if (path.startsWith('grid-')) {
     return 'grid'
   } else if (path.startsWith('chart-')) {
     return 'chart'
+  } else {
+    return path
   }
-  return path
 }
 
 export const getApisConfig = async (component, mode) => {

examples/sites/demos/apis/grid-select.js

@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'grid-select',
@@ -13,7 +13,7 @@ export default {
             'zh-CN': '是否启用一键清除的功能',
             'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage'
         },
         {
@@ -24,7 +24,7 @@ export default {
             'zh-CN': '是否可搜索',
             'en-US': 'Is it searchable'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'remote'
         },
         {
@@ -35,7 +35,7 @@ export default {
             'zh-CN': '自定义过滤方法',
             'en-US': 'Custom filtering method'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'remote'
         },
         {
@@ -47,7 +47,7 @@ export default {
             'zh-CN': '下拉表格时，内置表格组件的配置，用法同 Grid 组件。',
             'en-US': ''
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage'
         },
         {
@@ -69,7 +69,7 @@ export default {
             'zh-CN': '是否允许选择多个选项',
             'en-US': 'Allow multiple options to be selected'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'remote'
         },
         {
@@ -81,7 +81,7 @@ export default {
             'zh-CN': '单选配置项',
             'en-US': 'Radio config'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'config'
         },
         {
@@ -92,7 +92,7 @@ export default {
             'zh-CN': '是否为远程搜索',
             'en-US': 'Is it a remote search'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'remote'
         },
         {
@@ -103,7 +103,7 @@ export default {
             'zh-CN': '远程搜索的方法',
             'en-US': 'Remote search methods'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'remote'
         },
         {
@@ -115,7 +115,7 @@ export default {
             'en-US':
               'When selecting multiple searchable options, do you still keep the current search keywords after selecting one option'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'remote'
         },
         {
@@ -127,7 +127,7 @@ export default {
             'zh-CN': '多选配置项',
             'en-US': 'Select config'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'config'
         },
         {
@@ -138,7 +138,7 @@ export default {
             'zh-CN': '显示值字段',
             'en-US': 'Show Value Fields'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage'
         },
         {
@@ -149,7 +149,7 @@ export default {
             'zh-CN': '绑定值字段',
             'en-US': 'Bind Value Field'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage'
         }
       ]

examples/sites/demos/mobile-first/app/base-select/all-text.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div style="margin: 16px 0">全选后，显示多个 tag</div>
+    <tiny-base-select v-model="value" multiple all-text="全部小吃">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部 Tag</div>
+    <tiny-base-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      value: [],
+      value1: [],
+      options: [
+        { value: '选项 1', label: '黄金糕' },
+        { value: '选项 2', label: '双皮奶' },
+        { value: '选项 3', label: '蚵仔煎' },
+        { value: '选项 4', label: '龙须面' },
+        { value: '选项 6', label: '螺蛳粉' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

examples/sites/demos/mobile-first/app/base-select/allow-create.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div>场景 1：allow-create + filterable，点击创建条目</div>
+    <br />
+    <tiny-base-select v-model="value" allow-create filterable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景 2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
+    <br />
+    <tiny-base-select v-model="value" allow-create filterable default-first-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: '',
+      boxVisibility: false,
+      optionLabel: '',
+      optionValue: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

examples/sites/demos/mobile-first/app/base-select/automatic-dropdown.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <p>场景 1：默认不可搜索时，获取焦点不下拉</p>
+    <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+    <tiny-base-select v-model="value" ref="selectOnlyFocusRef">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <p>场景 2：设置不可搜索时，获取焦点并自动下拉</p>
+    <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+    <tiny-base-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption,
+    TinyButton
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  },
+  methods: {
+    handleFocus1() {
+      this.$refs.selectOnlyFocusRef.focus()
+    },
+    handleFocus2() {
+      this.$refs.selectAutoDropRef.focus()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+.tiny-button {
+  margin-right: 10px;
+}
+</style>

examples/sites/demos/mobile-first/app/base-select/basic-usage.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>选中的值为： {{ value }}</div>
+    <br />
+    <div>场景 1：标签式</div>
+    <br />
+    <tiny-base-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
+      </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景 2：配置式</div>
+    <br />
+    <tiny-base-select v-model="value" :options="options"> </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京', icon: iconFile() },
+        { value: '选项 2', label: '上海', icon: iconFile() },
+        { value: '选项 3', label: '天津', icon: iconFile() },
+        { value: '选项 4', label: '重庆', icon: iconFile() },
+        { value: '选项 5', label: '深圳', icon: iconFile() }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+</style>

examples/sites/demos/mobile-first/app/base-select/binding-obj.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-base-select v-model="value" value-key="val">
+      <tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
+    </tiny-base-select>
+    <p class="value">
+      {{ value }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { obj: { val: '选项 1', id: 1 }, text: '北京' },
+        { obj: { val: '选项 2', id: 2 }, text: '上海' },
+        { obj: { val: '选项 3', id: 3 }, text: '天津' },
+        { obj: { val: '选项 4', id: 4 }, text: '重庆' },
+        { obj: { val: '选项 5', id: 5 }, text: '深圳' }
+      ],
+      value: { val: '选项 3', id: 3 }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+[data-tag='tiny-base-select'] {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>