feat(AutoComplete): add border less and customize clear button (#6829)

* feat: add border less

* feat: add customize clear button

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -1,5 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/auto-complete/demo/allow-clear.vue correctly 1`] = `
+<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search">
+  <!---->
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></span>
+    <!----><span class="ant-select-selection-placeholder">Clearable</span>
+  </div>
+  <!---->
+  <!---->
+  <!---->
+</div>
+<br>
+<br>
+<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search">
+  <!---->
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></span>
+    <!----><span class="ant-select-selection-placeholder">Customized clear icon</span>
+  </div>
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
 <div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
   <!---->
@@ -12,6 +35,18 @@ exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/auto-complete/demo/border-less.vue correctly 1`] = `
+<div style="width: 200px;" class="ant-select ant-select-borderless ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
+  <!---->
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></span>
+    <!----><span class="ant-select-selection-placeholder">border less</span>
+  </div>
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/auto-complete/demo/certain-category.vue correctly 1`] = `
 <div class="certain-category-search-wrapper" style="width: 250px;">
   <div popupclassname="certain-category-search-dropdown" class="ant-select certain-category-search ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 250px;">

components/auto-complete/demo/allow-clear.vue

@@ -0,0 +1,69 @@
+<docs>
+---
+order: 8
+title:
+  zh-CN: 自定义清除按钮
+  en-US: Customize clear button
+---
+
+## zh-CN
+
+自定义清除按钮。
+
+## en-US
+
+Customize clear button.
+</docs>
+
+<template>
+  <a-auto-complete
+    v-model:value="value"
+    :options="options"
+    style="width: 200px"
+    placeholder="Clearable"
+    :allow-clear="true"
+    @select="onSelect"
+    @search="onSearch"
+  />
+  <br />
+  <br />
+  <a-auto-complete
+    v-model:value="value"
+    :options="options"
+    style="width: 200px"
+    placeholder="Customized clear icon"
+    :allow-clear="true"
+    @select="onSelect"
+    @search="onSearch"
+  >
+    <template #clearIcon>
+      <close-outlined />
+    </template>
+  </a-auto-complete>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { CloseOutlined } from '@ant-design/icons-vue';
+
+interface MockVal {
+  value: string;
+}
+
+const mockVal = (str: string, repeat = 1): MockVal => {
+  return {
+    value: str.repeat(repeat),
+  };
+};
+const value = 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);
+};
+</script>

components/auto-complete/demo/border-less.vue

@@ -0,0 +1,53 @@
+<docs>
+---
+order: 7
+title:
+  zh-CN: 无边框
+  en-US: Border less
+---
+
+## zh-CN
+
+没有边框。
+
+## en-US
+
+border less.
+</docs>
+
+<template>
+  <a-auto-complete
+    v-model:value="value"
+    :options="options"
+    style="width: 200px"
+    placeholder="border less"
+    :bordered="false"
+    @select="onSelect"
+    @search="onSearch"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface MockVal {
+  value: string;
+}
+
+const mockVal = (str: string, repeat = 1): MockVal => {
+  return {
+    value: str.repeat(repeat),
+  };
+};
+const value = 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);
+};
+</script>

components/auto-complete/demo/index.vue

@@ -7,6 +7,8 @@
     <certain-category />
     <uncertain-category />
     <statusVue />
+    <border-less />
+    <allow-clear />
   </demo-sort>
 </template>
 
@@ -18,6 +20,8 @@ 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 BorderLess from './border-less.vue';
+import AllowClear from './allow-clear.vue';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -34,6 +38,8 @@ export default defineComponent({
     NonCaseSensitive,
     CertainCategory,
     UncertainCategory,
+    BorderLess,
+    AllowClear,
   },
   setup() {
     return {};

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

@@ -30,6 +30,8 @@ The differences with Select are:
 | allowClear | Show clear button, effective in multiple mode only. | boolean | false |  |
 | autofocus | get focus when component mounted | boolean | false |  |
 | backfill | backfill selected item the input when using keyboard | boolean | false |  |
+| bordered | Whether has border style | boolean | true | 4.0 |
+| clearIcon | Use slot custom clear icon | slot | `<CloseCircleFilled />` | 4.0 |
 | default (for customize input element) | customize input element | slot | `<Input />` |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultOpen | Initial open state of dropdown | boolean | - |  |

components/auto-complete/index.tsx

@@ -54,6 +54,7 @@ const AutoComplete = defineComponent({
     default: any;
     notFoundContent: any;
     dataSource: any;
+    clearIcon: any;
   }>,
   setup(props, { slots, attrs, expose }) {
     warning(

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

@@ -31,6 +31,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WERTQ6qvgEYAAA
 | allowClear | 支持清除, 单选模式有效 | boolean | false |  |
 | autofocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
+| bordered | 是否有边框 | boolean | true | 4.0 |
+| clearIcon | 使用插槽自定义清除按钮 | slot | `<CloseCircleFilled />` | 4.0 |
 | default (自定义输入框) | 自定义输入框 | slot | `<Input />` |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |