naive-ui 2.25.2 → 2.25.5

package/lib/badge/src/Badge.js

@@ -9,27 +9,18 @@ const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const badgeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: [String, Number], max: Number, dot: {
-        type: Boolean,
-        default: false
-    }, type: {
+const badgeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: [String, Number], max: Number, dot: Boolean, type: {
         type: String,
         default: 'default'
     }, show: {
         type: Boolean,
         default: true
-    }, showZero: {
-        type: Boolean,
-        default: false
-    }, processing: {
-        type: Boolean,
-        default: false
-    }, color: String });
+    }, showZero: Boolean, processing: Boolean, color: String });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Badge',
     props: badgeProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Badge', '-badge', index_cssr_1.default, styles_1.badgeLight, props, mergedClsPrefixRef);
         const appearedRef = (0, vue_1.ref)(false);
         const handleAfterEnter = () => {
@@ -47,37 +38,56 @@ exports.default = (0, vue_1.defineComponent)({
             if (showBadgeRef.value)
                 appearedRef.value = true;
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { type, color: propColor } = props;
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [(0, _utils_1.createKey)('color', type)]: color, fontFamily, fontSize } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-font-family': fontFamily,
+                '--n-color': propColor || color,
+                '--n-ripple-color': propColor || color,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-ripple-bezier': cubicBezierEaseOut
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('badge', (0, vue_1.computed)(() => {
+                let hash = '';
+                const { type, color } = props;
+                if (type) {
+                    hash += type[0];
+                }
+                if (color) {
+                    hash += (0, _utils_1.color2Class)(color);
+                }
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            appeared: (0, vue_1.ref)(false),
+            appeared: appearedRef,
             showBadge: showBadgeRef,
             handleAfterEnter,
             handleAfterLeave,
-            cssVars: (0, vue_1.computed)(() => {
-                const { type, color: propColor } = props;
-                const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [(0, _utils_1.createKey)('color', type)]: color, fontFamily, fontSize } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-font-family': fontFamily,
-                    '--n-color': propColor || color,
-                    '--n-ripple-color': propColor || color,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-ripple-bezier': cubicBezierEaseOut
-                };
-            })
+            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, $slots } = this;
+        const { mergedClsPrefix, onRender, themeClass, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        const children = (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-badge`,
+                themeClass,
                 {
                     [`${mergedClsPrefix}-badge--dot`]: this.dot,
-                    [`${mergedClsPrefix}-badge--as-is`]: !$slots.default
+                    [`${mergedClsPrefix}-badge--as-is`]: !children
                 }
-            ], style: this.cssVars }, (_a = $slots.default) === null || _a === void 0 ? void 0 :
-            _a.call($slots),
+            ], style: this.cssVars },
+            children,
             (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", onAfterEnter: this.handleAfterEnter, onAfterLeave: this.handleAfterLeave }, {
                 default: () => this.showBadge ? ((0, vue_1.h)("sup", { class: `${mergedClsPrefix}-badge-sup`, title: (0, _utils_1.getTitleAttribute)(this.value) },
                     !this.dot ? ((0, vue_1.h)(_internal_1.NBaseSlotMachine, { clsPrefix: mergedClsPrefix, appeared: this.appeared, max: this.max, value: this.value })) : null,

package/lib/breadcrumb/src/Breadcrumb.d.ts

@@ -82,7 +82,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-item-text-color-active': string;
         '--n-separator-color': string;
         '--n-font-weight-active': string;
-    }>;
+    }> | undefined;
+    themeClass: 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 separator: {
         readonly type: StringConstructor;

package/lib/breadcrumb/src/Breadcrumb.js

@@ -18,31 +18,39 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Breadcrumb',
     props: breadcrumbProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Breadcrumb', '-breadcrumb', index_cssr_1.default, styles_1.breadcrumbLight, props, mergedClsPrefixRef);
         (0, vue_1.provide)(exports.breadcrumbInjectionKey, {
             separatorRef: (0, vue_1.toRef)(props, 'separator'),
             mergedClsPrefixRef
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { separatorColor, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, fontSize, fontWeightActive } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-item-text-color': itemTextColor,
+                '--n-item-text-color-hover': itemTextColorHover,
+                '--n-item-text-color-pressed': itemTextColorPressed,
+                '--n-item-text-color-active': itemTextColorActive,
+                '--n-separator-color': separatorColor,
+                '--n-font-weight-active': fontWeightActive
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('breadcrumb', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { separatorColor, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, fontSize, fontWeightActive } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-item-text-color': itemTextColor,
-                    '--n-item-text-color-hover': itemTextColorHover,
-                    '--n-item-text-color-pressed': itemTextColorPressed,
-                    '--n-item-text-color-active': itemTextColorActive,
-                    '--n-separator-color': separatorColor,
-                    '--n-font-weight-active': fontWeightActive
-                };
-            })
+            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() {
-        return ((0, vue_1.h)("nav", { class: `${this.mergedClsPrefix}-breadcrumb`, style: this.cssVars, "aria-label": "Breadcrumb" },
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return ((0, vue_1.h)("nav", { class: [`${this.mergedClsPrefix}-breadcrumb`, this.themeClass], style: this.cssVars, "aria-label": "Breadcrumb" },
             (0, vue_1.h)("ul", null, this.$slots)));
     }
 });

package/lib/button/src/Button.d.ts

@@ -1,4 +1,4 @@
-import { PropType, ButtonHTMLAttributes } from 'vue';
+import { PropType, ButtonHTMLAttributes, ExtractPropTypes } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { Type, Size } from './interface';
 declare const buttonProps: {
@@ -1320,8 +1320,6 @@ declare const Button: import("vue").DefineComponent<{
         rippleDuration: string;
     }, any>>>;
 }, {
-    themeClass?: import("vue").Ref<string> | undefined;
-    onRender?: (() => void) | undefined;
     selfElRef: import("vue").Ref<HTMLElement | null>;
     waveElRef: import("vue").Ref<{
         play: () => void;
@@ -1375,7 +1373,9 @@ declare const Button: import("vue").DefineComponent<{
         '--n-opacity-disabled': string;
         '--n-wave-opacity': string;
     }> | 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<{
+    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<ExtractPropTypes<{
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
     readonly text: BooleanConstructor;
@@ -2055,8 +2055,9 @@ declare const Button: import("vue").DefineComponent<{
     attrType: "button" | "reset" | "submit";
     internalAutoFocus: boolean;
 }>;
-declare type NativeButtonProps = Omit<ButtonHTMLAttributes, keyof ButtonProps>;
-declare type MergedProps = Partial<ButtonProps & NativeButtonProps>;
+declare type InternalButtonProps = ExtractPropTypes<typeof buttonProps>;
+declare type NativeButtonProps = Omit<ButtonHTMLAttributes, keyof InternalButtonProps>;
+declare type MergedProps = Partial<InternalButtonProps & NativeButtonProps>;
 export default Button;
 export declare const XButton: new () => {
     $props: MergedProps;

package/lib/button/src/Button.js

@@ -135,10 +135,9 @@ const Button = (0, vue_1.defineComponent)({
         const handleBlur = () => {
             enterPressedRef.value = false;
         };
-        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Button', '-button', button_cssr_1.default, styles_1.buttonLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = (0, use_rtl_1.default)('Button', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
-        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const rtlEnabledRef = (0, use_rtl_1.default)('Button', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const theme = themeRef.value;
             const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;
@@ -366,7 +365,7 @@ const Button = (0, vue_1.defineComponent)({
             };
             return Object.assign(Object.assign(Object.assign(Object.assign({ '--n-bezier': cubicBezierEaseInOut, '--n-bezier-ease-out': cubicBezierEaseOut, '--n-ripple-duration': rippleDuration, '--n-opacity-disabled': opacityDisabled, '--n-wave-opacity': waveOpacity }, fontProps), colorProps), borderProps), sizeProps);
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('button', (0, vue_1.computed)(() => {
                 let hash = '';
                 const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props;
@@ -397,13 +396,22 @@ const Button = (0, vue_1.defineComponent)({
                 hash += 'm' + type[0];
                 return hash;
             }), cssVarsRef, props)
-            : _mixins_1.emptyThemeClassHandle;
-        return Object.assign({ selfElRef,
-            waveElRef, mergedClsPrefix: mergedClsPrefixRef, mergedFocusable: mergedFocusableRef, mergedSize: mergedSizeRef, showBorder: showBorderRef, enterPressed: enterPressedRef, rtlEnabled: rtlEnabledRef, handleMousedown,
+            : undefined;
+        return {
+            selfElRef,
+            waveElRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedFocusable: mergedFocusableRef,
+            mergedSize: mergedSizeRef,
+            showBorder: showBorderRef,
+            enterPressed: enterPressedRef,
+            rtlEnabled: rtlEnabledRef,
+            handleMousedown,
             handleKeydown,
             handleBlur,
             handleKeyup,
-            handleClick, customColorCssVars: (0, vue_1.computed)(() => {
+            handleClick,
+            customColorCssVars: (0, vue_1.computed)(() => {
                 const { color } = props;
                 if (!color)
                     return null;
@@ -415,11 +423,16 @@ const Button = (0, vue_1.defineComponent)({
                     '--n-border-color-focus': hoverColor,
                     '--n-border-color-disabled': color
                 };
-            }), cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
+            }),
+            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() {
-        const { $slots, mergedClsPrefix, tag: Component, onRender } = this;
+        const { mergedClsPrefix, tag: Component, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
+        const children = (0, _utils_1.resolveWrappedSlot)(this.$slots.default, (children) => children && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__content` }, children)));
         return ((0, vue_1.h)(Component, { ref: "selfElRef", class: [
                 this.themeClass,
                 `${mergedClsPrefix}-button`,
@@ -435,19 +448,16 @@ const Button = (0, vue_1.defineComponent)({
                 this.loading && `${mergedClsPrefix}-button--loading`,
                 this.ghost && `${mergedClsPrefix}-button--ghost` // required for button group border collapse
             ], tabindex: this.mergedFocusable ? 0 : -1, type: this.attrType, style: this.cssVars, disabled: this.disabled, onClick: this.handleClick, onBlur: this.handleBlur, onMousedown: this.handleMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
-            $slots.default && this.iconPlacement === 'right' ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
+            this.iconPlacement === 'right' && children,
             (0, vue_1.h)(_internal_1.NFadeInExpandTransition, { width: true }, {
-                default: () => $slots.icon || this.loading ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__icon`, style: {
-                        margin: !$slots.default ? 0 : ''
+                default: () => (0, _utils_1.resolveWrappedSlot)(this.$slots.icon, (children) => (this.loading || children) && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__icon`, style: {
+                        margin: (0, _utils_1.isSlotEmpty)(this.$slots.default) ? '0' : ''
                     } },
                     (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
-                        default: () => {
-                            var _a;
-                            return this.loading ? ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", class: `${mergedClsPrefix}-icon-slot`, strokeWidth: 20 })) : ((0, vue_1.h)("div", { key: "icon", class: `${mergedClsPrefix}-icon-slot`, role: "none" }, (_a = $slots.icon) === null || _a === void 0 ? void 0 : _a.call($slots)));
-                        }
-                    }))) : null
+                        default: () => this.loading ? ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", class: `${mergedClsPrefix}-icon-slot`, strokeWidth: 20 })) : ((0, vue_1.h)("div", { key: "icon", class: `${mergedClsPrefix}-icon-slot`, role: "none" }, children))
+                    }))))
             }),
-            $slots.default && this.iconPlacement === 'left' ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
+            this.iconPlacement === 'left' && children,
             !this.text ? ((0, vue_1.h)(_internal_1.NBaseWave, { ref: "waveElRef", clsPrefix: mergedClsPrefix })) : null,
             this.showBorder ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__border`, style: this.customColorCssVars })) : null,
             this.showBorder ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__state-border`, style: this.customColorCssVars })) : null));

package/lib/calendar/src/Calendar.d.ts

@@ -1785,7 +1785,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-cell-color-hover-modal': string;
         '--n-cell-color-hover-popover': string;
         '--n-bar-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 isDateDisabled: PropType<(date: number) => boolean | undefined>;
     readonly value: NumberConstructor;

package/lib/calendar/src/Calendar.js

@@ -22,7 +22,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Calendar',
     props: calendarProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Calendar', '-calendar', index_cssr_1.default, styles_1.calendarLight, props, mergedClsPrefixRef);
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('DatePicker');
         const now = Date.now();
@@ -74,6 +74,35 @@ exports.default = (0, vue_1.defineComponent)({
             }
             monthTsRef.value = newMonthTs;
         }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-color': borderColor,
+                '--n-border-color-modal': borderColorModal,
+                '--n-border-color-popover': borderColorPopover,
+                '--n-border-radius': borderRadius,
+                '--n-text-color': textColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-text-color': titleTextColor,
+                '--n-day-text-color': dayTextColor,
+                '--n-font-size': fontSize,
+                '--n-line-height': lineHeight,
+                '--n-date-color-current': dateColorCurrent,
+                '--n-date-text-color-current': dateTextColorCurrent,
+                '--n-cell-color': cellColor,
+                '--n-cell-color-modal': cellColorModal,
+                '--n-cell-color-popover': cellColorPopover,
+                '--n-cell-color-hover': cellColorHover,
+                '--n-cell-color-hover-modal': cellColorHoverModal,
+                '--n-cell-color-hover-popover': cellColorHoverPopover,
+                '--n-bar-color': barColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('calendar', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             locale: localeRef,
@@ -89,43 +118,21 @@ exports.default = (0, vue_1.defineComponent)({
             handlePrevClick,
             handleNextClick,
             mergedTheme: themeRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-color': borderColor,
-                    '--n-border-color-modal': borderColorModal,
-                    '--n-border-color-popover': borderColorPopover,
-                    '--n-border-radius': borderRadius,
-                    '--n-text-color': textColor,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-day-text-color': dayTextColor,
-                    '--n-font-size': fontSize,
-                    '--n-line-height': lineHeight,
-                    '--n-date-color-current': dateColorCurrent,
-                    '--n-date-text-color-current': dateTextColorCurrent,
-                    '--n-cell-color': cellColor,
-                    '--n-cell-color-modal': cellColorModal,
-                    '--n-cell-color-popover': cellColorPopover,
-                    '--n-cell-color-hover': cellColorHover,
-                    '--n-cell-color-hover-modal': cellColorHoverModal,
-                    '--n-cell-color-hover-popover': cellColorHoverPopover,
-                    '--n-bar-color': barColor
-                };
-            })
+            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() {
-        const { isDateDisabled, mergedClsPrefix, monthTs, cssVars, mergedValue, mergedTheme, $slots, locale: { monthBeforeYear, today }, dateLocale: { locale }, handleTodayClick, handlePrevClick, handleNextClick } = this;
+        const { isDateDisabled, mergedClsPrefix, monthTs, cssVars, mergedValue, mergedTheme, $slots, locale: { monthBeforeYear, today }, dateLocale: { locale }, handleTodayClick, handlePrevClick, handleNextClick, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const normalizedValue = mergedValue && (0, date_fns_1.startOfDay)(mergedValue).valueOf();
         const localeMonth = (0, date_fns_1.format)(monthTs, 'MMMM', { locale });
         const year = (0, date_fns_1.getYear)(monthTs);
         const title = monthBeforeYear
             ? `${localeMonth} ${year}`
             : `${year} ${localeMonth}`;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar`, style: cssVars },
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-calendar`, this.themeClass], style: cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-header` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-header__title` }, title),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-header__extra` },

package/lib/card/src/Card.d.ts

@@ -274,8 +274,6 @@ declare const _default: import("vue").DefineComponent<{
         closeSize: string;
     }, any>>>;
 }, {
-    themeClass?: import("vue").Ref<string> | undefined;
-    onRender?: (() => void) | undefined;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedTheme: import("vue").ComputedRef<{
@@ -443,6 +441,8 @@ declare const _default: import("vue").DefineComponent<{
         '--n-title-font-size': string;
         '--n-close-size': 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<{
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;

package/lib/card/src/Card.js

@@ -50,10 +50,9 @@ exports.default = (0, vue_1.defineComponent)({
             if (onClose)
                 (0, _utils_1.call)(onClose);
         };
-        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
-        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Card', '-card', index_cssr_1.default, styles_1.cardLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = (0, use_rtl_1.default)('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.default)('Card', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { size } = props;
             const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
@@ -84,12 +83,20 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-close-size': closeSize
             };
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('card', (0, vue_1.computed)(() => {
                 return props.size[0];
             }), cssVarsRef, props)
-            : _mixins_1.emptyThemeClassHandle;
-        return Object.assign({ rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, handleCloseClick, cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
+            : undefined;
+        return {
+            rtlEnabled: rtlEnabledRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedTheme: themeRef,
+            handleCloseClick,
+            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() {
         const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, $slots } = this;
@@ -110,13 +117,17 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${mergedClsPrefix}-card--hoverable`]: hoverable
                 }
             ], style: this.cssVars, role: this.role },
-            $slots.cover ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, $slots.cover())) : null,
-            $slots.header || this.title || this.closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, $slots.header ? $slots.header() : this.title),
-                $slots['header-extra'] ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, $slots['header-extra']())) : null,
-                this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null,
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, $slots),
-            $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, $slots.footer())) : null,
-            $slots.action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__action`, role: "none" }, $slots.action())) : null));
+            (0, _utils_1.resolveWrappedSlot)($slots.cover, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, children))),
+            (0, _utils_1.resolveWrappedSlot)($slots.header, (children) => {
+                return children || this.title || this.closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || [this.title]),
+                    (0, _utils_1.resolveWrappedSlot)($slots['header-extra'], (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, children))),
+                    this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null;
+            }),
+            (0, _utils_1.resolveWrappedSlot)($slots.default, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, children))),
+            (0, _utils_1.resolveWrappedSlot)($slots.footer, (children) => children && [
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, children)
+            ]),
+            (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__action`, role: "none" }, children)))));
     }
 });

package/lib/carousel/src/Carousel.d.ts

@@ -195,7 +195,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-dot-line-width': string;
         '--n-dot-line-width-active': string;
         '--n-arrow-color': string;
-    }>;
+    }> | undefined;
+    themeClass: Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     getCurrentIndex: () => number;
     to: (index: number) => void;
     prev: () => void;

package/lib/carousel/src/Carousel.js

@@ -64,7 +64,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Carousel',
     props: carouselProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         // Dom
         const selfElRef = (0, vue_1.ref)(null);
         const slidesElsRef = (0, vue_1.ref)([]);
@@ -677,25 +677,30 @@ exports.default = (0, vue_1.defineComponent)({
             next: next
         };
         const themeRef = (0, _mixins_1.useTheme)('Carousel', '-carousel', index_cssr_1.default, styles_1.carouselLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { dotSize, dotColor, dotColorActive, dotColorFocus, dotLineWidth, dotLineWidthActive, arrowColor } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-dot-color': dotColor,
+                '--n-dot-color-focus': dotColorFocus,
+                '--n-dot-color-active': dotColorActive,
+                '--n-dot-size': dotSize,
+                '--n-dot-line-width': dotLineWidth,
+                '--n-dot-line-width-active': dotLineWidthActive,
+                '--n-arrow-color': arrowColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('carousel', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign(Object.assign({ mergedClsPrefix: mergedClsPrefixRef, selfElRef, slideVNodes: slideVNodesRef, duplicatedable: duplicatedableRef, userWantsControl: userWantsControlRef, autoSlideSize: autoSlideSizeRef, displayIndex: displayIndexRef, realIndex: realIndexRef, slideStyles: slideStylesRef, translateStyle: translateStyleRef, handleTouchstart,
             handleTransitionEnd,
             handleMousewheel,
             handleResize,
-            handleSlideResize, isActive: isDisplayActive }, caroulseSlotProps), caroulseExposedMethod), { cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { dotSize, dotColor, dotColorActive, dotColorFocus, dotLineWidth, dotLineWidthActive, arrowColor } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-dot-color': dotColor,
-                    '--n-dot-color-focus': dotColorFocus,
-                    '--n-dot-color-active': dotColorActive,
-                    '--n-dot-size': dotSize,
-                    '--n-dot-line-width': dotLineWidth,
-                    '--n-dot-line-width-active': dotLineWidthActive,
-                    '--n-arrow-color': arrowColor
-                };
-            }) });
+            handleSlideResize, isActive: isDisplayActive }, caroulseSlotProps), caroulseExposedMethod), { 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, showArrow, userWantsControl, draggable, touchable, slideStyles, dotType, dotPlacement, transitionProps = {}, arrowSlotProps, dotSlotProps, $slots: { default: defaultSlot, dots: dotsSlot, arrow: arrowSlot } } = this;
         const children = (defaultSlot && (0, _utils_1.flatten)(defaultSlot())) || [];
         let slides = filterCarouselItem(children);
@@ -717,7 +722,9 @@ exports.default = (0, vue_1.defineComponent)({
                 default: () => slide
             })));
         }
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("div", { ref: "selfElRef", class: [
+                this.themeClass,
                 `${mergedClsPrefix}-carousel`,
                 this.direction === 'vertical' &&
                     `${mergedClsPrefix}-carousel--vertical`,
@@ -735,11 +742,13 @@ exports.default = (0, vue_1.defineComponent)({
                     : slides))
             }),
             this.showDots &&
-                (dotsSlot
-                    ? dotsSlot(dotSlotProps)
-                    : dotSlotProps.total > 1 && ((0, vue_1.h)(CarouselDots_1.default, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))),
+                (0, _utils_1.resolveSlotWithProps)(dotsSlot, dotSlotProps, () => [
+                    dotSlotProps.total > 1 && ((0, vue_1.h)(CarouselDots_1.default, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))
+                ]),
             showArrow &&
-                (arrowSlot ? arrowSlot(arrowSlotProps) : (0, vue_1.h)(CarouselArrow_1.default, null))));
+                (0, _utils_1.resolveSlotWithProps)(arrowSlot, arrowSlotProps, () => [
+                    (0, vue_1.h)(CarouselArrow_1.default, null)
+                ])));
     }
 });
 function filterCarouselItem(vnodes, carouselItems = []) {