naive-ui 2.21.5 → 2.23.2

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

@@ -1,12 +1,12 @@
 import { c, cB, cE } from '../../../_utils/cssr'; // vars:
-// --font-size
-// --bezier
-// --item-text-color
-// --item-text-color-hover
-// --item-text-color-pressed
-// --item-text-color-active
-// --separator-color
-// --font-weight-active
+// --n-font-size
+// --n-bezier
+// --n-item-text-color
+// --n-item-text-color-hover
+// --n-item-text-color-pressed
+// --n-item-text-color-active
+// --n-separator-color
+// --n-font-weight-active
 
 export default cB('breadcrumb', `
  white-space: nowrap;
@@ -18,36 +18,36 @@ export default cB('breadcrumb', `
  color: inherit;
  text-decoration: inherit;
  `), cB('breadcrumb-item', {
-  fontSize: 'var(--font-size)',
-  transition: 'color .3s var(--bezier)',
+  fontSize: 'var(--n-font-size)',
+  transition: 'color .3s var(--n-bezier)',
   display: 'inline-block'
 }, [cB('icon', `
  font-size: 18px;
  vertical-align: -.2em;
- transition: color .3s var(--bezier);
- color: var(--item-text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-item-text-color);
  `), cE('link', {
   cursor: 'pointer',
-  transition: 'color .3s var(--bezier)',
-  color: 'var(--item-text-color)'
+  transition: 'color .3s var(--n-bezier)',
+  color: 'var(--n-item-text-color)'
 }), cE('separator', {
   margin: '0 8px',
-  color: 'var(--separator-color)',
-  transition: 'color .3s var(--bezier)'
+  color: 'var(--n-separator-color)',
+  transition: 'color .3s var(--n-bezier)'
 }), c('&:hover', [cB('icon', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 }), cE('link', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 })]), c('&:active', [cB('icon', {
-  color: 'var(--item-text-color-pressed)'
+  color: 'var(--n-item-text-color-pressed)'
 }), cE('link', {
-  color: 'var(--item-text-color-pressed)'
+  color: 'var(--n-item-text-color-pressed)'
 })]), c('&:last-child', [cE('link', `
- font-weight: var(--font-weight-active);
+ font-weight: var(--n-font-weight-active);
  cursor: unset;
- color: var(--item-text-color-active);
+ color: var(--n-item-text-color-active);
  `), cB('icon', {
-  color: 'var(--item-text-color-active)'
+  color: 'var(--n-item-text-color-active)'
 }), cE('separator', {
   display: 'none'
 })])])]);

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

@@ -41,11 +41,12 @@ declare const buttonProps: {
         readonly type: PropType<"button" | "reset" | "submit">;
         readonly default: "button";
     };
-    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     readonly bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly internalAutoFocus: BooleanConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -700,11 +701,12 @@ declare const Button: import("vue").DefineComponent<{
         readonly type: PropType<"button" | "reset" | "submit">;
         readonly default: "button";
     };
-    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     readonly bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly internalAutoFocus: BooleanConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -1318,8 +1320,8 @@ declare const Button: import("vue").DefineComponent<{
         rippleDuration: string;
     }, any>>>;
 }, {
-    selfRef: import("vue").Ref<HTMLElement | null>;
-    waveRef: import("vue").Ref<{
+    selfElRef: import("vue").Ref<HTMLElement | null>;
+    waveElRef: import("vue").Ref<{
         play: () => void;
     } | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
@@ -1334,42 +1336,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;
@@ -1393,8 +1395,9 @@ declare const Button: import("vue").DefineComponent<{
     readonly dashed?: unknown;
     readonly iconPlacement?: unknown;
     readonly attrType?: unknown;
-    readonly onClick?: unknown;
     readonly bordered?: unknown;
+    readonly onClick?: unknown;
+    readonly internalAutoFocus?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -1418,6 +1421,7 @@ declare const Button: import("vue").DefineComponent<{
     quaternary: boolean;
     iconPlacement: "left" | "right";
     attrType: "button" | "reset" | "submit";
+    internalAutoFocus: boolean;
 } & {
     color?: string | undefined;
     size?: Size | undefined;
@@ -2055,6 +2059,7 @@ declare const Button: import("vue").DefineComponent<{
     quaternary: boolean;
     iconPlacement: "left" | "right";
     attrType: "button" | "reset" | "submit";
+    internalAutoFocus: boolean;
 }>;
 declare type NativeButtonProps = Omit<ButtonHTMLAttributes, keyof ButtonProps>;
 declare type MergedProps = Partial<ButtonProps & NativeButtonProps>;

package/es/button/src/Button.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, inject, defineComponent, renderSlot, watchEffect } from 'vue';
+import { h, ref, computed, inject, onMounted, defineComponent, renderSlot, watchEffect } from 'vue';
 import { useMemo } from 'vooks';
 import { createHoverColor, createPressedColor } from '../../_utils/color/index';
 import { useConfig, useFormItem, useTheme } from '../../_mixins';
@@ -27,10 +27,10 @@ const buttonProps = Object.assign(Object.assign({}, useTheme.props), { color: St
     }, attrType: {
         type: String,
         default: 'button'
-    }, onClick: [Function, Array], bordered: {
+    }, bordered: {
         type: Boolean,
         default: true
-    } });
+    }, onClick: [Function, Array], internalAutoFocus: Boolean });
 const Button = defineComponent({
     name: 'Button',
     props: buttonProps,
@@ -44,9 +44,18 @@ const Button = defineComponent({
                 }
             });
         }
-        const selfRef = ref(null);
-        const waveRef = ref(null);
+        const selfElRef = ref(null);
+        const waveElRef = ref(null);
         const enterPressedRef = ref(false);
+        onMounted(() => {
+            const { value: selfEl } = selfElRef;
+            if (selfEl &&
+                !props.disabled &&
+                props.focusable &&
+                props.internalAutoFocus) {
+                selfEl.focus({ preventScroll: true });
+            }
+        });
         const showBorderRef = useMemo(() => {
             return (!props.quaternary &&
                 !props.tertiary &&
@@ -82,19 +91,17 @@ const Button = defineComponent({
                 return;
             }
             if (mergedFocusableRef.value) {
-                (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+                (_a = selfElRef.value) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
             }
         };
         const handleClick = (e) => {
-            if (!props.disabled) {
+            var _a;
+            if (!props.disabled && !props.loading) {
                 const { onClick } = props;
                 if (onClick)
                     call(onClick, e);
                 if (!props.text) {
-                    const { value } = waveRef;
-                    if (value) {
-                        value.play();
-                    }
+                    (_a = waveElRef.value) === null || _a === void 0 ? void 0 : _a.play();
                 }
             }
         };
@@ -112,7 +119,7 @@ const Button = defineComponent({
             switch (e.code) {
                 case 'Enter':
                 case 'NumpadEnter':
-                    if (!props.keyboard) {
+                    if (!props.keyboard || props.loading) {
                         e.preventDefault();
                         return;
                     }
@@ -126,8 +133,8 @@ const Button = defineComponent({
         const themeRef = useTheme('Button', 'Button', style, buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Button', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
         return {
-            selfRef,
-            waveRef,
+            selfElRef,
+            waveElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedFocusable: mergedFocusableRef,
             mergedSize: mergedSizeRef,
@@ -145,11 +152,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 +171,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 +190,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 +242,33 @@ const Button = defineComponent({
                     const mergedTextColor = color || typeTextColor;
                     const isColoredType = type !== 'default' && type !== 'tertiary';
                     colorProps = {
-                        '--color': isColoredType
+                        '--n-color': isColoredType
                             ? changeColor(mergedTextColor, {
                                 alpha: Number(self.colorOpacitySecondary)
                             })
                             : self.colorSecondary,
-                        '--color-hover': isColoredType
+                        '--n-color-hover': isColoredType
                             ? changeColor(mergedTextColor, {
                                 alpha: Number(self.colorOpacitySecondaryHover)
                             })
                             : self.colorSecondaryHover,
-                        '--color-pressed': isColoredType
+                        '--n-color-pressed': isColoredType
                             ? changeColor(mergedTextColor, {
                                 alpha: Number(self.colorOpacitySecondaryPressed)
                             })
                             : self.colorSecondaryPressed,
-                        '--color-focus': isColoredType
+                        '--n-color-focus': isColoredType
                             ? changeColor(mergedTextColor, {
                                 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 +279,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,58 +339,58 @@ 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);
             })
         };
     },
     render() {
         const { $slots, mergedClsPrefix, tag: Component } = this;
-        return (h(Component, { ref: "selfRef", class: [
+        return (h(Component, { ref: "selfElRef", class: [
                 `${mergedClsPrefix}-button`,
                 `${mergedClsPrefix}-button--${this.type}-type`,
                 `${mergedClsPrefix}-button--${this.mergedSize}-type`,
@@ -394,9 +401,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 : ''
@@ -406,7 +414,7 @@ const Button = defineComponent({
                     }))) : null
             }),
             $slots.default && this.iconPlacement === 'left' ? (h("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
-            !this.text ? (h(NBaseWave, { ref: "waveRef", clsPrefix: mergedClsPrefix })) : null,
+            !this.text ? (h(NBaseWave, { ref: "waveElRef", clsPrefix: mergedClsPrefix })) : null,
             this.showBorder ? (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__border`, style: this.customColorCssVars })) : null,
             this.showBorder ? (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__state-border`, style: this.customColorCssVars })) : null));
     }