feat: autocomplete add status

Author: tangjinzhou

components/auto-complete/demo/index.vue

@@ -6,6 +6,7 @@
     <non-case-sensitive />
     <certain-category />
     <uncertain-category />
+    <statusVue />
   </demo-sort>
 </template>
 
@@ -16,6 +17,7 @@ import Custom from './custom.vue';
 import NonCaseSensitive from './non-case-sensitive.vue';
 import CertainCategory from './certain-category.vue';
 import UncertainCategory from './uncertain-category.vue';
+import statusVue from './status.vue';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -25,6 +27,7 @@ export default defineComponent({
   CN,
   US,
   components: {
+    statusVue,
     Basic,
     Options,
     Custom,

components/auto-complete/demo/status.vue

@@ -0,0 +1,85 @@
+<docs>
+---
+order: 19
+version: 3.3.0
+title:
+  zh-CN: 自定义状态
+  en-US: Status
+---
+
+## zh-CN
+
+使用 `status` 为 AutoComplete 添加状态，可选 `error` 或者 `warning`。
+
+## en-US
+
+Add status to AutoComplete with `status`, which could be `error` or `warning`.
+
+</docs>
+
+<template>
+  <a-space direction="vertical" style="width: 100%">
+    <a-auto-complete
+      v-model:value="value"
+      :options="options"
+      style="width: 200px"
+      placeholder="input here"
+      status="error"
+      @select="onSelect"
+      @search="onSearch"
+    />
+    <a-auto-complete
+      v-model:value="value1"
+      :options="options"
+      style="width: 200px"
+      placeholder="input here"
+      status="warning"
+      allow-clear
+      @select="onSelect"
+      @search="onSearch"
+      @clear="onClear"
+    />
+  </a-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue';
+
+interface MockVal {
+  value: string;
+}
+const mockVal = (str: string, repeat = 1): MockVal => {
+  return {
+    value: str.repeat(repeat),
+  };
+};
+export default defineComponent({
+  setup() {
+    const value = ref('');
+    const value1 = ref('');
+    const options = ref<MockVal[]>([]);
+    const onSearch = (searchText: string) => {
+      console.log('searchText');
+      options.value = !searchText
+        ? []
+        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
+    };
+    const onSelect = (value: string) => {
+      console.log('onSelect', value);
+    };
+    watch(value, () => {
+      console.log('value', value.value);
+    });
+    return {
+      value,
+      value1,
+      options,
+      onSearch,
+      onSelect,
+      onClear: () => {
+        console.log('onClear');
+      },
+    };
+  },
+});
+</script>

components/auto-complete/index.en-US.md

@@ -40,6 +40,7 @@ The differences with Select are:
 | option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
 | options | Data source for autocomplete | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
 | placeholder | placeholder of input | string | - |  |
+| status | Set validation status | 'error' \| 'warning' | - | 3.3.0 |
 | v-model:value | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | - |  |
 
 ### events
@@ -52,6 +53,7 @@ The differences with Select are:
 | focus | Called when entering the component | function() |  |  |
 | search | Called when searching items. | function(value) | - |  |
 | select | Called when a option is selected. param is option's value and option instance. | function(value, option) |  |  |
+| clear | Called when clear | function | - | 3.3.0 |
 
 ## Methods
 

components/auto-complete/index.tsx

@@ -7,6 +7,7 @@ import Option from './Option';
 import OptGroup from './OptGroup';
 import omit from '../_util/omit';
 import useConfigInject from '../_util/hooks/useConfigInject';
+import type { InputStatus } from '../_util/statusUtils';
 
 function isSelectOptionOrSelectOptGroup(child: any): boolean {
   return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
@@ -30,6 +31,7 @@ export const autoCompleteProps = () => ({
   // optionLabelProp: PropTypes.string.def('children'),
   filterOption: { type: [Boolean, Function], default: false },
   defaultActiveFirstOption: { type: Boolean, default: true },
+  status: String as PropType<InputStatus>,
 });
 
 export type AutoCompleteProps = Partial<ExtractPropTypes<ReturnType<typeof autoCompleteProps>>>;

components/auto-complete/index.zh-CN.md

@@ -41,18 +41,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
 | options | 自动完成的数据源 | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
 | placeholder | 输入框提示 | string \| slot | - |  |
+| status | 设置校验状态 | 'error' \| 'warning' | - | 3.3.0 |
 | v-model:value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | 无 |  |
 
 ### 事件
 
 | 事件名称 | 说明 | 回调参数 | 版本 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | blur | 失去焦点时的回调 | function() |  |
 | change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |  |
 | dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |  |
 | focus | 获得焦点时的回调 | function() |  |
 | search | 搜索补全项的时候调用 | function(value) |  |
 | select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |  |
+| clear | 清除内容时回调 | function | - | 3.3.0 |
 
 ## 方法