feat(mention): add renderLabel prop (#627)

* feat(mention): NMention add renderLabel prop

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-time-picker` add `actions` prop, closes [#401](https://github.com/TuSimple/naive-ui/issues/401).
+- `n-mention` add `render-label` prop.
 - `n-switch` add `checked`, `unchecked` slots.
 - `n-switch` add `loading` prop, closes [#301](https://github.com/TuSimple/naive-ui/issues/301).
 - `n-select` pressing arrow down can open menu, ref [#300](https://github.com/TuSimple/naive-ui/issues/300).

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-time-picker` 增加 `actions` 属性, 关闭 [#401](https://github.com/TuSimple/naive-ui/issues/401)
+- `n-mention` 新增 `render-label` 属性
 - `n-switch` 增加 `checked`、`unchecked` 插槽
 - `n-switch` 增加 `loading` 属性，关闭 [#301](https://github.com/TuSimple/naive-ui/issues/301)
 - `n-select` 按下箭头会打开菜单，有关 [#300](https://github.com/TuSimple/naive-ui/issues/300)

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

@@ -29,7 +29,7 @@ export default defineComponent({
         },
         {
           label: (option) =>
-            h('span', null, [
+            h('span', { style: 'display: flex; align-items: center;' }, [
               h(
                 NIcon,
                 { style: 'margin-right: 5px' },

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

@@ -10,6 +10,7 @@ textarea
 async
 autosize
 form
+render-label
 custom-prefix
 ```
 
@@ -30,6 +31,7 @@ Mention is provided after `v2.2.0`.
 | loading | `boolean` | `false` | Whether the selection panel of mentions shows the loading status. |
 | prefix | `string \| string[]` | `'@'` | Prefix char to trigger mentions whose length must be 1. |
 | placeholder | `string` | `''` | Input placeholder. |
+| render-label | `undefined \| (option: MentionOption) => VNodeChild` | `undefined` | Render function of all the options' label. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Input size. |
 | on-update:value | `(value: string) => void` | `undefined` | Triggered when the input box value is updated. |
 | on-select | `(option: MentionOption, prefix: string) => void` | `undefined` | Triggered when the input box is selected. |

src/mention/demos/enUS/render-label.demo.md

@@ -0,0 +1,43 @@
+# Render Label
+
+If you use `render-label` batch rendering, input matching will be performed according to `value`.
+
+```html
+<n-mention :options="options" :render-label="renderLabel" />
+```
+
+```js
+import { defineComponent, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import { HappyOutline as HappyIcon } from '@vicons/ionicons5'
+
+export default defineComponent({
+  setup () {
+    return {
+      options: [
+        {
+          label: '07akioni',
+          value: '07akioni'
+        },
+        {
+          label: 'star-kirby',
+          value: 'star-kirby'
+        },
+        {
+          label: 'amadeus711',
+          value: 'amadeus711'
+        }
+      ],
+      renderLabel: (option) =>
+        h('div', { style: 'display: flex; align-items: center;' }, [
+          h(
+            NIcon,
+            { style: 'margin-right: 5px' },
+            { default: () => h(HappyIcon) }
+          ),
+          option.value
+        ])
+    }
+  }
+})
+```

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

@@ -29,7 +29,7 @@ export default defineComponent({
         },
         {
           label: (option) =>
-            h('span', null, [
+            h('div', { style: 'display: flex; align-items: center;' }, [
               h(
                 NIcon,
                 { style: 'margin-right: 5px' },

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

@@ -10,6 +10,7 @@ textarea
 async
 autosize
 form
+render-label
 custom-prefix
 ```
 
@@ -30,6 +31,7 @@ Mention 在 `v2.2.0` 及以后可用。
 | loading | `boolean` | `false` | 选择面板是否显示加载状态 |
 | prefix | `string \| string[]` | `'@'` | 触发提及的前缀，长度必须为 1 |
 | placeholder | `string` | `''` | 输入框的占位符 |
+| render-label | `undefined \| (option: MentionOption) => VNodeChild` | `undefined` | 选项标签渲染函数 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 输入框的大小 |
 | on-update:value | `(value: string) => void` | `undefined` | 输入框值发生更新时触发 |
 | on-select | `(option: MentionOption, prefix: string) => void` | `undefined` | 输入框的选中时触发 |

src/mention/demos/zhCN/render-label.demo.md

@@ -0,0 +1,43 @@
+# 控制菜单渲染
+
+如果使用了 `render-label` 批量渲染，输入匹配则会根据 `value` 进行匹配
+
+```html
+<n-mention :options="options" :render-label="renderLabel" />
+```
+
+```js
+import { defineComponent, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import { HappyOutline as HappyIcon } from '@vicons/ionicons5'
+
+export default defineComponent({
+  setup () {
+    return {
+      options: [
+        {
+          label: '07akioni',
+          value: '07akioni'
+        },
+        {
+          label: 'star-kirby',
+          value: 'star-kirby'
+        },
+        {
+          label: 'amadeus711',
+          value: 'amadeus711'
+        }
+      ],
+      renderLabel: (option) =>
+        h('div', { style: 'display: flex; align-items: center;' }, [
+          h(
+            NIcon,
+            { style: 'margin-right: 5px' },
+            { default: () => h(HappyIcon) }
+          ),
+          option.value
+        ])
+    }
+  }
+})
+```

src/mention/src/Mention.tsx

@@ -33,6 +33,7 @@ import { getRelativePosition } from './utils'
 
 import style from './styles/index.cssr'
 import type { MentionOption } from './interface'
+import { RenderLabel } from '../../_internal/select-menu/src/interface'
 
 const mentionProps = {
   ...(useTheme.props as ThemeProps<MentionTheme>),
@@ -82,6 +83,7 @@ const mentionProps = {
   'onUpdate:value': [Array, Function] as PropType<
   MaybeArray<(value: string) => void>
   >,
+  renderLabel: Function as PropType<RenderLabel>,
   onUpdateValue: [Array, Function] as PropType<
   MaybeArray<(value: string) => void>
   >,
@@ -446,6 +448,7 @@ export default defineComponent({
                               virtualScroll={false}
                               style={this.cssVars as CSSProperties}
                               onMenuToggleOption={this.handleSelect}
+                              renderLabel={this.renderLabel}
                             >
                               {$slots}
                             </NInternalSelectMenu>