naive-ui 2.25.4 → 2.25.7

package/es/tree/src/Tree.js

@@ -13,7 +13,7 @@ import { createTreeMate, flatten, createIndexGetter } from 'treemate';
 import { useMergedState } from 'vooks';
 import { VVirtualList } from 'vueuc';
 import { getPadding } from 'seemly';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call, createDataKey, warn } from '../../_utils';
 import { NxScrollbar } from '../../_internal';
 import { treeLight } from '../styles';
@@ -118,7 +118,7 @@ export default defineComponent({
     name: 'Tree',
     props: treeProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Tree', '-tree', style, treeLight, props, mergedClsPrefixRef);
         const selfElRef = ref(null);
         const scrollbarInstRef = ref(null);
@@ -981,7 +981,31 @@ export default defineComponent({
             handleKeydown,
             handleKeyup
         };
-        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, fNodes: mergedFNodesRef, aip: aipRef, selfElRef,
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor } } = themeRef.value;
+            return {
+                '--n-arrow-color': arrowColor,
+                '--n-loading-color': loadingColor,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-node-border-radius': nodeBorderRadius,
+                '--n-node-color-active': nodeColorActive,
+                '--n-node-color-hover': nodeColorHover,
+                '--n-node-color-pressed': nodeColorPressed,
+                '--n-node-text-color': nodeTextColor,
+                '--n-node-text-color-disabled': nodeTextColorDisabled,
+                '--n-drop-mark-color': dropMarkColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('tree', undefined, cssVarsRef, props)
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedTheme: themeRef,
+            fNodes: mergedFNodesRef,
+            aip: aipRef,
+            selfElRef,
             virtualListInstRef,
             scrollbarInstRef,
             handleFocusout,
@@ -990,24 +1014,16 @@ export default defineComponent({
             getScrollContainer,
             getScrollContent,
             handleAfterEnter,
-            handleResize, cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor } } = themeRef.value;
-                return {
-                    '--n-arrow-color': arrowColor,
-                    '--n-loading-color': loadingColor,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-font-size': fontSize,
-                    '--n-node-border-radius': nodeBorderRadius,
-                    '--n-node-color-active': nodeColorActive,
-                    '--n-node-color-hover': nodeColorHover,
-                    '--n-node-color-pressed': nodeColorPressed,
-                    '--n-node-text-color': nodeTextColor,
-                    '--n-node-text-color-disabled': nodeTextColorDisabled,
-                    '--n-drop-mark-color': dropMarkColor
-                };
-            }) }, exposedMethods);
+            handleResize,
+            handleKeydown: exposedMethods.handleKeydown,
+            handleKeyup: exposedMethods.handleKeyup,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
     },
     render() {
+        var _a;
         const { mergedClsPrefix, blockNode, blockLine, draggable, disabled, internalFocusable, checkable, handleKeyup, handleKeydown, handleFocusout } = this;
         const mergedFocusable = internalFocusable && !disabled;
         const tabindex = mergedFocusable ? '0' : undefined;
@@ -1024,18 +1040,24 @@ export default defineComponent({
             const { mergedTheme, internalScrollablePadding } = this;
             const padding = getPadding(internalScrollablePadding || '0');
             return (h(NxScrollbar, { ref: "scrollbarInstRef", onDragleave: draggable ? this.handleDragLeaveTree : undefined, container: this.getScrollContainer, content: this.getScrollContent, class: treeClass, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, tabindex: tabindex, onKeyup: mergedFocusable ? handleKeyup : undefined, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined }, {
-                default: () => (h(VVirtualList, { ref: "virtualListInstRef", items: this.fNodes, itemSize: ITEM_SIZE, ignoreItemResize: this.aip, paddingTop: padding.top, paddingBottom: padding.bottom, style: [
-                        this.cssVars,
-                        {
-                            paddingLeft: padding.left,
-                            paddingRight: padding.right
-                        }
-                    ], onScroll: this.handleScroll, onResize: this.handleResize, showScrollbar: false, itemResizable: true }, {
-                    default: ({ item }) => createNode(item)
-                }))
+                default: () => {
+                    var _a;
+                    (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                    return (h(VVirtualList, { ref: "virtualListInstRef", items: this.fNodes, itemSize: ITEM_SIZE, ignoreItemResize: this.aip, paddingTop: padding.top, paddingBottom: padding.bottom, class: this.themeClass, style: [
+                            this.cssVars,
+                            {
+                                paddingLeft: padding.left,
+                                paddingRight: padding.right
+                            }
+                        ], onScroll: this.handleScroll, onResize: this.handleResize, showScrollbar: false, itemResizable: true }, {
+                        default: ({ item }) => createNode(item)
+                    }));
+                }
             }));
         }
         const { internalScrollable } = this;
+        treeClass.push(this.themeClass);
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         if (internalScrollable) {
             return (h(NxScrollbar, { class: treeClass, tabindex: tabindex, onKeyup: mergedFocusable ? handleKeyup : undefined, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined, style: this.cssVars, contentStyle: { padding: this.internalScrollablePadding } }, {
                 default: () => (h("div", { onDragleave: draggable ? this.handleDragLeaveTree : undefined, ref: "selfElRef" }, this.fNodes.map(createNode)))

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

@@ -129,6 +129,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         peers: {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;

package/es/tree/styles/light.d.ts

@@ -25,6 +25,7 @@ declare const treeLight: import("../../_mixins/use-theme").Theme<"Tree", {
     dropMarkColor: string;
 }, {
     Checkbox: import("../../_mixins/use-theme").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;

package/es/tree-select/src/TreeSelect.d.ts

@@ -126,6 +126,7 @@ declare const props: {
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -264,6 +265,7 @@ declare const props: {
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -402,6 +404,7 @@ declare const props: {
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -640,6 +643,7 @@ declare const _default: import("vue").DefineComponent<{
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -778,6 +782,7 @@ declare const _default: import("vue").DefineComponent<{
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -916,6 +921,7 @@ declare const _default: import("vue").DefineComponent<{
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -1091,16 +1097,6 @@ declare const _default: import("vue").DefineComponent<{
     handleKeyup: (e: KeyboardEvent) => void;
     handleTabOut: () => void;
     handleMenuMousedown: (e: MouseEvent) => void;
-    cssVars: import("vue").ComputedRef<{
-        '--n-menu-box-shadow': string;
-        '--n-menu-border-radius': string;
-        '--n-menu-color': string;
-        '--n-menu-height': string;
-        '--n-bezier': string;
-        '--n-action-padding': string;
-        '--n-action-text-color': string;
-        '--n-action-divider-color': string;
-    }>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -1229,6 +1225,7 @@ declare const _default: import("vue").DefineComponent<{
                 dropMarkColor: string;
             }, {
                 Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                    labelLineHeight: string;
                     fontSizeSmall: string;
                     fontSizeMedium: string;
                     fontSizeLarge: string;
@@ -1348,6 +1345,7 @@ declare const _default: import("vue").DefineComponent<{
             Tree?: {
                 peers?: {
                     Checkbox?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+                        labelLineHeight: string;
                         fontSizeSmall: string;
                         fontSizeMedium: string;
                         fontSizeLarge: string;
@@ -1406,6 +1404,18 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
+    cssVars: import("vue").ComputedRef<{
+        '--n-menu-box-shadow': string;
+        '--n-menu-border-radius': string;
+        '--n-menu-color': string;
+        '--n-menu-height': string;
+        '--n-bezier': string;
+        '--n-action-padding': string;
+        '--n-action-text-color': string;
+        '--n-action-divider-color': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
@@ -1527,6 +1537,7 @@ declare const _default: import("vue").DefineComponent<{
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -1665,6 +1676,7 @@ declare const _default: import("vue").DefineComponent<{
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -1803,6 +1815,7 @@ declare const _default: import("vue").DefineComponent<{
             dropMarkColor: string;
         }, {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;

package/es/tree-select/src/TreeSelect.js

@@ -8,7 +8,7 @@ import { createTreeMateOptions, treeSharedProps } from '../../tree/src/Tree';
 import { NInternalSelection, NBaseFocusDetector } from '../../_internal';
 import { NTree } from '../../tree';
 import { NEmpty } from '../../empty';
-import { useConfig, useFormItem, useLocale, useTheme } from '../../_mixins';
+import { useConfig, useFormItem, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { call, useAdjustedTo, warnOnce } from '../../_utils';
 import { treeSelectLight } from '../styles';
 import { treeSelectInjectionKey } from './interface';
@@ -70,7 +70,7 @@ export default defineComponent({
         const triggerInstRef = ref(null);
         const treeInstRef = ref(null);
         const menuElRef = ref(null);
-        const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const { localeRef } = useLocale('Select');
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef, nTriggerFormBlur, nTriggerFormChange, nTriggerFormFocus, nTriggerFormInput } = useFormItem(props);
         const uncontrolledValueRef = ref(props.defaultValue);
@@ -477,6 +477,22 @@ export default defineComponent({
             }
         });
         const themeRef = useTheme('TreeSelect', '-tree-select', style, treeSelectLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight, actionPadding, actionDividerColor, actionTextColor } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow,
+                '--n-menu-border-radius': menuBorderRadius,
+                '--n-menu-color': menuColor,
+                '--n-menu-height': menuHeight,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-action-padding': actionPadding,
+                '--n-action-text-color': actionTextColor,
+                '--n-action-divider-color': actionDividerColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('tree-select', undefined, cssVarsRef, props)
+            : undefined;
         return {
             menuElRef,
             mergedStatus: mergedStatusRef,
@@ -522,20 +538,10 @@ export default defineComponent({
             handleKeyup,
             handleTabOut,
             handleMenuMousedown,
-            cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight, actionPadding, actionDividerColor, actionTextColor } } = themeRef.value;
-                return {
-                    '--n-menu-box-shadow': menuBoxShadow,
-                    '--n-menu-border-radius': menuBorderRadius,
-                    '--n-menu-color': menuColor,
-                    '--n-menu-height': menuHeight,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-action-padding': actionPadding,
-                    '--n-action-text-color': actionTextColor,
-                    '--n-action-divider-color': actionDividerColor
-                };
-            }),
-            mergedTheme: themeRef
+            mergedTheme: themeRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
@@ -549,12 +555,15 @@ export default defineComponent({
                     h(VFollower, { ref: "followerInstRef", show: this.mergedShow, placement: this.placement, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target" }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onLeave: this.handleMenuLeave }, {
                             default: () => {
+                                var _a;
                                 if (!this.mergedShow)
                                     return null;
                                 const { mergedClsPrefix, filteredTreeInfo, checkable, multiple, menuProps } = this;
+                                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
                                 return withDirectives(h("div", Object.assign({}, menuProps, { class: [
                                         `${mergedClsPrefix}-tree-select-menu`,
-                                        menuProps === null || menuProps === void 0 ? void 0 : menuProps.class
+                                        menuProps === null || menuProps === void 0 ? void 0 : menuProps.class,
+                                        this.themeClass
                                     ], ref: "menuElRef", style: [
                                         (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || '',
                                         this.cssVars

package/es/tree-select/styles/light.d.ts

@@ -33,6 +33,7 @@ declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSele
         dropMarkColor: string;
     }, {
         Checkbox: import("../../_mixins/use-theme").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;

package/es/upload/src/Upload.d.ts

@@ -1996,7 +1996,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     dragOver: import("vue").Ref<boolean>;
     handleFileInputChange: (e: Event) => void;
-    cssVars: import("vue").ComputedRef<any>;
+    cssVars: import("vue").ComputedRef<any> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly name: {
         readonly type: StringConstructor;

package/es/upload/src/Upload.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { h, defineComponent, computed, provide, toRef, ref, Fragment, Teleport, nextTick } from 'vue';
 import { createId } from 'seemly';
 import { useMergedState } from 'vooks';
-import { useConfig, useTheme, useFormItem } from '../../_mixins';
+import { useConfig, useTheme, useFormItem, useThemeClass } from '../../_mixins';
 import { warn, call, throwError } from '../../_utils';
 import { uploadLight } from '../styles';
 import { uploadDraggerKey } from './UploadDragger';
@@ -152,11 +152,13 @@ function appendData(formData, data, file) {
         formData.append(key, dataObject[key]);
     });
 }
-function submitImpl(inst, file, formData, { method, action, withCredentials, headers, data }) {
+function submitImpl(inst, fieldName, file, { method, action, withCredentials, headers, data }) {
     const request = new XMLHttpRequest();
     inst.XhrMap.set(file.id, request);
     request.withCredentials = withCredentials;
+    const formData = new FormData();
     appendData(formData, data, file);
+    formData.append(fieldName, file.file);
     registerHandler(inst, file, request);
     if (action !== undefined) {
         request.open(method.toUpperCase(), action);
@@ -220,7 +222,7 @@ export default defineComponent({
         if (props.abstract && props.listType === 'image-card') {
             throwError('upload', 'when the list-type is image-card, abstract is not supported.');
         }
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Upload', '-upload', style, uploadLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
         const maxReachedRef = computed(() => {
@@ -313,8 +315,6 @@ export default defineComponent({
             filesToUpload.forEach((file) => {
                 const { status } = file;
                 if (status === 'pending' || (status === 'error' && shouldReupload)) {
-                    const formData = new FormData();
-                    formData.append(fieldName, file.file);
                     if (props.customRequest) {
                         customSubmitImpl({
                             inst: {
@@ -337,7 +337,7 @@ export default defineComponent({
                             XhrMap,
                             onFinish: props.onFinish,
                             onError: props.onError
-                        }, file, formData, {
+                        }, fieldName, file, {
                             method,
                             action,
                             withCredentials,
@@ -408,6 +408,9 @@ export default defineComponent({
                 '--n-item-border-image-card': itemBorderImageCard
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('upload', undefined, cssVarsRef, props)
+            : undefined;
         provide(uploadInjectionKey, {
             mergedClsPrefixRef,
             mergedThemeRef: themeRef,
@@ -433,7 +436,9 @@ export default defineComponent({
             maxReachedRef,
             fileListStyleRef: toRef(props, 'fileListStyle'),
             abstractRef: toRef(props, 'abstract'),
-            cssVarsRef,
+            cssVarsRef: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClassRef: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             showTriggerRef: toRef(props, 'showTrigger'),
             imageGroupPropsRef: toRef(props, 'imageGroupProps')
         });
@@ -445,11 +450,11 @@ export default defineComponent({
             openOpenFileDialog
         };
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, draggerInsideRef,
-            inputElRef, mergedTheme: themeRef, dragOver: dragOverRef, handleFileInputChange, cssVars: cssVarsRef }, exposedMethods);
+            inputElRef, mergedTheme: themeRef, dragOver: dragOverRef, handleFileInputChange, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
         var _a, _b, _c;
-        const { draggerInsideRef, mergedClsPrefix, $slots } = this;
+        const { draggerInsideRef, mergedClsPrefix, $slots, onRender } = this;
         if ($slots.default && !this.abstract) {
             const firstChild = $slots.default()[0];
             if ((_b = (_a = firstChild) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b[uploadDraggerKey]) {
@@ -457,12 +462,17 @@ export default defineComponent({
             }
         }
         const inputNode = (h("input", Object.assign({}, this.inputProps, { ref: "inputElRef", type: "file", class: `${mergedClsPrefix}-upload-file-input`, accept: this.accept, multiple: this.multiple, onChange: this.handleFileInputChange })));
-        return this.abstract ? (h(Fragment, null, (_c = $slots.default) === null || _c === void 0 ? void 0 :
-            _c.call($slots),
-            h(Teleport, { to: "body" }, inputNode))) : (h("div", { class: [
+        if (this.abstract) {
+            return (h(Fragment, null, (_c = $slots.default) === null || _c === void 0 ? void 0 :
+                _c.call($slots),
+                h(Teleport, { to: "body" }, inputNode)));
+        }
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { class: [
                 `${mergedClsPrefix}-upload`,
                 draggerInsideRef.value && `${mergedClsPrefix}-upload--dragger-inside`,
-                this.dragOver && `${mergedClsPrefix}-upload--drag-over`
+                this.dragOver && `${mergedClsPrefix}-upload--drag-over`,
+                this.themeClass
             ], style: this.cssVars },
             inputNode,
             this.showTrigger && this.listType !== 'image-card' && (h(NUploadTrigger, null, $slots)),

package/es/upload/src/UploadFileList.js

@@ -12,7 +12,7 @@ export default defineComponent({
         if (!NUpload) {
             throwError('upload-file-list', '`n-upload-file-list` must be placed inside `n-upload`.');
         }
-        const { mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, maxReachedRef, showTriggerRef, imageGroupPropsRef } = NUpload;
+        const { abstractRef, mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, themeClassRef, maxReachedRef, showTriggerRef, imageGroupPropsRef } = NUpload;
         const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card');
         const renderFileList = () => mergedFileListRef.value.map((file) => (h(NUploadFile, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value })));
         const renderUploadFileList = () => isImageCardTypeRef.value ? (h(NImageGroup, Object.assign({}, imageGroupPropsRef.value), { default: renderFileList })) : (h(NFadeInExpandTransition, { group: true }, {
@@ -20,11 +20,16 @@ export default defineComponent({
         }));
         return () => {
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
+            const { value: abstract } = abstractRef;
             return (h("div", { class: [
                     `${mergedClsPrefix}-upload-file-list`,
                     isImageCardTypeRef.value &&
-                        `${mergedClsPrefix}-upload-file-list--grid`
-                ], style: [cssVarsRef.value, fileListStyleRef.value] },
+                        `${mergedClsPrefix}-upload-file-list--grid`,
+                    abstract ? themeClassRef === null || themeClassRef === void 0 ? void 0 : themeClassRef.value : undefined
+                ], style: [
+                    abstract && cssVarsRef ? cssVarsRef.value : '',
+                    fileListStyleRef.value
+                ] },
                 renderUploadFileList(),
                 showTriggerRef.value &&
                     !maxReachedRef.value &&

package/es/upload/src/interface.d.ts

@@ -65,7 +65,9 @@ export interface UploadInjection {
     maxReachedRef: Ref<boolean>;
     abstractRef: Ref<boolean>;
     imageGroupPropsRef: Ref<ImageGroupProps | undefined>;
-    cssVarsRef: Ref<CSSProperties>;
+    cssVarsRef: undefined | Ref<CSSProperties>;
+    themeClassRef: undefined | Ref<string>;
+    onRender: undefined | (() => void);
     submit: (fileId?: string) => void;
     getFileThumbnailUrl: (file: FileInfo) => Promise<string>;
     handleFileAddition: (files: FileList | null, e?: Event) => void;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.25.4";
+declare const _default: "2.25.7";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.25.4';
+export default '2.25.7';

package/lib/_internal/scrollbar/src/ScrollBar.d.ts

@@ -42,6 +42,7 @@ export interface ScrollbarInstMethods {
     handleMouseLeaveWrapper: () => void;
 }
 export interface ScrollbarInst extends ScrollbarInstMethods {
+    $el: HTMLElement;
     containerRef: HTMLElement | null;
     contentRef: HTMLElement | null;
     containerScrollTop: number;

package/lib/_internal/select-menu/src/SelectMenu.d.ts

@@ -390,6 +390,7 @@ declare const _default: import("vue").DefineComponent<{
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
     scrollbarRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/lib/_mixins/use-css-vars-class.js

@@ -15,8 +15,9 @@ function useThemeClass(componentName, hashRef, cssVarsRef, props) {
     const themeClassRef = (0, vue_1.ref)('');
     const ssrAdapter = (0, vue3_ssr_1.useSsrAdapter)();
     let renderCallback;
+    const hashClassPrefix = `__${componentName}`;
     const mountStyle = () => {
-        let finalThemeHash = componentName;
+        let finalThemeHash = hashClassPrefix;
         const hashValue = hashRef ? hashRef.value : undefined;
         const themeHash = mergedThemeHashRef === null || mergedThemeHashRef === void 0 ? void 0 : mergedThemeHashRef.value;
         if (themeHash)

package/lib/button/src/styles/button-rtl.cssr.js

@@ -9,9 +9,9 @@ const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.cB)('button', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginRight: 0
 }), (0, cssr_1.cE)('content', [(0, cssr_1.c)('~', [(0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginLeft: 0
 })])])])]);

package/lib/cascader/src/Cascader.d.ts

@@ -235,6 +235,7 @@ declare const cascaderProps: {
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -419,6 +420,7 @@ declare const cascaderProps: {
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -603,6 +605,7 @@ declare const cascaderProps: {
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -877,6 +880,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -1061,6 +1065,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -1245,6 +1250,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -1595,6 +1601,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -1947,6 +1954,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -2131,6 +2139,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -2315,6 +2324,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;

package/lib/cascader/src/CascaderMenu.d.ts

@@ -291,6 +291,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;