From 57aded5921219350bf5c86892c5e034d49e915eb Mon Sep 17 00:00:00 2001 From: jahnli Date: Wed, 27 Nov 2024 18:00:27 +0800 Subject: [PATCH] feat(n-tree-select): add `show-line` prop --- CHANGELOG.en-US.md | 8 +++ CHANGELOG.zh-CN.md | 8 +++ .../demos/enUS/index.demo-entry.md | 1 + .../demos/zhCN/index.demo-entry.md | 1 + src/tree-select/src/TreeSelect.tsx | 68 ++++++++++--------- 5 files changed, 53 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 74daffee2d1..777627968f4 100644 --- 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 index 6cf9772ae01..b2c20b7c0bc 100644 --- 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 index 5a6fe7642ab..7f675c841e8 100644 --- 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 index ef898ded955..c3da432596b 100644 --- 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 index 533be8c89e5..3d4007308a2 100644 --- 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, default: undefined }, + showLine: Boolean, size: String as PropType<'small' | 'medium' | 'large'>, value: [String, Number, Array] as PropType< string | number | Array | null @@ -988,6 +989,7 @@ export default defineComponent({