diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 037ded82f..2f2625e53 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -14,6 +14,7 @@ - `n-auto-complete` adds `append` prop. - `n-select` add native `title` attribute when `filterable` and blur input. - `n-split` adds `size` prop and `on-update:size` prop. +- `n-split` adds `watch-props` prop, closes [#5526](https://github.com/tusen-ai/naive-ui/issues/5526). ### i18n @@ -102,6 +103,9 @@ - `n-tree-select` adds `ellipsis-tag-popover-props` prop. - `n-avatar-group` adds `expand-on-hover` prop. - `n-tabs` adds `tab-class`, `add-tab-style` and `add-tab-class` props. +- `n-tree` adds `override-default-node-click-behavior` prop. +- `n-tree-select` adds `override-default-node-click-behavior` prop. +- Adds `n-flex` component. - `n-pagination` adds `show-quick-jump-dropdown` prop, closes [#5251](https://github.com/tusen-ai/naive-ui/issues/5251). ## 2.36.0 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index f97b73591..a5eefa17e 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -14,6 +14,7 @@ - `n-auto-complete` 新增 `append` 属性 - `n-select` 在组件可过滤且输入失焦时,添加原生 `title` 属性 - `n-split` 新增 `size` 和 `on-update:size` 属性 +- `n-split` 新增 `watch-props` 属性,关闭 [#5526](https://github.com/tusen-ai/naive-ui/issues/5526) ### i18n @@ -103,6 +104,9 @@ - `n-tree-select` 新增 `ellipsis-tag-popover-props` 属性 - `n-avatar-group` 新增 `expand-on-hover` 属性 - `n-tabs` 新增 `tab-class`、`add-tab-style`、`add-tab-class` 属性 +- `n-tree` 新增 `override-default-node-click-behavior` 属性 +- `n-tree-select` 新增 `override-default-node-click-behavior` 属性 +- 新增 `n-flex` 组件 - `n-pagination` 新增 `show-quick-jump-dropdown` 属性,关闭 [#5251](https://github.com/tusen-ai/naive-ui/issues/5251) ## 2.36.0 diff --git a/src/split/demos/enUS/index.demo-entry.md b/src/split/demos/enUS/index.demo-entry.md index 4b9a6a2f4..50bb76d35 100644 --- a/src/split/demos/enUS/index.demo-entry.md +++ b/src/split/demos/enUS/index.demo-entry.md @@ -27,6 +27,7 @@ slot.vue | min | `number` | `0` | The minimum threshold for splitting, 0-1 is a percentage. | 2.36.0 | | max | `number` | `1` | The maximum split threshold, 0-1 is a percentage. | 2.36.0 | | resize-trigger-size | `number` | `3` | Size of the resize trigger. | 2.36.0 | +| watch-props | `Array<'defaultSize'>` | `undefined` | Default prop names that needed to be watched. Components will be updated after the prop is changed. Note: the `watch-props` itself is not reactive. | NEXT_VERSION | | on-update:size | `(value: number) => void` | `undefined` | Callback fired on size changes. | NEXT_VERSION | ### Split Slots diff --git a/src/split/demos/zhCN/index.demo-entry.md b/src/split/demos/zhCN/index.demo-entry.md index e6c619d18..26c8fb2bd 100644 --- a/src/split/demos/zhCN/index.demo-entry.md +++ b/src/split/demos/zhCN/index.demo-entry.md @@ -28,6 +28,7 @@ controlled.vue | min | `number` | `0` | Split 的分割最小阈值,0-1 代表百分比 | 2.36.0 | | max | `number` | `1` | Split 的分割最大阈值,0-1 代表百分比 | 2.36.0 | | resize-trigger-size | `number` | `3` | Split 的分隔条大小 | 2.36.0 | +| watch-props | `Array<'defaultSize'>` | `undefined` | 需要检测变更的默认属性,检测后组件状态会更新。注意:`watch-props` 本身不是响应式的 | NEXT_VERSION | | on-update:size | `(value: number) => void` | `undefined` | 组件 size 属性变化时触发的回调 | NEXT_VERSION | ### Split Slots diff --git a/src/split/src/Split.tsx b/src/split/src/Split.tsx index 7dec797e2..606372e71 100644 --- a/src/split/src/Split.tsx +++ b/src/split/src/Split.tsx @@ -5,6 +5,7 @@ import { ref, computed, type CSSProperties, + watchEffect, toRef } from 'vue' import { off, on } from 'evtd' @@ -47,7 +48,8 @@ export const splitProps = { }, onDragStart: Function as PropType<(e: Event) => void>, onDragMove: Function as PropType<(e: Event) => void>, - onDragEnd: Function as PropType<(e: Event) => void> + onDragEnd: Function as PropType<(e: Event) => void>, + watchProps: Array as PropType> } as const export type SplitProps = ExtractPublicPropTypes @@ -81,6 +83,9 @@ export default defineComponent({ const isDraggingRef = ref(false) const controlledSizeRef = toRef(props, 'size') const uncontrolledSizeRef = ref(props.defaultSize) + if (props.watchProps?.includes('defaultSize')) { + watchEffect(() => (uncontrolledSizeRef.value = props.defaultSize)) + } // use to update controlled or uncontrolled values const doUpdateSize = (size: number): void => { const _onUpdateSize = props['onUpdate:size']