feat(mention): In n-mention’s options prop, the label prop support ca… (#593)

* feat(mention): In n-mention’s options prop, the label prop support callback function.

* feat: optimization

CHANGELOG.en-US.md

@@ -10,6 +10,7 @@
 - `n-mention` add `empty` slot.
 - `useDialog` option add `on-mask-click` prop, closes [#419](https://github.com/TuSimple/naive-ui/issues/419).
 - `n-space` `justify` prop supports `center`, `space-around` and `space-between`.
+- In `n-mention`’s `options` prop, the `label` prop support callback function.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -10,6 +10,7 @@
 - `n-mention` 新增 `empty` slot
 - `useDialog` 选项 新增 `on-mask-click`属性, 关闭 [#419](https://github.com/TuSimple/naive-ui/issues/419)
 - `n-space` `justify` 属性支持 `center`、`space-around` 和 `space-between`
+- `n-mention` 的 `options` 属性中，`label` 支持使用回调函数
 
 ### Fixes
 

src/mention/demos/enUS/basic.demo.md

@@ -1,11 +1,15 @@
 # Basic Usage
 
+If `label` is a callback function, input matching will be performed according to `value`.
+
 ```html
 <n-mention :options="options" default-value="@" />
 ```
 
 ```js
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import { HomeOutline as HomeIcon } from '@vicons/ionicons5'
 
 export default defineComponent({
   setup () {
@@ -24,7 +28,15 @@ export default defineComponent({
           value: 'Guandong-Road'
         },
         {
-          label: 'No.5-Yiheyuan-Road',
+          label: (option) =>
+            h('span', null, [
+              h(
+                NIcon,
+                { style: 'margin-right: 5px' },
+                { default: () => h(HomeIcon) }
+              ),
+              option.value
+            ]),
           value: 'No.5-Yiheyuan-Road'
         }
       ]

src/mention/demos/enUS/index.demo-entry.md

@@ -43,7 +43,7 @@ Mention is provided after `v2.2.0`.
 | --- | --- | --- |
 | class | `string` | Option class name. |
 | disabled | `boolean` | Option disabled status. |
-| label | `string` | Option label. |
+| label | `string \| (option: MentionOption) => VNodeChild` | Option label. |
 | render | `(option: MentionOption) => VNodeChild` | Support custom options via `render` rendering function. |
 | style | `string` | Option style. |
 | value | `string` | Should be unique. |

src/mention/demos/zhCN/basic.demo.md

@@ -1,11 +1,15 @@
 # 基本用法
 
+如果 `label` 是回调函数，输入匹配则会根据 `value` 进行匹配
+
 ```html
 <n-mention :options="options" default-value="@" />
 ```
 
 ```js
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import { HomeOutline as HomeIcon } from '@vicons/ionicons5'
 
 export default defineComponent({
   setup () {
@@ -24,7 +28,15 @@ export default defineComponent({
           value: '广东路'
         },
         {
-          label: '颐和园路5号',
+          label: (option) =>
+            h('span', null, [
+              h(
+                NIcon,
+                { style: 'margin-right: 5px' },
+                { default: () => h(HomeIcon) }
+              ),
+              option.value
+            ]),
           value: '颐和园路5号'
         }
       ]

src/mention/demos/zhCN/index.demo-entry.md

@@ -43,7 +43,7 @@ Mention 在 `v2.2.0` 及以后可用。
 | --- | --- | --- |
 | class | `string` | 选项的自定义类名 |
 | disabled | `boolean` | 选项是否禁用 |
-| label | `string` | 选项的标签 |
+| label | `string \| (option: MentionOption) => VNodeChild` | 选项的标签 |
 | render | `(option: MentionOption) => VNodeChild` | 支持通过 `render` 渲染函数自定义选项 |
 | style | `string` | 选项的样式 |
 | value | `string` | 在选项中应该是唯一的 |

src/mention/src/Mention.tsx

@@ -126,7 +126,8 @@ export default defineComponent({
       const { value: pattern } = partialPatternRef
       return props.options.filter((option) => {
         if (!pattern) return true
-        return option.label.startsWith(pattern)
+        if (typeof option.label === 'string') { return option.label.startsWith(pattern) }
+        return option.value.startsWith(pattern)
       })
     })
     const treeMateRef = computed(() => {

src/mention/src/interface.ts

@@ -1,3 +1,3 @@
 import type { SelectBaseOption } from '../../select/src/interface'
 
-export type MentionOption = SelectBaseOption<string, string>
+export type MentionOption = SelectBaseOption<string>