naive-ui 2.24.4 → 2.25.0

package/lib/button/src/Button.js

@@ -136,8 +136,268 @@ 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);
+        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 themeClassRef = disableInlineTheme
+            ? (0, _mixins_1.useCssVarsClass)('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' + color.replace(/#|\(|\)|,|\s/g, '_');
+                if (textColor)
+                    hash += 'k' + textColor.replace(/#|\(|\)|,|\s/g, '_');
+                const { value: size } = mergedSizeRef;
+                hash += 'l' + size[0];
+                hash += 'm' + type[0];
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             selfElRef,
             waveElRef,
@@ -165,238 +425,14 @@ const Button = (0, vue_1.defineComponent)({
                     '--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);
-            })
+            themeClass: themeClassRef,
+            cssVars: disableInlineTheme ? undefined : cssVarsRef
         };
     },
     render() {
         const { $slots, mergedClsPrefix, tag: Component } = this;
         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/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: {
@@ -442,6 +445,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: {

package/lib/card/src/Card.js

@@ -16,6 +16,7 @@ exports.cardBaseProps = {
     title: String,
     contentStyle: [Object, String],
     headerStyle: [Object, String],
+    headerExtraStyle: [Object, String],
     footerStyle: [Object, String],
     embedded: Boolean,
     segmented: {
@@ -50,7 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, _utils_1.call)(onClose);
         };
         const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Card', 'Card', index_cssr_1.default, styles_1.cardLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Card', '-card', index_cssr_1.default, styles_1.cardLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.default)('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
         return {
             rtlEnabled: rtlEnabledRef,
@@ -109,7 +110,7 @@ exports.default = (0, vue_1.defineComponent)({
             $slots.cover ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, $slots.cover())) : null,
             $slots.header || this.title || this.closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, $slots.header ? $slots.header() : this.title),
-                $slots['header-extra'] ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra` }, $slots['header-extra']())) : null,
+                $slots['header-extra'] ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, $slots['header-extra']())) : null,
                 this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null,
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, $slots),
             $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, $slots.footer())) : null,

package/lib/carousel/src/Carousel.js

@@ -676,7 +676,7 @@ exports.default = (0, vue_1.defineComponent)({
             prev: prev,
             next: next
         };
-        const themeRef = (0, _mixins_1.useTheme)('Carousel', 'Carousel', index_cssr_1.default, styles_1.carouselLight, props);
+        const themeRef = (0, _mixins_1.useTheme)('Carousel', '-carousel', index_cssr_1.default, styles_1.carouselLight, props, mergedClsPrefixRef);
         return Object.assign(Object.assign(Object.assign({ mergedClsPrefix: mergedClsPrefixRef, selfElRef, slideVNodes: slideVNodesRef, duplicatedable: duplicatedableRef, userWantsControl: userWantsControlRef, autoSlideSize: autoSlideSizeRef, displayIndex: displayIndexRef, realIndex: realIndexRef, slideStyles: slideStylesRef, translateStyle: translateStyleRef, handleTouchstart,
             handleTransitionEnd,
             handleMousewheel,
@@ -719,6 +719,9 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return ((0, vue_1.h)("div", { ref: "selfElRef", class: [
                 `${mergedClsPrefix}-carousel`,
+                this.direction === 'vertical' &&
+                    `${mergedClsPrefix}-carousel--vertical`,
+                this.showArrow && `${mergedClsPrefix}-carousel--show-arrow`,
                 `${mergedClsPrefix}-carousel--${dotPlacement}`,
                 `${mergedClsPrefix}-carousel--${this.direction}`,
                 `${mergedClsPrefix}-carousel--${this.effect}`,

package/lib/carousel/src/CarouselArrow.js

@@ -27,19 +27,16 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedClsPrefix } = this;
-        const isVertical = this.isVertical();
-        return ((0, vue_1.h)(vue_1.Fragment, null,
+        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-carousel__arrow-group` },
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-carousel__arrow`,
-                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'bottom' : 'right'}`,
-                    this.isNextDisabled() &&
+                    this.isPrevDisabled() &&
                         `${mergedClsPrefix}-carousel__arrow--disabled`
-                ], role: "button", onClick: this.next }, forwardIcon),
+                ], role: "button", onClick: this.prev }, backwardIcon),
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-carousel__arrow`,
-                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'top' : 'left'}`,
-                    this.isPrevDisabled() &&
+                    this.isNextDisabled() &&
                         `${mergedClsPrefix}-carousel__arrow--disabled`
-                ], role: "button", onClick: this.prev }, backwardIcon)));
+                ], role: "button", onClick: this.next }, forwardIcon)));
     }
 });