feat(pro:search): add useParser api for value parsing (#1721)

IDuxFE · Oct 30, 2023 · d96bed4 · d96bed4
1 parent 69013e8
commit d96bed4
Show file tree

Hide file tree

Showing 9 changed files with 408 additions and 23 deletions.
diff --git a/packages/pro/search/demo/Parser.md b/packages/pro/search/demo/Parser.md
@@ -0,0 +1,6 @@
+---
+order: 50
+title:
+  zh: 使用 `useParser` 解析搜索值
+  en: Parse search value using `useParser`
+---
diff --git a/packages/pro/search/demo/Parser.vue b/packages/pro/search/demo/Parser.vue
@@ -0,0 +1,305 @@
+<template>
+  <IxProSearch v-model:value="value" style="width: 100%" :searchFields="searchFields"></IxProSearch>
+  <IxTable :columns="tableColums" :dataSource="tableData"></IxTable>
+</template>
+
+<script setup lang="ts">
+import type { TableColumn } from '@idux/components/table'
+
+import { computed, ref } from 'vue'
+
+import { type SearchField, type SearchValue, useParser } from '@idux/pro/search'
+
+const value = ref<SearchValue[]>([
+  {
+    key: 'level',
+    name: 'Level',
+    operator: '=',
+    value: 'level1',
+  },
+  {
+    key: 'security_state',
+    name: 'Security State',
+    value: ['high', 'low'],
+  },
+  {
+    key: 'keyword',
+    name: '',
+    value: 'custom keyword',
+  },
+])
+const searchFields = ref<SearchField[]>([
+  {
+    key: 'keyword',
+    type: 'input',
+    label: 'Keyword',
+    multiple: true,
+    placeholder: 'please input keyword',
+    fieldConfig: {
+      trim: true,
+    },
+  },
+  {
+    type: 'select',
+    label: 'Level',
+    key: 'level',
+    operators: ['=', '!='],
+    defaultOperator: '=',
+    fieldConfig: {
+      multiple: false,
+      searchable: true,
+      dataSource: [
+        {
+          key: 'level1',
+          label: 'Level 1',
+        },
+        {
+          key: 'level2',
+          label: 'Level 2',
+        },
+        {
+          key: 'level3',
+          label: 'Level 3',
+        },
+      ],
+    },
+  },
+  {
+    type: 'select',
+    label: 'Security State',
+    key: 'security_state',
+    fieldConfig: {
+      multiple: true,
+      searchable: true,
+      dataSource: [
+        {
+          key: 'fatal',
+          label: 'fatal',
+        },
+        {
+          key: 'high',
+          label: 'high',
+        },
+        {
+          key: 'mediumn',
+          label: 'mediumn',
+        },
+        {
+          key: 'low',
+          label: 'low',
+        },
+      ],
+    },
+  },
+  {
+    type: 'treeSelect',
+    label: 'Tree Data',
+    key: 'tree_data',
+    fieldConfig: {
+      multiple: true,
+      searchable: true,
+      checkable: true,
+      cascaderStrategy: 'all',
+      dataSource: [
+        {
+          label: 'Node 0',
+          key: '0',
+          children: [
+            {
+              label: 'Node 0-0',
+              key: '0-0',
+              children: [
+                {
+                  label: 'Node 0-0-0',
+                  key: '0-0-0',
+                },
+                {
+                  label: 'Node 0-0-1',
+                  key: '0-0-1',
+                },
+              ],
+            },
+            {
+              label: 'Node 0-1',
+              key: '0-1',
+              children: [
+                { label: 'Node 0-1-0', key: '0-1-0' },
+                { label: 'Node 0-1-1', key: '0-1-1' },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    type: 'cascader',
+    key: 'cascader',
+    label: 'Cascader',
+    fieldConfig: {
+      fullPath: true,
+      multiple: true,
+      searchable: true,
+      dataSource: [
+        {
+          key: 'components',
+          label: 'Components',
+          children: [
+            {
+              key: 'general',
+              label: 'General',
+              children: [
+                {
+                  key: 'button',
+                  label: 'Button',
+                },
+                {
+                  key: 'header',
+                  label: 'Header',
+                },
+                {
+                  key: 'icon',
+                  label: 'Icon',
+                },
+              ],
+            },
+            {
+              key: 'layout',
+              label: 'Layout',
+              children: [
+                {
+                  key: 'divider',
+                  label: 'Divider',
+                },
+                {
+                  key: 'grid',
+                  label: 'Grid',
+                },
+                {
+                  key: 'space',
+                  label: 'Space',
+                },
+              ],
+            },
+            {
+              key: 'navigation',
+              label: 'Navigation',
+              children: [
+                {
+                  key: 'breadcrumb',
+                  label: 'Breadcrumb',
+                },
+                {
+                  key: 'dropdown',
+                  label: 'Dropdown',
+                },
+                {
+                  key: 'menu',
+                  label: 'Menu',
+                },
+                {
+                  key: 'pagination',
+                  label: 'Pagination',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          key: 'pro',
+          label: 'Pro',
+          children: [
+            {
+              key: 'pro-layout',
+              label: 'Layout',
+            },
+            {
+              key: 'pro-table',
+              label: 'Table',
+              disabled: true,
+            },
+            {
+              key: 'pro-transfer',
+              label: 'Transfer',
+            },
+          ],
+        },
+        {
+          key: 'cdk',
+          label: 'CDK',
+          disabled: true,
+          children: [
+            {
+              key: 'a11y',
+              label: 'Accessibility',
+            },
+            {
+              key: 'breakpoint',
+              label: 'Breakpoint',
+            },
+            {
+              key: 'click-outside',
+              label: 'ClickOutside',
+            },
+            {
+              key: 'clipboard',
+              label: 'Clipboard',
+            },
+            {
+              key: 'forms',
+              label: 'Forms',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    type: 'datePicker',
+    label: 'Date',
+    key: 'date',
+    fieldConfig: {
+      type: 'datetime',
+    },
+  },
+  {
+    type: 'dateRangePicker',
+    label: 'Date Range',
+    key: 'date_range',
+    fieldConfig: {
+      type: 'datetime',
+    },
+  },
+])
+
+const tableColums: TableColumn[] = [
+  {
+    type: 'indexable',
+  },
+  {
+    dataKey: 'name',
+    title: 'Name',
+    width: 100,
+  },
+  {
+    dataKey: 'input',
+    title: 'Search Input',
+  },
+]
+
+const { parse } = useParser(searchFields)
+const tableData = computed(() => {
+  const parseRes = parse(value.value)
+
+  return parseRes.map(res => {
+    const { label, segments } = res
+
+    return {
+      name: label,
+      input: segments.map(seg => seg.input).join(' '),
+    }
+  })
+})
+</script>
+
+<style scoped lang="less"></style>
diff --git a/packages/pro/search/index.ts b/packages/pro/search/index.ts
@@ -14,6 +14,7 @@ const IxProSearch = ProSearch as unknown as ProSearchComponent
 const IxProSearchShortcut = ProSearchShortcut as unknown as ProSearchShortcutComponent
 
 export { IxProSearch, IxProSearchShortcut }
+export { useParser } from './src/useParser'
 
 export type {
   ProSearchSize,
@@ -29,3 +30,5 @@ export type {
   SearchItemCreateContext,
   SearchItemConfirmContext,
 } from './src/types'
+
+export type { ParserContext, ParseResult } from './src/useParser'
diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx
@@ -46,6 +46,7 @@ export default defineComponent({
       () => !!props.searchFields?.some(field => !!field.quickSelect && !field.multiple),
     )
 
+    const searchFields = computed(() => props.searchFields ?? [])
     const quickSelectOverlayOpened = computed(() => quickSelectActive.value && overlayOpened.value)
 
     const elementRef = ref<HTMLElement | undefined>()
@@ -54,7 +55,7 @@ export default defineComponent({
 
     const searchValueContext = useSearchValues(props)
     const { searchValues } = searchValueContext
-    const resolvedSearchFieldsContext = useResolvedSearchFields(props, mergedPrefixCls, dateConfig)
+    const resolvedSearchFieldsContext = useResolvedSearchFields(searchFields, mergedPrefixCls, dateConfig)
     const { fieldKeyMap } = resolvedSearchFieldsContext
     const searchStateContext = useSearchStates(props, fieldKeyMap, searchValueContext)
     const { searchStates, initSearchStates, clearSearchState, updateSearchValues, isSegmentVisible } =

diff --git a/packages/pro/search/src/composables/useResolvedSearchFields.ts b/packages/pro/search/src/composables/useResolvedSearchFields.ts
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { ProSearchProps, ResolvedSearchField, SearchField, Segment } from '../types'
+import type { ResolvedSearchField, SearchField, Segment } from '../types'
 import type { VKey } from '@idux/cdk/utils'
 import type { DateConfig } from '@idux/components/config'
 
@@ -26,13 +26,13 @@ export interface ResolvedSearchFieldsContext {
 }
 
 export function useResolvedSearchFields(
-  props: ProSearchProps,
+  searchFields: ComputedRef<SearchField[]>,
   mergedPrefixCls: ComputedRef<string>,
   dateConfig: DateConfig,
 ): ResolvedSearchFieldsContext {
   const resolvedSearchFields = computed(
     () =>
-      props.searchFields?.map(searchField => {
+      searchFields.value.map(searchField => {
         return {
           ...searchField,
           segments: [