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;
if (process.env.NODE_ENV !== 'production') {
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.
if (process.env.NODE_ENV === 'test') {

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

@ -16,17 +16,18 @@ async.
</docs>
<template>
<a-mentions v-model:value="value" :loading="loading" @search="onSearch">
<a-mentions-option v-for="{ login, avatar_url: avatar } in users" :key="login" :value="login">
<img :src="avatar" :alt="login" style="width: 20px; margin-right: 8px" />
<span>{{ login }}</span>
</a-mentions-option>
<a-mentions v-model:value="value" :options="options" :loading="loading" @search="onSearch">
<template #option="{ payload }">
<img :src="payload.avatar_url" :alt="payload.login" />
<span>{{ payload.login }}</span>
</template>
</a-mentions>
</template>
<script lang="ts">
import { debounce } from 'lodash-es';
import { defineComponent, ref } from 'vue';
import { computed, defineComponent, ref } from 'vue';
import { MentionsProps } from '..';
export default defineComponent({
setup() {
const value = ref<string>('');
@ -56,14 +57,29 @@ export default defineComponent({
console.log('Search:', 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 {
value,
loading,
users,
loadGithubUsers,
onSearch,
options,
};
},
});
</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>
<template>
<a-mentions v-model:value="value" autofocus @select="onSelect">
<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-mentions v-model:value="value" autofocus :options="options" @select="onSelect"></a-mentions>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
@ -37,6 +33,20 @@ export default defineComponent({
return {
value,
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"
v-bind="validateInfos.coders"
>
<a-mentions v-model:value="modelRef.coders" rows="1">
<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-mentions v-model:value="modelRef.coders" rows="1" :options="options"></a-mentions>
</a-form-item>
<a-form-item
label="Bio"
@ -41,11 +37,8 @@ to work with `Form`.
v-model:value="modelRef.bio"
rows="3"
placeholder="You can use @ to ref user here"
>
<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>
:options="options"
></a-mentions>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary" @click="handleSubmit">Submit</a-button>
@ -93,6 +86,20 @@ export default defineComponent({
resetFields,
validateInfos,
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>
<template>
<a-mentions v-model:value="value" placement="top">
<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-mentions v-model:value="value" placement="top" :options="options"></a-mentions>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
@ -29,6 +25,20 @@ export default defineComponent({
const value = ref<string>('');
return {
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"
placeholder="input @ to mention people, # to mention tag"
:prefix="['@', '#']"
:options="options"
@search="onSearch"
>
<a-mentions-option v-for="val in options" :key="val" :value="val">
{{ val }}
</a-mentions-option>
</a-mentions>
></a-mentions>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
@ -38,7 +35,11 @@ export default defineComponent({
const prefix = ref<string>('@');
const value = ref<string>('');
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) => {

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

@ -18,17 +18,19 @@ Configurate disabled and readonly.
<template>
<div>
<div style="margin-bottom: 10px">
<a-mentions v-model:value="value1" placeholder="this is disabled Mentions" disabled>
<a-mentions-option v-for="value in options" :key="value" :value="value">
{{ value }}
</a-mentions-option>
</a-mentions>
<a-mentions
v-model:value="value1"
:options="options"
placeholder="this is disabled Mentions"
disabled
></a-mentions>
</div>
<a-mentions v-model:value="value2" placeholder="this is readOnly a-mentions" readonly>
<a-mentions-option v-for="value in options" :key="value" :value="value">
{{ value }}
</a-mentions-option>
</a-mentions>
<a-mentions
v-model:value="value2"
:options="options"
placeholder="this is readOnly a-mentions"
readonly
></a-mentions>
</div>
</template>
<script lang="ts">
@ -37,11 +39,23 @@ export default defineComponent({
setup() {
const value1 = ref<string>('');
const value2 = ref<string>('');
const options = ref<string[]>(['afc163', 'zombieJ', 'yesmeck']);
return {
value1,
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>
<template>
<a-space direction="vertical">
<a-mentions v-model:value="value" autofocus status="error" @select="onSelect">
<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-mentions v-model:value="value" autofocus status="warning" @select="onSelect">
<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-mentions
v-model:value="value"
:options="options"
autofocus
status="error"
@select="onSelect"
></a-mentions>
<a-mentions
v-model:value="value"
:options="options"
autofocus
status="warning"
@select="onSelect"
></a-mentions>
</a-space>
</template>
<script lang="ts">
@ -44,6 +48,20 @@ export default defineComponent({
return {
value,
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 |
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | |
| 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
@ -46,8 +48,22 @@ When you need to mention someone or something.
| blur() | remove focus |
| focus() | get focus |
### Option
### Mention.Option (< 4.0)
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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 { useProvideOverride } from '../menu/src/OverrideContext';
import warning from '../_util/warning';
import Spin from '../spin';
import devWarning from '../vc-util/devWarning';
interface MentionsConfig {
prefix?: string | string[];
@ -35,6 +37,9 @@ interface MentionsEntity {
export type MentionPlacement = 'top' | 'bottom';
function loadingFilterOption() {
return true;
}
const getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[] => {
const { prefix = '@', split = ' ' } = config;
const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix];
@ -100,6 +105,14 @@ const Mentions = defineComponent({
props: mentionsProps(),
slots: ['notFoundContent', 'option'],
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 [wrapSSR, hashId] = useStyle(prefixCls);
const focused = ref(false);
@ -179,7 +192,9 @@ const Mentions = defineComponent({
};
expose({ focus, blur });
const mentionsfilterOption = computed(() =>
props.loading ? loadingFilterOption : props.filterOption,
);
return () => {
const {
disabled,
@ -208,9 +223,17 @@ const Mentions = defineComponent({
...otherProps,
disabled,
direction: direction.value,
filterOption: props.filterOption,
filterOption: mentionsfilterOption.value,
getPopupContainer,
options: props.options || getOptions(),
options: props.loading
? [
{
value: 'ANTDV_SEARCHING',
disabled: true,
label: <Spin size="small" />,
},
]
: props.options || getOptions(),
class: mergedClassName,
...otherAttrs,
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 |
| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | |
| 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() | 移除焦点 |
| focus() | 获取焦点 |
### Option
### Mention.Option (< 4.0)
| 参数 | 说明 | 类型 | 默认值 |
| ----- | -------------- | ------ | ------ |
| 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 &&
options.map((option, index) => {
const { value, disabled, label = option.value } = option;
const { value, disabled, label = option.value, class: className, style } = option;
return (
<MenuItem
key={value}
@ -62,9 +62,10 @@ export default defineComponent({
onMouseenter={() => {
setActiveIndex(index);
}}
class={className}
style={style}
>
{slots.option?.(option) ??
(typeof label === 'function' ? label({ value, disabled }) : label)}
{slots.option?.(option) ?? (typeof label === 'function' ? label(option) : label)}
</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';
export const optionProps = {
export const baseOptionsProps = {
value: String,
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({
compatConfig: { MODE: 3 },

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

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