naive-ui 2.21.2 → 2.22.0

package/es/avatar/src/Avatar.js

@@ -8,10 +8,12 @@ import style from './styles/index.cssr';
 const avatarProps = Object.assign(Object.assign({}, useTheme.props), { size: {
         type: [String, Number],
         default: 'medium'
-    }, src: String, circle: Boolean, color: String, objectFit: {
+    }, src: String, circle: Boolean, objectFit: {
         type: String,
         default: 'fill'
-    }, round: Boolean, onError: Function, fallbackSrc: String });
+    }, round: Boolean, onError: Function, fallbackSrc: String, 
+    /** @deprecated */
+    color: String });
 export default defineComponent({
     name: 'Avatar',
     props: avatarProps,
@@ -62,7 +64,7 @@ export default defineComponent({
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
             cssVars: computed(() => {
-                const { size } = props;
+                const { size, color: propColor } = props;
                 const { self: { borderRadius, fontSize, color }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 let height;
                 if (typeof size === 'number') {
@@ -74,7 +76,7 @@ export default defineComponent({
                 return {
                     '--font-size': fontSize,
                     '--border-radius': mergedRoundRef.value ? '50%' : borderRadius,
-                    '--color': color,
+                    '--color': propColor || color,
                     '--bezier': cubicBezierEaseInOut,
                     '--merged-size': `var(--avatar-size-override, ${height})`
                 };
@@ -91,7 +93,7 @@ export default defineComponent({
         }
         else if (!(!$slots.default && src)) {
             img = (h(VResizeObserver, { onResize: this.fitTextTransform }, {
-                default: () => (h("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text`, style: { background: this.color } }, $slots))
+                default: () => (h("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, $slots))
             }));
         }
         else {

package/es/avatar/src/styles/index.cssr.js

@@ -3,7 +3,7 @@ import { c, cE, cB } from '../../../_utils/cssr'; // vars:
 // --border-radius
 // --color
 // --bezier
-// --size
+// --merged-size
 
 export default cB('avatar', `
  width: var(--merged-size);
@@ -30,7 +30,5 @@ export default cB('avatar', `
  top: 50%;
  `), cB('icon', `
  vertical-align: bottom;
- font-size: var(--size);
- `), cE('text', {
-  lineHeight: 1.25
-})]);
+ font-size: calc(var(--merged-size) - 6px);
+ `), cE('text', 'line-height: 1.25')]);

package/es/button/src/Button.d.ts

@@ -60,9 +60,9 @@ declare const buttonProps: {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -264,9 +264,9 @@ declare const buttonProps: {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -468,9 +468,9 @@ declare const buttonProps: {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -719,9 +719,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -923,9 +923,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -1127,9 +1127,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -1334,42 +1334,42 @@ declare const Button: import("vue").DefineComponent<{
     handleKeyup: (e: KeyboardEvent) => void;
     handleClick: (e: MouseEvent) => void;
     customColorCssVars: import("vue").ComputedRef<{
-        '--border-color': string;
-        '--border-color-hover': string;
-        '--border-color-pressed': string;
-        '--border-color-focus': string;
-        '--border-color-disabled': string;
+        '--n-border-color': string;
+        '--n-border-color-hover': string;
+        '--n-border-color-pressed': string;
+        '--n-border-color-focus': string;
+        '--n-border-color-disabled': string;
     } | null>;
     cssVars: import("vue").ComputedRef<{
-        '--width': string;
-        '--height': string;
-        '--font-size': string;
-        '--padding': string;
-        '--icon-size': string;
-        '--icon-margin': string;
-        '--border-radius': string;
-        '--border': string;
-        '--border-hover': string;
-        '--border-pressed': string;
-        '--border-focus': string;
-        '--border-disabled': string;
-        '--color': string;
-        '--color-hover': string;
-        '--color-pressed': string;
-        '--color-focus': string;
-        '--color-disabled': string;
-        '--ripple-color': string;
-        '--text-color': string;
-        '--text-color-hover': string;
-        '--text-color-pressed': string;
-        '--text-color-focus': string;
-        '--text-color-disabled': string;
+        '--n-width': string;
+        '--n-height': string;
+        '--n-font-size': string;
+        '--n-padding': string;
+        '--n-icon-size': string;
+        '--n-icon-margin': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--n-border-hover': string;
+        '--n-border-pressed': string;
+        '--n-border-focus': string;
+        '--n-border-disabled': string;
+        '--n-color': string;
+        '--n-color-hover': string;
+        '--n-color-pressed': string;
+        '--n-color-focus': string;
+        '--n-color-disabled': string;
+        '--n-ripple-color': string;
+        '--n-text-color': string;
+        '--n-text-color-hover': string;
+        '--n-text-color-pressed': string;
+        '--n-text-color-focus': string;
+        '--n-text-color-disabled': string;
         fontWeight: string;
-        '--bezier': string;
-        '--bezier-ease-out': string;
-        '--ripple-duration': string;
-        '--opacity-disabled': string;
-        '--wave-opacity': string;
+        '--n-bezier': string;
+        '--n-bezier-ease-out': string;
+        '--n-ripple-duration': string;
+        '--n-opacity-disabled': string;
+        '--n-wave-opacity': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly color?: unknown;
@@ -1436,9 +1436,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -1640,9 +1640,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -1844,9 +1844,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;

package/es/button/src/Button.js

@@ -86,7 +86,7 @@ const Button = defineComponent({
             }
         };
         const handleClick = (e) => {
-            if (!props.disabled) {
+            if (!props.disabled && !props.loading) {
                 const { onClick } = props;
                 if (onClick)
                     call(onClick, e);
@@ -112,7 +112,7 @@ const Button = defineComponent({
             switch (e.code) {
                 case 'Enter':
                 case 'NumpadEnter':
-                    if (!props.keyboard) {
+                    if (!props.keyboard || props.loading) {
                         e.preventDefault();
                         return;
                     }
@@ -145,11 +145,11 @@ const Button = defineComponent({
                     return null;
                 const hoverColor = createHoverColor(color);
                 return {
-                    '--border-color': color,
-                    '--border-color-hover': hoverColor,
-                    '--border-color-pressed': createPressedColor(color),
-                    '--border-color-focus': hoverColor,
-                    '--border-color-disabled': color
+                    '--n-border-color': color,
+                    '--n-border-color-hover': hoverColor,
+                    '--n-border-color-pressed': createPressedColor(color),
+                    '--n-border-color-focus': hoverColor,
+                    '--n-border-color-disabled': color
                 };
             }),
             cssVars: computed(() => {
@@ -164,17 +164,17 @@ const Button = defineComponent({
                 };
                 // color
                 let colorProps = {
-                    '--color': 'initial',
-                    '--color-hover': 'initial',
-                    '--color-pressed': 'initial',
-                    '--color-focus': 'initial',
-                    '--color-disabled': 'initial',
-                    '--ripple-color': 'initial',
-                    '--text-color': 'initial',
-                    '--text-color-hover': 'initial',
-                    '--text-color-pressed': 'initial',
-                    '--text-color-focus': 'initial',
-                    '--text-color-disabled': 'initial'
+                    '--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';
@@ -183,46 +183,46 @@ const Button = defineComponent({
                     const propTextColor = textColor || color;
                     const mergedTextColor = propTextColor || self[createKey('textColorText', mergedType)];
                     colorProps = {
-                        '--color': '#0000',
-                        '--color-hover': '#0000',
-                        '--color-pressed': '#0000',
-                        '--color-focus': '#0000',
-                        '--color-disabled': '#0000',
-                        '--ripple-color': '#0000',
-                        '--text-color': mergedTextColor,
-                        '--text-color-hover': propTextColor
+                        '--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)],
-                        '--text-color-pressed': propTextColor
+                        '--n-text-color-pressed': propTextColor
                             ? createPressedColor(propTextColor)
                             : self[createKey('textColorTextPressed', mergedType)],
-                        '--text-color-focus': propTextColor
+                        '--n-text-color-focus': propTextColor
                             ? createHoverColor(propTextColor)
                             : self[createKey('textColorTextHover', mergedType)],
-                        '--text-color-disabled': propTextColor ||
+                        '--n-text-color-disabled': propTextColor ||
                             self[createKey('textColorTextDisabled', mergedType)]
                     };
                 }
                 else if (ghost || dashed) {
                     const mergedTextColor = textColor || color;
                     colorProps = {
-                        '--color': '#0000',
-                        '--color-hover': '#0000',
-                        '--color-pressed': '#0000',
-                        '--color-focus': '#0000',
-                        '--color-disabled': '#0000',
-                        '--ripple-color': color || self[createKey('rippleColor', mergedType)],
-                        '--text-color': mergedTextColor || self[createKey('textColorGhost', mergedType)],
-                        '--text-color-hover': mergedTextColor
+                        '--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)],
-                        '--text-color-pressed': mergedTextColor
+                        '--n-text-color-pressed': mergedTextColor
                             ? createPressedColor(mergedTextColor)
                             : self[createKey('textColorGhostPressed', mergedType)],
-                        '--text-color-focus': mergedTextColor
+                        '--n-text-color-focus': mergedTextColor
                             ? createHoverColor(mergedTextColor)
                             : self[createKey('textColorGhostHover', mergedType)],
-                        '--text-color-disabled': mergedTextColor ||
+                        '--n-text-color-disabled': mergedTextColor ||
                             self[createKey('textColorGhostDisabled', mergedType)]
                     };
                 }
@@ -235,33 +235,33 @@ const Button = defineComponent({
                     const mergedTextColor = color || typeTextColor;
                     const isColoredType = type !== 'default' && type !== 'tertiary';
                     colorProps = {
-                        '--color': isColoredType
+                        '--n-color': isColoredType
                             ? changeColor(mergedTextColor, {
-                                alpha: self.colorOpacitySecondary
+                                alpha: Number(self.colorOpacitySecondary)
                             })
                             : self.colorSecondary,
-                        '--color-hover': isColoredType
+                        '--n-color-hover': isColoredType
                             ? changeColor(mergedTextColor, {
-                                alpha: self.colorOpacitySecondaryHover
+                                alpha: Number(self.colorOpacitySecondaryHover)
                             })
                             : self.colorSecondaryHover,
-                        '--color-pressed': isColoredType
+                        '--n-color-pressed': isColoredType
                             ? changeColor(mergedTextColor, {
-                                alpha: self.colorOpacitySecondaryPressed
+                                alpha: Number(self.colorOpacitySecondaryPressed)
                             })
                             : self.colorSecondaryPressed,
-                        '--color-focus': isColoredType
+                        '--n-color-focus': isColoredType
                             ? changeColor(mergedTextColor, {
-                                alpha: self.colorOpacitySecondaryHover
+                                alpha: Number(self.colorOpacitySecondaryHover)
                             })
                             : self.colorSecondaryHover,
-                        '--color-disabled': self.colorSecondary,
-                        '--ripple-color': '#0000',
-                        '--text-color': mergedTextColor,
-                        '--text-color-hover': mergedTextColor,
-                        '--text-color-pressed': mergedTextColor,
-                        '--text-color-focus': mergedTextColor,
-                        '--text-color-disabled': mergedTextColor
+                        '--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) {
@@ -272,59 +272,59 @@ const Button = defineComponent({
                             : self[createKey('color', mergedType)];
                     const mergedColor = color || typeColor;
                     if (tertiary) {
-                        colorProps['--color'] = self.colorTertiary;
-                        colorProps['--color-hover'] = self.colorTertiaryHover;
-                        colorProps['--color-pressed'] = self.colorTertiaryPressed;
-                        colorProps['--color-focus'] = self.colorSecondaryHover;
-                        colorProps['--color-disabled'] = self.colorTertiary;
+                        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['--color'] = self.colorQuaternary;
-                        colorProps['--color-hover'] = self.colorQuaternaryHover;
-                        colorProps['--color-pressed'] = self.colorQuaternaryPressed;
-                        colorProps['--color-focus'] = self.colorQuaternaryHover;
-                        colorProps['--color-disabled'] = self.colorQuaternary;
+                        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['--ripple-color'] = '#0000';
-                    colorProps['--text-color'] = mergedColor;
-                    colorProps['--text-color-hover'] = mergedColor;
-                    colorProps['--text-color-pressed'] = mergedColor;
-                    colorProps['--text-color-focus'] = mergedColor;
-                    colorProps['--text-color-disabled'] = mergedColor;
+                    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 = {
-                        '--color': color || self[createKey('color', mergedType)],
-                        '--color-hover': color
+                        '--n-color': color || self[createKey('color', mergedType)],
+                        '--n-color-hover': color
                             ? createHoverColor(color)
                             : self[createKey('colorHover', mergedType)],
-                        '--color-pressed': color
+                        '--n-color-pressed': color
                             ? createPressedColor(color)
                             : self[createKey('colorPressed', mergedType)],
-                        '--color-focus': color
+                        '--n-color-focus': color
                             ? createHoverColor(color)
                             : self[createKey('colorFocus', mergedType)],
-                        '--color-disabled': color || self[createKey('colorDisabled', mergedType)],
-                        '--ripple-color': color || self[createKey('rippleColor', mergedType)],
-                        '--text-color': textColor ||
+                        '--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)]),
-                        '--text-color-hover': textColor ||
+                        '--n-text-color-hover': textColor ||
                             (color
                                 ? self.textColorHoverPrimary
                                 : self[createKey('textColorHover', mergedType)]),
-                        '--text-color-pressed': textColor ||
+                        '--n-text-color-pressed': textColor ||
                             (color
                                 ? self.textColorPressedPrimary
                                 : self[createKey('textColorPressed', mergedType)]),
-                        '--text-color-focus': textColor ||
+                        '--n-text-color-focus': textColor ||
                             (color
                                 ? self.textColorFocusPrimary
                                 : self[createKey('textColorFocus', mergedType)]),
-                        '--text-color-disabled': textColor ||
+                        '--n-text-color-disabled': textColor ||
                             (color
                                 ? self.textColorDisabledPrimary
                                 : self[createKey('textColorDisabled', mergedType)])
@@ -332,52 +332,52 @@ const Button = defineComponent({
                 }
                 // border
                 let borderProps = {
-                    '--border': 'initial',
-                    '--border-hover': 'initial',
-                    '--border-pressed': 'initial',
-                    '--border-focus': 'initial',
-                    '--border-disabled': 'initial'
+                    '--n-border': 'initial',
+                    '--n-border-hover': 'initial',
+                    '--n-border-pressed': 'initial',
+                    '--n-border-focus': 'initial',
+                    '--n-border-disabled': 'initial'
                 };
                 if (text) {
                     borderProps = {
-                        '--border': 'none',
-                        '--border-hover': 'none',
-                        '--border-pressed': 'none',
-                        '--border-focus': 'none',
-                        '--border-disabled': 'none'
+                        '--n-border': 'none',
+                        '--n-border-hover': 'none',
+                        '--n-border-pressed': 'none',
+                        '--n-border-focus': 'none',
+                        '--n-border-disabled': 'none'
                     };
                 }
                 else {
                     borderProps = {
-                        '--border': self[createKey('border', mergedType)],
-                        '--border-hover': self[createKey('borderHover', mergedType)],
-                        '--border-pressed': self[createKey('borderPressed', mergedType)],
-                        '--border-focus': self[createKey('borderFocus', mergedType)],
-                        '--border-disabled': self[createKey('borderDisabled', mergedType)]
+                        '--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 = {
-                    '--width': circle && !text ? height : 'initial',
-                    '--height': text ? 'initial' : height,
-                    '--font-size': fontSize,
-                    '--padding': circle
+                    '--n-width': circle && !text ? height : 'initial',
+                    '--n-height': text ? 'initial' : height,
+                    '--n-font-size': fontSize,
+                    '--n-padding': circle
                         ? 'initial'
                         : text
                             ? 'initial'
                             : round
                                 ? paddingRound
                                 : padding,
-                    '--icon-size': iconSize,
-                    '--icon-margin': iconMargin,
-                    '--border-radius': text
+                    '--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({ '--bezier': cubicBezierEaseInOut, '--bezier-ease-out': cubicBezierEaseOut, '--ripple-duration': rippleDuration, '--opacity-disabled': opacityDisabled, '--wave-opacity': waveOpacity }, fontProps), colorProps), borderProps), sizeProps);
+                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);
             })
         };
     },
@@ -394,9 +394,10 @@ const Button = defineComponent({
                 !this.text && this.dashed && `${mergedClsPrefix}-button--dashed`,
                 this.color && `${mergedClsPrefix}-button--color`,
                 this.secondary && `${mergedClsPrefix}-button--secondary`,
+                this.loading && `${mergedClsPrefix}-button--loading`,
                 this.ghost && `${mergedClsPrefix}-button--ghost` // required for button group border collapse
             ], tabindex: this.mergedFocusable ? 0 : -1, type: this.attrType, style: this.cssVars, disabled: this.disabled, onClick: this.handleClick, onBlur: this.handleBlur, onMousedown: this.handleMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
-            $slots.default && this.iconPlacement === 'right' ? (h("div", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
+            $slots.default && this.iconPlacement === 'right' ? (h("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
             h(NFadeInExpandTransition, { width: true }, {
                 default: () => $slots.icon || this.loading ? (h("span", { class: `${mergedClsPrefix}-button__icon`, style: {
                         margin: !$slots.default ? 0 : ''