feat(pro:search): add ProSearch component (#989)

packages/pro/config/src/defaultConfig.ts

@@ -23,4 +23,9 @@ export const defaultConfig: ProGlobalConfig = {
     clearIcon: 'close-circle',
     collapseIcon: ['collapse', 'uncollapse'],
   },
+  search: {
+    clearable: true,
+    clearIcon: 'close-circle',
+    searchIcon: 'search',
+  },
 }

packages/pro/config/src/types.ts

@@ -5,15 +5,18 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+import type { PortalTargetType } from '@idux/cdk/portal'
 import type { ProLocale } from '@idux/pro/locales'
 import type { ProTableColumnIndexable } from '@idux/pro/table'
+import type { VNode } from 'vue'
 
 export interface ProGlobalConfig {
   common: ProCommonConfig
   locale: ProLocale
 
   table: ProTableConfig
   tree: ProTreeConfig
+  search: ProSearchConfig
 }
 
 export type ProGlobalConfigKey = keyof ProGlobalConfig
@@ -30,3 +33,10 @@ export interface ProTreeConfig {
   clearIcon: string
   collapseIcon: [string, string]
 }
+
+export interface ProSearchConfig {
+  clearable: boolean
+  clearIcon: string | VNode
+  searchIcon: string | VNode
+  overlayContainer?: PortalTargetType
+}

packages/pro/default.less

@@ -2,3 +2,4 @@
 @import './table/style/themes/default.less';
 @import './transfer/style/themes/default.less';
 @import './tree/style/themes/default.less';
+@import './search/style/themes/default.less';

packages/pro/index.ts

@@ -8,14 +8,23 @@
 import type { App, Directive } from 'vue'
 
 import { IxProLayout, IxProLayoutSiderTrigger } from '@idux/pro/layout'
+import { IxProSearch } from '@idux/pro/search'
 import { IxProTable, IxProTableLayoutTool } from '@idux/pro/table'
 import { IxProTransfer } from '@idux/pro/transfer'
 import { IxProTree } from '@idux/pro/tree'
 import { version } from '@idux/pro/version'
 
 const directives: Record<string, Directive> = {}
 
-const components = [IxProLayout, IxProLayoutSiderTrigger, IxProTable, IxProTableLayoutTool, IxProTransfer, IxProTree]
+const components = [
+  IxProLayout,
+  IxProLayoutSiderTrigger,
+  IxProTable,
+  IxProTableLayoutTool,
+  IxProTransfer,
+  IxProTree,
+  IxProSearch,
+]
 
 const install = (app: App): void => {
   components.forEach(component => {
@@ -36,4 +45,5 @@ export * from '@idux/pro/layout'
 export * from '@idux/pro/table'
 export * from '@idux/pro/transfer'
 export * from '@idux/pro/tree'
+export * from '@idux/pro/search'
 export * from '@idux/pro/version'

packages/pro/locales/src/langs/en-US.ts

@@ -34,6 +34,15 @@ const enUS: ProLocale = {
     expandAll: 'Expand all',
     collapseAll: 'Collapse all',
   },
+  search: {
+    keyword: 'Keyword',
+    ok: 'Ok',
+    cancel: 'Cancel',
+    selectAll: 'Select All',
+    placeholder: 'Click To select search options, press Enter to confirm',
+    switchToDatePanel: 'Switch To Date',
+    switchToTimePanel: 'Switch To Time',
+  },
 }
 
 export default enUS

packages/pro/locales/src/langs/zh-CN.ts

@@ -34,6 +34,15 @@ const zhCN: ProLocale = {
     expandAll: '展开全部',
     collapseAll: '收起全部',
   },
+  search: {
+    keyword: '关键字',
+    ok: '确定',
+    cancel: '取消',
+    selectAll: '全选',
+    placeholder: '点击选择筛选条件, 按回车键确认',
+    switchToDatePanel: '切换日期选择',
+    switchToTimePanel: '切换时间选择',
+  },
 }
 
 export default zhCN

packages/pro/locales/src/types.ts

@@ -30,11 +30,22 @@ export interface ProTreeLocale {
   collapseAll: string
 }
 
+export interface ProSearchLocale {
+  keyword: string
+  ok: string
+  cancel: string
+  selectAll: string
+  placeholder: string
+  switchToTimePanel: string
+  switchToDatePanel: string
+}
+
 export interface ProLocale {
   type: ProLocaleType
 
   table: ProTableLocale
   tree: ProTreeLocale
+  search: ProSearchLocale
 }
 
 export type ProLocaleType = 'zh-CN' | 'en-US'

packages/pro/search/__tests__/proSearch.spec.ts

@@ -0,0 +1,25 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+
+import { renderWork } from '@tests'
+
+import ProSearch from '../src/ProSearch'
+import { ProSearchProps } from '../src/types'
+
+describe.skip('ProSearch', () => {
+  const ProSearchMount = (options?: MountingOptions<Partial<ProSearchProps>>) =>
+    mount(ProSearch, { ...(options as MountingOptions<ProSearchProps>) })
+
+  renderWork<ProSearchProps>(ProSearch, {
+    props: {},
+  })
+
+  test('xxx work', async () => {
+    const wrapper = ProSearchMount({ props: { xxx: 'Xxx' } })
+
+    expect(wrapper.classes()).toContain('ix-Xxx')
+
+    await wrapper.setProps({ xxx: 'Yyy' })
+
+    expect(wrapper.classes()).toContain('ix-Yyy')
+  })
+})

packages/pro/search/demo/Basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh: 基本使用
+  en: Basic usage
+---
+
+## zh
+
+最简单的用法。关键字为默认内置搜索项。
+
+## en
+
+The simplest usage.

packages/pro/search/demo/Basic.vue

@@ -0,0 +1,122 @@
+<template>
+  <IxProSearch
+    v-model:value="value"
+    style="width: 100%"
+    :searchFields="searchFields"
+    :onChange="onChange"
+    :onSearch="onSearch"
+  ></IxProSearch>
+</template>
+
+<script setup lang="ts">
+import type { SearchField, SearchValue } from '@idux/pro/search'
+
+import { ref } from 'vue'
+
+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: SearchField[] = [
+  {
+    key: 'keyword',
+    type: 'input',
+    label: 'Keyword',
+    multiple: true,
+    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: 'datePicker',
+    label: 'Date',
+    key: 'date',
+    fieldConfig: {
+      type: 'datetime',
+    },
+  },
+  {
+    type: 'dateRangePicker',
+    label: 'Date Range',
+    key: 'date_range',
+    fieldConfig: {
+      type: 'datetime',
+    },
+  },
+]
+
+const onChange = (value: SearchValue[] | undefined, oldValue: SearchValue[] | undefined) => {
+  console.log(value, oldValue)
+}
+const onSearch = () => {
+  console.log('onSearch')
+}
+</script>
+
+<style scoped lang="less"></style>

packages/pro/search/demo/Custom.md

@@ -0,0 +1,14 @@
+---
+order: 30
+title:
+  zh: 自定义搜索项
+  en: Custom SearchOption
+---
+
+## zh
+
+通过 `'custom'` 类型的option自定义搜索项。
+
+## en
+
+Customize SearchOption using option with type `'custom'`.