naive-ui 2.25.0 → 2.25.3

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

@@ -3,26 +3,17 @@ 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" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
         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,26 +47,17 @@ 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" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
         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,30 +99,23 @@ 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" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
         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;
@@ -170,7 +145,7 @@ declare const _default: import("vue").DefineComponent<{
         fontFamily: string;
     }, any>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     show: boolean;
     dot: boolean;
     showZero: boolean;

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: {
@@ -1342,7 +1342,6 @@ declare const Button: import("vue").DefineComponent<{
         '--n-border-color-focus': string;
         '--n-border-color-disabled': string;
     } | null>;
-    themeClass: import("vue").Ref<string> | undefined;
     cssVars: import("vue").ComputedRef<{
         '--n-width': string;
         '--n-height': string;
@@ -1374,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;
@@ -2043,8 +2044,8 @@ declare const Button: import("vue").DefineComponent<{
     disabled: boolean;
     focusable: boolean;
     strong: boolean;
-    bordered: boolean;
     loading: boolean;
+    bordered: boolean;
     tertiary: boolean;
     keyboard: boolean;
     ghost: boolean;
@@ -2054,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,8 +365,8 @@ 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 themeClassRef = disableInlineTheme
-            ? (0, _mixins_1.useCssVarsClass)('button', (0, vue_1.computed)(() => {
+        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;
                 if (dashed)
@@ -389,9 +388,9 @@ const Button = (0, vue_1.defineComponent)({
                 if (strong)
                     hash += 'i';
                 if (color)
-                    hash += 'j' + color.replace(/#|\(|\)|,|\s/g, '_');
+                    hash += 'j' + (0, _utils_1.color2Class)(color);
                 if (textColor)
-                    hash += 'k' + textColor.replace(/#|\(|\)|,|\s/g, '_');
+                    hash += 'k' + (0, _utils_1.color2Class)(textColor);
                 const { value: size } = mergedSizeRef;
                 hash += 'l' + size[0];
                 hash += 'm' + type[0];
@@ -425,12 +424,15 @@ const Button = (0, vue_1.defineComponent)({
                     '--n-border-color-disabled': color
                 };
             }),
-            themeClass: themeClassRef,
-            cssVars: disableInlineTheme ? undefined : cssVarsRef
+            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 } = 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`,
@@ -446,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/button/styles/index.d.ts

@@ -1,4 +1,4 @@
 export { default as buttonDark } from './dark';
 export { default as buttonLight } from './light';
-export { default as buttonRtl } from './rtl';
+export { buttonRtl } from './rtl';
 export type { ButtonThemeVars, ButtonTheme } from './light';

package/lib/button/styles/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "buttonDark", { enumerable: true, get: function (
 var light_1 = require("./light");
 Object.defineProperty(exports, "buttonLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
 var rtl_1 = require("./rtl");
-Object.defineProperty(exports, "buttonRtl", { enumerable: true, get: function () { return __importDefault(rtl_1).default; } });
+Object.defineProperty(exports, "buttonRtl", { enumerable: true, get: function () { return rtl_1.buttonRtl; } });

package/lib/button/styles/rtl.d.ts

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

package/lib/button/styles/rtl.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonRtl = void 0;
 const button_rtl_cssr_1 = __importDefault(require("../src/styles/button-rtl.cssr"));
-exports.default = {
+exports.buttonRtl = {
     name: 'Button',
     style: button_rtl_cssr_1.default
 };

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

@@ -440,7 +440,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-font-size': string;
         '--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>;