fix(Tree): unexposed line color variable (#5338)

Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Nov 11, 2023 · b230f5c · b230f5c
1 parent 3652129
commit b230f5c
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 4 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -4,6 +4,8 @@
 
 ### Fixes
 
+- Fix `n-tree` unexposed line color variable `--n-line-color`, closes [#5339](https://github.com/tusen-ai/naive-ui/issues/5339).
+
 ### Features
 
 - `n-tree` adds `treeGetClickTarget` method to get click target of node click event, closes [#5375](https://github.com/tusen-ai/naive-ui/issues/5375).

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -4,6 +4,8 @@
 
 ### Fixes
 
+- 修复 `n-tree` 未暴露连接线颜色变量 `--n-line-color`，关闭[#5339](https://github.com/tusen-ai/naive-ui/issues/5339)
+
 ### Features
 
 - `n-tree` 导出 `treeGetClickTarget` 函数，判断点击位置，关闭 [#5375](https://github.com/tusen-ai/naive-ui/issues/5375)

diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx
@@ -1574,7 +1574,8 @@ export default defineComponent({
           dropMarkColor,
           nodeWrapperPadding,
           nodeHeight,
-          lineHeight
+          lineHeight,
+          lineColor
         }
       } = themeRef.value
       const lineOffsetTop = getPadding(nodeWrapperPadding, 'top')
@@ -1598,7 +1599,8 @@ export default defineComponent({
         '--n-line-offset-top': `-${lineOffsetTop}`,
         '--n-line-offset-bottom': `-${lineOffsetBottom}`,
         '--n-node-content-height': nodeContentHeight,
-        '--n-line-height': lineHeight
+        '--n-line-height': lineHeight,
+        '--n-line-color': lineColor
       }
     })
     const themeClassHandle = inlineThemeDisabled

diff --git a/src/tree/src/styles/index.cssr.ts b/src/tree/src/styles/index.cssr.ts
@@ -19,6 +19,7 @@ const iconSwitchTransitionNode = iconSwitchTransition()
 // --n-line-offset-bottom
 // --n-node-content-height
 // --n-line-height
+// --n-line-color
 export default cB('tree', `
   font-size: var(--n-font-size);
   outline: none;
@@ -131,7 +132,7 @@ export default cB('tree', `
       c('&::before', `
         position: absolute;
         left: 50%;
-        border-left: 1px solid var(--n-border-color);
+        border-left: 1px solid var(--n-line-color);
         transition: border-color .3s var(--n-bezier);
         transform: translate(-50%);
         content: "";

diff --git a/src/tree/styles/light.ts b/src/tree/styles/light.ts
@@ -9,6 +9,7 @@ import { createTheme } from '../../_mixins/use-theme'
 export const self = (vars: ThemeCommonVars) => {
   const {
     borderRadiusSmall,
+    dividerColor,
     hoverColor,
     pressedColor,
     primaryColor,
@@ -30,7 +31,8 @@ export const self = (vars: ThemeCommonVars) => {
     nodeTextColor: textColor2,
     nodeTextColorDisabled: textColorDisabled,
     loadingColor: primaryColor,
-    dropMarkColor: primaryColor
+    dropMarkColor: primaryColor,
+    lineColor: dividerColor
   }
 }