Skip to content

Commit cb3c002

Browse files
tangjinzhoutangjinzhou
committed
feat: autocomplete support option slot
1 parent e357303 commit cb3c002

File tree

9 files changed

+79
-70
lines changed

9 files changed

+79
-70
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
4-
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
4+
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
55
<!---->
66
<!---->
7-
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input 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>
7+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input 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" type="search"></span>
88
<!----><span class="ant-select-selection-placeholder">input here</span>
99
</div>
1010
<!---->
@@ -39,10 +39,10 @@ exports[`renders ./components/auto-complete/demo/custom.vue correctly 1`] = `
3939
`;
4040

4141
exports[`renders ./components/auto-complete/demo/non-case-sensitive.vue correctly 1`] = `
42-
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
42+
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
4343
<!---->
4444
<!---->
45-
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input 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>
45+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input 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" type="search"></span>
4646
<!----><span class="ant-select-selection-placeholder">input here</span>
4747
</div>
4848
<!---->
@@ -51,10 +51,10 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.vue correctl
5151
`;
5252
5353
exports[`renders ./components/auto-complete/demo/options.vue correctly 1`] = `
54-
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
54+
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
5555
<!---->
5656
<!---->
57-
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input 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>
57+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input 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" type="search"></span>
5858
<!----><span class="ant-select-selection-placeholder">input here</span>
5959
</div>
6060
<!---->

‎components/auto-complete/demo/certain-category.vue‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -26,36 +26,35 @@ Lookup-Patterns - Certain Category.
2626
size="large"
2727
style="width: 100%"
2828
option-label-prop="value"
29+
:options="dataSource"
2930
>
30-
<template #dataSource>
31-
<a-select-opt-group v-for="group in dataSource" :key="group.title">
32-
<template #label>
33-
<span>
34-
{{ group.title }}
35-
<a
36-
style="float: right"
37-
href="https://www.google.com/search?q=antd"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
>
41-
more
42-
</a>
43-
</span>
44-
</template>
45-
<a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
46-
{{ opt.title }}
47-
<span class="certain-search-item-count">{{ opt.count }} people</span>
48-
</a-select-option>
49-
</a-select-opt-group>
50-
<a-select-option key="all" disabled class="show-all">
31+
<template #option="item">
32+
<template v-if="item.options">
33+
<span>
34+
{{ item.value }}
35+
<a
36+
style="float: right"
37+
href="https://www.google.com/search?q=antd"
38+
target="_blank"
39+
rel="noopener noreferrer"
40+
>
41+
more
42+
</a>
43+
</span>
44+
</template>
45+
<template v-else-if="item.value === 'all'">
5146
<a
5247
href="https://www.google.com/search?q=ant-design-vue"
5348
target="_blank"
5449
rel="noopener noreferrer"
5550
>
5651
View all results
5752
</a>
58-
</a-select-option>
53+
</template>
54+
<template v-else>
55+
{{ item.title }}
56+
<span class="certain-search-item-count">{{ item.count }} people</span>
57+
</template>
5958
</template>
6059
<a-input placeholder="input here">
6160
<template #suffix><search-outlined class="certain-category-icon" /></template>
@@ -69,40 +68,43 @@ import { SearchOutlined } from '@ant-design/icons-vue';
6968
import { defineComponent, ref } from 'vue';
7069
const dataSource = [
7170
{
72-
title: 'Libraries',
73-
children: [
71+
value: 'Libraries',
72+
options: [
7473
{
75-
title: 'AntDesign',
74+
value: 'AntDesign',
7675
count: 10000,
7776
},
7877
{
79-
title: 'AntDesign UI',
78+
value: 'AntDesign UI',
8079
count: 10600,
8180
},
8281
],
8382
},
8483
{
85-
title: 'Solutions',
86-
children: [
84+
value: 'Solutions',
85+
options: [
8786
{
88-
title: 'AntDesign UI FAQ',
87+
value: 'AntDesign UI FAQ',
8988
count: 60100,
9089
},
9190
{
92-
title: 'AntDesign FAQ',
91+
value: 'AntDesign FAQ',
9392
count: 30010,
9493
},
9594
],
9695
},
9796
{
98-
title: 'Articles',
99-
children: [
97+
value: 'Articles',
98+
options: [
10099
{
101-
title: 'AntDesign design language',
100+
value: 'AntDesign design language',
102101
count: 100000,
103102
},
104103
],
105104
},
105+
{
106+
value: 'all',
107+
},
106108
];
107109
export default defineComponent({
108110
components: {

‎components/auto-complete/demo/options.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,24 @@ title:
88

99
## zh-CN
1010

11-
也可以直接传递 #dataSource 的Option。
11+
3.0 以上版本，可以传递 `v-slot:option` 来自定义 Option。
1212

1313
## en-US
1414

15-
You could pass `#dataSource` as children of `AutoComplete`, instead of using `dataSource`.
15+
For 3.0+, You could pass `v-slot:option` to custom option.
1616
</docs>
1717

1818
<template>
1919
<a-auto-complete
2020
v-model:value="value"
2121
style="width: 200px"
2222
placeholder="input here"
23+
:options="options"
2324
@search="handleSearch"
2425
>
25-
<template #dataSource>
26-
<a-select-option v-for="email in result" :key="email">
27-
{{ email }}
28-
</a-select-option>
26+
<template #option="{ value: val }">
27+
{{ val.split('@')[0] }} @
28+
<span style="font-weight: bold">{{ val.split('@')[1] }}</span>
2929
</template>
3030
</a-auto-complete>
3131
</template>
@@ -36,20 +36,20 @@ import { defineComponent, ref } from 'vue';
3636
export default defineComponent({
3737
setup() {
3838
const value = ref('');
39-
const result = ref<string[]>([]);
39+
const options = ref<{ value: string }[]>([]);
4040
const handleSearch = (val: string) => {
41-
let res: string[];
41+
let res: { value: string }[];
4242
if (!val || val.indexOf('@') >= 0) {
4343
res = [];
4444
} else {
45-
res = ['gmail.com', '163.com', 'qq.com'].map(domain => `${val}@${domain}`);
45+
res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({ value: `${val}@${domain}` }));
4646
}
47-
result.value = res;
47+
options.value = res;
4848
};
4949
5050
return {
5151
value,
52-
result,
52+
options,
5353
handleSearch,
5454
};
5555
},

‎components/auto-complete/demo/uncertain-category.vue‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,20 @@ Lookup-Patterns - Uncertain Category.
2323
size="large"
2424
style="width: 100%"
2525
option-label-prop="title"
26+
:options="dataSource"
2627
@select="onSelect"
2728
@search="handleSearch"
2829
>
29-
<template #dataSource>
30-
<a-select-option v-for="item in dataSource" :key="item.category" :title="item.category">
31-
Found {{ item.query }} on
32-
<a
33-
:href="`https://s.taobao.com/search?q=${item.query}`"
34-
target="_blank"
35-
rel="noopener noreferrer"
36-
>
37-
{{ item.category }}
38-
</a>
39-
<span class="global-search-item-count">{{ item.count }} results</span>
40-
</a-select-option>
30+
<template #option="item">
31+
Found {{ item.query }} on
32+
<a
33+
:href="`https://s.taobao.com/search?q=${item.query}`"
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
>
37+
{{ item.category }}
38+
</a>
39+
<span class="global-search-item-count">{{ item.count }} results</span>
4140
</template>
4241
<a-input-search size="large" placeholder="input here" enter-button></a-input-search>
4342
</a-auto-complete>
@@ -49,6 +48,7 @@ import { defineComponent, ref } from 'vue';
4948
interface Option {
5049
query: string;
5150
category: string;
51+
value: string;
5252
count: number;
5353
}
5454
export default defineComponent({
@@ -67,9 +67,10 @@ export default defineComponent({
6767
return new Array(getRandomInt(5))
6868
.join('.')
6969
.split('.')
70-
.map((item, idx) => ({
70+
.map((_item, idx) => ({
7171
query,
7272
category: `${query}${idx}`,
73+
value: `${query}${idx}`,
7374
count: getRandomInt(200, 100),
7475
}));
7576
};

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ When there is a need for autocomplete functionality.
2525
| backfill | backfill selected item the input when using keyboard | boolean | false | |
2626
| #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
2727
| options | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
28+
| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
2829
| dropdownMenuStyle | additional style applied to dropdown menu | object | | 1.5.0 |
2930
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
3031
| disabled | Whether disabled select | boolean | false | |
@@ -38,7 +39,7 @@ When there is a need for autocomplete functionality.
3839
### events
3940

4041
| Events Name | Description | Arguments | Version |
41-
| --- | --- | --- | --- |
42+
| --- | --- | --- | --- | --- |
4243
| change | Called when select an option or input value change, or value of input is changed | function(value) | |
4344
| blur | Called when leaving the component. | function() | |
4445
| focus | Called when entering the component | function() | |

‎components/auto-complete/index.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
22
import { defineComponent, inject, provide } from 'vue';
33
import Select, { selectProps } from '../select';
4-
import Input from '../input';
54
import PropTypes from '../_util/vue-types';
65
import { defaultConfigProvider } from '../config-provider';
76
import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
@@ -44,6 +43,7 @@ const AutoComplete = defineComponent({
4443
defaultActiveFirstOption: PropTypes.looseBool.def(true),
4544
},
4645
emits: ['change', 'select', 'focus', 'blur'],
46+
slots: ['option'],
4747
Option,
4848
OptGroup,
4949
setup(props, { slots }) {
@@ -70,7 +70,7 @@ const AutoComplete = defineComponent({
7070
},
7171
getInputElement() {
7272
const children = getSlot(this);
73-
const element = children.length ? children[0] : <Input lazy={false} />;
73+
const element = children.length ? children[0] : undefined;
7474
return element;
7575
},
7676

@@ -144,7 +144,11 @@ const AutoComplete = defineComponent({
144144
class: cls,
145145
ref: this.saveSelect,
146146
};
147-
return <Select {...selectProps}>{optionChildren}</Select>;
147+
return (
148+
<Select {...selectProps} v-slots={{ option: this.$slots.option }}>
149+
{optionChildren}
150+
</Select>
151+
);
148152
},
149153
});
150154

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
3232
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
3333
| #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
3434
| options | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
35+
| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
3536
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | | 1.5.0 |
3637
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
3738
| disabled | 是否禁用 | boolean | false | |

‎components/input/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ exports[`renders ./components/input/demo/group.vue correctly 1`] = `
6363
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
6464
<!---->
6565
</div>
66-
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
66+
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-show-search">
6767
<!---->
6868
<!---->
69-
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input 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>
69+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input 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" type="search"></span>
7070
<!----><span class="ant-select-selection-placeholder">Email</span>
7171
</div>
7272
<!---->

‎site/debugger/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// debugger tsx
2-
import Demo from '../../components/form/demo/customized-form-controls.vue';
2+
import Demo from '../../components/auto-complete/demo/index.vue';
33

44
export default {
55
render() {

0 commit comments

Comments
 (0)