naive-ui 2.25.1 → 2.25.2

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

@@ -1,23 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCssVarsClass = void 0;
+exports.emptyThemeClassHandle = exports.useThemeClass = void 0;
 const vue_1 = require("vue");
 const css_render_1 = require("css-render");
+const vue3_ssr_1 = require("@css-render/vue3-ssr");
 const context_1 = require("../config-provider/src/context");
 const _utils_1 = require("../_utils");
 const cssr_1 = require("../_utils/cssr");
-function useCssVarsClass(componentName, hashRef, cssVarsRef, props) {
+function useThemeClass(componentName, hashRef, cssVarsRef, props) {
     var _a;
     if (!cssVarsRef)
-        (0, _utils_1.throwError)('useCssVarsClass', 'cssVarsRef is not passed');
+        (0, _utils_1.throwError)('useThemeClass', 'cssVarsRef is not passed');
     const mergedThemeHashRef = (_a = (0, vue_1.inject)(context_1.configProviderInjectionKey, null)) === null || _a === void 0 ? void 0 : _a.mergedThemeHashRef;
-    const cssVarsClassRef = (0, vue_1.ref)('');
+    const themeClassRef = (0, vue_1.ref)('');
+    const ssrAdapter = (0, vue3_ssr_1.useSsrAdapter)();
+    let renderCallback;
     const mountStyle = () => {
-        const cssVars = cssVarsRef.value;
-        let style = '';
-        for (const key in cssVars) {
-            style += `${key}: ${cssVars[key]};`;
-        }
         let finalThemeHash = componentName;
         const hashValue = hashRef ? hashRef.value : undefined;
         const themeHash = mergedThemeHashRef === null || mergedThemeHashRef === void 0 ? void 0 : mergedThemeHashRef.value;
@@ -28,14 +26,32 @@ function useCssVarsClass(componentName, hashRef, cssVarsRef, props) {
         if (props.themeOverrides) {
             finalThemeHash += '-' + (0, css_render_1.hash)(JSON.stringify(props.themeOverrides));
         }
-        cssVarsClassRef.value = finalThemeHash;
-        (0, cssr_1.c)(`.${finalThemeHash}`, style).mount({
-            id: finalThemeHash
-        });
+        themeClassRef.value = finalThemeHash;
+        renderCallback = () => {
+            const cssVars = cssVarsRef.value;
+            let style = '';
+            for (const key in cssVars) {
+                style += `${key}: ${cssVars[key]};`;
+            }
+            (0, cssr_1.c)(`.${finalThemeHash}`, style).mount({
+                id: finalThemeHash,
+                ssr: ssrAdapter
+            });
+            renderCallback = undefined;
+        };
     };
     (0, vue_1.watchEffect)(() => {
         mountStyle();
     });
-    return cssVarsClassRef;
+    return {
+        themeClass: themeClassRef,
+        onRender: () => {
+            renderCallback === null || renderCallback === void 0 ? void 0 : renderCallback();
+        }
+    };
 }
-exports.useCssVarsClass = useCssVarsClass;
+exports.useThemeClass = useThemeClass;
+exports.emptyThemeClassHandle = {
+    themeClass: undefined,
+    onRender: undefined
+};

package/lib/_mixins/use-form-item.d.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, Ref } from 'vue';
-import { FormValidationStatus } from '../form/src/interface';
+import type { FormValidationStatus } from '../form/src/interface';
 declare type FormItemSize = 'small' | 'medium' | 'large';
 declare type AllowedSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | number;
 export interface FormItemInjection {

package/lib/_utils/css/color-to-class.d.ts

@@ -0,0 +1 @@
+export declare function color2Class(color: string): string;

package/lib/_utils/css/color-to-class.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.color2Class = void 0;
+function color2Class(color) {
+    return color.replace(/#|\(|\)|,|\s/g, '_');
+}
+exports.color2Class = color2Class;

package/lib/_utils/css/format-length.d.ts

@@ -3,5 +3,5 @@ interface FormatLengthOptions {
     offset?: number;
     attachPx?: boolean;
 }
-declare function formatLength<T extends number | string | null | undefined | any>(length: T, { c, offset, attachPx }?: FormatLengthOptions): T extends null ? null : T extends undefined ? undefined : T extends string | number ? string : T;
-export default formatLength;
+export declare function formatLength<T extends number | string | null | undefined | any>(length: T, { c, offset, attachPx }?: FormatLengthOptions): T extends null ? null : T extends undefined ? undefined : T extends string | number ? string : T;
+export {};

package/lib/_utils/css/format-length.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLength = void 0;
 const pureNumberRegex = /^(\d|\.)+$/;
 const numberRegex = /(\d|\.)+/;
 function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) {
@@ -30,4 +31,4 @@ function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) {
     }
     return length;
 }
-exports.default = formatLength;
+exports.formatLength = formatLength;

package/lib/_utils/css/index.d.ts

@@ -1 +1,2 @@
-export { default as formatLength } from './format-length';
+export { formatLength } from './format-length';
+export { color2Class } from './color-to-class';

package/lib/_utils/css/index.js

@@ -1,8 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatLength = void 0;
+exports.color2Class = exports.formatLength = void 0;
 var format_length_1 = require("./format-length");
-Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return __importDefault(format_length_1).default; } });
+Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return format_length_1.formatLength; } });
+var color_to_class_1 = require("./color-to-class");
+Object.defineProperty(exports, "color2Class", { enumerable: true, get: function () { return color_to_class_1.color2Class; } });

package/lib/_utils/index.d.ts

@@ -2,6 +2,6 @@ export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, g
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './naive';
-export { formatLength } from './css';
+export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';
 export * from './composable';

package/lib/_utils/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createKey = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
+exports.createKey = exports.color2Class = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
 var vue_1 = require("./vue");
 Object.defineProperty(exports, "call", { enumerable: true, get: function () { return vue_1.call; } });
 Object.defineProperty(exports, "keep", { enumerable: true, get: function () { return vue_1.keep; } });
@@ -37,6 +37,7 @@ Object.defineProperty(exports, "largerSize", { enumerable: true, get: function (
 Object.defineProperty(exports, "getTitleAttribute", { enumerable: true, get: function () { return naive_1.getTitleAttribute; } });
 var css_1 = require("./css");
 Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return css_1.formatLength; } });
+Object.defineProperty(exports, "color2Class", { enumerable: true, get: function () { return css_1.color2Class; } });
 var cssr_1 = require("./cssr");
 Object.defineProperty(exports, "createKey", { enumerable: true, get: function () { return cssr_1.createKey; } });
 __exportStar(require("./composable"), exports);

package/lib/_utils/vue/resolve-slot.js

@@ -27,7 +27,6 @@ function resolveSlot(slot, fallback) {
 }
 exports.resolveSlot = resolveSlot;
 function resolveSlotWithProps(slot, props, fallback) {
-    console.log(slot && ensureValidVNode(slot(props)));
     return (slot && ensureValidVNode(slot(props))) || fallback(props);
 }
 exports.resolveSlotWithProps = resolveSlotWithProps;

package/lib/alert/src/Alert.d.ts

@@ -10,7 +10,7 @@ declare const alertProps: {
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -192,7 +192,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -559,7 +559,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -730,7 +730,7 @@ declare const _default: import("vue").DefineComponent<{
         padding: string;
     }, any>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     onAfterLeave: Function;
     title: string;
     showIcon: boolean;

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -1486,8 +1486,8 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
     options: AutoCompleteOptions;
-    bordered: boolean | undefined;
     loading: boolean;
+    bordered: boolean | undefined;
     placement: FollowerPlacement;
     clearable: boolean;
     defaultValue: string | null;

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

@@ -8,7 +8,7 @@ declare const badgeProps: {
         readonly default: false;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
@@ -61,7 +61,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
@@ -126,7 +126,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
@@ -170,7 +170,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/button/src/Button.d.ts

@@ -1320,6 +1320,8 @@ 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;
@@ -1342,7 +1344,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;
@@ -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;

package/lib/button/src/Button.js

@@ -366,8 +366,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 = disableInlineTheme
+            ? (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,30 +389,21 @@ 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];
                 return hash;
             }), cssVarsRef, props)
-            : undefined;
-        return {
-            selfElRef,
-            waveElRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedFocusable: mergedFocusableRef,
-            mergedSize: mergedSizeRef,
-            showBorder: showBorderRef,
-            enterPressed: enterPressedRef,
-            rtlEnabled: rtlEnabledRef,
-            handleMousedown,
+            : _mixins_1.emptyThemeClassHandle;
+        return Object.assign({ 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;
@@ -424,13 +415,11 @@ const Button = (0, vue_1.defineComponent)({
                     '--n-border-color-focus': hoverColor,
                     '--n-border-color-disabled': color
                 };
-            }),
-            themeClass: themeClassRef,
-            cssVars: disableInlineTheme ? undefined : cssVarsRef
-        };
+            }), cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
     },
     render() {
-        const { $slots, mergedClsPrefix, tag: Component } = this;
+        const { $slots, mergedClsPrefix, tag: Component, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)(Component, { ref: "selfElRef", class: [
                 this.themeClass,
                 `${mergedClsPrefix}-button`,

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/card/src/Card.d.ts

@@ -274,6 +274,8 @@ 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<{
@@ -440,7 +442,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-font-size': string;
         '--n-title-font-size': string;
         '--n-close-size': 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<{
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;

package/lib/card/src/Card.js

@@ -51,49 +51,52 @@ exports.default = (0, vue_1.defineComponent)({
                 (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 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);
-        return {
-            rtlEnabled: rtlEnabledRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedTheme: themeRef,
-            handleCloseClick,
-            cssVars: (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;
-                const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = (0, seemly_1.getPadding)(padding);
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-color': props.embedded ? colorEmbedded : color,
-                    '--n-color-modal': colorModal,
-                    '--n-color-popover': colorPopover,
-                    '--n-color-target': colorTarget,
-                    '--n-text-color': textColor,
-                    '--n-line-height': lineHeight,
-                    '--n-action-color': actionColor,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-border-color': borderColor,
-                    '--n-box-shadow': boxShadow,
-                    // size
-                    '--n-padding-top': paddingTop,
-                    '--n-padding-bottom': paddingBottom,
-                    '--n-padding-left': paddingLeft,
-                    '--n-font-size': fontSize,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-close-size': closeSize
-                };
-            })
-        };
+        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;
+            const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = (0, seemly_1.getPadding)(padding);
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-color': props.embedded ? colorEmbedded : color,
+                '--n-color-modal': colorModal,
+                '--n-color-popover': colorPopover,
+                '--n-color-target': colorTarget,
+                '--n-text-color': textColor,
+                '--n-line-height': lineHeight,
+                '--n-action-color': actionColor,
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-border-color': borderColor,
+                '--n-box-shadow': boxShadow,
+                // size
+                '--n-padding-top': paddingTop,
+                '--n-padding-bottom': paddingBottom,
+                '--n-padding-left': paddingLeft,
+                '--n-font-size': fontSize,
+                '--n-title-font-size': titleFontSize,
+                '--n-close-size': closeSize
+            };
+        });
+        const themeClassHandle = disableInlineTheme
+            ? (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);
     },
     render() {
-        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, $slots } = this;
+        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-card`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'

package/lib/card/styles/index.d.ts

@@ -1,4 +1,4 @@
 export { default as cardDark } from './dark';
 export { default as cardLight } from './light';
-export { default as cardRtl } from './rtl';
+export { cardRtl } from './rtl';
 export type { CardTheme, CardThemeVars } from './light';

package/lib/card/styles/index.js

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

package/lib/card/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 cardRtl: RtlItem;

package/lib/card/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.cardRtl = void 0;
 const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
-exports.default = {
+exports.cardRtl = {
     name: 'Card',
     style: rtl_cssr_1.default
 };