feat(pro:search): add size prop (#1667)

packages/pro/config/src/defaultConfig.ts

@@ -51,5 +51,6 @@ export const defaultConfig: ProGlobalConfig = {
     clearable: true,
     clearIcon: 'close-circle',
     searchIcon: 'search',
+    size: 'md',
   },
 }

packages/pro/config/src/types.ts

@@ -11,6 +11,7 @@ import type { PortalTargetType } from '@idux/cdk/portal'
 import type { FormSize } from '@idux/components/form'
 import type { ProFormSchemaFormatter } from '@idux/pro/form'
 import type { ProLocale } from '@idux/pro/locales'
+import type { ProSearchSize } from '@idux/pro/search'
 import type { ProTableColumnIndexable } from '@idux/pro/table'
 import type { TextareaResize } from '@idux/pro/textarea'
 import type { Options as AjvOptions } from 'ajv'
@@ -88,6 +89,7 @@ export interface ProSearchConfig {
   clearable: boolean
   clearIcon: string | VNode
   searchIcon: string | VNode
+  size: ProSearchSize
   overlayContainer?: PortalTargetType
 }
 

packages/pro/search/demo/Size.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh: 尺寸
+  en: Size
+---
+
+## zh
+
+支持 `sm` 和 `md` 两种尺寸。
+
+## en
+
+Supports `sm` and `md` size.

packages/pro/search/demo/Size.vue

@@ -0,0 +1,295 @@
+<template>
+  <IxRadioGroup v-model:value="size" buttoned>
+    <IxRadio value="sm">Small</IxRadio>
+    <IxRadio value="md">Medium</IxRadio>
+  </IxRadioGroup>
+  <br />
+  <br />
+  <IxProSearch
+    v-model:value="value"
+    style="width: 100%"
+    :size="size"
+    :searchFields="searchFields"
+    :onChange="onChange"
+    :onSearch="onSearch"
+  ></IxProSearch>
+</template>
+
+<script setup lang="ts">
+import type { ProSearchSize, SearchField, SearchValue } from '@idux/pro/search'
+
+import { ref } from 'vue'
+
+const size = ref<ProSearchSize>('md')
+
+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,
+    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 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/index.ts

@@ -16,6 +16,7 @@ const IxProSearchShortcut = ProSearchShortcut as unknown as ProSearchShortcutCom
 export { IxProSearch, IxProSearchShortcut }
 
 export type {
+  ProSearchSize,
   ProSearchInstance,
   ProSearchComponent,
   ProSearchPublicProps as ProSearchProps,

packages/pro/search/src/ProSearch.tsx

@@ -105,13 +105,15 @@ export default defineComponent({
     const clearable = computed(() => props.clearable ?? config.clearable)
     const clearIcon = computed(() => props.clearIcon ?? config.clearIcon)
     const searchIcon = computed(() => props.searchIcon ?? config.searchIcon)
+    const size = computed(() => props.size ?? config.size)
 
     const allItems = computed(() => [...searchItems.value, 'name-select' as const])
 
     const classes = computed(() => {
       const prefixCls = mergedPrefixCls.value
       return normalizeClass({
         [prefixCls]: true,
+        [`${prefixCls}-${size.value}`]: size.value,
         [`${prefixCls}-focused`]: focused.value,
         [`${prefixCls}-disabled`]: !!props.disabled,
       })

packages/pro/search/src/types/proSearch.ts

@@ -12,6 +12,8 @@ import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '
 import type { OverlayContainerType } from '@idux/components/utils'
 import type { DefineComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
 
+export type ProSearchSize = 'sm' | 'md'
+
 export const proSearchProps = {
   value: Array as PropType<SearchValue[]>,
   clearable: {
@@ -33,6 +35,7 @@ export const proSearchProps = {
   },
   placeholder: String,
   searchFields: Array as PropType<SearchField[]>,
+  size: String as PropType<ProSearchSize>,
   zIndex: Number,
 
   //events