From 5c40c29b813669cf3fabaeafdaf4b5432a0df99d Mon Sep 17 00:00:00 2001
From: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com>
Date: Tue, 19 Dec 2023 10:29:09 +0800
Subject: [PATCH] docs(select): [select] Optimize the select component
 documentation and fix error issues (#1167)

---
 .../clear-no-match-value-composition-api.vue  |  2 +-
 .../pc/app/select/clear-no-match-value.vue    |  2 +-
 .../pc/app/select/events-composition-api.vue  | 18 ++++++++++------
 examples/sites/demos/pc/app/select/events.vue | 15 ++++++++-----
 .../is-drop-inherit-width-composition-api.vue |  3 +--
 .../pc/app/select/is-drop-inherit-width.vue   |  3 +--
 .../select/optimization-composition-api.vue   |  7 +++++--
 .../demos/pc/app/select/optimization.vue      |  5 ++++-
 .../demos/pc/app/select/webdoc/select.js      | 21 ++++++-------------
 examples/sites/playground/App.vue             |  1 +
 10 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue b/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue
index ca4653bae..0b878ab3c 100644
--- a/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/select/clear-no-match-value.vue b/examples/sites/demos/pc/app/select/clear-no-match-value.vue
index 9af87efde..8fb9a0515 100644
--- a/examples/sites/demos/pc/app/select/clear-no-match-value.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/select/events-composition-api.vue b/examples/sites/demos/pc/app/select/events-composition-api.vue
index 5ef8f521b..de73a2efa 100644
--- a/examples/sites/demos/pc/app/select/events-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/select/events.vue b/examples/sites/demos/pc/app/select/events.vue
index e4931b670..ec01dfa4a 100644
--- a/examples/sites/demos/pc/app/select/events.vue
+++ b/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'
       })
     }
   }
diff --git a/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue b/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue
index e221c1549..95c70d45b 100644
--- a/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue
+++ b/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: '蚵仔煎' },
diff --git a/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue b/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue
index 781c04def..86fd5b56f 100644
--- a/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue
+++ b/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: '蚵仔煎' },
diff --git a/examples/sites/demos/pc/app/select/optimization-composition-api.vue b/examples/sites/demos/pc/app/select/optimization-composition-api.vue
index ec7c5a413..5468d80ac 100644
--- a/examples/sites/demos/pc/app/select/optimization-composition-api.vue
+++ b/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>
 
diff --git a/examples/sites/demos/pc/app/select/optimization.vue b/examples/sites/demos/pc/app/select/optimization.vue
index c741ec974..91604867a 100644
--- a/examples/sites/demos/pc/app/select/optimization.vue
+++ b/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'
+      })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/select/webdoc/select.js b/examples/sites/demos/pc/app/select/webdoc/select.js
index c82579ef9..56af7ab29 100644
--- a/examples/sites/demos/pc/app/select/webdoc/select.js
+++ b/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
 }
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index ddae2f38e..f16292931 100644
--- a/examples/sites/playground/App.vue
+++ b/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)) {