feat(n-popselect): add label-field and value-field props

CHANGELOG.en-US.md

@@ -16,6 +16,7 @@
 - `n-progress`'s `color` prop supports gradient config.
 - `n-select` adds `font-weight` theme variable
 - `n-input` adds `font-weight` theme variable
+- `n-popselect` adds `label-field` and `value-field` props, closes [#3795](https://github.com/tusen-ai/naive-ui/issues/3795)
 
 ## 2.40.1
 

CHANGELOG.zh-CN.md

@@ -16,6 +16,7 @@
 - `n-progress` 的 `color` 属性支持渐变色配置
 - `n-select` 新增 `font-weight` 主题变量
 - `n-input` 新增 `font-weight` 主题变量
+- `n-popselect` 新增 `label-field` 和 `value-field` 属性，关闭 [#3795](https://github.com/tusen-ai/naive-ui/issues/3795)
 
 ## 2.40.1
 

src/popselect/demos/enUS/custom-field.demo.vue

@@ -0,0 +1,81 @@
+<markdown>
+# Customizing field
+
+Various data would come from backend.
+</markdown>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      value: ref('Drive My Car'),
+      options: [
+        {
+          whateverLabel: 'Drive My Car',
+          whateverValue: 'Drive My Car'
+        },
+        {
+          whateverLabel: 'Norwegian Wood',
+          whateverValue: 'Norwegian Wood'
+        },
+        {
+          whateverLabel: 'You Won\'t See',
+          whateverValue: 'You Won\'t See',
+          disabled: true
+        },
+        {
+          whateverLabel: 'Nowhere Man',
+          whateverValue: 'Nowhere Man'
+        },
+        {
+          whateverLabel: 'Think For Yourself',
+          whateverValue: 'Think For Yourself'
+        },
+        {
+          whateverLabel: 'The Word',
+          whateverValue: 'The Word'
+        },
+        {
+          whateverLabel: 'Michelle',
+          whateverValue: 'Michelle',
+          disabled: true
+        },
+        {
+          whateverLabel: 'What goes on',
+          whateverValue: 'What goes on'
+        },
+        {
+          whateverLabel: 'Girl',
+          whateverValue: 'Girl'
+        },
+        {
+          whateverLabel: 'I\'m looking through you',
+          whateverValue: 'I\'m looking through you'
+        },
+        {
+          whateverLabel: 'In My Life',
+          whateverValue: 'In My Life'
+        },
+        {
+          whateverLabel: 'Wait',
+          whateverValue: 'Wait'
+        }
+      ]
+    }
+  }
+})
+</script>
+
+<template>
+  <n-popselect
+    v-model:value="value"
+    label-field="whateverLabel"
+    value-field="whateverValue"
+    :options="options"
+    trigger="click"
+  >
+    <n-button>{{ value || 'Nothing' }}</n-button>
+  </n-popselect>
+</template>

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

@@ -10,6 +10,7 @@ size.vue
 scrollable.vue
 multiple.vue
 slot.vue
+custom-field.vue
 ```
 
 ## API
@@ -18,13 +19,15 @@ slot.vue
 
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
+| label-field | `string` | `'label'` | The field name of the option label. | NEXT_VERSION |
 | multiple | `boolean` | `false` | Whether to select multiple values. |  |
 | node-props | `(option: SelectOption \| SelectGroupOption) => object` | `undefined` | Option's DOM attrs generator. | 2.30.4 |
 | options | `Array<SelectOption \| SelectGroupOption>` | `[]` | For details of configuration options, see [Select](select#SelectOption-Properties) |  |
 | render-label | `(option: SelectOption \| SelectGroupOption) => VNodeChild` | `undefined` | Render function of all the options. |  |
 | scrollable | `boolean` | `false` | Whether the select menu is scrollable. |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the Popselect. |  |
 | value | `string \| number \| Array<string \| number> \| null` | `null` | Value in controlled mode. |  |
+| value-field | `string` | `'value'` | The field name of the option value. | NEXT_VERSION |
 | virtual-scroll | `boolean` | `false` | Whether to enable virtual scrolling. | 2.30.4 |
 | on-update:value | `(value: string \| number \| Array<string \| number> \| null, option: SelectBaseOption \| null \| Array<SelectBaseOption>) => void` | `undefined` | Callback of value updating. |  |
 

src/popselect/demos/zhCN/custom-field.demo.vue

@@ -0,0 +1,81 @@
+<markdown>
+# 自定义字段
+
+后端会传来各种各样的数据。
+</markdown>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      value: ref('Drive My Car'),
+      options: [
+        {
+          whateverLabel: 'Drive My Car',
+          whateverValue: 'Drive My Car'
+        },
+        {
+          whateverLabel: 'Norwegian Wood',
+          whateverValue: 'Norwegian Wood'
+        },
+        {
+          whateverLabel: 'You Won\'t See',
+          whateverValue: 'You Won\'t See',
+          disabled: true
+        },
+        {
+          whateverLabel: 'Nowhere Man',
+          whateverValue: 'Nowhere Man'
+        },
+        {
+          whateverLabel: 'Think For Yourself',
+          whateverValue: 'Think For Yourself'
+        },
+        {
+          whateverLabel: 'The Word',
+          whateverValue: 'The Word'
+        },
+        {
+          whateverLabel: 'Michelle',
+          whateverValue: 'Michelle',
+          disabled: true
+        },
+        {
+          whateverLabel: 'What goes on',
+          whateverValue: 'What goes on'
+        },
+        {
+          whateverLabel: 'Girl',
+          whateverValue: 'Girl'
+        },
+        {
+          whateverLabel: 'I\'m looking through you',
+          whateverValue: 'I\'m looking through you'
+        },
+        {
+          whateverLabel: 'In My Life',
+          whateverValue: 'In My Life'
+        },
+        {
+          whateverLabel: 'Wait',
+          whateverValue: 'Wait'
+        }
+      ]
+    }
+  }
+})
+</script>
+
+<template>
+  <n-popselect
+    v-model:value="value"
+    label-field="whateverLabel"
+    value-field="whateverValue"
+    :options="options"
+    trigger="click"
+  >
+    <n-button>{{ value || '弹出选择' }}</n-button>
+  </n-popselect>
+</template>

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

@@ -10,6 +10,7 @@ size.vue
 scrollable.vue
 multiple.vue
 slot.vue
+custom-field.vue
 ```
 
 ## API
@@ -18,13 +19,15 @@ slot.vue
 
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
+| label-field | `string` | `'label'` | 选项标签字段 | NEXT_VERSION |
 | multiple | `boolean` | `false` | 是否为多选 |  |
 | node-props | `(option: SelectOption \| SelectGroupOption) => object` | `undefined` | 选项的 DOM 属性生成函数 | 2.30.4 |
 | options | `Array<SelectOption \| SelectGroupOption>` | `[]` | 配置选项内容，详情参考 [Select](select#SelectOption-Properties) |  |
 | scrollable | `boolean` | `false` | 选择菜单是否可滚动 |  |
 | render-label | `(option: SelectOption \| SelectGroupOption) => VNodeChild` | `undefined` | 控制全部选项的渲染 |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 |  |
 | value | `string \| number \| Array<string \| number> \| null` | `null` | 受控模式下的值 |  |
+| value-field | `string` | `'value'` | 选项值字段 | NEXT_VERSION |
 | virtual-scroll | `boolean` | `false` | 是否启用虚拟滚动 | 2.30.4 |
 | on-update:value | `(value: string \| number \| Array<string \| number> \| null, option: SelectBaseOption \| null \| Array<SelectBaseOption>) => void` | `undefined` | 值更新的回调 |  |
 

src/popselect/src/PopselectPanel.tsx

@@ -50,6 +50,14 @@ export const panelProps = {
     type: String as PropType<PopselectSize>,
     default: 'medium'
   },
+  labelField: {
+    type: String,
+    default: 'label'
+  },
+  valueField: {
+    type: String,
+    default: 'value'
+  },
   scrollable: Boolean,
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
@@ -101,7 +109,7 @@ export default defineComponent({
         SelectBaseOption,
         SelectGroupOption,
         SelectIgnoredOption
-      >(props.options, createTmOptions('value', 'children'))
+      >(props.options, createTmOptions(props.valueField, 'children'))
     })
 
     function doUpdateValue(
@@ -237,6 +245,8 @@ export default defineComponent({
         onMouseenter={this.onMouseenter}
         onMouseleave={this.onMouseenter}
         onMousedown={this.handleMenuMousedown}
+        labelField={this.labelField}
+        valueField={this.valueField}
         showCheckmark={this.showCheckmark}
       >
         {{