From 7ede9be3dc05c34e48d2254f3ab842c5ff8584bd Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 11 Aug 2024 22:45:31 +0800
Subject: [PATCH] refactor(tree-select): header slot style

---
 src/tree-select/src/TreeSelect.tsx       | 14 ++++++++++----
 src/tree-select/src/styles/index.cssr.ts |  9 ++++++---
 src/tree-select/styles/light.ts          |  5 ++++-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx
index 0b13bea4129..30176d7e44a 100644
--- a/src/tree-select/src/TreeSelect.tsx
+++ b/src/tree-select/src/TreeSelect.tsx
@@ -693,7 +693,7 @@ export default defineComponent({
     function handleMenuMousedown(e: MouseEvent): void {
       // If there's an action slot later, we need to check if mousedown happens
       // in action panel
-      if (!happensIn(e, 'action'))
+      if (!happensIn(e, 'action') && !happensIn(e, 'header'))
         e.preventDefault()
     }
     const selectionRenderTagRef = computed(() => {
@@ -795,7 +795,10 @@ export default defineComponent({
           menuHeight,
           actionPadding,
           actionDividerColor,
-          actionTextColor
+          actionTextColor,
+          headerDividerColor,
+          headerPadding,
+          headerTextColor
         }
       } = themeRef.value
       return {
@@ -806,7 +809,10 @@ export default defineComponent({
         '--n-bezier': cubicBezierEaseInOut,
         '--n-action-padding': actionPadding,
         '--n-action-text-color': actionTextColor,
-        '--n-action-divider-color': actionDividerColor
+        '--n-action-divider-color': actionDividerColor,
+        '--n-header-padding': headerPadding,
+        '--n-header-text-color': headerTextColor,
+        '--n-header-divider-color': headerDividerColor
       }
     })
     const themeClassHandle = inlineThemeDisabled
@@ -973,7 +979,7 @@ export default defineComponent({
                                 return children ? (
                                   <div
                                     class={`${mergedClsPrefix}-tree-select-menu__header`}
-                                    data-action
+                                    data-header
                                   >
                                     {children}
                                   </div>
diff --git a/src/tree-select/src/styles/index.cssr.ts b/src/tree-select/src/styles/index.cssr.ts
index 4dcde8c4fbd..e0ea6f1c0cf 100644
--- a/src/tree-select/src/styles/index.cssr.ts
+++ b/src/tree-select/src/styles/index.cssr.ts
@@ -7,6 +7,9 @@ import { c, cB, cE } from '../../../_utils/cssr'
 // --n-menu-border-radius
 // --n-menu-box-shadow
 // --n-menu-color
+// --n-header-padding
+// --n-header-text-color
+// --n-header-divider-color
 // --n-action-padding
 // --n-action-text-color
 // --n-action-divider-color
@@ -35,12 +38,12 @@ export default c([
       justify-content: center;
     `),
     cE('header', `
-      padding: var(--n-action-padding);
+      padding: var(--n-header-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);
+      border-bottom: 1px solid var(--n-header-divider-color);
+      color: var(--n-header-text-color);
     `),
     cE('action', `
       padding: var(--n-action-padding);
diff --git a/src/tree-select/styles/light.ts b/src/tree-select/styles/light.ts
index a25aeb7775f..541d556bc04 100644
--- a/src/tree-select/styles/light.ts
+++ b/src/tree-select/styles/light.ts
@@ -22,7 +22,10 @@ export function self(vars: ThemeCommonVars) {
     menuHeight: `calc(${heightMedium} * 7.6)`,
     actionDividerColor: dividerColor,
     actionTextColor: textColor2,
-    actionPadding: '8px 12px'
+    actionPadding: '8px 12px',
+    headerDividerColor: dividerColor,
+    headerTextColor: textColor2,
+    headerPadding: '8px 12px'
   }
 }