naive-ui 2.25.2 → 2.25.5

package/es/badge/src/Badge.d.ts

@@ -3,10 +3,7 @@ import type { ExtractPublicPropTypes } from '../../_utils';
 declare const badgeProps: {
     readonly value: PropType<string | number>;
     readonly max: NumberConstructor;
-    readonly dot: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly dot: BooleanConstructor;
     readonly type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
@@ -15,14 +12,8 @@ declare const badgeProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly showZero: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    readonly processing: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly showZero: BooleanConstructor;
+    readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -56,10 +47,7 @@ export declare type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly value: PropType<string | number>;
     readonly max: NumberConstructor;
-    readonly dot: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly dot: BooleanConstructor;
     readonly type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
@@ -68,14 +56,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly showZero: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    readonly processing: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly showZero: BooleanConstructor;
+    readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -117,14 +99,13 @@ declare const _default: import("vue").DefineComponent<{
         '--n-ripple-color': string;
         '--n-bezier': string;
         '--n-ripple-bezier': 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 value: PropType<string | number>;
     readonly max: NumberConstructor;
-    readonly dot: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly dot: BooleanConstructor;
     readonly type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
@@ -133,14 +114,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly showZero: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    readonly processing: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly showZero: BooleanConstructor;
+    readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;

package/es/badge/src/Badge.js

@@ -1,30 +1,21 @@
 import { h, computed, onMounted, ref, defineComponent, Transition } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseSlotMachine, NBaseWave } from '../../_internal';
-import { createKey, getTitleAttribute } from '../../_utils';
+import { color2Class, createKey, getTitleAttribute } from '../../_utils';
 import { badgeLight } from '../styles';
 import style from './styles/index.cssr';
-const badgeProps = Object.assign(Object.assign({}, useTheme.props), { value: [String, Number], max: Number, dot: {
-        type: Boolean,
-        default: false
-    }, type: {
+const badgeProps = Object.assign(Object.assign({}, 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 });
 export default defineComponent({
     name: 'Badge',
     props: badgeProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Badge', '-badge', style, badgeLight, props, mergedClsPrefixRef);
         const appearedRef = ref(false);
         const handleAfterEnter = () => {
@@ -42,37 +33,56 @@ export default defineComponent({
             if (showBadgeRef.value)
                 appearedRef.value = true;
         });
+        const cssVarsRef = computed(() => {
+            const { type, color: propColor } = props;
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [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
+            ? useThemeClass('badge', computed(() => {
+                let hash = '';
+                const { type, color } = props;
+                if (type) {
+                    hash += type[0];
+                }
+                if (color) {
+                    hash += color2Class(color);
+                }
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            appeared: ref(false),
+            appeared: appearedRef,
             showBadge: showBadgeRef,
             handleAfterEnter,
             handleAfterLeave,
-            cssVars: computed(() => {
-                const { type, color: propColor } = props;
-                const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [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 (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,
             h(Transition, { name: "fade-in-scale-up-transition", onAfterEnter: this.handleAfterEnter, onAfterLeave: this.handleAfterLeave }, {
                 default: () => this.showBadge ? (h("sup", { class: `${mergedClsPrefix}-badge-sup`, title: getTitleAttribute(this.value) },
                     !this.dot ? (h(NBaseSlotMachine, { clsPrefix: mergedClsPrefix, appeared: this.appeared, max: this.max, value: this.value })) : null,

package/es/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/es/breadcrumb/src/Breadcrumb.js

@@ -1,5 +1,5 @@
 import { h, computed, defineComponent, provide, toRef } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { breadcrumbLight } from '../styles';
 import style from './styles/index.cssr';
 import { createInjectionKey } from '../../_utils';
@@ -12,31 +12,39 @@ export default defineComponent({
     name: 'Breadcrumb',
     props: breadcrumbProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Breadcrumb', '-breadcrumb', style, breadcrumbLight, props, mergedClsPrefixRef);
         provide(breadcrumbInjectionKey, {
             separatorRef: toRef(props, 'separator'),
             mergedClsPrefixRef
         });
+        const cssVarsRef = 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
+            ? useThemeClass('breadcrumb', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: 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 (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 (h("nav", { class: [`${this.mergedClsPrefix}-breadcrumb`, this.themeClass], style: this.cssVars, "aria-label": "Breadcrumb" },
             h("ul", null, this.$slots)));
     }
 });

package/es/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/es/button/src/Button.js

@@ -1,9 +1,9 @@
 import { h, ref, computed, inject, onMounted, defineComponent, watchEffect } from 'vue';
 import { useMemo } from 'vooks';
 import { createHoverColor, createPressedColor } from '../../_utils/color/index';
-import { emptyThemeClassHandle, useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
+import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
 import { NFadeInExpandTransition, NIconSwitchTransition, NBaseLoading, NBaseWave } from '../../_internal';
-import { call, color2Class, createKey, warnOnce } from '../../_utils';
+import { call, color2Class, createKey, isSlotEmpty, resolveWrappedSlot, warnOnce } from '../../_utils';
 import { buttonLight } from '../styles';
 import { buttonGroupInjectionKey } from './ButtonGroup';
 import style from './styles/button.cssr';
@@ -129,10 +129,9 @@ const Button = defineComponent({
         const handleBlur = () => {
             enterPressedRef.value = false;
         };
-        const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
+        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Button', '-button', style, buttonLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = useRtl('Button', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
-        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const rtlEnabledRef = useRtl('Button', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const theme = themeRef.value;
             const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;
@@ -360,7 +359,7 @@ const Button = 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
             ? useThemeClass('button', computed(() => {
                 let hash = '';
                 const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props;
@@ -391,13 +390,22 @@ const Button = defineComponent({
                 hash += 'm' + type[0];
                 return hash;
             }), cssVarsRef, props)
-            : 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: computed(() => {
+            handleClick,
+            customColorCssVars: computed(() => {
                 const { color } = props;
                 if (!color)
                     return null;
@@ -409,11 +417,16 @@ const Button = 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 = resolveWrappedSlot(this.$slots.default, (children) => children && (h("span", { class: `${mergedClsPrefix}-button__content` }, children)));
         return (h(Component, { ref: "selfElRef", class: [
                 this.themeClass,
                 `${mergedClsPrefix}-button`,
@@ -429,19 +442,16 @@ const Button = 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' ? (h("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
+            this.iconPlacement === 'right' && children,
             h(NFadeInExpandTransition, { width: true }, {
-                default: () => $slots.icon || this.loading ? (h("span", { class: `${mergedClsPrefix}-button__icon`, style: {
-                        margin: !$slots.default ? 0 : ''
+                default: () => resolveWrappedSlot(this.$slots.icon, (children) => (this.loading || children) && (h("span", { class: `${mergedClsPrefix}-button__icon`, style: {
+                        margin: isSlotEmpty(this.$slots.default) ? '0' : ''
                     } },
                     h(NIconSwitchTransition, null, {
-                        default: () => {
-                            var _a;
-                            return this.loading ? (h(NBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", class: `${mergedClsPrefix}-icon-slot`, strokeWidth: 20 })) : (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 ? (h(NBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", class: `${mergedClsPrefix}-icon-slot`, strokeWidth: 20 })) : (h("div", { key: "icon", class: `${mergedClsPrefix}-icon-slot`, role: "none" }, children))
+                    }))))
             }),
-            $slots.default && this.iconPlacement === 'left' ? (h("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
+            this.iconPlacement === 'left' && children,
             !this.text ? (h(NBaseWave, { ref: "waveElRef", clsPrefix: mergedClsPrefix })) : null,
             this.showBorder ? (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__border`, style: this.customColorCssVars })) : null,
             this.showBorder ? (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__state-border`, style: this.customColorCssVars })) : null));

package/es/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/es/calendar/src/Calendar.js

@@ -6,7 +6,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from '../../_internal/icons';
 import { NBaseIcon } from '../../_internal';
 import { call } from '../../_utils';
 import { NButton, NButtonGroup } from '../../button';
-import { useConfig, useLocale, useTheme } from '../../_mixins';
+import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { calendarLight } from '../styles';
 import style from './styles/index.cssr';
 const calendarProps = Object.assign(Object.assign({}, useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
@@ -17,7 +17,7 @@ export default defineComponent({
     name: 'Calendar',
     props: calendarProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Calendar', '-calendar', style, calendarLight, props, mergedClsPrefixRef);
         const { localeRef, dateLocaleRef } = useLocale('DatePicker');
         const now = Date.now();
@@ -69,6 +69,35 @@ export default defineComponent({
             }
             monthTsRef.value = newMonthTs;
         }
+        const cssVarsRef = 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
+            ? useThemeClass('calendar', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             locale: localeRef,
@@ -84,43 +113,21 @@ export default defineComponent({
             handlePrevClick,
             handleNextClick,
             mergedTheme: themeRef,
-            cssVars: 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 && startOfDay(mergedValue).valueOf();
         const localeMonth = format(monthTs, 'MMMM', { locale });
         const year = getYear(monthTs);
         const title = monthBeforeYear
             ? `${localeMonth} ${year}`
             : `${year} ${localeMonth}`;
-        return (h("div", { class: `${mergedClsPrefix}-calendar`, style: cssVars },
+        return (h("div", { class: [`${mergedClsPrefix}-calendar`, this.themeClass], style: cssVars },
             h("div", { class: `${mergedClsPrefix}-calendar-header` },
                 h("div", { class: `${mergedClsPrefix}-calendar-header__title` }, title),
                 h("div", { class: `${mergedClsPrefix}-calendar-header__extra` },

package/es/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/es/card/src/Card.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed } from 'vue';
 import { getPadding } from 'seemly';
-import { emptyThemeClassHandle, useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { call, createKey, keysOf } from '../../_utils';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { call, createKey, keysOf, resolveWrappedSlot } from '../../_utils';
 import { NBaseClose } from '../../_internal';
 import { cardLight } from '../styles';
 import style from './styles/index.cssr';
@@ -44,10 +44,9 @@ export default defineComponent({
             if (onClose)
                 call(onClose);
         };
-        const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
-        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Card', '-card', style, cardLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = useRtl('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = useRtl('Card', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { size } = props;
             const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
@@ -78,12 +77,20 @@ export default defineComponent({
                 '--n-close-size': closeSize
             };
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? useThemeClass('card', computed(() => {
                 return props.size[0];
             }), cssVarsRef, props)
-            : 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;
@@ -104,13 +111,17 @@ export default defineComponent({
                     [`${mergedClsPrefix}-card--hoverable`]: hoverable
                 }
             ], style: this.cssVars, role: this.role },
-            $slots.cover ? (h("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, $slots.cover())) : null,
-            $slots.header || this.title || this.closable ? (h("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
-                h("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, $slots.header ? $slots.header() : this.title),
-                $slots['header-extra'] ? (h("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, $slots['header-extra']())) : null,
-                this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null,
-            h("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, $slots),
-            $slots.footer ? (h("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, $slots.footer())) : null,
-            $slots.action ? (h("div", { class: `${mergedClsPrefix}-card__action`, role: "none" }, $slots.action())) : null));
+            resolveWrappedSlot($slots.cover, (children) => children && (h("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, children))),
+            resolveWrappedSlot($slots.header, (children) => {
+                return children || this.title || this.closable ? (h("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
+                    h("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || [this.title]),
+                    resolveWrappedSlot($slots['header-extra'], (children) => children && (h("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, children))),
+                    this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null;
+            }),
+            resolveWrappedSlot($slots.default, (children) => children && (h("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, children))),
+            resolveWrappedSlot($slots.footer, (children) => children && [
+                h("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, children)
+            ]),
+            resolveWrappedSlot($slots.action, (children) => children && (h("div", { class: `${mergedClsPrefix}-card__action`, role: "none" }, children)))));
     }
 });