feat(search): Add default selection function for search types and preliminarily optimize API documents (#614)

examples/sites/demos/pc/app/search/custom-search-types-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="height: 200px">
-    <tiny-search :search-types="searchTypes1">
+    <tiny-search :search-types="searchTypes1" :type-value="typeValue">
       <template #poplist="slotScope">
         <b>{{ slotScope.slotScope.text }}</b>
       </template>
@@ -26,4 +26,6 @@ const searchTypes1 = ref([
     value: 3
   }
 ])
+
+const typeValue = searchTypes1.value[2]
 </script>

examples/sites/demos/pc/app/search/custom-search-types.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="height: 200px">
-    <tiny-search :search-types="searchTypes1">
+    <tiny-search :search-types="searchTypes1" :type-value="typeValue">
       <template #poplist="slotScope">
         <b>{{ slotScope.slotScope.text }}</b>
       </template>
@@ -30,8 +30,12 @@ export default {
           text: '插槽3',
           value: 3
         }
-      ]
+      ],
+      typeValue: null
     }
+  },
+  created() {
+    this.typeValue = this.searchTypes1[2]
   }
 }
 </script>

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

@@ -58,8 +58,14 @@ export default {
     },
     {
       'demoId': 'custom-search-types',
-      'name': { 'zh-CN': '自定义搜索类型的内容', 'en-US': 'Content of the user-defined search type' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': {
+        'zh-CN': '自定义搜索类型的内容',
+        'en-US': 'Content of the user-defined search type'
+      },
+      'desc': {
+        'zh-CN': '通过<code>type-value</code>属性设置搜索类型的默认值',
+        'en-US': 'Set the default value of the search type through the<code>type value</code>attribute'
+      },
       'codeFiles': ['custom-search-types.vue']
     },
     {
@@ -101,37 +107,20 @@ export default {
       'name': 'search',
       'type': 'component',
       'properties': [
-        {
-          'name': 'default-value',
-          'type': 'string',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '设置搜索输入框内的默认搜索值。',
-            'en-US': 'Set the default search value in the search text box.'
-          },
-          'demoId': ''
-        },
         {
           'name': 'clearable',
           'type': 'boolean',
-          'defaultValue': '',
+          'defaultValue': 'false',
           'desc': {
-            'zh-CN': ' 属性设置显示清空图标按钮',
-            'en-US': 'The clear icon is displayed in attribute settings.'
+            'zh-CN': '设置是否显示清空图标按钮',
+            'en-US': 'Set whether to display the clear icon button'
           },
           'demoId': 'clearable'
         },
-        {
-          'name': 'v-model',
-          'type': 'string',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '设置绑定的值。', 'en-US': 'Set the bound value.' },
-          'demoId': 'basic-usage'
-        },
         {
           'name': 'mini',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
             'zh-CN': '迷你模式，配置为true时，搜索默认显示为一个带图标的圆形按钮，点击后展开，默认 false 。',
             'en-US':
@@ -139,6 +128,17 @@ export default {
           },
           'demoId': 'mini-mode'
         },
+        {
+          'name': 'is-enter-search',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否在按下键盘Enter键的时候触发search事件',
+            'en-US':
+              'Transparent mode. If this parameter is set to true, the border becomes transparent and is displayed semi-transparently after being collapsed. Generally, this parameter is used in scenarios with a background. The default value is false.'
+          },
+          'demoId': 'search-events'
+        },
         {
           'name': 'placeholder',
           'type': 'string',
@@ -160,27 +160,33 @@ export default {
           },
           'demoId': 'search-types'
         },
-        {
-          'name': 'is-enter-search',
-          'type': 'boolean',
-          'defaultValue': 'true',
-          'desc': {
-            'zh-CN': '是否在按下键盘Enter键的时候触发search事件',
-            'en-US':
-              'Transparent mode. If this parameter is set to true, the border becomes transparent and is displayed semi-transparently after being collapsed. Generally, this parameter is used in scenarios with a background. The default value is false.'
-          },
-          'demoId': 'search-events'
-        },
         {
           'name': 'transparent',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
             'zh-CN':
               '设置为透明模式，配置为true时，边框变为透明且收缩后半透明显示，一般用在带有背景的场景，默认 false 。',
             'en-US': ''
           },
           'demoId': 'transparent-mode'
+        },
+        {
+          'name': 'type-value',
+          'type': 'object',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '设置搜索类型的默认值。默认搜索类型的第一项【3.11.0新增】',
+            'en-US': 'Set default values for search types. First item of default search type [3.11.0 New]'
+          },
+          'demoId': 'custom-search-types'
+        },
+        {
+          'name': 'v-model',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '绑定搜索值。', 'en-US': 'Bind search values.' },
+          'demoId': 'basic-usage'
         }
       ],
       'events': [
@@ -195,6 +201,18 @@ export default {
           },
           'demoId': 'change-events'
         },
+        {
+          'name': 'input',
+          'type': 'Function(arg1,arg2)',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN':
+              '在search组件输入实时触发的回调函数;arg1:{string 当前input框中值}，arg2:{object 搜索类型}【3.9.1新增】',
+            'en-US':
+              'Enter the callback function triggered in real time in the search component. arg1:{string value in the current input box}, arg2:{object search type} [added in 3.9.1]'
+          },
+          'demoId': ''
+        },
         {
           'name': 'search',
           'type': 'Function(arg1,arg2)',
@@ -216,18 +234,6 @@ export default {
               'Callback function triggered when the type of the search component is switched; arg1:{object search type}'
           },
           'demoId': 'select-events'
-        },
-        {
-          'name': 'input',
-          'type': 'Function(arg1,arg2)',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN':
-              '在search组件输入实时触发的回调函数;arg1:{string 当前input框中值}，arg2:{object 搜索类型}【3.9.1新增】',
-            'en-US':
-              'Enter the callback function triggered in real time in the search component. arg1:{string value in the current input box}, arg2:{object search type} [added in 3.9.1]'
-          },
-          'demoId': ''
         }
       ],
       'slots': [
@@ -238,19 +244,19 @@ export default {
           'desc': { 'zh-CN': '搜索的弹出列表插槽', 'en-US': 'Slot in the search pop-up list' },
           'demoId': 'custom-search-types'
         },
-        {
-          'name': 'text',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '默认搜索类型插槽', 'en-US': 'Default search type slot' },
-          'demoId': 'show-selected-types'
-        },
         {
           'name': 'prefix',
           'type': '',
           'defaultValue': '',
           'desc': { 'zh-CN': '左侧插槽', 'en-US': 'Left slot' },
           'demoId': 'slot-prefix'
+        },
+        {
+          'name': 'text',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '默认搜索类型插槽', 'en-US': 'Default search type slot' },
+          'demoId': 'show-selected-types'
         }
       ]
     }

packages/renderless/src/search/index.ts

@@ -81,7 +81,11 @@ export const clickOutside =
     }
   }
 
-export const setDefaultType = (searchTypes: ISearchValue[]): ISearchValue => {
+export const setDefaultType = (searchTypes: ISearchValue[], typeValue: ISearchValue): ISearchValue => {
+  if (typeValue && searchTypes.includes(typeValue)) {
+    return typeValue
+  }
+
   let type = {} as ISearchValue
 
   for (let i = 0, len = searchTypes.length; i < len; i++) {

packages/renderless/src/search/vue.ts

@@ -54,14 +54,14 @@ export const useFormatSearchTypes = ({ computed, props, reactive, toRefs, watch
   }
 
   const state = reactive({
-    searchValue: {},
+    searchValue: props.typeValue,
     types: computed(() => api.formatSearchTypes(props.searchTypes))
   })
 
   watch(
-    () => props.searchTypes,
+    () => props.typeValue,
     () => {
-      state.searchValue = api.setDefaultType(props.searchTypes)
+      state.searchValue = api.setDefaultType(props.searchTypes, props.typeValue)
     },
     { immediate: true }
   )

packages/vue/src/search/src/index.ts

@@ -86,7 +86,8 @@ export const ISearchProps = {
   changeBgColor: {
     type: Boolean,
     default: false
-  }
+  },
+  typeValue: Object
 }
 
 export default defineComponent({

packages/vue/src/search/src/pc.vue

@@ -103,7 +103,8 @@ export default defineComponent({
     'modelValue',
     'tabindex',
     'clearable',
-    'isEnterSearch'
+    'isEnterSearch',
+    'typeValue'
   ],
   emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input'],
   components: {