naive-ui 2.21.4 → 2.23.1

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));
     }