naive-ui 2.21.5 → 2.23.2

package/lib/button/src/Button.js

@@ -33,10 +33,10 @@ const buttonProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, attrType: {
         type: String,
         default: 'button'
-    }, onClick: [Function, Array], bordered: {
+    }, bordered: {
         type: Boolean,
         default: true
-    } });
+    }, onClick: [Function, Array], internalAutoFocus: Boolean });
 const Button = (0, vue_1.defineComponent)({
     name: 'Button',
     props: buttonProps,
@@ -50,9 +50,18 @@ const Button = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const selfRef = (0, vue_1.ref)(null);
-        const waveRef = (0, vue_1.ref)(null);
+        const selfElRef = (0, vue_1.ref)(null);
+        const waveElRef = (0, vue_1.ref)(null);
         const enterPressedRef = (0, vue_1.ref)(false);
+        (0, vue_1.onMounted)(() => {
+            const { value: selfEl } = selfElRef;
+            if (selfEl &&
+                !props.disabled &&
+                props.focusable &&
+                props.internalAutoFocus) {
+                selfEl.focus({ preventScroll: true });
+            }
+        });
         const showBorderRef = (0, vooks_1.useMemo)(() => {
             return (!props.quaternary &&
                 !props.tertiary &&
@@ -88,19 +97,17 @@ const Button = (0, vue_1.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)
                     (0, _utils_1.call)(onClick, e);
                 if (!props.text) {
-                    const { value } = waveRef;
-                    if (value) {
-                        value.play();
-                    }
+                    (_a = waveElRef.value) === null || _a === void 0 ? void 0 : _a.play();
                 }
             }
         };
@@ -118,7 +125,7 @@ const Button = (0, vue_1.defineComponent)({
             switch (e.code) {
                 case 'Enter':
                 case 'NumpadEnter':
-                    if (!props.keyboard) {
+                    if (!props.keyboard || props.loading) {
                         e.preventDefault();
                         return;
                     }
@@ -132,8 +139,8 @@ const Button = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('Button', 'Button', button_cssr_1.default, styles_1.buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.default)('Button', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
         return {
-            selfRef,
-            waveRef,
+            selfElRef,
+            waveElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedFocusable: mergedFocusableRef,
             mergedSize: mergedSizeRef,
@@ -151,11 +158,11 @@ const Button = (0, vue_1.defineComponent)({
                     return null;
                 const hoverColor = (0, index_1.createHoverColor)(color);
                 return {
-                    '--border-color': color,
-                    '--border-color-hover': hoverColor,
-                    '--border-color-pressed': (0, index_1.createPressedColor)(color),
-                    '--border-color-focus': hoverColor,
-                    '--border-color-disabled': color
+                    '--n-border-color': color,
+                    '--n-border-color-hover': hoverColor,
+                    '--n-border-color-pressed': (0, index_1.createPressedColor)(color),
+                    '--n-border-color-focus': hoverColor,
+                    '--n-border-color-disabled': color
                 };
             }),
             cssVars: (0, vue_1.computed)(() => {
@@ -170,17 +177,17 @@ const Button = (0, vue_1.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';
@@ -189,46 +196,46 @@ const Button = (0, vue_1.defineComponent)({
                     const propTextColor = textColor || color;
                     const mergedTextColor = propTextColor || self[(0, _utils_1.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
                             ? (0, index_1.createHoverColor)(propTextColor)
                             : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
-                        '--text-color-pressed': propTextColor
+                        '--n-text-color-pressed': propTextColor
                             ? (0, index_1.createPressedColor)(propTextColor)
                             : self[(0, _utils_1.createKey)('textColorTextPressed', mergedType)],
-                        '--text-color-focus': propTextColor
+                        '--n-text-color-focus': propTextColor
                             ? (0, index_1.createHoverColor)(propTextColor)
                             : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
-                        '--text-color-disabled': propTextColor ||
+                        '--n-text-color-disabled': propTextColor ||
                             self[(0, _utils_1.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[(0, _utils_1.createKey)('rippleColor', mergedType)],
-                        '--text-color': mergedTextColor || self[(0, _utils_1.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[(0, _utils_1.createKey)('rippleColor', mergedType)],
+                        '--n-text-color': mergedTextColor || self[(0, _utils_1.createKey)('textColorGhost', mergedType)],
+                        '--n-text-color-hover': mergedTextColor
                             ? (0, index_1.createHoverColor)(mergedTextColor)
                             : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
-                        '--text-color-pressed': mergedTextColor
+                        '--n-text-color-pressed': mergedTextColor
                             ? (0, index_1.createPressedColor)(mergedTextColor)
                             : self[(0, _utils_1.createKey)('textColorGhostPressed', mergedType)],
-                        '--text-color-focus': mergedTextColor
+                        '--n-text-color-focus': mergedTextColor
                             ? (0, index_1.createHoverColor)(mergedTextColor)
                             : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
-                        '--text-color-disabled': mergedTextColor ||
+                        '--n-text-color-disabled': mergedTextColor ||
                             self[(0, _utils_1.createKey)('textColorGhostDisabled', mergedType)]
                     };
                 }
@@ -241,33 +248,33 @@ const Button = (0, vue_1.defineComponent)({
                     const mergedTextColor = color || typeTextColor;
                     const isColoredType = type !== 'default' && type !== 'tertiary';
                     colorProps = {
-                        '--color': isColoredType
+                        '--n-color': isColoredType
                             ? (0, seemly_1.changeColor)(mergedTextColor, {
                                 alpha: Number(self.colorOpacitySecondary)
                             })
                             : self.colorSecondary,
-                        '--color-hover': isColoredType
+                        '--n-color-hover': isColoredType
                             ? (0, seemly_1.changeColor)(mergedTextColor, {
                                 alpha: Number(self.colorOpacitySecondaryHover)
                             })
                             : self.colorSecondaryHover,
-                        '--color-pressed': isColoredType
+                        '--n-color-pressed': isColoredType
                             ? (0, seemly_1.changeColor)(mergedTextColor, {
                                 alpha: Number(self.colorOpacitySecondaryPressed)
                             })
                             : self.colorSecondaryPressed,
-                        '--color-focus': isColoredType
+                        '--n-color-focus': isColoredType
                             ? (0, seemly_1.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) {
@@ -278,59 +285,59 @@ const Button = (0, vue_1.defineComponent)({
                             : self[(0, _utils_1.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[(0, _utils_1.createKey)('color', mergedType)],
-                        '--color-hover': color
+                        '--n-color': color || self[(0, _utils_1.createKey)('color', mergedType)],
+                        '--n-color-hover': color
                             ? (0, index_1.createHoverColor)(color)
                             : self[(0, _utils_1.createKey)('colorHover', mergedType)],
-                        '--color-pressed': color
+                        '--n-color-pressed': color
                             ? (0, index_1.createPressedColor)(color)
                             : self[(0, _utils_1.createKey)('colorPressed', mergedType)],
-                        '--color-focus': color
+                        '--n-color-focus': color
                             ? (0, index_1.createHoverColor)(color)
                             : self[(0, _utils_1.createKey)('colorFocus', mergedType)],
-                        '--color-disabled': color || self[(0, _utils_1.createKey)('colorDisabled', mergedType)],
-                        '--ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
-                        '--text-color': textColor ||
+                        '--n-color-disabled': color || self[(0, _utils_1.createKey)('colorDisabled', mergedType)],
+                        '--n-ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
+                        '--n-text-color': textColor ||
                             (color
                                 ? self.textColorPrimary
                                 : typeIsTertiary
                                     ? self.textColorTertiary
                                     : self[(0, _utils_1.createKey)('textColor', mergedType)]),
-                        '--text-color-hover': textColor ||
+                        '--n-text-color-hover': textColor ||
                             (color
                                 ? self.textColorHoverPrimary
                                 : self[(0, _utils_1.createKey)('textColorHover', mergedType)]),
-                        '--text-color-pressed': textColor ||
+                        '--n-text-color-pressed': textColor ||
                             (color
                                 ? self.textColorPressedPrimary
                                 : self[(0, _utils_1.createKey)('textColorPressed', mergedType)]),
-                        '--text-color-focus': textColor ||
+                        '--n-text-color-focus': textColor ||
                             (color
                                 ? self.textColorFocusPrimary
                                 : self[(0, _utils_1.createKey)('textColorFocus', mergedType)]),
-                        '--text-color-disabled': textColor ||
+                        '--n-text-color-disabled': textColor ||
                             (color
                                 ? self.textColorDisabledPrimary
                                 : self[(0, _utils_1.createKey)('textColorDisabled', mergedType)])
@@ -338,58 +345,58 @@ const Button = (0, vue_1.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[(0, _utils_1.createKey)('border', mergedType)],
-                        '--border-hover': self[(0, _utils_1.createKey)('borderHover', mergedType)],
-                        '--border-pressed': self[(0, _utils_1.createKey)('borderPressed', mergedType)],
-                        '--border-focus': self[(0, _utils_1.createKey)('borderFocus', mergedType)],
-                        '--border-disabled': self[(0, _utils_1.createKey)('borderDisabled', mergedType)]
+                        '--n-border': self[(0, _utils_1.createKey)('border', mergedType)],
+                        '--n-border-hover': self[(0, _utils_1.createKey)('borderHover', mergedType)],
+                        '--n-border-pressed': self[(0, _utils_1.createKey)('borderPressed', mergedType)],
+                        '--n-border-focus': self[(0, _utils_1.createKey)('borderFocus', mergedType)],
+                        '--n-border-disabled': self[(0, _utils_1.createKey)('borderDisabled', mergedType)]
                     };
                 }
                 // size
                 const { [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('paddingRound', size)]: paddingRound, [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('borderRadius', size)]: borderRadius, [(0, _utils_1.createKey)('iconMargin', size)]: iconMargin, waveOpacity } = self;
                 const sizeProps = {
-                    '--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 ((0, vue_1.h)(Component, { ref: "selfRef", class: [
+        return ((0, vue_1.h)(Component, { ref: "selfElRef", class: [
                 `${mergedClsPrefix}-button`,
                 `${mergedClsPrefix}-button--${this.type}-type`,
                 `${mergedClsPrefix}-button--${this.mergedSize}-type`,
@@ -400,9 +407,10 @@ const Button = (0, vue_1.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' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
+            $slots.default && this.iconPlacement === 'right' ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
             (0, vue_1.h)(_internal_1.NFadeInExpandTransition, { width: true }, {
                 default: () => $slots.icon || this.loading ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__icon`, style: {
                         margin: !$slots.default ? 0 : ''
@@ -412,7 +420,7 @@ const Button = (0, vue_1.defineComponent)({
                     }))) : null
             }),
             $slots.default && this.iconPlacement === 'left' ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
-            !this.text ? ((0, vue_1.h)(_internal_1.NBaseWave, { ref: "waveRef", clsPrefix: mergedClsPrefix })) : null,
+            !this.text ? ((0, vue_1.h)(_internal_1.NBaseWave, { ref: "waveElRef", clsPrefix: mergedClsPrefix })) : null,
             this.showBorder ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__border`, style: this.customColorCssVars })) : null,
             this.showBorder ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__state-border`, style: this.customColorCssVars })) : null));
     }