naive-ui 2.24.6 → 2.25.2

package/es/tag/src/styles/index.cssr.js

@@ -42,7 +42,7 @@ export default cB('tag', `
  color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier),
  opacity .3s var(--n-bezier);
- line-height: 1.2;
+ line-height: 1;
  height: var(--n-height);
  font-size: var(--n-font-size);
 `, [cE('border', `
@@ -76,19 +76,7 @@ export default cB('tag', `
  box-shadow: none;
  color: var(--n-text-color-checkable);
  background-color: var(--n-color-checkable);
- `, [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--n-color-hover-checkable)'
-}, [cNotM('checked', {
-  color: 'var(--n-text-color-hover-checkable)'
-})]), c('&:active', {
-  backgroundColor: 'var(--n-color-pressed-checkable)'
-}, [cNotM('checked', {
-  color: 'var(--n-text-color-pressed-checkable)'
-})])]), cM('checked', {
-  color: 'var(--n-text-color-checked)',
-  backgroundColor: 'var(--n-color-checked)'
-}, [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--n-color-checked-hover)'
-}), c('&:active', {
-  backgroundColor: 'var(--n-color-checked-pressed)'
-})])])])]);
+ `, [cNotM('disabled', [c('&:hover', 'background-color: var(--n-color-hover-checkable);', [cNotM('checked', 'color: var(--n-text-color-hover-checkable);')]), c('&:active', 'background-color: var(--n-color-pressed-checkable);', [cNotM('checked', 'color: var(--n-text-color-pressed-checkable);')])]), cM('checked', `
+ color: var(--n-text-color-checked);
+ background-color: var(--n-color-checked);
+ `, [cNotM('disabled', [c('&:hover', 'background-color: var(--n-color-checked-hover);'), c('&:active', 'background-color: var(--n-color-checked-pressed);')])])])]);

package/es/tag/styles/index.d.ts

@@ -1,4 +1,4 @@
 export { default as tagDark } from './dark';
 export { default as tagLight } from './light';
-export { default as tagRtl } from './rtl';
+export { tagRtl } from './rtl';
 export type { TagThemeVars, TagTheme } from './light';

package/es/tag/styles/index.js

@@ -1,3 +1,3 @@
 export { default as tagDark } from './dark';
 export { default as tagLight } from './light';
-export { default as tagRtl } from './rtl';
+export { tagRtl } from './rtl';

package/es/tag/styles/rtl.d.ts

@@ -1,5 +1,2 @@
-declare const _default: {
-    name: string;
-    style: import("css-render").CNode;
-};
-export default _default;
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const tagRtl: RtlItem;

package/es/tag/styles/rtl.js

@@ -1,5 +1,5 @@
 import rtlStyle from '../src/styles/rtl.cssr';
-export default {
+export const tagRtl = {
     name: 'Tag',
     style: rtlStyle
 };

package/es/themes/dark.js

@@ -31,6 +31,7 @@ import { emptyDark } from '../empty/styles';
 import { formDark } from '../form/styles';
 import { gradientTextDark } from '../gradient-text/styles';
 import { iconDark } from '../icon/styles';
+import { iconWrapperDark } from '../icon-wrapper/styles';
 import { imageDark } from '../image/styles';
 import { inputDark } from '../input/styles';
 import { inputNumberDark } from '../input-number/styles';
@@ -74,6 +75,7 @@ import { typographyDark } from '../typography/styles';
 import { treeDark } from '../tree/styles';
 import { uploadDark } from '../upload/styles';
 export const darkTheme = {
+    name: 'dark',
     common: commonDark,
     Alert: alertDark,
     Anchor: anchorDark,
@@ -107,6 +109,7 @@ export const darkTheme = {
     Form: formDark,
     GradientText: gradientTextDark,
     Icon: iconDark,
+    IconWrapper: iconWrapperDark,
     Image: imageDark,
     Input: inputDark,
     InputNumber: inputNumberDark,

package/es/themes/light.js

@@ -33,6 +33,7 @@ import { emptyLight } from '../empty/styles';
 import { formLight } from '../form/styles';
 import { gradientTextLight } from '../gradient-text/styles';
 import { iconLight } from '../icon/styles';
+import { iconWrapperLight } from '../icon-wrapper/styles';
 import { imageLight } from '../image/styles';
 import { inputLight } from '../input/styles';
 import { inputNumberLight } from '../input-number/styles';
@@ -76,6 +77,7 @@ import { treeLight } from '../tree/styles';
 import { treeSelectLight } from '../tree-select/styles';
 import { uploadLight } from '../upload/styles';
 export const lightTheme = {
+    name: 'light',
     common: commonLight,
     Alert: alertLight,
     Anchor: anchorLight,
@@ -109,6 +111,7 @@ export const lightTheme = {
     Form: formLight,
     GradientText: gradientTextLight,
     Icon: iconLight,
+    IconWrapper: iconWrapperLight,
     Image: imageLight,
     Input: inputLight,
     InputNumber: inputNumberLight,

package/es/themes/utils.d.ts

@@ -1,5 +1,6 @@
 import { GlobalTheme } from '../config-provider';
-declare type ComponentKey = keyof GlobalTheme;
+declare type ComponentKey = Exclude<keyof GlobalTheme, 'name'>;
 declare type ComponentThemes = Array<Exclude<GlobalTheme[ComponentKey], undefined>>;
+export declare function createTheme(name: string, componentThemes: ComponentThemes): GlobalTheme;
 export declare function createTheme(componentThemes: ComponentThemes): GlobalTheme;
 export {};

package/es/themes/utils.js

@@ -1,7 +1,19 @@
-export function createTheme(componentThemes) {
-    const theme = {};
-    for (const cTheme of componentThemes) {
-        theme[cTheme.name] = cTheme;
+export function createTheme(name, componentThemes) {
+    const nameIsString = typeof name === 'string';
+    const theme = {
+        name: nameIsString ? name : 'customized-theme'
+    };
+    if (nameIsString) {
+        if (componentThemes) {
+            for (const cTheme of componentThemes) {
+                theme[cTheme.name] = cTheme;
+            }
+        }
+    }
+    else {
+        for (const cTheme of name) {
+            theme[cTheme.name] = cTheme;
+        }
     }
     return theme;
 }

package/es/thing/src/Thing.js

@@ -11,7 +11,7 @@ export default defineComponent({
     props: thingProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Thing', 'Thing', style, thingLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Thing', '-thing', style, thingLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { self: { titleTextColor, textColor, titleFontWeight, fontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {

package/es/time-picker/src/TimePicker.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { FollowerPlacement } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { IsHourDisabled, IsMinuteDisabled, IsSecondDisabled, ItemValue, OnUpdateFormattedValue, OnUpdateValue, Size } from './interface';
 declare const timePickerProps: {
@@ -18,7 +19,7 @@ declare const timePickerProps: {
     defaultFormattedValue: StringConstructor;
     placeholder: StringConstructor;
     placement: {
-        type: StringConstructor;
+        type: PropType<FollowerPlacement>;
         default: string;
     };
     value: PropType<number | null>;
@@ -947,7 +948,7 @@ declare const _default: import("vue").DefineComponent<{
     defaultFormattedValue: StringConstructor;
     placeholder: StringConstructor;
     placement: {
-        type: StringConstructor;
+        type: PropType<FollowerPlacement>;
         default: string;
     };
     value: PropType<number | null>;
@@ -1858,6 +1859,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    mergedStatus: import("vue").ComputedRef<import("../../form/src/interface").FormValidationStatus | undefined>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     namespace: import("vue").ComputedRef<string | undefined>;
@@ -2407,7 +2409,7 @@ declare const _default: import("vue").DefineComponent<{
     defaultFormattedValue: StringConstructor;
     placeholder: StringConstructor;
     placement: {
-        type: StringConstructor;
+        type: PropType<FollowerPlacement>;
         default: string;
     };
     value: PropType<number | null>;
@@ -3322,9 +3324,9 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean | undefined;
     format: string;
     to: string | boolean | HTMLElement;
-    placement: string;
-    showIcon: boolean;
     bordered: boolean | undefined;
+    showIcon: boolean;
+    placement: FollowerPlacement;
     clearable: boolean;
     defaultValue: number | null;
     stateful: boolean;

package/es/time-picker/src/TimePicker.js

@@ -79,8 +79,8 @@ export default defineComponent({
         const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } = useConfig(props);
         const { localeRef, dateLocaleRef } = useLocale('TimePicker');
         const formItem = useFormItem(props);
-        const { mergedSizeRef, mergedDisabledRef } = formItem;
-        const themeRef = useTheme('TimePicker', 'TimePicker', style, timePickerLight, props, mergedClsPrefixRef);
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
+        const themeRef = useTheme('TimePicker', '-time-picker', style, timePickerLight, props, mergedClsPrefixRef);
         const keyboardState = useKeyboard();
         const inputInstRef = ref(null);
         const panelInstRef = ref(null);
@@ -513,7 +513,7 @@ export default defineComponent({
                 (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
-        return Object.assign(Object.assign({}, exposedMethods), { mergedBordered: mergedBorderedRef, mergedClsPrefix: mergedClsPrefixRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, isMounted: useIsMounted(), inputInstRef,
+        return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedBordered: mergedBorderedRef, mergedClsPrefix: mergedClsPrefixRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, isMounted: useIsMounted(), inputInstRef,
             panelInstRef, adjustedTo: useAdjustedTo(props), mergedShow: mergedShowRef, localizedNow: localizedNowRef, localizedPlaceholder: localizedPlaceholderRef, localizedNegativeText: localizedNegativeTextRef, localizedPositiveText: localizedPositiveTextRef, hourInFormat: hourInFormatRef, minuteInFormat: minuteInFormatRef, secondInFormat: secondInFormatRef, mergedAttrSize: mergedAttrSizeRef, displayTimeString: displayTimeStringRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, isValueInvalid: isValueInvalidRef, isHourInvalid: isHourInvalidRef, isMinuteInvalid: isMinuteInvalidRef, isSecondInvalid: isSecondInvalidRef, transitionDisabled: transitionDisabledRef, hourValue: hourValueRef, minuteValue: minuteValueRef, secondValue: secondValueRef, amPmValue: amPmValueRef, handleTimeInputFocus,
             handleTimeInputBlur,
             handleNowClick,
@@ -564,7 +564,7 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(NInput, { ref: "inputInstRef", value: this.displayTimeString, bordered: this.mergedBordered, passivelyActivated: true, attrSize: this.mergedAttrSize, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, stateful: this.stateful, size: this.mergedSize, placeholder: this.localizedPlaceholder, clearable: this.clearable, disabled: this.mergedDisabled, textDecoration: this.isValueInvalid ? 'line-through' : undefined, onFocus: this.handleTimeInputFocus, onBlur: this.handleTimeInputBlur, onActivate: this.handleTimeInputActivate, onDeactivate: this.handleTimeInputDeactivate, onUpdateValue: this.handleTimeInputUpdateValue, onClear: this.handleTimeInputClear, internalDeactivateOnEnter: true, internalForceFocus: this.mergedShow, readonly: this.inputReadonly || this.mergedDisabled, onClick: this.handleTriggerClick }, this.showIcon
+                        default: () => (h(NInput, { ref: "inputInstRef", status: this.mergedStatus, value: this.displayTimeString, bordered: this.mergedBordered, passivelyActivated: true, attrSize: this.mergedAttrSize, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, stateful: this.stateful, size: this.mergedSize, placeholder: this.localizedPlaceholder, clearable: this.clearable, disabled: this.mergedDisabled, textDecoration: this.isValueInvalid ? 'line-through' : undefined, onFocus: this.handleTimeInputFocus, onBlur: this.handleTimeInputBlur, onActivate: this.handleTimeInputActivate, onDeactivate: this.handleTimeInputDeactivate, onUpdateValue: this.handleTimeInputUpdateValue, onClear: this.handleTimeInputClear, internalDeactivateOnEnter: true, internalForceFocus: this.mergedShow, readonly: this.inputReadonly || this.mergedDisabled, onClick: this.handleTriggerClick }, this.showIcon
                             ? {
                                 [this.clearable ? 'clear' : 'suffix']: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-time-picker-icon` }, {
                                     default: () => $slots.icon ? $slots.icon() : h(TimeIcon, null)
@@ -572,7 +572,7 @@ export default defineComponent({
                             }
                             : null))
                     }),
-                    h(VFollower, { teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, show: this.mergedShow, to: this.adjustedTo, containerClass: this.namespace, placement: "bottom-start" }, {
+                    h(VFollower, { teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, show: this.mergedShow, to: this.adjustedTo, containerClass: this.namespace, placement: this.placement }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.mergedShow
                                 ? withDirectives(h(Panel, { ref: "panelInstRef", actions: this.actions, style: this.cssVars, seconds: this.seconds, minutes: this.minutes, hours: this.hours, transitionDisabled: this.transitionDisabled, hourValue: this.hourValue, showHour: this.hourInFormat, isHourInvalid: this.isHourInvalid, isHourDisabled: this.isHourDisabled, minuteValue: this.minuteValue, showMinute: this.minuteInFormat, isMinuteInvalid: this.isMinuteInvalid, isMinuteDisabled: this.isMinuteDisabled, secondValue: this.secondValue, amPmValue: this.amPmValue, showSecond: this.secondInFormat, isSecondInvalid: this.isSecondInvalid, isSecondDisabled: this.isSecondDisabled, isValueInvalid: this.isValueInvalid, nowText: this.localizedNow, confirmText: this.localizedPositiveText, use12Hours: this.use12Hours, onFocusout: this.handleMenuFocusOut, onKeydown: this.handleMenuKeyDown, onHourClick: this.handleHourClick, onMinuteClick: this.handleMinuteClick, onSecondClick: this.handleSecondClick, onAmPmClick: this.handleAmPmClick, onNowClick: this.handleNowClick, onConfirmClick: this.handleConfirmClick, onFocusDetectorFocus: this.handleFocusDetectorFocus }), [[clickoutside, this.handleClickOutside]])

package/es/timeline/src/Timeline.js

@@ -16,7 +16,7 @@ export default defineComponent({
     props: timelineProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Timeline', 'Timeline', style, timelineLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Timeline', '-timeline', style, timelineLight, props, mergedClsPrefixRef);
         provide(timelineInjectionKey, {
             props,
             mergedThemeRef: themeRef,

package/es/tooltip/src/Tooltip.d.ts

@@ -91,7 +91,7 @@ declare const tooltipProps: {
     };
     raw: BooleanConstructor;
     placement: {
-        type: import("vue").PropType<import("vueuc").FollowerPlacement>;
+        type: import("vue").PropType<import("vueuc/lib/binder/src/interface").Placement>;
         default: string;
     };
     x: NumberConstructor;
@@ -116,11 +116,15 @@ declare const tooltipProps: {
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -234,7 +238,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     raw: BooleanConstructor;
     placement: {
-        type: import("vue").PropType<import("vueuc").FollowerPlacement>;
+        type: import("vue").PropType<import("vueuc/lib/binder/src/interface").Placement>;
         default: string;
     };
     x: NumberConstructor;
@@ -259,11 +263,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -524,7 +532,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     raw: BooleanConstructor;
     placement: {
-        type: import("vue").PropType<import("vueuc").FollowerPlacement>;
+        type: import("vue").PropType<import("vueuc/lib/binder/src/interface").Placement>;
         default: string;
     };
     x: NumberConstructor;
@@ -549,11 +557,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -583,12 +595,13 @@ declare const _default: import("vue").DefineComponent<{
     duration: number;
     to: string | boolean | HTMLElement;
     raw: boolean;
-    placement: import("vueuc").FollowerPlacement;
+    placement: import("vueuc/lib/binder/src/interface").Placement;
     overlap: boolean;
     trigger: import("../../popover").PopoverTrigger;
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;

package/es/tooltip/src/Tooltip.js

@@ -10,7 +10,7 @@ export default defineComponent({
     props: tooltipProps,
     __popover__: true,
     setup(props) {
-        const themeRef = useTheme('Tooltip', 'Tooltip', undefined, tooltipLight, props);
+        const themeRef = useTheme('Tooltip', '-tooltip', undefined, tooltipLight, props);
         const popoverRef = ref(null);
         const tooltipExposedMethod = {
             syncPosition() {

package/es/transfer/src/Transfer.d.ts

@@ -3624,9 +3624,9 @@ declare const _default: import("vue").DefineComponent<{
     filter: Filter;
     disabled: boolean | undefined;
     onChange: MaybeArray<OnUpdateValue>;
+    options: Option[];
     virtualScroll: boolean;
     filterable: boolean;
-    options: Option[];
     defaultValue: OptionValue[] | null;
 }>;
 export default _default;

package/es/transfer/src/Transfer.js

@@ -47,7 +47,7 @@ export default defineComponent({
     props: transferProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Transfer', 'Transfer', style, transferLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Transfer', '-transfer', style, transferLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
         const itemSizeRef = computed(() => {

package/es/tree/src/Tree.d.ts

@@ -1,10 +1,11 @@
 import { PropType } from 'vue';
 import { TreeMate, TreeMateOptions, CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon } from './interface';
+import type { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon, TreeNodeProps } from './interface';
 import { defaultAllowDrop } from './dnd';
 export declare function createTreeMateOptions<T>(keyField: string, childrenField: string): TreeMateOptions<T, T, T>;
-declare type OnUpdateKeys = (value: Key[], option: Array<TreeOption | null>) => void;
+export declare type OnUpdateKeys = (value: Array<string & number>, option: Array<TreeOption | null>) => void;
+export declare type OnUpdateKeysImpl = (value: Key[], option: Array<TreeOption | null>) => void;
 declare type OnLoad = (node: TreeOption) => Promise<void>;
 export declare const treeSharedProps: {
     readonly filter: PropType<(pattern: string, node: TreeOption) => boolean>;
@@ -134,6 +135,7 @@ declare const treeProps: {
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
+    readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -383,6 +385,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
+    readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -1080,6 +1083,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
+    readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;

package/es/tree/src/Tree.js

@@ -97,7 +97,7 @@ const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, us
     }, animated: {
         type: Boolean,
         default: true
-    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, renderSwitcherIcon: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), treeSharedProps), { 
+    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, renderSwitcherIcon: Function, nodeProps: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), treeSharedProps), { 
     // internal props for tree-select
     internalScrollable: Boolean, internalScrollablePadding: String, 
     // use it to do check
@@ -119,7 +119,7 @@ export default defineComponent({
     props: treeProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Tree', 'Tree', style, treeLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Tree', '-tree', style, treeLight, props, mergedClsPrefixRef);
         const selfElRef = ref(null);
         const scrollbarInstRef = ref(null);
         const virtualListInstRef = ref(null);
@@ -408,18 +408,22 @@ export default defineComponent({
         function doUpdateExpandedKeys(value, option) {
             const { 'onUpdate:expandedKeys': _onUpdateExpandedKeys, onUpdateExpandedKeys } = props;
             uncontrolledExpandedKeysRef.value = value;
-            if (_onUpdateExpandedKeys)
+            if (_onUpdateExpandedKeys) {
                 call(_onUpdateExpandedKeys, value, option);
-            if (onUpdateExpandedKeys)
+            }
+            if (onUpdateExpandedKeys) {
                 call(onUpdateExpandedKeys, value, option);
+            }
         }
         function doUpdateCheckedKeys(value, option) {
             const { 'onUpdate:checkedKeys': _onUpdateCheckedKeys, onUpdateCheckedKeys } = props;
             uncontrolledCheckedKeysRef.value = value;
-            if (onUpdateCheckedKeys)
+            if (onUpdateCheckedKeys) {
                 call(onUpdateCheckedKeys, value, option);
-            if (_onUpdateCheckedKeys)
+            }
+            if (_onUpdateCheckedKeys) {
                 call(_onUpdateCheckedKeys, value, option);
+            }
         }
         function doUpdateIndeterminateKeys(value, option) {
             const { 'onUpdate:indeterminateKeys': _onUpdateIndeterminateKeys, onUpdateIndeterminateKeys } = props;
@@ -433,10 +437,12 @@ export default defineComponent({
         function doUpdateSelectedKeys(value, option) {
             const { 'onUpdate:selectedKeys': _onUpdateSelectedKeys, onUpdateSelectedKeys } = props;
             uncontrolledSelectedKeysRef.value = value;
-            if (onUpdateSelectedKeys)
+            if (onUpdateSelectedKeys) {
                 call(onUpdateSelectedKeys, value, option);
-            if (_onUpdateSelectedKeys)
+            }
+            if (_onUpdateSelectedKeys) {
                 call(_onUpdateSelectedKeys, value, option);
+            }
         }
         // Drag & Drop
         function doDragEnter(info) {
@@ -933,6 +939,7 @@ export default defineComponent({
             mergedExpandedKeysRef,
             mergedThemeRef: themeRef,
             mergedCheckStrategyRef,
+            nodePropsRef: toRef(props, 'nodeProps'),
             disabledRef: toRef(props, 'disabled'),
             checkableRef: toRef(props, 'checkable'),
             selectableRef: toRef(props, 'selectable'),

package/es/tree/src/TreeNode.d.ts

@@ -26,6 +26,7 @@ declare const TreeNode: import("vue").DefineComponent<{
     internalScrollable: import("vue").Ref<boolean>;
     draggable: import("vue").Ref<boolean>;
     blockLine: import("vue").Ref<boolean>;
+    nodeProps: import("vue").ComputedRef<import("vue").HTMLAttributes | undefined>;
     checkboxFocusable: import("vue").Ref<boolean>;
     droppingPosition: import("vue").Ref<import("./interface").DropPosition | null>;
     droppingOffsetLevel: import("vue").Ref<number>;
@@ -41,6 +42,7 @@ declare const TreeNode: import("vue").DefineComponent<{
     handleDragOver: (e: DragEvent) => void;
     handleDragEnd: (e: DragEvent) => void;
     handleDragLeave: (e: DragEvent) => void;
+    handleLineClick: (e: MouseEvent) => void;
     handleContentClick: (e: MouseEvent) => void;
     handleSwitcherClick: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/tree/src/TreeNode.js

@@ -23,7 +23,14 @@ const TreeNode = defineComponent({
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NTree = inject(treeInjectionKey);
-        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, indentRef } = NTree;
+        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, nodePropsRef, indentRef, blockLineRef } = NTree;
+        const disabledRef = computed(() => NTree.disabledRef.value || props.tmNode.disabled);
+        const resolvedNodePropsRef = computed(() => {
+            const { value: nodeProps } = nodePropsRef;
+            if (!nodeProps)
+                return undefined;
+            return nodeProps({ option: props.tmNode.rawNode });
+        });
         // used for drag and drop
         const contentInstRef = ref(null);
         // must be non-reactive
@@ -52,11 +59,28 @@ const TreeNode = defineComponent({
                 NTree.handleSwitcherClick(tmNode);
             }
         }
-        function handleContentClick(e) {
+        function _handleClick(e) {
             if (happensIn(e, 'checkbox') || happensIn(e, 'switcher'))
                 return;
             NTree.handleSelect(props.tmNode);
         }
+        function handleContentClick(e) {
+            var _a, _b;
+            if (blockLineRef.value)
+                return;
+            if (!disabledRef.value)
+                _handleClick(e);
+            (_b = (_a = resolvedNodePropsRef.value) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        }
+        function handleLineClick(e) {
+            var _a, _b;
+            if (!blockLineRef.value)
+                return;
+            if (!disabledRef.value) {
+                _handleClick(e);
+            }
+            (_b = (_a = resolvedNodePropsRef.value) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        }
         function handleCheck(checked) {
             NTree.handleCheck(props.tmNode, checked);
         }
@@ -143,7 +167,7 @@ const TreeNode = defineComponent({
             indeterminate: useMemo(() => NTree.displayedIndeterminateKeysRef.value.includes(props.tmNode.key)),
             selected: useMemo(() => NTree.mergedSelectedKeysRef.value.includes(props.tmNode.key)),
             expanded: useMemo(() => NTree.mergedExpandedKeysRef.value.includes(props.tmNode.key)),
-            disabled: computed(() => NTree.disabledRef.value || props.tmNode.disabled),
+            disabled: disabledRef,
             checkable: computed(() => NTree.checkableRef.value &&
                 (NTree.cascadeRef.value ||
                     NTree.mergedCheckStrategyRef.value !== 'child' ||
@@ -155,7 +179,8 @@ const TreeNode = defineComponent({
                     : true)),
             internalScrollable: NTree.internalScrollableRef,
             draggable: NTree.draggableRef,
-            blockLine: NTree.blockLineRef,
+            blockLine: blockLineRef,
+            nodeProps: resolvedNodePropsRef,
             checkboxFocusable: NTree.internalCheckboxFocusableRef,
             droppingPosition: droppingPositionRef,
             droppingOffsetLevel: droppingOffsetLevelRef,
@@ -169,12 +194,13 @@ const TreeNode = defineComponent({
             handleDragOver,
             handleDragEnd,
             handleDragLeave,
+            handleLineClick,
             handleContentClick,
             handleSwitcherClick
         };
     },
     render() {
-        const { tmNode, clsPrefix, checkable, selectable, selected, checked, highlight, draggable, blockLine, indent, disabled, pending, internalScrollable } = this;
+        const { tmNode, clsPrefix, checkable, selectable, selected, checked, highlight, draggable, blockLine, indent, disabled, pending, internalScrollable, nodeProps } = this;
         // drag start not inside
         // it need to be append to node itself, not wrapper
         const dragEventHandlers = draggable && !disabled
@@ -190,7 +216,7 @@ const TreeNode = defineComponent({
         // scrolled to, so we need data-key to query the target element.
         const dataKey = internalScrollable ? createDataKey(tmNode.key) : undefined;
         return (h("div", Object.assign({ class: `${clsPrefix}-tree-node-wrapper` }, dragEventHandlers),
-            h("div", { class: [
+            h("div", Object.assign({}, (blockLine ? nodeProps : undefined), { class: [
                     `${clsPrefix}-tree-node`,
                     {
                         [`${clsPrefix}-tree-node--selected`]: selected,
@@ -199,14 +225,15 @@ const TreeNode = defineComponent({
                         [`${clsPrefix}-tree-node--pending`]: pending,
                         [`${clsPrefix}-tree-node--disabled`]: disabled,
                         [`${clsPrefix}-tree-node--selectable`]: selectable
-                    }
-                ], "data-key": dataKey, draggable: draggable && blockLine, onClick: blockLine && !disabled ? this.handleContentClick : undefined, onDragstart: draggable && blockLine && !disabled
+                    },
+                    nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps.class
+                ], "data-key": dataKey, draggable: draggable && blockLine, onClick: this.handleLineClick, onDragstart: draggable && blockLine && !disabled
                     ? this.handleDragStart
-                    : undefined },
+                    : undefined }),
                 repeat(tmNode.level, h("div", { class: `${clsPrefix}-tree-node-indent`, style: { flex: `0 0 ${indent}px` } })),
                 h(NTreeNodeSwitcher, { clsPrefix: clsPrefix, expanded: this.expanded, loading: this.loading, hide: tmNode.isLeaf, onClick: this.handleSwitcherClick }),
                 checkable ? (h(NTreeNodeCheckbox, { focusable: this.checkboxFocusable, disabled: disabled || this.checkboxDisabled, clsPrefix: clsPrefix, checked: this.checked, indeterminate: this.indeterminate, onCheck: this.handleCheck })) : null,
-                h(NTreeNodeContent, { ref: "contentInstRef", clsPrefix: clsPrefix, checked: checked, selected: selected, onClick: blockLine || disabled ? undefined : this.handleContentClick, onDragstart: draggable && !blockLine && !disabled
+                h(NTreeNodeContent, { ref: "contentInstRef", clsPrefix: clsPrefix, checked: checked, selected: selected, onClick: this.handleContentClick, nodeProps: blockLine ? undefined : nodeProps, onDragstart: draggable && !blockLine && !disabled
                         ? this.handleDragStart
                         : undefined, tmNode: tmNode }),
                 draggable