naive-ui 2.25.0 → 2.25.3

package/es/back-top/src/BackTop.js

@@ -1,10 +1,10 @@
-import { h, ref, computed, toRef, watch, nextTick, defineComponent, mergeProps, Transition, onMounted, onBeforeUnmount } from 'vue';
+import { h, ref, computed, toRef, watch, nextTick, defineComponent, mergeProps, Transition, onMounted, onBeforeUnmount, watchEffect } from 'vue';
 import { VLazyTeleport } from 'vueuc';
 import { useIsMounted, useMergedState } from 'vooks';
 import { getScrollParent, unwrapElement } from 'seemly';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseIcon } from '../../_internal';
-import { formatLength, warn } from '../../_utils';
+import { formatLength, resolveSlot, warn, warnOnce } from '../../_utils';
 import { backTopLight } from '../styles';
 import BackTopIcon from './BackTopIcon';
 import style from './styles/index.cssr';
@@ -28,35 +28,27 @@ const backTopProps = Object.assign(Object.assign({}, useTheme.props), { show: {
         default: () => { }
     }, 
     // deprecated
-    target: {
-        type: Function,
-        validator: () => {
-            warn('back-top', '`target` is deprecated, please use `listen-to` instead.');
-            return true;
-        },
-        default: undefined
-    }, onShow: {
-        type: Function,
-        validator: () => {
-            warn('back-top', '`on-show` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    }, onHide: {
-        type: Function,
-        validator: () => {
-            warn('back-top', '`on-hide` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    } });
+    target: Function, onShow: Function, onHide: Function });
 export default defineComponent({
     name: 'BackTop',
     // make style applied to back-top button
     inheritAttrs: false,
     props: backTopProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.target !== undefined) {
+                    warnOnce('back-top', '`target` is deprecated, please use `listen-to` instead.');
+                }
+                if (props.onShow !== undefined) {
+                    warnOnce('back-top', '`on-show` is deprecated, please use `on-update:show` instead.');
+                }
+                if (props.onHide !== undefined) {
+                    warnOnce('back-top', '`on-hide` is deprecated, please use `on-update:show` instead.');
+                }
+            });
+        }
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const scrollTopRef = ref(null);
         const uncontrolledShowRef = computed(() => {
             if (scrollTopRef.value === null)
@@ -157,6 +149,27 @@ export default defineComponent({
                 scrollElement.removeEventListener('scroll', handleScroll);
             }
         });
+        const cssVarsRef = computed(() => {
+            const { self: { color, boxShadow, boxShadowHover, boxShadowPressed, iconColor, iconColorHover, iconColorPressed, width, height, iconSize, borderRadius, textColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-height': height,
+                '--n-width': width,
+                '--n-box-shadow': boxShadow,
+                '--n-box-shadow-hover': boxShadowHover,
+                '--n-box-shadow-pressed': boxShadowPressed,
+                '--n-color': color,
+                '--n-icon-size': iconSize,
+                '--n-icon-color': iconColor,
+                '--n-icon-color-hover': iconColorHover,
+                '--n-icon-color-pressed': iconColorPressed,
+                '--n-text-color': textColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('back-top', undefined, cssVarsRef, props)
+            : undefined;
         return {
             placeholderRef,
             style: styleRef,
@@ -170,24 +183,9 @@ export default defineComponent({
             handleAfterEnter,
             handleScroll,
             handleClick,
-            cssVars: computed(() => {
-                const { self: { color, boxShadow, boxShadowHover, boxShadowPressed, iconColor, iconColorHover, iconColorPressed, width, height, iconSize, borderRadius, textColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-height': height,
-                    '--n-width': width,
-                    '--n-box-shadow': boxShadow,
-                    '--n-box-shadow-hover': boxShadowHover,
-                    '--n-box-shadow-pressed': boxShadowPressed,
-                    '--n-color': color,
-                    '--n-icon-size': iconSize,
-                    '--n-icon-color': iconColor,
-                    '--n-icon-color-hover': iconColorHover,
-                    '--n-icon-color-pressed': iconColorPressed,
-                    '--n-text-color': textColor
-                };
-            })
+            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() {
@@ -195,20 +193,24 @@ export default defineComponent({
         return (h("div", { ref: "placeholderRef", class: `${mergedClsPrefix}-back-top-placeholder`, style: "display: none", "aria-hidden": true },
             h(VLazyTeleport, { to: this.to, show: this.mergedShow }, {
                 default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterEnter: this.handleAfterEnter }, {
-                    default: () => this.mergedShow
-                        ? h('div', mergeProps(this.$attrs, {
-                            class: [
-                                `${mergedClsPrefix}-back-top`,
-                                {
-                                    [`${mergedClsPrefix}-back-top--transition-disabled`]: this.transitionDisabled
-                                }
-                            ],
-                            style: Object.assign(Object.assign({}, this.style), this.cssVars),
-                            onClick: this.handleClick
-                        }), [
-                            this.$slots.default ? (this.$slots.default()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => BackTopIcon }))
-                        ])
-                        : null
+                    default: () => {
+                        var _a;
+                        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                        return this.mergedShow
+                            ? h('div', mergeProps(this.$attrs, {
+                                class: [
+                                    `${mergedClsPrefix}-back-top`,
+                                    this.themeClass,
+                                    this.transitionDisabled &&
+                                        `${mergedClsPrefix}-back-top--transition-disabled`
+                                ],
+                                style: [this.style, this.cssVars],
+                                onClick: this.handleClick
+                            }), resolveSlot(this.$slots.default, () => [
+                                h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => BackTopIcon })
+                            ]))
+                            : null;
+                    }
                 }))
             })));
     }

package/es/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/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: {
@@ -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/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 { useConfig, useFormItem, useTheme, useCssVarsClass } from '../../_mixins';
+import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
 import { NFadeInExpandTransition, NIconSwitchTransition, NBaseLoading, NBaseWave } from '../../_internal';
-import { call, 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,8 +359,8 @@ 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 themeClassRef = disableInlineTheme
-            ? useCssVarsClass('button', computed(() => {
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('button', computed(() => {
                 let hash = '';
                 const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props;
                 if (dashed)
@@ -383,9 +382,9 @@ const Button = defineComponent({
                 if (strong)
                     hash += 'i';
                 if (color)
-                    hash += 'j' + color.replace(/#|\(|\)|,|\s/g, '_');
+                    hash += 'j' + color2Class(color);
                 if (textColor)
-                    hash += 'k' + textColor.replace(/#|\(|\)|,|\s/g, '_');
+                    hash += 'k' + color2Class(textColor);
                 const { value: size } = mergedSizeRef;
                 hash += 'l' + size[0];
                 hash += 'm' + type[0];
@@ -419,12 +418,15 @@ const Button = 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 = resolveWrappedSlot(this.$slots.default, (children) => children && (h("span", { class: `${mergedClsPrefix}-button__content` }, children)));
         return (h(Component, { ref: "selfElRef", class: [
                 this.themeClass,
                 `${mergedClsPrefix}-button`,
@@ -440,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/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/es/button/styles/index.js

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

package/es/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/es/button/styles/rtl.js

@@ -1,5 +1,5 @@
 import rtlStyle from '../src/styles/button-rtl.cssr';
-export default {
+export const buttonRtl = {
     name: 'Button',
     style: rtlStyle
 };

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;