feat(pro:search): quickSelect prop supports object option (#1697)

quickSelectSearchable is deprecated now
IDuxFE · Oct 7, 2023 · 5259671 · 5259671
1 parent d3672cc
commit 5259671
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 13 deletions.
diff --git a/packages/pro/search/demo/CustomShortcuts.vue b/packages/pro/search/demo/CustomShortcuts.vue
@@ -396,8 +396,7 @@ const searchFields = computed<SearchField[]>(() => [
     type: 'select',
     label: 'Remote Select',
     key: 'remote_select_data',
-    quickSelect: true,
-    quickSelectSearchable: true,
+    quickSelect: { searchable: true },
     placeholder: 'please select',
     fieldConfig: {
       multiple: true,
@@ -412,8 +411,7 @@ const searchFields = computed<SearchField[]>(() => [
     type: 'treeSelect',
     label: 'Remote Tree',
     key: 'remote_tree_data',
-    quickSelect: true,
-    quickSelectSearchable: true,
+    quickSelect: { searchable: true },
     fieldConfig: {
       multiple: true,
       searchable: true,

diff --git a/packages/pro/search/demo/QuickSelect.vue b/packages/pro/search/demo/QuickSelect.vue
@@ -357,8 +357,7 @@ const searchFields = computed<SearchField[]>(() => [
     type: 'select',
     label: 'Remote Select',
     key: 'remote_select_data',
-    quickSelect: true,
-    quickSelectSearchable: true,
+    quickSelect: { searchable: true },
     placeholder: 'please select',
     fieldConfig: {
       multiple: true,
@@ -373,8 +372,7 @@ const searchFields = computed<SearchField[]>(() => [
     type: 'treeSelect',
     label: 'Remote Tree',
     key: 'remote_tree_data',
-    quickSelect: true,
-    quickSelectSearchable: true,
+    quickSelect: { searchable: true },
     fieldConfig: {
       multiple: true,
       searchable: true,

diff --git a/packages/pro/search/docs/Api.zh.md b/packages/pro/search/docs/Api.zh.md
@@ -72,8 +72,7 @@ interface SearchItemCreateContext<V = unknown> extends Partial<SearchValue<V>> {
 | `key` | 唯一的key | `VKey` | - | - | 必填 |
 | `label` | 搜索条件的词条名称 | `string` | - | - | 必填 |
 | `multiple` | 是否允许重复 | `boolean` | - | - | 为 `true` 时，该搜索条件可以被输入多次 |
-| `quickSelect` | 是否在快捷面板中展示 | `boolean` | - | - | 为 `true` 时，默认启用快捷面板, `multiple` 的搜索项该配置不生效 |
-| `quickSelectSearchable` | 是否在快捷面板中启用搜索 | `boolean` | - | - | 为 `true` 时，为该搜索项在快捷面板中增加搜索输入框 |
+| `quickSelect` | 是否在快捷面板中展示 | `boolean \| SearchFieldQuickSelect` | - | - | 是否启用快捷面板, `multiple` 的搜索项该配置不生效。 |
 | `operators` | 搜索条件的中间操作符 | `string[]` | - | - | 提供时，会在搜索词条名称中间增加一个操作符，如 `'='`, `'!='` |
 | `defaultOperator` | 默认的操作符 | `string` | - | - | 提供时，会自动填入默认的操作符 |
 | `defaultValue` | 默认值 | - | - | - | 提供时，会自动填入默认值 |
@@ -85,6 +84,12 @@ interface SearchItemCreateContext<V = unknown> extends Partial<SearchValue<V>> {
 | `validator` | 搜索项校验函数 | `(value: SearchValue) => { message?: string } | undefined` | - | - | 返回错误信息 |
 | `onPanelVisibleChange` | 面板 | `(visible: boolean) => void` | - | - | 面板的展开与隐藏状态改变的回调函数 |
 
+```ts
+interface SearchFieldQuickSelect {
+  searchable: boolean // 是否开启搜索功能
+}
+```
+
 #### InputSearchField
 
 普通输入类型

diff --git a/packages/pro/search/src/components/quickSelect/QuickSelectItem.tsx b/packages/pro/search/src/components/quickSelect/QuickSelectItem.tsx
@@ -9,7 +9,9 @@ import type { SearchState } from '../../composables/useSearchStates'
 
 import { computed, defineComponent, inject, normalizeClass, ref, watch } from 'vue'
 
-import { callEmit, useState } from '@idux/cdk/utils'
+import { isObject } from 'lodash-es'
+
+import { Logger, callEmit, useState } from '@idux/cdk/utils'
 import { type IconInstance, IxIcon } from '@idux/components/icon'
 import { IxInput } from '@idux/components/input'
 
@@ -45,6 +47,18 @@ export default defineComponent({
       }
     }
 
+    const quickSelectSearchable = computed(() => {
+      if (isObject(props.searchField.quickSelect)) {
+        return props.searchField.quickSelect.searchable
+      }
+
+      if (props.searchField.quickSelectSearchable) {
+        Logger.warn('pro/search', '`quickSelectSearchable` is deprecated, use `quickSelect.searchable` instead')
+        return true
+      }
+
+      return false
+    })
     const searchBarCls = computed(() => {
       const prefixCls = `${mergedPrefixCls.value}-quick-select-item-search-bar`
       return normalizeClass({
@@ -114,7 +128,7 @@ export default defineComponent({
         <div class={classes}>
           <div class={`${prefixCls}-header`}>
             <label class={`${prefixCls}-label`}>{props.searchField.label}</label>
-            {props.searchField.quickSelectSearchable && (
+            {quickSelectSearchable.value && (
               <div class={searchBarCls.value}>
                 <IxInput
                   ref={searchInputRef}

diff --git a/packages/pro/search/src/types/searchFields.ts b/packages/pro/search/src/types/searchFields.ts
@@ -17,13 +17,21 @@ import type { DatePanelProps, DateRangePanelProps } from '@idux/components/date-
 import type { TreeDragDropOptions } from '@idux/components/tree'
 import type { VNodeChild } from 'vue'
 
+interface SearchFieldQuickSelect {
+  searchable?: boolean
+}
+
 interface SearchFieldBase<V = unknown> {
   key: VKey
   label: string
   icon?: string
   multiple?: boolean
   operators?: string[]
-  quickSelect?: boolean
+  quickSelect?: boolean | SearchFieldQuickSelect
+
+  /**
+   * @deprecated please use quickSelect.searchable instead
+   */
   quickSelectSearchable?: boolean
   defaultOperator?: string
   defaultValue?: V