github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update mentions demo

pull/6266/head^2
tangjinzhou 2023-02-14 15:50:16 +08:00
parent 92795a828f
commit 7e29eb2163
14 changed files with 210 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/_util/warning.ts
View File

@ -9,7 +9,7 @@ type Warning = (valid: boolean, component: string, message?: string) => void;
let warning: Warning = noop; let warning: Warning = noop;
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
warning = (valid, component, message) => { warning = (valid, component, message) => {
vcWarning(valid, `[antdv: ${component}] ${message}`); vcWarning(valid, `[ant-design-vue: ${component}] ${message}`);
// StrictMode will inject console which will not throw warning in React 17. // StrictMode will inject console which will not throw warning in React 17.
if (process.env.NODE_ENV === 'test') { if (process.env.NODE_ENV === 'test') {

30
components/mentions/demo/async.vue
View File

@ -16,17 +16,18 @@ async.
</docs> </docs>
<template> <template>
<a-mentions v-model:value="value" :loading="loading" @search="onSearch"> <a-mentions v-model:value="value" :options="options" :loading="loading" @search="onSearch">
<a-mentions-option v-for="{ login, avatar_url: avatar } in users" :key="login" :value="login"> <template #option="{ payload }">
<img :src="avatar" :alt="login" style="width: 20px; margin-right: 8px" /> <img :src="payload.avatar_url" :alt="payload.login" />
<span>{{ login }}</span> <span>{{ payload.login }}</span>
</a-mentions-option> </template>
</a-mentions> </a-mentions>
</template> </template>
<script lang="ts"> <script lang="ts">
import { debounce } from 'lodash-es'; import { debounce } from 'lodash-es';
import { defineComponent, ref } from 'vue'; import { computed, defineComponent, ref } from 'vue';
import { MentionsProps } from '..';
export default defineComponent({ export default defineComponent({
setup() { setup() {
const value = ref<string>(''); const value = ref<string>('');
@ -56,14 +57,29 @@ export default defineComponent({
console.log('Search:', searchValue); console.log('Search:', searchValue);
loadGithubUsers(searchValue); loadGithubUsers(searchValue);
}; };
const options = computed<MentionsProps['options']>(() =>
users.value.map(user => ({
key: user.login,
value: user.login,
class: 'antd-demo-dynamic-option',
payload: user,
})),
);
return { return {
value, value,
loading, loading,
users, users,
loadGithubUsers, loadGithubUsers,
onSearch, onSearch,
options,
}; };
}, },
}); });
</script> </script>
<style>
.antd-demo-dynamic-option img {
width: 20px;
height: 20px;
margin-right: 8px;
}
</style>

20
components/mentions/demo/basic.vue
View File

@ -16,11 +16,7 @@ Basic usage.
</docs> </docs>
<template> <template>
<a-mentions v-model:value="value" autofocus @select="onSelect"> <a-mentions v-model:value="value" autofocus :options="options" @select="onSelect"></a-mentions>
<a-mentions-option value="afc163">afc163</a-mentions-option>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
</a-mentions>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, watch } from 'vue'; import { defineComponent, ref, watch } from 'vue';
@ -37,6 +33,20 @@ export default defineComponent({
return { return {
value, value,
onSelect, onSelect,
options: [
{
value: 'afc163',
label: 'afc163',
},
{
value: 'zombieJ',
label: 'zombieJ',
},
{
value: 'yesmeck',
label: 'yesmeck',
},
],
}; };
}, },
}); });

27
components/mentions/demo/form.vue
View File

@ -24,11 +24,7 @@ to work with `Form`.
name="coders" name="coders"
v-bind="validateInfos.coders" v-bind="validateInfos.coders"
> >
<a-mentions v-model:value="modelRef.coders" rows="1"> <a-mentions v-model:value="modelRef.coders" rows="1" :options="options"></a-mentions>
<a-mentions-option value="afc163">afc163</a-mentions-option>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
</a-mentions>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="Bio" label="Bio"
@ -41,11 +37,8 @@ to work with `Form`.
v-model:value="modelRef.bio" v-model:value="modelRef.bio"
rows="3" rows="3"
placeholder="You can use @ to ref user here" placeholder="You can use @ to ref user here"
> :options="options"
<a-mentions-option value="afc163">afc163</a-mentions-option> ></a-mentions>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
</a-mentions>
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }"> <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary" @click="handleSubmit">Submit</a-button> <a-button type="primary" @click="handleSubmit">Submit</a-button>
@ -93,6 +86,20 @@ export default defineComponent({
resetFields, resetFields,
validateInfos, validateInfos,
handleSubmit, handleSubmit,
options: [
{
value: 'afc163',
label: 'afc163',
},
{
value: 'zombieJ',
label: 'zombieJ',
},
{
value: 'yesmeck',
label: 'yesmeck',
},
],
}; };
}, },
}); });

20
components/mentions/demo/placement.vue
View File

@ -16,11 +16,7 @@ Change the suggestions placement.
</docs> </docs>
<template> <template>
<a-mentions v-model:value="value" placement="top"> <a-mentions v-model:value="value" placement="top" :options="options"></a-mentions>
<a-mentions-option value="afc163">afc163</a-mentions-option>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
</a-mentions>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
@ -29,6 +25,20 @@ export default defineComponent({
const value = ref<string>(''); const value = ref<string>('');
return { return {
value, value,
options: [
{
value: 'afc163',
label: 'afc163',
},
{
value: 'zombieJ',
label: 'zombieJ',
},
{
value: 'yesmeck',
label: 'yesmeck',
},
],
}; };
}, },
}); });

13
components/mentions/demo/prefix.vue
View File

@ -20,12 +20,9 @@ Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also
v-model:value="value" v-model:value="value"
placeholder="input @ to mention people, # to mention tag" placeholder="input @ to mention people, # to mention tag"
:prefix="['@', '#']" :prefix="['@', '#']"
:options="options"
@search="onSearch" @search="onSearch"
> ></a-mentions>
<a-mentions-option v-for="val in options" :key="val" :value="val">
{{ val }}
</a-mentions-option>
</a-mentions>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from 'vue'; import { computed, defineComponent, ref } from 'vue';
@ -38,7 +35,11 @@ export default defineComponent({
const prefix = ref<string>('@'); const prefix = ref<string>('@');
const value = ref<string>(''); const value = ref<string>('');
const options = computed(() => { const options = computed(() => {
return MOCK_DATA[prefix.value] || []; return (MOCK_DATA[prefix.value] || []).map(value => ({
key: value,
value,
label: value,
}));
}); });
const onSearch = (_: string, val: string) => { const onSearch = (_: string, val: string) => {

38
components/mentions/demo/readonly.vue
View File

@ -18,17 +18,19 @@ Configurate disabled and readonly.
<template> <template>
<div> <div>
<div style="margin-bottom: 10px"> <div style="margin-bottom: 10px">
<a-mentions v-model:value="value1" placeholder="this is disabled Mentions" disabled> <a-mentions
<a-mentions-option v-for="value in options" :key="value" :value="value"> v-model:value="value1"
{{ value }} :options="options"
</a-mentions-option> placeholder="this is disabled Mentions"
</a-mentions> disabled
></a-mentions>
</div> </div>
<a-mentions v-model:value="value2" placeholder="this is readOnly a-mentions" readonly> <a-mentions
<a-mentions-option v-for="value in options" :key="value" :value="value"> v-model:value="value2"
{{ value }} :options="options"
</a-mentions-option> placeholder="this is readOnly a-mentions"
</a-mentions> readonly
></a-mentions>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -37,11 +39,23 @@ export default defineComponent({
setup() { setup() {
const value1 = ref<string>(''); const value1 = ref<string>('');
const value2 = ref<string>(''); const value2 = ref<string>('');
const options = ref<string[]>(['afc163', 'zombieJ', 'yesmeck']);
return { return {
value1, value1,
value2, value2,
options, options: [
{
value: 'afc163',
label: 'afc163',
},
{
value: 'zombieJ',
label: 'zombieJ',
},
{
value: 'yesmeck',
label: 'yesmeck',
},
],
}; };
}, },
}); });

38
components/mentions/demo/status.vue
View File

@ -17,16 +17,20 @@ Add status to Mentions with `status`, which could be `error` or `warning`。
</docs> </docs>
<template> <template>
<a-space direction="vertical"> <a-space direction="vertical">
<a-mentions v-model:value="value" autofocus status="error" @select="onSelect"> <a-mentions
<a-mentions-option value="afc163">afc163</a-mentions-option> v-model:value="value"
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option> :options="options"
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option> autofocus
</a-mentions> status="error"
<a-mentions v-model:value="value" autofocus status="warning" @select="onSelect"> @select="onSelect"
<a-mentions-option value="afc163">afc163</a-mentions-option> ></a-mentions>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option> <a-mentions
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option> v-model:value="value"
</a-mentions> :options="options"
autofocus
status="warning"
@select="onSelect"
></a-mentions>
</a-space> </a-space>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -44,6 +48,20 @@ export default defineComponent({
return { return {
value, value,
onSelect, onSelect,
options: [
{
value: 'afc163',
label: 'afc163',
},
{
value: 'zombieJ',
label: 'zombieJ',
},
{
value: 'yesmeck',
label: 'yesmeck',
},
],
}; };
}, },
}); });

18
components/mentions/index.en-US.md
View File

@ -28,6 +28,8 @@ When you need to mention someone or something.
| status | Set validation status | 'error' \| 'warning' \| 'success' \| 'validating' | - | 3.3.0 | | status | Set validation status | 'error' \| 'warning' \| 'success' \| 'validating' | - | 3.3.0 |
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | | | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | |
| value(v-model) | Set value of mentions | string | | | value(v-model) | Set value of mentions | string | |
| options | Option Configuration | [Options](#option) | \[] | 4.0 |
| option | custom option label | v-slot:option="option" | - | 4.0 |
### Events ### Events
@ -46,8 +48,22 @@ When you need to mention someone or something.
| blur() | remove focus | | blur() | remove focus |
| focus() | get focus | | focus() | get focus |
### Option ### Mention.Option (< 4.0)
| Property | Description | Type | Default | | Property | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| value | value of suggestion, the value will insert into input filed while selected | string | '' | | value | value of suggestion, the value will insert into input filed while selected | string | '' |
### Option
Support from v4.0
<!-- prettier-ignore -->
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| value | value of suggestion, the value will insert into input filed while selected | string | - |
| label | Title of the option | VueNode | () => VueNode | - |
| disabled | Optional | boolean | - |
| class | className | string | - |
| style | The style of the option | CSSProperties | - |
|payload| other data | object | - |

29
components/mentions/index.tsx
View File

@ -15,6 +15,8 @@ import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils';
import useStyle from './style'; import useStyle from './style';
import { useProvideOverride } from '../menu/src/OverrideContext'; import { useProvideOverride } from '../menu/src/OverrideContext';
import warning from '../_util/warning'; import warning from '../_util/warning';
import Spin from '../spin';
import devWarning from '../vc-util/devWarning';
interface MentionsConfig { interface MentionsConfig {
prefix?: string | string[]; prefix?: string | string[];
@ -35,6 +37,9 @@ interface MentionsEntity {
export type MentionPlacement = 'top' | 'bottom'; export type MentionPlacement = 'top' | 'bottom';
function loadingFilterOption() {
return true;
}
const getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[] => { const getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[] => {
const { prefix = '@', split = ' ' } = config; const { prefix = '@', split = ' ' } = config;
const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix]; const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix];
@ -100,6 +105,14 @@ const Mentions = defineComponent({
props: mentionsProps(), props: mentionsProps(),
slots: ['notFoundContent', 'option'], slots: ['notFoundContent', 'option'],
setup(props, { slots, emit, attrs, expose }) { setup(props, { slots, emit, attrs, expose }) {
// =================== Warning =====================
if (process.env.NODE_ENV !== 'production') {
devWarning(
!flattenChildren(slots.default?.() || []).length,
'Mentions',
'`Mentions.Option` is deprecated. Please use `options` instead.',
);
}
const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props); const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
const focused = ref(false); const focused = ref(false);
@ -179,7 +192,9 @@ const Mentions = defineComponent({
}; };
expose({ focus, blur }); expose({ focus, blur });
const mentionsfilterOption = computed(() =>
props.loading ? loadingFilterOption : props.filterOption,
);
return () => { return () => {
const { const {
disabled, disabled,
@ -208,9 +223,17 @@ const Mentions = defineComponent({
...otherProps, ...otherProps,
disabled, disabled,
direction: direction.value, direction: direction.value,
filterOption: props.filterOption, filterOption: mentionsfilterOption.value,
getPopupContainer, getPopupContainer,
options: props.options || getOptions(), options: props.loading
? [
{
value: 'ANTDV_SEARCHING',
disabled: true,
label: <Spin size="small" />,
},
]
: props.options || getOptions(),
class: mergedClassName, class: mergedClassName,
...otherAttrs, ...otherAttrs,
rows, rows,

18
components/mentions/index.zh-CN.md
View File

@ -29,6 +29,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
| status | 设置校验状态 | 'error' \| 'warning' | - | 3.3.0 | | status | 设置校验状态 | 'error' \| 'warning' | - | 3.3.0 |
| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | | | validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | |
| value(v-model) | 设置值 | string | | | value(v-model) | 设置值 | string | |
| options | 选项配置 | [Options](#option) | \[] | 4.0 |
| option | 通过 option 插槽，自定义节点 | v-slot:option="option" | - | 4.0 |
### 事件 ### 事件
@ -47,8 +49,22 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
| blur() | 移除焦点 | | blur() | 移除焦点 |
| focus() | 获取焦点 | | focus() | 获取焦点 |
### Option ### Mention.Option (< 4.0)
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ----- | -------------- | ------ | ------ | | ----- | -------------- | ------ | ------ |
| value | 选择时填充的值 | string | '' | | value | 选择时填充的值 | string | '' |
### Option
Support from v4.0
<!-- prettier-ignore -->
| 参数 | 说明 | 类型 | 默认值 |
| --------- | -------------- | ------------------- | ------ |
| value | 选择时填充的值 | string | number | - |
| label | 选项的标题 | VueNode | (o: Option)=> VueNode | - |
| disabled | 是否可选 | boolean | - |
| class | css 类名 | string | - |
| style | 选项样式 | CSSProperties | - |
|payload| 其它数据 | object | - |

7
components/vc-mentions/src/DropdownMenu.tsx
View File

@ -54,7 +54,7 @@ export default defineComponent({
> >
{!loading.value && {!loading.value &&
options.map((option, index) => { options.map((option, index) => {
const { value, disabled, label = option.value } = option; const { value, disabled, label = option.value, class: className, style } = option;
return ( return (
<MenuItem <MenuItem
key={value} key={value}
@ -62,9 +62,10 @@ export default defineComponent({
onMouseenter={() => { onMouseenter={() => {
setActiveIndex(index); setActiveIndex(index);
}} }}
class={className}
style={style}
> >
{slots.option?.(option) ?? {slots.option?.(option) ?? (typeof label === 'function' ? label(option) : label)}
(typeof label === 'function' ? label({ value, disabled }) : label)}
</MenuItem> </MenuItem>
); );
})} })}

16
components/vc-mentions/src/Option.tsx
View File

@ -1,13 +1,21 @@
import type { ExtractPropTypes } from 'vue'; import type { VueNode } from '../../_util/type';
import { objectType, anyType } from '../../_util/type';
import type { ExtractPropTypes, HTMLAttributes } from 'vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export const optionProps = { export const baseOptionsProps = {
value: String, value: String,
disabled: Boolean, disabled: Boolean,
label: [String, Number, Function], payload: objectType<Record<string, any>>(),
}; };
export const optionProps = {
...baseOptionsProps,
label: anyType<VueNode | ((o: BaseOptionsProps) => VueNode)>([]),
};
export type BaseOptionsProps = Partial<ExtractPropTypes<typeof baseOptionsProps>> &
Partial<HTMLAttributes>;
export type OptionProps = Partial<ExtractPropTypes<typeof optionProps>>; export type OptionProps = Partial<ExtractPropTypes<typeof optionProps>> & Partial<HTMLAttributes>;
export default defineComponent({ export default defineComponent({
compatConfig: { MODE: 3 }, compatConfig: { MODE: 3 },

7
components/vc-mentions/src/mentionsProps.ts
View File

@ -5,7 +5,7 @@ import {
filterOption as defaultFilterOption, filterOption as defaultFilterOption,
validateSearch as defaultValidateSearch, validateSearch as defaultValidateSearch,
} from './util'; } from './util';
import { tuple } from '../../_util/type'; import { arrayType, tuple } from '../../_util/type';
import type { OptionProps } from './Option'; import type { OptionProps } from './Option';
export const PlaceMent = tuple('top', 'bottom'); export const PlaceMent = tuple('top', 'bottom');
@ -29,10 +29,7 @@ export const mentionsProps = {
getPopupContainer: { getPopupContainer: {
type: Function as PropType<() => HTMLElement>, type: Function as PropType<() => HTMLElement>,
}, },
options: { options: arrayType<OptionProps[]>(),
type: Array as PropType<OptionProps>,
default: () => undefined,
},
loading: { type: Boolean, default: undefined }, loading: { type: Boolean, default: undefined },
rows: [Number, String], rows: [Number, String],
direction: { type: String as PropType<Direction> }, direction: { type: String as PropType<Direction> },