feat(pro:search): add validate function

packages/pro/search/demo/Invalid.md

@@ -7,8 +7,12 @@ title:
 
 ## zh
 
+通过 `searchField.validate` 校验搜索项。
+
 使用 `onItemInvalid` 事件处理非法搜索项。
 
 ## en
 
+validate search value via `searchField.validate`.
+
 Handle invalid search value via `onItemInvalid` event.

packages/pro/search/demo/Invalid.vue

@@ -14,6 +14,10 @@ import type { InvalidSearchValue, SearchField, SearchValue } from '@idux/pro/sea
 
 import { ref } from 'vue'
 
+import { useMessage } from '@idux/components/message'
+
+const error = useMessage().error
+
 const searchValues = ref<SearchValue[]>([])
 const searchFields: SearchField[] = [
   {
@@ -24,73 +28,34 @@ const searchFields: SearchField[] = [
     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',
-        },
-      ],
+    validate(searchValue) {
+      if (/[?^<>/+\-=]/.test(searchValue.value)) {
+        return "keyword mustn't contain ?^<>+-="
+      }
+
+      return true
     },
   },
   {
     type: 'datePicker',
-    label: 'Date',
+    label: 'Creation Time',
     key: 'date',
+    operators: ['=', '>', '<'],
     fieldConfig: {
       type: 'datetime',
     },
-  },
-  {
-    type: 'dateRangePicker',
-    label: 'Date Range',
-    key: 'date_range',
-    fieldConfig: {
-      type: 'datetime',
+    validate(searchValue) {
+      const { operator, value } = searchValue
+      const currentYear = new Date().getFullYear()
+      if ((operator === '>' || operator === '=') && value.getFullYear() > currentYear) {
+        return `cannot select date after year ${currentYear}`
+      }
+
+      if ((operator === '<' || operator === '=') && value.getFullYear() < 2000) {
+        return `cannot select date before year 2000`
+      }
+
+      return true
     },
   },
 ]
@@ -101,11 +66,8 @@ const onChange = (value: SearchValue[] | undefined, oldValue: SearchValue[] | un
 const onSearch = () => {
   console.log('onSearch')
 }
-const onInvalid = (value: InvalidSearchValue) => {
-  searchValues.value.push({
-    key: 'keyword',
-    value: (value.nameInput ?? '') + (value.operatorInput ?? '') + (value.valueInput ?? ''),
-  })
+const onInvalid = (searchValue: InvalidSearchValue) => {
+  error(`${searchValue.name} is invalid`)
 }
 </script>
 

packages/pro/search/demo/InvalidToKeyword.md

@@ -0,0 +1,14 @@
+---
+order: 21
+title:
+  zh: 非法搜索项转换为关键字
+  en: Convert Invalid Search Value To Keyword
+---
+
+## zh
+
+使用 `onItemInvalid` 事件将非法搜索项转换为关键字。
+
+## en
+
+convert invalid search value to keyword via `onItemInvalid` event.

packages/pro/search/demo/InvalidToKeyword.vue

@@ -0,0 +1,112 @@
+<template>
+  <IxProSearch
+    v-model:value="searchValues"
+    style="width: 100%"
+    :searchFields="searchFields"
+    :onChange="onChange"
+    :onSearch="onSearch"
+    :onItemInvalid="onInvalid"
+  ></IxProSearch>
+</template>
+
+<script setup lang="ts">
+import type { InvalidSearchValue, SearchField, SearchValue } from '@idux/pro/search'
+
+import { ref } from 'vue'
+
+const searchValues = ref<SearchValue[]>([])
+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')
+}
+const onInvalid = (value: InvalidSearchValue) => {
+  searchValues.value.push({
+    key: 'keyword',
+    value: (value.nameInput ?? '') + (value.operatorInput ?? '') + (value.valueInput ?? ''),
+  })
+}
+</script>
+
+<style scoped lang="less"></style>

packages/pro/search/docs/Index.zh.md

@@ -64,6 +64,7 @@ interface InvalidSearchValue<V = unknown> extends Partial<SearchValue<V>> {
 | `defaultOperator` | 默认的操作符 | `string` | - | - | 提供时，会自动填入默认的操作符 |
 | `defaultValue` | 默认值 | - | - | - | 提供时，会自动填入默认值 |
 | `inputClassName` | 输入框class | `string` | - | - | 用于自定义输入框样式 |
+| `validate` | 搜索项校验函数 | `(value: SearchValue) => boolean | string` | - | - | 返回 `string` 类型代表错误信息 |
 
 #### InputSearchField
 

packages/pro/search/src/composables/useSearchItem.ts

@@ -40,6 +40,7 @@ export function useSearchItems(
       return {
         key: searchState.key,
         optionKey: searchState.fieldKey,
+        invalidMessage: searchState.invalidMessage,
         segments: searchState.segmentValues
           .map(segmentValue => {
             if (segmentValue.name === 'name') {