feat(pro:search): add quick select panel support (#1529)

IDuxFE · Apr 17, 2023 · daa39da · daa39da
1 parent 0dad84b
commit daa39da
Show file tree

Hide file tree

Showing 63 changed files with 2,732 additions and 956 deletions.
diff --git a/packages/components/_private/overflow/src/Overflow.tsx b/packages/components/_private/overflow/src/Overflow.tsx
@@ -118,10 +118,13 @@ export default defineComponent({
         throwError('components/_private/overflow', 'item slot must be provided')
       }
       const nodeContent = slots.item?.(item) ?? ''
+
+      const key = props.getKey(item)
       return (
         <Item
           {...itemSharedProps}
-          itemKey={props.getKey(item)}
+          key={key}
+          itemKey={key}
           display={index < displayCount.value}
           onSizeChange={(itemEl: Element, key?: VKey) => setItemWidth(key!, itemEl)}
         >

diff --git a/packages/components/_private/overlay/src/Overlay.tsx b/packages/components/_private/overlay/src/Overlay.tsx
@@ -102,6 +102,7 @@ export default defineComponent({
 
     expose({
       updatePopper: update,
+      getPopperElement: () => convertElement(popperRef),
     })
 
     const handleClickOutside = (evt: Event) => {

diff --git a/packages/components/_private/overlay/src/types.ts b/packages/components/_private/overlay/src/types.ts
@@ -68,6 +68,7 @@ export const overlayProps = {
 
 export interface OverlayBindings {
   updatePopper: (options?: Partial<PopperOptions>) => void
+  getPopperElement: () => HTMLElement | undefined | null
 }
 
 export type OverlayProps = ExtractInnerPropTypes<typeof overlayProps>

diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
@@ -40,7 +40,7 @@ export const selectPanelProps = {
   onScrolledBottom: [Function, Array] as PropType<MaybeArray<() => void>>,
 
   // private
-  _virtualScrollHeight: { type: Number, default: 256 },
+  _virtualScrollHeight: { type: [Number, String] as PropType<number | 'auto' | '100%'>, default: 256 },
   _virtualScrollItemHeight: { type: Number, default: 32 },
 } as const
 

diff --git a/packages/pro/search/demo/ConvertToKeyword.vue b/packages/pro/search/demo/ConvertToKeyword.vue
@@ -5,12 +5,13 @@
     :searchFields="searchFields"
     :onChange="onChange"
     :onSearch="onSearch"
+    :onItemCreate="onItemCreate"
     :onItemConfirm="onItemConfirm"
   ></IxProSearch>
 </template>
 
 <script setup lang="ts">
-import type { SearchField, SearchItemConfirmContext, SearchValue } from '@idux/pro/search'
+import type { SearchField, SearchItemConfirmContext, SearchItemCreateContext, SearchValue } from '@idux/pro/search'
 
 import { ref } from 'vue'
 
@@ -101,6 +102,17 @@ const onChange = (value: SearchValue[] | undefined, oldValue: SearchValue[] | un
 const onSearch = () => {
   console.log('onSearch')
 }
+
+const onItemCreate = (context: SearchItemCreateContext) => {
+  const { name, nameInput } = context
+
+  if (!name && nameInput) {
+    searchValues.value.push({
+      key: 'keyword',
+      value: nameInput,
+    })
+  }
+}
 const onItemConfirm = (context: SearchItemConfirmContext) => {
   const { removed, nameInput, operatorInput, valueInput } = context
   if (!removed) {

diff --git a/packages/pro/search/demo/Custom.vue b/packages/pro/search/demo/Custom.vue
@@ -148,7 +148,6 @@ const handleUserFormKeyDown = (evt: KeyboardEvent, confirm: () => void) => {
   }
 }
 .demo-pro-search-custom-user-form-input {
-  min-width: 305px;
   color: #684545;
   text-align: center;
 }

diff --git a/packages/pro/search/demo/MergeItems.vue b/packages/pro/search/demo/MergeItems.vue
@@ -1,15 +1,15 @@
 <template>
   <IxProSearch
-    :value="value"
+    v-model:value="value"
     style="width: 100%"
     :searchFields="searchFields"
     :onSearch="onSearch"
-    :onUpdate:value="handleValueUpdate"
+    :onItemConfirm="handleItemConfirm"
   ></IxProSearch>
 </template>
 
 <script setup lang="ts">
-import type { SearchField, SearchValue } from '@idux/pro/search'
+import type { SearchField, SearchItemConfirmContext, SearchValue } from '@idux/pro/search'
 
 import { reactive, ref } from 'vue'
 
@@ -92,22 +92,18 @@ const searchFields: SearchField[] = reactive([
   securityStateField,
 ])
 
-const handleValueUpdate = (searchValues: SearchValue[] | undefined) => {
-  const securityStateValues = searchValues?.filter(v => v.key === 'security_state') as
-    | SearchValue<string[]>[]
-    | undefined
-
-  if (!securityStateValues?.length) {
-    value.value = searchValues ?? []
+const handleItemConfirm = (item: SearchItemConfirmContext) => {
+  if (item.key !== 'security_state') {
     return
   }
 
-  const currentValue = securityStateValues.pop()!
-  value.value = !securityStateValues.length
-    ? searchValues!
-    : [...searchValues!.filter(v => v.key !== 'security_state'), currentValue]
+  const tempValue = (value.value ?? []).filter(v => v.key !== 'security_state')
+  if (!item.removed && item.value) {
+    tempValue.push({ key: 'security_state', operator: item.operator, value: item.value })
+  }
 
-  securityStateField.defaultValue = currentValue.value
+  value.value = tempValue
+  securityStateField.defaultValue = item.value
 }
 const onSearch = () => {
   console.log('onSearch')

diff --git a/packages/pro/search/demo/QuickSelect.md b/packages/pro/search/demo/QuickSelect.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh: 快捷面板
+  en: Quick select panel
+---
+
+## zh
+
+通过 `searchField.quickSelect` 配置支持在快捷搜索面板展示搜索项。
+
+## en
+
+Display searchField panel within quick select panel via `searchField.quickSelect`.