From 7e29eb21634a515b7283a25380a8dc6ccbb3680f Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 14 Feb 2023 15:50:16 +0800
Subject: [PATCH] doc: update mentions demo

---
 components/_util/warning.ts                 |  2 +-
 components/mentions/demo/async.vue          | 30 ++++++++++++----
 components/mentions/demo/basic.vue          | 20 ++++++++---
 components/mentions/demo/form.vue           | 27 +++++++++------
 components/mentions/demo/placement.vue      | 20 ++++++++---
 components/mentions/demo/prefix.vue         | 13 +++----
 components/mentions/demo/readonly.vue       | 38 ++++++++++++++-------
 components/mentions/demo/status.vue         | 38 +++++++++++++++------
 components/mentions/index.en-US.md          | 18 +++++++++-
 components/mentions/index.tsx               | 29 ++++++++++++++--
 components/mentions/index.zh-CN.md          | 18 +++++++++-
 components/vc-mentions/src/DropdownMenu.tsx |  7 ++--
 components/vc-mentions/src/Option.tsx       | 16 ++++++---
 components/vc-mentions/src/mentionsProps.ts |  7 ++--
 14 files changed, 210 insertions(+), 73 deletions(-)

diff --git a/components/_util/warning.ts b/components/_util/warning.ts
index 463e2de50..b4819faa2 100644
--- a/components/_util/warning.ts
+++ b/components/_util/warning.ts
@@ -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') {
diff --git a/components/mentions/demo/async.vue b/components/mentions/demo/async.vue
index 88fdc1f23..5167f5e08 100644
--- a/components/mentions/demo/async.vue
+++ b/components/mentions/demo/async.vue
@@ -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>
diff --git a/components/mentions/demo/basic.vue b/components/mentions/demo/basic.vue
index 3c05fbd7d..1475218cf 100644
--- a/components/mentions/demo/basic.vue
+++ b/components/mentions/demo/basic.vue
@@ -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',
+        },
+      ],
     };
   },
 });
diff --git a/components/mentions/demo/form.vue b/components/mentions/demo/form.vue
index 69d3d868b..73e83cccd 100644
--- a/components/mentions/demo/form.vue
+++ b/components/mentions/demo/form.vue
@@ -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',
+        },
+      ],
     };
   },
 });
diff --git a/components/mentions/demo/placement.vue b/components/mentions/demo/placement.vue
index d1642f128..b84b9203d 100644
--- a/components/mentions/demo/placement.vue
+++ b/components/mentions/demo/placement.vue
@@ -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',
+        },
+      ],
     };
   },
 });
diff --git a/components/mentions/demo/prefix.vue b/components/mentions/demo/prefix.vue
index 3b8de2c6e..7428649f0 100644
--- a/components/mentions/demo/prefix.vue
+++ b/components/mentions/demo/prefix.vue
@@ -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) => {
diff --git a/components/mentions/demo/readonly.vue b/components/mentions/demo/readonly.vue
index 4a2101f1e..b52534ce4 100644
--- a/components/mentions/demo/readonly.vue
+++ b/components/mentions/demo/readonly.vue
@@ -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',
+        },
+      ],
     };
   },
 });
diff --git a/components/mentions/demo/status.vue b/components/mentions/demo/status.vue
index 97b61be3b..920eee0b9 100644
--- a/components/mentions/demo/status.vue
+++ b/components/mentions/demo/status.vue
@@ -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',
+        },
+      ],
     };
   },
 });
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index b28e913b5..698b8015c 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -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 | - |
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
index 0a64dc7fb..7ca5f44ec 100644
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -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,
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
index 0afd11e1d..aa9871b00 100644
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -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 | - |
diff --git a/components/vc-mentions/src/DropdownMenu.tsx b/components/vc-mentions/src/DropdownMenu.tsx
index 6e6512dba..b254b7ee2 100644
--- a/components/vc-mentions/src/DropdownMenu.tsx
+++ b/components/vc-mentions/src/DropdownMenu.tsx
@@ -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>
               );
             })}
diff --git a/components/vc-mentions/src/Option.tsx b/components/vc-mentions/src/Option.tsx
index c649cac8a..d511c045d 100644
--- a/components/vc-mentions/src/Option.tsx
+++ b/components/vc-mentions/src/Option.tsx
@@ -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 },
diff --git a/components/vc-mentions/src/mentionsProps.ts b/components/vc-mentions/src/mentionsProps.ts
index 1863c4804..82b1e801a 100644
--- a/components/vc-mentions/src/mentionsProps.ts
+++ b/components/vc-mentions/src/mentionsProps.ts
@@ -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> },