naive-ui 2.24.6 → 2.25.2

package/lib/button/src/Button.js

@@ -136,23 +136,274 @@ const Button = (0, vue_1.defineComponent)({
             enterPressedRef.value = false;
         };
         const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Button', 'Button', button_cssr_1.default, styles_1.buttonLight, props, mergedClsPrefixRef);
+        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);
-        return {
-            selfElRef,
-            waveElRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedFocusable: mergedFocusableRef,
-            mergedSize: mergedSizeRef,
-            showBorder: showBorderRef,
-            enterPressed: enterPressedRef,
-            rtlEnabled: rtlEnabledRef,
-            handleMousedown,
+        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const theme = themeRef.value;
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;
+            const { rippleDuration, opacityDisabled, fontWeight, fontWeightStrong } = self;
+            const size = mergedSizeRef.value;
+            const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props;
+            // font
+            const fontProps = {
+                'font-weight': strong ? fontWeightStrong : fontWeight
+            };
+            // color
+            let colorProps = {
+                '--n-color': 'initial',
+                '--n-color-hover': 'initial',
+                '--n-color-pressed': 'initial',
+                '--n-color-focus': 'initial',
+                '--n-color-disabled': 'initial',
+                '--n-ripple-color': 'initial',
+                '--n-text-color': 'initial',
+                '--n-text-color-hover': 'initial',
+                '--n-text-color-pressed': 'initial',
+                '--n-text-color-focus': 'initial',
+                '--n-text-color-disabled': 'initial'
+            };
+            const typeIsTertiary = type === 'tertiary';
+            const typeIsDefault = type === 'default';
+            const mergedType = typeIsTertiary ? 'default' : type;
+            if (text) {
+                const propTextColor = textColor || color;
+                const mergedTextColor = propTextColor || self[(0, _utils_1.createKey)('textColorText', mergedType)];
+                colorProps = {
+                    '--n-color': '#0000',
+                    '--n-color-hover': '#0000',
+                    '--n-color-pressed': '#0000',
+                    '--n-color-focus': '#0000',
+                    '--n-color-disabled': '#0000',
+                    '--n-ripple-color': '#0000',
+                    '--n-text-color': mergedTextColor,
+                    '--n-text-color-hover': propTextColor
+                        ? (0, index_1.createHoverColor)(propTextColor)
+                        : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
+                    '--n-text-color-pressed': propTextColor
+                        ? (0, index_1.createPressedColor)(propTextColor)
+                        : self[(0, _utils_1.createKey)('textColorTextPressed', mergedType)],
+                    '--n-text-color-focus': propTextColor
+                        ? (0, index_1.createHoverColor)(propTextColor)
+                        : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
+                    '--n-text-color-disabled': propTextColor ||
+                        self[(0, _utils_1.createKey)('textColorTextDisabled', mergedType)]
+                };
+            }
+            else if (ghost || dashed) {
+                const mergedTextColor = textColor || color;
+                colorProps = {
+                    '--n-color': '#0000',
+                    '--n-color-hover': '#0000',
+                    '--n-color-pressed': '#0000',
+                    '--n-color-focus': '#0000',
+                    '--n-color-disabled': '#0000',
+                    '--n-ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
+                    '--n-text-color': mergedTextColor || self[(0, _utils_1.createKey)('textColorGhost', mergedType)],
+                    '--n-text-color-hover': mergedTextColor
+                        ? (0, index_1.createHoverColor)(mergedTextColor)
+                        : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
+                    '--n-text-color-pressed': mergedTextColor
+                        ? (0, index_1.createPressedColor)(mergedTextColor)
+                        : self[(0, _utils_1.createKey)('textColorGhostPressed', mergedType)],
+                    '--n-text-color-focus': mergedTextColor
+                        ? (0, index_1.createHoverColor)(mergedTextColor)
+                        : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
+                    '--n-text-color-disabled': mergedTextColor ||
+                        self[(0, _utils_1.createKey)('textColorGhostDisabled', mergedType)]
+                };
+            }
+            else if (secondary) {
+                const typeTextColor = typeIsDefault
+                    ? self.textColor
+                    : typeIsTertiary
+                        ? self.textColorTertiary
+                        : self[(0, _utils_1.createKey)('color', mergedType)];
+                const mergedTextColor = color || typeTextColor;
+                const isColoredType = type !== 'default' && type !== 'tertiary';
+                colorProps = {
+                    '--n-color': isColoredType
+                        ? (0, seemly_1.changeColor)(mergedTextColor, {
+                            alpha: Number(self.colorOpacitySecondary)
+                        })
+                        : self.colorSecondary,
+                    '--n-color-hover': isColoredType
+                        ? (0, seemly_1.changeColor)(mergedTextColor, {
+                            alpha: Number(self.colorOpacitySecondaryHover)
+                        })
+                        : self.colorSecondaryHover,
+                    '--n-color-pressed': isColoredType
+                        ? (0, seemly_1.changeColor)(mergedTextColor, {
+                            alpha: Number(self.colorOpacitySecondaryPressed)
+                        })
+                        : self.colorSecondaryPressed,
+                    '--n-color-focus': isColoredType
+                        ? (0, seemly_1.changeColor)(mergedTextColor, {
+                            alpha: Number(self.colorOpacitySecondaryHover)
+                        })
+                        : self.colorSecondaryHover,
+                    '--n-color-disabled': self.colorSecondary,
+                    '--n-ripple-color': '#0000',
+                    '--n-text-color': mergedTextColor,
+                    '--n-text-color-hover': mergedTextColor,
+                    '--n-text-color-pressed': mergedTextColor,
+                    '--n-text-color-focus': mergedTextColor,
+                    '--n-text-color-disabled': mergedTextColor
+                };
+            }
+            else if (tertiary || quaternary) {
+                const typeColor = typeIsDefault
+                    ? self.textColor
+                    : typeIsTertiary
+                        ? self.textColorTertiary
+                        : self[(0, _utils_1.createKey)('color', mergedType)];
+                const mergedColor = color || typeColor;
+                if (tertiary) {
+                    colorProps['--n-color'] = self.colorTertiary;
+                    colorProps['--n-color-hover'] = self.colorTertiaryHover;
+                    colorProps['--n-color-pressed'] = self.colorTertiaryPressed;
+                    colorProps['--n-color-focus'] = self.colorSecondaryHover;
+                    colorProps['--n-color-disabled'] = self.colorTertiary;
+                }
+                else {
+                    colorProps['--n-color'] = self.colorQuaternary;
+                    colorProps['--n-color-hover'] = self.colorQuaternaryHover;
+                    colorProps['--n-color-pressed'] = self.colorQuaternaryPressed;
+                    colorProps['--n-color-focus'] = self.colorQuaternaryHover;
+                    colorProps['--n-color-disabled'] = self.colorQuaternary;
+                }
+                colorProps['--n-ripple-color'] = '#0000';
+                colorProps['--n-text-color'] = mergedColor;
+                colorProps['--n-text-color-hover'] = mergedColor;
+                colorProps['--n-text-color-pressed'] = mergedColor;
+                colorProps['--n-text-color-focus'] = mergedColor;
+                colorProps['--n-text-color-disabled'] = mergedColor;
+            }
+            else {
+                colorProps = {
+                    '--n-color': color || self[(0, _utils_1.createKey)('color', mergedType)],
+                    '--n-color-hover': color
+                        ? (0, index_1.createHoverColor)(color)
+                        : self[(0, _utils_1.createKey)('colorHover', mergedType)],
+                    '--n-color-pressed': color
+                        ? (0, index_1.createPressedColor)(color)
+                        : self[(0, _utils_1.createKey)('colorPressed', mergedType)],
+                    '--n-color-focus': color
+                        ? (0, index_1.createHoverColor)(color)
+                        : self[(0, _utils_1.createKey)('colorFocus', mergedType)],
+                    '--n-color-disabled': color || self[(0, _utils_1.createKey)('colorDisabled', mergedType)],
+                    '--n-ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
+                    '--n-text-color': textColor ||
+                        (color
+                            ? self.textColorPrimary
+                            : typeIsTertiary
+                                ? self.textColorTertiary
+                                : self[(0, _utils_1.createKey)('textColor', mergedType)]),
+                    '--n-text-color-hover': textColor ||
+                        (color
+                            ? self.textColorHoverPrimary
+                            : self[(0, _utils_1.createKey)('textColorHover', mergedType)]),
+                    '--n-text-color-pressed': textColor ||
+                        (color
+                            ? self.textColorPressedPrimary
+                            : self[(0, _utils_1.createKey)('textColorPressed', mergedType)]),
+                    '--n-text-color-focus': textColor ||
+                        (color
+                            ? self.textColorFocusPrimary
+                            : self[(0, _utils_1.createKey)('textColorFocus', mergedType)]),
+                    '--n-text-color-disabled': textColor ||
+                        (color
+                            ? self.textColorDisabledPrimary
+                            : self[(0, _utils_1.createKey)('textColorDisabled', mergedType)])
+                };
+            }
+            // border
+            let borderProps = {
+                '--n-border': 'initial',
+                '--n-border-hover': 'initial',
+                '--n-border-pressed': 'initial',
+                '--n-border-focus': 'initial',
+                '--n-border-disabled': 'initial'
+            };
+            if (text) {
+                borderProps = {
+                    '--n-border': 'none',
+                    '--n-border-hover': 'none',
+                    '--n-border-pressed': 'none',
+                    '--n-border-focus': 'none',
+                    '--n-border-disabled': 'none'
+                };
+            }
+            else {
+                borderProps = {
+                    '--n-border': self[(0, _utils_1.createKey)('border', mergedType)],
+                    '--n-border-hover': self[(0, _utils_1.createKey)('borderHover', mergedType)],
+                    '--n-border-pressed': self[(0, _utils_1.createKey)('borderPressed', mergedType)],
+                    '--n-border-focus': self[(0, _utils_1.createKey)('borderFocus', mergedType)],
+                    '--n-border-disabled': self[(0, _utils_1.createKey)('borderDisabled', mergedType)]
+                };
+            }
+            // size
+            const { [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('paddingRound', size)]: paddingRound, [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('borderRadius', size)]: borderRadius, [(0, _utils_1.createKey)('iconMargin', size)]: iconMargin, waveOpacity } = self;
+            const sizeProps = {
+                '--n-width': circle && !text ? height : 'initial',
+                '--n-height': text ? 'initial' : height,
+                '--n-font-size': fontSize,
+                '--n-padding': circle
+                    ? 'initial'
+                    : text
+                        ? 'initial'
+                        : round
+                            ? paddingRound
+                            : padding,
+                '--n-icon-size': iconSize,
+                '--n-icon-margin': iconMargin,
+                '--n-border-radius': text
+                    ? 'initial'
+                    : circle || round
+                        ? height
+                        : borderRadius
+            };
+            return Object.assign(Object.assign(Object.assign(Object.assign({ '--n-bezier': cubicBezierEaseInOut, '--n-bezier-ease-out': cubicBezierEaseOut, '--n-ripple-duration': rippleDuration, '--n-opacity-disabled': opacityDisabled, '--n-wave-opacity': waveOpacity }, fontProps), colorProps), borderProps), sizeProps);
+        });
+        const themeClassHandle = disableInlineTheme
+            ? (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)
+                    hash += 'a';
+                if (ghost)
+                    hash += 'b';
+                if (text)
+                    hash += 'c';
+                if (round)
+                    hash += 'd';
+                if (circle)
+                    hash += 'e';
+                if (secondary)
+                    hash += 'f';
+                if (tertiary)
+                    hash += 'g';
+                if (quaternary)
+                    hash += 'h';
+                if (strong)
+                    hash += 'i';
+                if (color)
+                    hash += 'j' + (0, _utils_1.color2Class)(color);
+                if (textColor)
+                    hash += 'k' + (0, _utils_1.color2Class)(textColor);
+                const { value: size } = mergedSizeRef;
+                hash += 'l' + size[0];
+                hash += 'm' + type[0];
+                return hash;
+            }), cssVarsRef, props)
+            : _mixins_1.emptyThemeClassHandle;
+        return Object.assign({ selfElRef,
+            waveElRef, mergedClsPrefix: mergedClsPrefixRef, mergedFocusable: mergedFocusableRef, mergedSize: mergedSizeRef, showBorder: showBorderRef, enterPressed: enterPressedRef, rtlEnabled: rtlEnabledRef, handleMousedown,
             handleKeydown,
             handleBlur,
             handleKeyup,
-            handleClick,
-            customColorCssVars: (0, vue_1.computed)(() => {
+            handleClick, customColorCssVars: (0, vue_1.computed)(() => {
                 const { color } = props;
                 if (!color)
                     return null;
@@ -164,239 +415,13 @@ const Button = (0, vue_1.defineComponent)({
                     '--n-border-color-focus': hoverColor,
                     '--n-border-color-disabled': color
                 };
-            }),
-            cssVars: (0, vue_1.computed)(() => {
-                const theme = themeRef.value;
-                const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;
-                const { rippleDuration, opacityDisabled, fontWeight, fontWeightStrong } = self;
-                const size = mergedSizeRef.value;
-                const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props;
-                // font
-                const fontProps = {
-                    fontWeight: strong ? fontWeightStrong : fontWeight
-                };
-                // color
-                let colorProps = {
-                    '--n-color': 'initial',
-                    '--n-color-hover': 'initial',
-                    '--n-color-pressed': 'initial',
-                    '--n-color-focus': 'initial',
-                    '--n-color-disabled': 'initial',
-                    '--n-ripple-color': 'initial',
-                    '--n-text-color': 'initial',
-                    '--n-text-color-hover': 'initial',
-                    '--n-text-color-pressed': 'initial',
-                    '--n-text-color-focus': 'initial',
-                    '--n-text-color-disabled': 'initial'
-                };
-                const typeIsTertiary = type === 'tertiary';
-                const typeIsDefault = type === 'default';
-                const mergedType = typeIsTertiary ? 'default' : type;
-                if (text) {
-                    const propTextColor = textColor || color;
-                    const mergedTextColor = propTextColor || self[(0, _utils_1.createKey)('textColorText', mergedType)];
-                    colorProps = {
-                        '--n-color': '#0000',
-                        '--n-color-hover': '#0000',
-                        '--n-color-pressed': '#0000',
-                        '--n-color-focus': '#0000',
-                        '--n-color-disabled': '#0000',
-                        '--n-ripple-color': '#0000',
-                        '--n-text-color': mergedTextColor,
-                        '--n-text-color-hover': propTextColor
-                            ? (0, index_1.createHoverColor)(propTextColor)
-                            : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
-                        '--n-text-color-pressed': propTextColor
-                            ? (0, index_1.createPressedColor)(propTextColor)
-                            : self[(0, _utils_1.createKey)('textColorTextPressed', mergedType)],
-                        '--n-text-color-focus': propTextColor
-                            ? (0, index_1.createHoverColor)(propTextColor)
-                            : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
-                        '--n-text-color-disabled': propTextColor ||
-                            self[(0, _utils_1.createKey)('textColorTextDisabled', mergedType)]
-                    };
-                }
-                else if (ghost || dashed) {
-                    const mergedTextColor = textColor || color;
-                    colorProps = {
-                        '--n-color': '#0000',
-                        '--n-color-hover': '#0000',
-                        '--n-color-pressed': '#0000',
-                        '--n-color-focus': '#0000',
-                        '--n-color-disabled': '#0000',
-                        '--n-ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
-                        '--n-text-color': mergedTextColor || self[(0, _utils_1.createKey)('textColorGhost', mergedType)],
-                        '--n-text-color-hover': mergedTextColor
-                            ? (0, index_1.createHoverColor)(mergedTextColor)
-                            : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
-                        '--n-text-color-pressed': mergedTextColor
-                            ? (0, index_1.createPressedColor)(mergedTextColor)
-                            : self[(0, _utils_1.createKey)('textColorGhostPressed', mergedType)],
-                        '--n-text-color-focus': mergedTextColor
-                            ? (0, index_1.createHoverColor)(mergedTextColor)
-                            : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
-                        '--n-text-color-disabled': mergedTextColor ||
-                            self[(0, _utils_1.createKey)('textColorGhostDisabled', mergedType)]
-                    };
-                }
-                else if (secondary) {
-                    const typeTextColor = typeIsDefault
-                        ? self.textColor
-                        : typeIsTertiary
-                            ? self.textColorTertiary
-                            : self[(0, _utils_1.createKey)('color', mergedType)];
-                    const mergedTextColor = color || typeTextColor;
-                    const isColoredType = type !== 'default' && type !== 'tertiary';
-                    colorProps = {
-                        '--n-color': isColoredType
-                            ? (0, seemly_1.changeColor)(mergedTextColor, {
-                                alpha: Number(self.colorOpacitySecondary)
-                            })
-                            : self.colorSecondary,
-                        '--n-color-hover': isColoredType
-                            ? (0, seemly_1.changeColor)(mergedTextColor, {
-                                alpha: Number(self.colorOpacitySecondaryHover)
-                            })
-                            : self.colorSecondaryHover,
-                        '--n-color-pressed': isColoredType
-                            ? (0, seemly_1.changeColor)(mergedTextColor, {
-                                alpha: Number(self.colorOpacitySecondaryPressed)
-                            })
-                            : self.colorSecondaryPressed,
-                        '--n-color-focus': isColoredType
-                            ? (0, seemly_1.changeColor)(mergedTextColor, {
-                                alpha: Number(self.colorOpacitySecondaryHover)
-                            })
-                            : self.colorSecondaryHover,
-                        '--n-color-disabled': self.colorSecondary,
-                        '--n-ripple-color': '#0000',
-                        '--n-text-color': mergedTextColor,
-                        '--n-text-color-hover': mergedTextColor,
-                        '--n-text-color-pressed': mergedTextColor,
-                        '--n-text-color-focus': mergedTextColor,
-                        '--n-text-color-disabled': mergedTextColor
-                    };
-                }
-                else if (tertiary || quaternary) {
-                    const typeColor = typeIsDefault
-                        ? self.textColor
-                        : typeIsTertiary
-                            ? self.textColorTertiary
-                            : self[(0, _utils_1.createKey)('color', mergedType)];
-                    const mergedColor = color || typeColor;
-                    if (tertiary) {
-                        colorProps['--n-color'] = self.colorTertiary;
-                        colorProps['--n-color-hover'] = self.colorTertiaryHover;
-                        colorProps['--n-color-pressed'] = self.colorTertiaryPressed;
-                        colorProps['--n-color-focus'] = self.colorSecondaryHover;
-                        colorProps['--n-color-disabled'] = self.colorTertiary;
-                    }
-                    else {
-                        colorProps['--n-color'] = self.colorQuaternary;
-                        colorProps['--n-color-hover'] = self.colorQuaternaryHover;
-                        colorProps['--n-color-pressed'] = self.colorQuaternaryPressed;
-                        colorProps['--n-color-focus'] = self.colorQuaternaryHover;
-                        colorProps['--n-color-disabled'] = self.colorQuaternary;
-                    }
-                    colorProps['--n-ripple-color'] = '#0000';
-                    colorProps['--n-text-color'] = mergedColor;
-                    colorProps['--n-text-color-hover'] = mergedColor;
-                    colorProps['--n-text-color-pressed'] = mergedColor;
-                    colorProps['--n-text-color-focus'] = mergedColor;
-                    colorProps['--n-text-color-disabled'] = mergedColor;
-                }
-                else {
-                    colorProps = {
-                        '--n-color': color || self[(0, _utils_1.createKey)('color', mergedType)],
-                        '--n-color-hover': color
-                            ? (0, index_1.createHoverColor)(color)
-                            : self[(0, _utils_1.createKey)('colorHover', mergedType)],
-                        '--n-color-pressed': color
-                            ? (0, index_1.createPressedColor)(color)
-                            : self[(0, _utils_1.createKey)('colorPressed', mergedType)],
-                        '--n-color-focus': color
-                            ? (0, index_1.createHoverColor)(color)
-                            : self[(0, _utils_1.createKey)('colorFocus', mergedType)],
-                        '--n-color-disabled': color || self[(0, _utils_1.createKey)('colorDisabled', mergedType)],
-                        '--n-ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
-                        '--n-text-color': textColor ||
-                            (color
-                                ? self.textColorPrimary
-                                : typeIsTertiary
-                                    ? self.textColorTertiary
-                                    : self[(0, _utils_1.createKey)('textColor', mergedType)]),
-                        '--n-text-color-hover': textColor ||
-                            (color
-                                ? self.textColorHoverPrimary
-                                : self[(0, _utils_1.createKey)('textColorHover', mergedType)]),
-                        '--n-text-color-pressed': textColor ||
-                            (color
-                                ? self.textColorPressedPrimary
-                                : self[(0, _utils_1.createKey)('textColorPressed', mergedType)]),
-                        '--n-text-color-focus': textColor ||
-                            (color
-                                ? self.textColorFocusPrimary
-                                : self[(0, _utils_1.createKey)('textColorFocus', mergedType)]),
-                        '--n-text-color-disabled': textColor ||
-                            (color
-                                ? self.textColorDisabledPrimary
-                                : self[(0, _utils_1.createKey)('textColorDisabled', mergedType)])
-                    };
-                }
-                // border
-                let borderProps = {
-                    '--n-border': 'initial',
-                    '--n-border-hover': 'initial',
-                    '--n-border-pressed': 'initial',
-                    '--n-border-focus': 'initial',
-                    '--n-border-disabled': 'initial'
-                };
-                if (text) {
-                    borderProps = {
-                        '--n-border': 'none',
-                        '--n-border-hover': 'none',
-                        '--n-border-pressed': 'none',
-                        '--n-border-focus': 'none',
-                        '--n-border-disabled': 'none'
-                    };
-                }
-                else {
-                    borderProps = {
-                        '--n-border': self[(0, _utils_1.createKey)('border', mergedType)],
-                        '--n-border-hover': self[(0, _utils_1.createKey)('borderHover', mergedType)],
-                        '--n-border-pressed': self[(0, _utils_1.createKey)('borderPressed', mergedType)],
-                        '--n-border-focus': self[(0, _utils_1.createKey)('borderFocus', mergedType)],
-                        '--n-border-disabled': self[(0, _utils_1.createKey)('borderDisabled', mergedType)]
-                    };
-                }
-                // size
-                const { [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('paddingRound', size)]: paddingRound, [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('borderRadius', size)]: borderRadius, [(0, _utils_1.createKey)('iconMargin', size)]: iconMargin, waveOpacity } = self;
-                const sizeProps = {
-                    '--n-width': circle && !text ? height : 'initial',
-                    '--n-height': text ? 'initial' : height,
-                    '--n-font-size': fontSize,
-                    '--n-padding': circle
-                        ? 'initial'
-                        : text
-                            ? 'initial'
-                            : round
-                                ? paddingRound
-                                : padding,
-                    '--n-icon-size': iconSize,
-                    '--n-icon-margin': iconMargin,
-                    '--n-border-radius': text
-                        ? 'initial'
-                        : circle || round
-                            ? height
-                            : borderRadius
-                };
-                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);
-            })
-        };
+            }), 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`,
                 `${mergedClsPrefix}-button--${this.type}-type`,
                 `${mergedClsPrefix}-button--${this.mergedSize}-type`,

package/lib/button/src/ButtonGroup.js

@@ -21,7 +21,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: buttonGroupProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        (0, _mixins_1.useStyle)('ButtonGroup', button_group_cssr_1.default, mergedClsPrefixRef);
+        (0, _mixins_1.useStyle)('-button-group', button_group_cssr_1.default, mergedClsPrefixRef);
         (0, vue_1.provide)(exports.buttonGroupInjectionKey, props);
         return {
             mergedClsPrefix: mergedClsPrefixRef

package/lib/button/src/styles/button.cssr.js

@@ -50,6 +50,7 @@ const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
+ margin: 0;
  font-weight: var(--n-font-weight);
  line-height: 1;
  font-family: inherit;

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.js

@@ -23,7 +23,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: calendarProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Calendar', 'Calendar', index_cssr_1.default, styles_1.calendarLight, props, mergedClsPrefixRef);
+        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();
         // ts => timestamp

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

@@ -9,6 +9,7 @@ export declare const cardBaseProps: {
     readonly title: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly headerStyle: PropType<string | CSSProperties>;
+    readonly headerExtraStyle: PropType<string | CSSProperties>;
     readonly footerStyle: PropType<string | CSSProperties>;
     readonly embedded: BooleanConstructor;
     readonly segmented: {
@@ -31,11 +32,12 @@ export declare const cardBaseProps: {
     readonly role: StringConstructor;
     readonly onClose: PropType<MaybeArray<() => void>>;
 };
-export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "contentStyle" | "onClose" | "closable" | "hoverable" | "headerStyle" | "footerStyle" | "embedded" | "segmented")[];
+export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "contentStyle" | "onClose" | "closable" | "hoverable" | "headerStyle" | "headerExtraStyle" | "footerStyle" | "embedded" | "segmented")[];
 declare const cardProps: {
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -156,6 +158,7 @@ declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -271,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<{
@@ -437,11 +442,12 @@ 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>;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {