feat(n-tree-select): add show-line prop

tusen-ai · Nov 27, 2024 · 57aded5 · 57aded5
1 parent 9a2d034
commit 57aded5
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 33 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-tree-select` adds `show-line` prop.
+
 ## 2.40.2
 
 `2024-11-26`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-tree-select` 新增 `show-line` 属性
+
 ## 2.40.2
 
 `2024-11-26`

diff --git a/src/tree-select/demos/enUS/index.demo-entry.md b/src/tree-select/demos/enUS/index.demo-entry.md
@@ -60,6 +60,7 @@ debug.vue
 | render-switcher-icon | `() => VNodeChild` | `undefined` | Render function of option switcher icon. | 2.30.7 |
 | render-tag | `(props: { option: TreeSelectOption, handleClose: () => void }) => VNodeChild` | `undefined` | Render function for each option tag. | 2.30.7 |
 | separator | `string` | `' / '` | Option value separator. |  |
+| show-line | `boolean` | `false` | Whether to show the hierarchy of selected nodes in the label. | NEXT_VERSION |
 | show-path | `boolean` | `false` | Whether to also show the hierarchy of selected nodes in the label. |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size. |  |
 | status | `'success' \| 'warning' \| 'error'` | `undefined` | Validation status. | 2.27.0 |

diff --git a/src/tree-select/demos/zhCN/index.demo-entry.md b/src/tree-select/demos/zhCN/index.demo-entry.md
@@ -63,6 +63,7 @@ render-debug.vue
 | render-switcher-icon | `() => VNodeChild` | `undefined` | 节点展开开关的渲染函数 | 2.30.7 |
 | render-tag | `(props: { option: TreeSelectOption, handleClose: () => void }) => VNodeChild` | `undefined` | 控制标签的渲染 | 2.30.7 |
 | separator | `string` | `' / '` | 数据分隔符 |  |
+| show-line | `boolean` | `false` | 是否显示节点连接线 | NEXT_VERSION |
 | show-path | `boolean` | `false` | 是否在选择器中显示选项路径 |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 |  |
 | status | `'success' \| 'warning' \| 'error'` | `undefined` | 验证状态 | 2.27.0 |

diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx
@@ -1,44 +1,19 @@
-import type { ThemeProps } from '../../_mixins'
-import type { FormValidationStatus } from '../../form/src/interface'
-import type { PopoverProps } from '../../popover'
-import type { SelectBaseOption, SelectOption } from '../../select/src/interface'
-import type {
-  GetChildren,
-  InternalTreeInst,
-  Key,
-  TreeOption,
-  TreeOverrideNodeClickBehaviorReturn
-} from '../../tree/src/interface'
-import type { OnUpdateExpandedKeysImpl } from '../../tree/src/Tree'
-import type {
-  OnUpdateIndeterminateKeysImpl,
-  OnUpdateValue,
-  OnUpdateValueImpl,
-  TreeSelectInst,
-  TreeSelectNodeProps,
-  TreeSelectOption,
-  TreeSelectRenderLabel,
-  TreeSelectRenderPrefix,
-  TreeSelectRenderSuffix,
-  TreeSelectRenderTag,
-  Value
-} from './interface'
 import { getPreciseEventTarget, happensIn } from 'seemly'
 import { type CheckStrategy, createTreeMate } from 'treemate'
 import { clickoutside } from 'vdirs'
 import { useIsMounted, useMergedState } from 'vooks'
 import {
-  computed,
   type CSSProperties,
-  defineComponent,
-  h,
   type HTMLAttributes,
   type PropType,
+  Transition,
+  type VNodeChild,
+  computed,
+  defineComponent,
+  h,
   provide,
   ref,
   toRef,
-  Transition,
-  type VNodeChild,
   watchEffect,
   withDirectives
 } from 'vue'
@@ -49,6 +24,18 @@ import {
   VFollower,
   VTarget
 } from 'vueuc'
+import type { OnUpdateExpandedKeysImpl } from '../../tree/src/Tree'
+import type {
+  GetChildren,
+  InternalTreeInst,
+  Key,
+  TreeOption,
+  TreeOverrideNodeClickBehaviorReturn
+} from '../../tree/src/interface'
+import type { SelectBaseOption, SelectOption } from '../../select/src/interface'
+import type { PopoverProps } from '../../popover'
+import type { FormValidationStatus } from '../../form/src/interface'
+import type { ThemeProps } from '../../_mixins'
 import {
   type InternalSelectionInst,
   NBaseFocusDetector,
@@ -62,10 +49,10 @@ import {
   useThemeClass
 } from '../../_mixins'
 import {
-  call,
   type ExtractPublicPropTypes,
-  markEventEffectPerformed,
   type MaybeArray,
+  call,
+  markEventEffectPerformed,
   resolveSlot,
   resolveWrappedSlot,
   useAdjustedTo,
@@ -76,7 +63,20 @@ import { NEmpty } from '../../empty'
 import { NTree } from '../../tree'
 import { createTreeMateOptions, treeSharedProps } from '../../tree/src/Tree'
 import { useMergedCheckStrategy } from '../../tree/src/utils'
-import { treeSelectLight, type TreeSelectTheme } from '../styles'
+import { type TreeSelectTheme, treeSelectLight } from '../styles'
+import type {
+  OnUpdateIndeterminateKeysImpl,
+  OnUpdateValue,
+  OnUpdateValueImpl,
+  TreeSelectInst,
+  TreeSelectNodeProps,
+  TreeSelectOption,
+  TreeSelectRenderLabel,
+  TreeSelectRenderPrefix,
+  TreeSelectRenderSuffix,
+  TreeSelectRenderTag,
+  Value
+} from './interface'
 import { treeSelectInjectionKey } from './interface'
 import style from './styles/index.cssr'
 import {
@@ -140,6 +140,7 @@ export const treeSelectProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
+  showLine: Boolean,
   size: String as PropType<'small' | 'medium' | 'large'>,
   value: [String, Number, Array] as PropType<
     string | number | Array<string | number> | null
@@ -988,6 +989,7 @@ export default defineComponent({
                               <NTree
                                 ref="treeInstRef"
                                 blockLine
+                                showLine={this.showLine}
                                 allowCheckingNotLoaded={
                                   this.allowCheckingNotLoaded
                                 }