feat(select): adds header slot (#5449)

Co-authored-by: 07akioni <[email protected]>
tusen-ai · Dec 18, 2023 · 1b11276 · 1b11276
1 parent cb61fd3
commit 1b11276
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 10 deletions.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -14,6 +14,7 @@
 - `n-select` 支持 RTL
 - `n-data-table` 支持 RTL
 - `n-dialog` 支持 RTL
+- `n-select` 新增 `header` 插槽，关闭 [#5448](https://github.com/tusen-ai/naive-ui/issues/5448)
 
 ## 2.36.0
 

diff --git a/src/select/demos/enUS/action.demo.vue b/src/select/demos/enUS/action.demo.vue
@@ -5,6 +5,9 @@ Is there anybody who needs an action slot on a select menu?
 </markdown>
 <template>
   <n-select v-model:value="value" :options="options">
+    <template #header>
+      Don't know what to put
+    </template>
     <template #action>
       If you click this demo, you may need it.
     </template>

diff --git a/src/select/demos/enUS/index.demo-entry.md b/src/select/demos/enUS/index.demo-entry.md
@@ -106,11 +106,12 @@ custom-field.vue
 
 ### Select Slots
 
-| Name   | Parameters | Description                            | Version |
-| ------ | ---------- | -------------------------------------- | ------- |
-| action | `()`       | Options menu slot.                     |         |
-| empty  | `()`       | Empty state slot for the options menu. |         |
-| arrow  | `()`       | Arrow icon slot.                       | 2.24.2  |
+| Name   | Parameters | Description                            | Version      |
+| ------ | ---------- | -------------------------------------- | ------------ |
+| header | `()`       | Header menu slot.                      | NEXT_VERSION |
+| action | `()`       | Options menu slot.                     |              |
+| empty  | `()`       | Empty state slot for the options menu. |              |
+| arrow  | `()`       | Arrow icon slot.                       | 2.24.2       |
 
 ### Select Methods
 

diff --git a/src/select/demos/zhCN/action.demo.vue b/src/select/demos/zhCN/action.demo.vue
@@ -6,6 +6,9 @@
 
 <template>
   <n-select v-model:value="value" :options="options">
+    <template #header>
+      不知道放些什么
+    </template>
     <template #action>
       如果你点开了这个例子，你可能需要它
     </template>

diff --git a/src/select/demos/zhCN/index.demo-entry.md b/src/select/demos/zhCN/index.demo-entry.md
@@ -116,11 +116,12 @@ create-debug.vue
 
 ### Select Slots
 
-| 名称   | 参数 | 说明                | 版本   |
-| ------ | ---- | ------------------- | ------ |
-| action | `()` | 菜单操作区域的 slot |        |
-| empty  | `()` | 菜单无数据时的 slot |        |
-| arrow  | `()` | 箭头的 slot         | 2.24.2 |
+| 名称   | 参数 | 说明                | 版本         |
+| ------ | ---- | ------------------- | ------------ |
+| header | `()` | 菜单头部区域的 slot | NEXT_VERSION |
+| action | `()` | 菜单操作区域的 slot |              |
+| empty  | `()` | 菜单无数据时的 slot |              |
+| arrow  | `()` | 箭头的 slot         | 2.24.2       |
 
 ### Select Methods
 

diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx
@@ -1008,6 +1008,7 @@ export default defineComponent({
                             >
                               {{
                                 empty: () => [this.$slots.empty?.()],
+                                header: () => [this.$slots.header?.()],
                                 action: () => [this.$slots.action?.()]
                               }}
                             </NInternalSelectMenu>,