docs(select): [select] Optimize the select component documentation and fix error issues (#1167)

examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue

@@ -8,7 +8,7 @@
     </tiny-select>
 
     <p>
-      场景2：多选，multiVal 找不到匹配值，multiVal为：<span class="multi-val">{{ multiVal }}</span>
+      场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
     </p>
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>

examples/sites/demos/pc/app/select/clear-no-match-value.vue

@@ -8,7 +8,7 @@
     </tiny-select>
 
     <p>
-      场景2：多选，multiVal 找不到匹配值，multiVal为：<span class="multi-val">{{ multiVal }}</span>
+      场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
     </p>
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>

examples/sites/demos/pc/app/select/events-composition-api.vue

@@ -46,37 +46,43 @@ const value2 = ref([])
 const change = () => {
   Modal.message({
     message: '触发 change 事件',
-    duration: 500
+    duration: 500,
+    status: 'info'
   })
 }
 
 const clear = () => {
   Modal.message({
-    message: '触发 clear 事件'
+    message: '触发 clear 事件',
+    status: 'info'
   })
 }
 
 const focus = () => {
   Modal.message({
-    message: '触发 focus 事件'
+    message: '触发 focus 事件',
+    status: 'info'
   })
 }
 
 const blur = () => {
   Modal.message({
-    message: '触发 blur 事件'
+    message: '触发 blur 事件',
+    status: 'info'
   })
 }
 
 const removeTag = () => {
   Modal.message({
-    message: '触发 remove-tag 事件'
+    message: '触发 remove-tag 事件',
+    status: 'info'
   })
 }
 
 const visibleChange = () => {
   Modal.message({
-    message: '触发 visible-change 事件'
+    message: '触发 visible-change 事件',
+    status: 'info'
   })
 }
 </script>

examples/sites/demos/pc/app/select/events.vue

@@ -54,12 +54,14 @@ export default {
     change() {
       Modal.message({
         message: '触发 change 事件',
-        duration: 500
+        duration: 500,
+        status: 'info'
       })
     },
     clear() {
       Modal.message({
-        message: '触发 clear 事件'
+        message: '触发 clear 事件',
+        status: 'info'
       })
     },
     focus() {
@@ -69,17 +71,20 @@ export default {
     },
     blur() {
       Modal.message({
-        message: '触发 blur 事件'
+        message: '触发 blur 事件',
+        status: 'info'
       })
     },
     removeTag() {
       Modal.message({
-        message: '触发 remove-tag 事件'
+        message: '触发 remove-tag 事件',
+        status: 'info'
       })
     },
     visibleChange() {
       Modal.message({
-        message: '触发 visible-change 事件'
+        message: '触发 visible-change 事件',
+        status: 'info'
       })
     }
   }

examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue

@@ -18,8 +18,7 @@ import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 const options = ref([
   {
     value: '选项1',
-    label:
-      '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
+    label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
   },
   { value: '选项2', label: '双皮奶' },
   { value: '选项3', label: '蚵仔煎' },

examples/sites/demos/pc/app/select/is-drop-inherit-width.vue

@@ -24,8 +24,7 @@ export default {
       options: [
         {
           value: '选项1',
-          label:
-            '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
+          label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
         },
         { value: '选项2', label: '双皮奶' },
         { value: '选项3', label: '蚵仔煎' },

examples/sites/demos/pc/app/select/optimization-composition-api.vue

@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Form as TinyForm, FormItem as TinyFormItem, Select as TinySelect, Modal } from '@opentiny/vue'
+import { Select as TinySelect, Modal } from '@opentiny/vue'
 
 const buildOptions = () =>
   Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项${i}","label":"黄金糕${i}"}`))
@@ -27,7 +27,10 @@ const value2 = ref([])
 const options = ref(buildOptions())
 
 const onChange = (value) => {
-  Modal.message(JSON.stringify(value))
+  Modal.message({
+    message: JSON.stringify(value),
+    status: 'info'
+  })
 }
 </script>
 

examples/sites/demos/pc/app/select/optimization.vue

@@ -34,7 +34,10 @@ export default {
   },
   methods: {
     onChange(value) {
-      Modal.message(JSON.stringify(value))
+      Modal.message({
+        message: JSON.stringify(value),
+        status: 'info'
+      })
     }
   }
 }

examples/sites/demos/pc/app/select/webdoc/select.js

@@ -539,7 +539,8 @@ export default {
   sortBy: 'frequency',
   sort: 'desc',
   dataKey: 'value',
-  highlightClass: 'memorize-highlight',
+  highlightClass: 
+  'memorize-highlight',
   highlightNum: Infinity,
   cacheNum: Infinity,
   serialize: JSON.stringify
@@ -1063,7 +1064,7 @@ interface IOption {
 `
     },
     {
-      name: 'ICacheItem',
+      name: 'ICacheOp',
       type: 'interface',
       code: `
 interface ICacheItem {
@@ -1071,12 +1072,7 @@ interface ICacheItem {
   key: string
   time: number
 }
-`
-    },
-    {
-      name: 'ICacheOp',
-      type: 'interface',
-      code: `
+
 interface ICacheOp {
   key: string // 本地缓存的唯一 key 值
   sortBy?: 'frequency' | 'time' // 排序的字段，默认 frequency (频次)
@@ -1101,7 +1097,7 @@ interface IGridOption {
 `
     },
     {
-      name: 'ITreeNode',
+      name: 'ITreeOption',
       type: 'interface',
       code: `
 interface ITreeNode {
@@ -1109,12 +1105,7 @@ interface ITreeNode {
   id: number|string     // 树节点唯一标识
   children: ITreeNode[] // 子节点
 }
-`
-    },
-    {
-      name: 'ITreeOption',
-      type: 'interface',
-      code: `
+
 interface ITreeOption {
   data: ITreeNode[] // 树数据，用法同 Tree
 }

examples/sites/playground/App.vue

@@ -38,6 +38,7 @@ const createImportMap = (version) => {
     '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
     '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
     '@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme@${version}/`,
+    '@opentiny/vue-renderless/': `${cdnHost}/@opentiny/vue-renderless@${version}/`,
     'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
   }
   if (['aurora', 'smb'].includes(tinyTheme)) {