naive-ui 2.24.6 → 2.25.2

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 } from '../../_mixins';
+import { emptyThemeClassHandle, useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
 import { NFadeInExpandTransition, NIconSwitchTransition, NBaseLoading, NBaseWave } from '../../_internal';
-import { call, createKey, warnOnce } from '../../_utils';
+import { call, color2Class, createKey, warnOnce } from '../../_utils';
 import { buttonLight } from '../styles';
 import { buttonGroupInjectionKey } from './ButtonGroup';
 import style from './styles/button.cssr';
@@ -130,23 +130,274 @@ const Button = defineComponent({
             enterPressedRef.value = false;
         };
         const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
-        const themeRef = useTheme('Button', 'Button', style, buttonLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Button', '-button', style, buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('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 = 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[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
+                        ? createHoverColor(propTextColor)
+                        : self[createKey('textColorTextHover', mergedType)],
+                    '--n-text-color-pressed': propTextColor
+                        ? createPressedColor(propTextColor)
+                        : self[createKey('textColorTextPressed', mergedType)],
+                    '--n-text-color-focus': propTextColor
+                        ? createHoverColor(propTextColor)
+                        : self[createKey('textColorTextHover', mergedType)],
+                    '--n-text-color-disabled': propTextColor ||
+                        self[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[createKey('rippleColor', mergedType)],
+                    '--n-text-color': mergedTextColor || self[createKey('textColorGhost', mergedType)],
+                    '--n-text-color-hover': mergedTextColor
+                        ? createHoverColor(mergedTextColor)
+                        : self[createKey('textColorGhostHover', mergedType)],
+                    '--n-text-color-pressed': mergedTextColor
+                        ? createPressedColor(mergedTextColor)
+                        : self[createKey('textColorGhostPressed', mergedType)],
+                    '--n-text-color-focus': mergedTextColor
+                        ? createHoverColor(mergedTextColor)
+                        : self[createKey('textColorGhostHover', mergedType)],
+                    '--n-text-color-disabled': mergedTextColor ||
+                        self[createKey('textColorGhostDisabled', mergedType)]
+                };
+            }
+            else if (secondary) {
+                const typeTextColor = typeIsDefault
+                    ? self.textColor
+                    : typeIsTertiary
+                        ? self.textColorTertiary
+                        : self[createKey('color', mergedType)];
+                const mergedTextColor = color || typeTextColor;
+                const isColoredType = type !== 'default' && type !== 'tertiary';
+                colorProps = {
+                    '--n-color': isColoredType
+                        ? changeColor(mergedTextColor, {
+                            alpha: Number(self.colorOpacitySecondary)
+                        })
+                        : self.colorSecondary,
+                    '--n-color-hover': isColoredType
+                        ? changeColor(mergedTextColor, {
+                            alpha: Number(self.colorOpacitySecondaryHover)
+                        })
+                        : self.colorSecondaryHover,
+                    '--n-color-pressed': isColoredType
+                        ? changeColor(mergedTextColor, {
+                            alpha: Number(self.colorOpacitySecondaryPressed)
+                        })
+                        : self.colorSecondaryPressed,
+                    '--n-color-focus': isColoredType
+                        ? 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[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[createKey('color', mergedType)],
+                    '--n-color-hover': color
+                        ? createHoverColor(color)
+                        : self[createKey('colorHover', mergedType)],
+                    '--n-color-pressed': color
+                        ? createPressedColor(color)
+                        : self[createKey('colorPressed', mergedType)],
+                    '--n-color-focus': color
+                        ? createHoverColor(color)
+                        : self[createKey('colorFocus', mergedType)],
+                    '--n-color-disabled': color || self[createKey('colorDisabled', mergedType)],
+                    '--n-ripple-color': color || self[createKey('rippleColor', mergedType)],
+                    '--n-text-color': textColor ||
+                        (color
+                            ? self.textColorPrimary
+                            : typeIsTertiary
+                                ? self.textColorTertiary
+                                : self[createKey('textColor', mergedType)]),
+                    '--n-text-color-hover': textColor ||
+                        (color
+                            ? self.textColorHoverPrimary
+                            : self[createKey('textColorHover', mergedType)]),
+                    '--n-text-color-pressed': textColor ||
+                        (color
+                            ? self.textColorPressedPrimary
+                            : self[createKey('textColorPressed', mergedType)]),
+                    '--n-text-color-focus': textColor ||
+                        (color
+                            ? self.textColorFocusPrimary
+                            : self[createKey('textColorFocus', mergedType)]),
+                    '--n-text-color-disabled': textColor ||
+                        (color
+                            ? self.textColorDisabledPrimary
+                            : self[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[createKey('border', mergedType)],
+                    '--n-border-hover': self[createKey('borderHover', mergedType)],
+                    '--n-border-pressed': self[createKey('borderPressed', mergedType)],
+                    '--n-border-focus': self[createKey('borderFocus', mergedType)],
+                    '--n-border-disabled': self[createKey('borderDisabled', mergedType)]
+                };
+            }
+            // size
+            const { [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize, [createKey('padding', size)]: padding, [createKey('paddingRound', size)]: paddingRound, [createKey('iconSize', size)]: iconSize, [createKey('borderRadius', size)]: borderRadius, [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
+            ? useThemeClass('button', 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' + color2Class(color);
+                if (textColor)
+                    hash += 'k' + color2Class(textColor);
+                const { value: size } = mergedSizeRef;
+                hash += 'l' + size[0];
+                hash += 'm' + type[0];
+                return hash;
+            }), cssVarsRef, props)
+            : emptyThemeClassHandle;
+        return Object.assign({ selfElRef,
+            waveElRef, mergedClsPrefix: mergedClsPrefixRef, mergedFocusable: mergedFocusableRef, mergedSize: mergedSizeRef, showBorder: showBorderRef, enterPressed: enterPressedRef, rtlEnabled: rtlEnabledRef, handleMousedown,
             handleKeydown,
             handleBlur,
             handleKeyup,
-            handleClick,
-            customColorCssVars: computed(() => {
+            handleClick, customColorCssVars: computed(() => {
                 const { color } = props;
                 if (!color)
                     return null;
@@ -158,239 +409,13 @@ const Button = defineComponent({
                     '--n-border-color-focus': hoverColor,
                     '--n-border-color-disabled': color
                 };
-            }),
-            cssVars: 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[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
-                            ? createHoverColor(propTextColor)
-                            : self[createKey('textColorTextHover', mergedType)],
-                        '--n-text-color-pressed': propTextColor
-                            ? createPressedColor(propTextColor)
-                            : self[createKey('textColorTextPressed', mergedType)],
-                        '--n-text-color-focus': propTextColor
-                            ? createHoverColor(propTextColor)
-                            : self[createKey('textColorTextHover', mergedType)],
-                        '--n-text-color-disabled': propTextColor ||
-                            self[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[createKey('rippleColor', mergedType)],
-                        '--n-text-color': mergedTextColor || self[createKey('textColorGhost', mergedType)],
-                        '--n-text-color-hover': mergedTextColor
-                            ? createHoverColor(mergedTextColor)
-                            : self[createKey('textColorGhostHover', mergedType)],
-                        '--n-text-color-pressed': mergedTextColor
-                            ? createPressedColor(mergedTextColor)
-                            : self[createKey('textColorGhostPressed', mergedType)],
-                        '--n-text-color-focus': mergedTextColor
-                            ? createHoverColor(mergedTextColor)
-                            : self[createKey('textColorGhostHover', mergedType)],
-                        '--n-text-color-disabled': mergedTextColor ||
-                            self[createKey('textColorGhostDisabled', mergedType)]
-                    };
-                }
-                else if (secondary) {
-                    const typeTextColor = typeIsDefault
-                        ? self.textColor
-                        : typeIsTertiary
-                            ? self.textColorTertiary
-                            : self[createKey('color', mergedType)];
-                    const mergedTextColor = color || typeTextColor;
-                    const isColoredType = type !== 'default' && type !== 'tertiary';
-                    colorProps = {
-                        '--n-color': isColoredType
-                            ? changeColor(mergedTextColor, {
-                                alpha: Number(self.colorOpacitySecondary)
-                            })
-                            : self.colorSecondary,
-                        '--n-color-hover': isColoredType
-                            ? changeColor(mergedTextColor, {
-                                alpha: Number(self.colorOpacitySecondaryHover)
-                            })
-                            : self.colorSecondaryHover,
-                        '--n-color-pressed': isColoredType
-                            ? changeColor(mergedTextColor, {
-                                alpha: Number(self.colorOpacitySecondaryPressed)
-                            })
-                            : self.colorSecondaryPressed,
-                        '--n-color-focus': isColoredType
-                            ? 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[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[createKey('color', mergedType)],
-                        '--n-color-hover': color
-                            ? createHoverColor(color)
-                            : self[createKey('colorHover', mergedType)],
-                        '--n-color-pressed': color
-                            ? createPressedColor(color)
-                            : self[createKey('colorPressed', mergedType)],
-                        '--n-color-focus': color
-                            ? createHoverColor(color)
-                            : self[createKey('colorFocus', mergedType)],
-                        '--n-color-disabled': color || self[createKey('colorDisabled', mergedType)],
-                        '--n-ripple-color': color || self[createKey('rippleColor', mergedType)],
-                        '--n-text-color': textColor ||
-                            (color
-                                ? self.textColorPrimary
-                                : typeIsTertiary
-                                    ? self.textColorTertiary
-                                    : self[createKey('textColor', mergedType)]),
-                        '--n-text-color-hover': textColor ||
-                            (color
-                                ? self.textColorHoverPrimary
-                                : self[createKey('textColorHover', mergedType)]),
-                        '--n-text-color-pressed': textColor ||
-                            (color
-                                ? self.textColorPressedPrimary
-                                : self[createKey('textColorPressed', mergedType)]),
-                        '--n-text-color-focus': textColor ||
-                            (color
-                                ? self.textColorFocusPrimary
-                                : self[createKey('textColorFocus', mergedType)]),
-                        '--n-text-color-disabled': textColor ||
-                            (color
-                                ? self.textColorDisabledPrimary
-                                : self[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[createKey('border', mergedType)],
-                        '--n-border-hover': self[createKey('borderHover', mergedType)],
-                        '--n-border-pressed': self[createKey('borderPressed', mergedType)],
-                        '--n-border-focus': self[createKey('borderFocus', mergedType)],
-                        '--n-border-disabled': self[createKey('borderDisabled', mergedType)]
-                    };
-                }
-                // size
-                const { [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize, [createKey('padding', size)]: padding, [createKey('paddingRound', size)]: paddingRound, [createKey('iconSize', size)]: iconSize, [createKey('borderRadius', size)]: borderRadius, [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 (h(Component, { ref: "selfElRef", class: [
+                this.themeClass,
                 `${mergedClsPrefix}-button`,
                 `${mergedClsPrefix}-button--${this.type}-type`,
                 `${mergedClsPrefix}-button--${this.mergedSize}-type`,

package/es/button/src/ButtonGroup.js

@@ -15,7 +15,7 @@ export default defineComponent({
     props: buttonGroupProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle('ButtonGroup', style, mergedClsPrefixRef);
+        useStyle('-button-group', style, mergedClsPrefixRef);
         provide(buttonGroupInjectionKey, props);
         return {
             mergedClsPrefix: mergedClsPrefixRef

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

@@ -35,6 +35,7 @@ import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'
 // --n-border-color-xxx, used for custom color
 
 export default c([cB('button', `
+ margin: 0;
  font-weight: var(--n-font-weight);
  line-height: 1;
  font-family: inherit;

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

@@ -18,7 +18,7 @@ export default defineComponent({
     props: calendarProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Calendar', 'Calendar', style, calendarLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Calendar', '-calendar', style, calendarLight, props, mergedClsPrefixRef);
         const { localeRef, dateLocaleRef } = useLocale('DatePicker');
         const now = Date.now();
         // ts => timestamp

package/es/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: {