feat(tree-select): adds header slot (#5917)

* feat(n-tree-select): adds `header` slot

* feat: add code

* feat: add log

---------

Co-authored-by: 07akioni <[email protected]>

Author: jahnli

CHANGELOG.en-US.md

@@ -38,6 +38,7 @@
 - `n-cascader` filter ignore case sensitive.
 - `n-data-table` adds `allowExport` prop for column.
 - `n-date-picker` adds `year-range` prop.
+- `n-tree-select` adds `header` slot, closes [#5915](https://github.com/tusen-ai/naive-ui/issues/5915).
 
 ## 2.39.0
 

CHANGELOG.zh-CN.md

@@ -38,6 +38,7 @@
 - `n-cascader` 过滤算法忽略大小写
 - `n-data-table` 在列的配置中新增 `allowExport` 属性
 - `n-date-picker` 新增 `year-range` 属性
+- `n-tree-select` 新增 `header` 插槽，关闭 [#5915](https://github.com/tusen-ai/naive-ui/issues/5915)
 
 ## 2.39.0
 

src/tree-select/demos/enUS/action.demo.vue

@@ -92,6 +92,9 @@ export default defineComponent({
     default-value="Drive My Car"
     @update:value="handleUpdateValue"
   >
+    <template #header>
+      Don't know what to put
+    </template>
     <template #action>
       You can customize some operations here.
     </template>

src/tree-select/demos/enUS/index.demo-entry.md

@@ -86,11 +86,12 @@ debug.vue
 
 ### TreeSelect Slots
 
-| Name   | Parameters | Description                            | Version |
-| ------ | ---------- | -------------------------------------- | ------- |
-| action | `()`       | Options menu slot.                     | 2.22.0  |
-| arrow  | `()`       | Arrow icon of trigger.                 | 2.30.4  |
-| empty  | `()`       | Empty state slot for the options menu. | 2.22.0  |
+| Name   | Parameters | Description                            | Version      |
+| ------ | ---------- | -------------------------------------- | ------------ |
+| header | `()`       | Header menu slot.                      | NEXT_VERSION |
+| action | `()`       | Options menu slot.                     | 2.22.0       |
+| arrow  | `()`       | Arrow icon of trigger.                 | 2.30.4       |
+| empty  | `()`       | Empty state slot for the options menu. | 2.22.0       |
 
 ### TreeSelect Methods
 

src/tree-select/demos/zhCN/action.demo.vue

@@ -92,6 +92,9 @@ export default defineComponent({
     default-value="Drive My Car"
     @update:value="handleUpdateValue"
   >
+    <template #header>
+      不知道放些什么
+    </template>
     <template #action>
       你可以在这里自定义一些操作
     </template>

src/tree-select/demos/zhCN/index.demo-entry.md

@@ -89,11 +89,12 @@ render-debug.vue
 
 ### TreeSelect Slots
 
-| 名称   | 参数 | 说明                | 版本   |
-| ------ | ---- | ------------------- | ------ |
-| action | `()` | 菜单操作区域的 slot | 2.22.0 |
-| arrow  | `()` | 选择箭头 slot       | 2.30.4 |
-| empty  | `()` | 菜单无数据时的 slot | 2.22.0 |
+| 名称   | 参数 | 说明                | 版本         |
+| ------ | ---- | ------------------- | ------------ |
+| header | `()` | 菜单头部区域的 slot | NEXT_VERSION |
+| action | `()` | 菜单操作区域的 slot | 2.22.0       |
+| arrow  | `()` | 选择箭头 slot       | 2.30.4       |
+| empty  | `()` | 菜单无数据时的 slot | 2.22.0       |
 
 ### TreeSelect Methods
 

src/tree-select/src/TreeSelect.tsx

@@ -969,6 +969,16 @@ export default defineComponent({
                               onFocusin={this.handleMenuFocusin}
                               onFocusout={this.handleMenuFocusout}
                             >
+                              {resolveWrappedSlot($slots.header, (children) => {
+                                return children ? (
+                                  <div
+                                    class={`${mergedClsPrefix}-tree-select-menu__header`}
+                                    data-action
+                                  >
+                                    {children}
+                                  </div>
+                                ) : null
+                              })}
                               <NTree
                                 ref="treeInstRef"
                                 blockLine

src/tree-select/src/styles/index.cssr.ts

@@ -34,6 +34,14 @@ export default c([
       flex: 1;
       justify-content: center;
     `),
+    cE('header', `
+      padding: var(--n-action-padding);
+      transition: 
+        color .3s var(--n-bezier);
+        border-color .3s var(--n-bezier);
+      border-bottom: 1px solid var(--n-action-divider-color);
+      color: var(--n-action-text-color);
+    `),
     cE('action', `
       padding: var(--n-action-padding);
       transition: