naive-ui 2.24.4 → 2.25.0

package/es/button/src/Button.js

@@ -1,7 +1,7 @@
 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 { useConfig, useFormItem, useTheme, useCssVarsClass } from '../../_mixins';
 import { NFadeInExpandTransition, NIconSwitchTransition, NBaseLoading, NBaseWave } from '../../_internal';
 import { call, createKey, warnOnce } from '../../_utils';
 import { buttonLight } from '../styles';
@@ -130,8 +130,268 @@ 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);
+        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 themeClassRef = disableInlineTheme
+            ? useCssVarsClass('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' + 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,
@@ -159,238 +419,14 @@ const Button = defineComponent({
                     '--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);
-            })
+            themeClass: themeClassRef,
+            cssVars: disableInlineTheme ? undefined : cssVarsRef
         };
     },
     render() {
         const { $slots, mergedClsPrefix, tag: Component } = this;
         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/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: {
@@ -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/es/card/src/Card.js

@@ -10,6 +10,7 @@ export const cardBaseProps = {
     title: String,
     contentStyle: [Object, String],
     headerStyle: [Object, String],
+    headerExtraStyle: [Object, String],
     footerStyle: [Object, String],
     embedded: Boolean,
     segmented: {
@@ -44,7 +45,7 @@ export default defineComponent({
                 call(onClose);
         };
         const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
-        const themeRef = useTheme('Card', 'Card', style, cardLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Card', '-card', style, cardLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
         return {
             rtlEnabled: rtlEnabledRef,
@@ -103,7 +104,7 @@ export default defineComponent({
             $slots.cover ? (h("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, $slots.cover())) : null,
             $slots.header || this.title || this.closable ? (h("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
                 h("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, $slots.header ? $slots.header() : this.title),
-                $slots['header-extra'] ? (h("div", { class: `${mergedClsPrefix}-card-header__extra` }, $slots['header-extra']())) : null,
+                $slots['header-extra'] ? (h("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, $slots['header-extra']())) : null,
                 this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null,
             h("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, $slots),
             $slots.footer ? (h("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, $slots.footer())) : null,

package/es/carousel/src/Carousel.js

@@ -671,7 +671,7 @@ export default defineComponent({
             prev: prev,
             next: next
         };
-        const themeRef = useTheme('Carousel', 'Carousel', style, carouselLight, props);
+        const themeRef = useTheme('Carousel', '-carousel', style, 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,
@@ -714,6 +714,9 @@ export default defineComponent({
         }
         return (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}`,