508 lines
19 KiB
JavaScript
508 lines
19 KiB
JavaScript
|
import { changeColor } from 'seemly';
|
||
|
|
import { useMemo } from 'vooks';
|
||
|
|
import { computed, defineComponent, h, inject, ref, watchEffect } from 'vue';
|
||
|
|
import { NBaseLoading, NBaseWave, NFadeInExpandTransition, NIconSwitchTransition } from "../../_internal/index.mjs";
|
||
|
|
import { useConfig, useFormItem, useTheme, useThemeClass } from "../../_mixins/index.mjs";
|
||
|
|
import { useRtl } from "../../_mixins/use-rtl.mjs";
|
||
|
|
import { call, color2Class, createKey, isSlotEmpty, resolveWrappedSlot, warnOnce } from "../../_utils/index.mjs";
|
||
|
|
import { createHoverColor, createPressedColor } from "../../_utils/color/index.mjs";
|
||
|
|
import { isSafari } from "../../_utils/env/browser.mjs";
|
||
|
|
import { buttonGroupInjectionKey } from "../../button-group/src/context.mjs";
|
||
|
|
import { buttonLight } from "../styles/index.mjs";
|
||
|
|
import style from "./styles/index.cssr.mjs";
|
||
|
|
export const buttonProps = Object.assign(Object.assign({}, useTheme.props), {
|
||
|
|
color: String,
|
||
|
|
textColor: String,
|
||
|
|
text: Boolean,
|
||
|
|
block: Boolean,
|
||
|
|
loading: Boolean,
|
||
|
|
disabled: Boolean,
|
||
|
|
circle: Boolean,
|
||
|
|
size: String,
|
||
|
|
ghost: Boolean,
|
||
|
|
round: Boolean,
|
||
|
|
secondary: Boolean,
|
||
|
|
tertiary: Boolean,
|
||
|
|
quaternary: Boolean,
|
||
|
|
strong: Boolean,
|
||
|
|
focusable: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
keyboard: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
tag: {
|
||
|
|
type: String,
|
||
|
|
default: 'button'
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'default'
|
||
|
|
},
|
||
|
|
dashed: Boolean,
|
||
|
|
renderIcon: Function,
|
||
|
|
iconPlacement: {
|
||
|
|
type: String,
|
||
|
|
default: 'left'
|
||
|
|
},
|
||
|
|
attrType: {
|
||
|
|
type: String,
|
||
|
|
default: 'button'
|
||
|
|
},
|
||
|
|
bordered: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
onClick: [Function, Array],
|
||
|
|
nativeFocusBehavior: {
|
||
|
|
type: Boolean,
|
||
|
|
default: !isSafari
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const Button = defineComponent({
|
||
|
|
name: 'Button',
|
||
|
|
props: buttonProps,
|
||
|
|
slots: Object,
|
||
|
|
setup(props) {
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
watchEffect(() => {
|
||
|
|
const {
|
||
|
|
dashed,
|
||
|
|
ghost,
|
||
|
|
text,
|
||
|
|
secondary,
|
||
|
|
tertiary,
|
||
|
|
quaternary
|
||
|
|
} = props;
|
||
|
|
if ((dashed || ghost || text) && (secondary || tertiary || quaternary)) {
|
||
|
|
warnOnce('button', '`dashed`, `ghost` and `text` props can\'t be used along with `secondary`, `tertiary` and `quaternary` props.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const selfElRef = ref(null);
|
||
|
|
const waveElRef = ref(null);
|
||
|
|
const enterPressedRef = ref(false);
|
||
|
|
const showBorderRef = useMemo(() => {
|
||
|
|
return !props.quaternary && !props.tertiary && !props.secondary && !props.text && (!props.color || props.ghost || props.dashed) && props.bordered;
|
||
|
|
});
|
||
|
|
const NButtonGroup = inject(buttonGroupInjectionKey, {});
|
||
|
|
const {
|
||
|
|
mergedSizeRef
|
||
|
|
} = useFormItem({}, {
|
||
|
|
defaultSize: 'medium',
|
||
|
|
mergedSize: NFormItem => {
|
||
|
|
const {
|
||
|
|
size
|
||
|
|
} = props;
|
||
|
|
if (size) return size;
|
||
|
|
const {
|
||
|
|
size: buttonGroupSize
|
||
|
|
} = NButtonGroup;
|
||
|
|
if (buttonGroupSize) return buttonGroupSize;
|
||
|
|
const {
|
||
|
|
mergedSize: formItemSize
|
||
|
|
} = NFormItem || {};
|
||
|
|
if (formItemSize) {
|
||
|
|
return formItemSize.value;
|
||
|
|
}
|
||
|
|
return 'medium';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const mergedFocusableRef = computed(() => {
|
||
|
|
return props.focusable && !props.disabled;
|
||
|
|
});
|
||
|
|
const handleMousedown = e => {
|
||
|
|
var _a;
|
||
|
|
if (!mergedFocusableRef.value) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
if (props.nativeFocusBehavior) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
e.preventDefault();
|
||
|
|
// normally this won't be called if disabled (when tag is button)
|
||
|
|
// if not, we try to make it behave like a button
|
||
|
|
if (props.disabled) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (mergedFocusableRef.value) {
|
||
|
|
(_a = selfElRef.value) === null || _a === void 0 ? void 0 : _a.focus({
|
||
|
|
preventScroll: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleClick = e => {
|
||
|
|
var _a;
|
||
|
|
if (!props.disabled && !props.loading) {
|
||
|
|
const {
|
||
|
|
onClick
|
||
|
|
} = props;
|
||
|
|
if (onClick) call(onClick, e);
|
||
|
|
if (!props.text) {
|
||
|
|
(_a = waveElRef.value) === null || _a === void 0 ? void 0 : _a.play();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleKeyup = e => {
|
||
|
|
switch (e.key) {
|
||
|
|
case 'Enter':
|
||
|
|
if (!props.keyboard) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
enterPressedRef.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleKeydown = e => {
|
||
|
|
switch (e.key) {
|
||
|
|
case 'Enter':
|
||
|
|
if (!props.keyboard || props.loading) {
|
||
|
|
e.preventDefault();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
enterPressedRef.value = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleBlur = () => {
|
||
|
|
enterPressedRef.value = false;
|
||
|
|
};
|
||
|
|
const {
|
||
|
|
inlineThemeDisabled,
|
||
|
|
mergedClsPrefixRef,
|
||
|
|
mergedRtlRef
|
||
|
|
} = useConfig(props);
|
||
|
|
const themeRef = useTheme('Button', '-button', style, buttonLight, props, mergedClsPrefixRef);
|
||
|
|
const rtlEnabledRef = useRtl('Button', mergedRtlRef, mergedClsPrefixRef);
|
||
|
|
const cssVarsRef = computed(() => {
|
||
|
|
const theme = themeRef.value;
|
||
|
|
const {
|
||
|
|
common: {
|
||
|
|
cubicBezierEaseInOut,
|
||
|
|
cubicBezierEaseOut
|
||
|
|
},
|
||
|
|
self
|
||
|
|
} = theme;
|
||
|
|
const {
|
||
|
|
rippleDuration,
|
||
|
|
opacityDisabled,
|
||
|
|
fontWeight,
|
||
|
|
fontWeightStrong
|
||
|
|
} = self;
|
||
|
|
const size = mergedSizeRef.value;
|
||
|
|
const {
|
||
|
|
dashed,
|
||
|
|
type,
|
||
|
|
ghost,
|
||
|
|
text,
|
||
|
|
color,
|
||
|
|
round,
|
||
|
|
circle,
|
||
|
|
textColor,
|
||
|
|
secondary,
|
||
|
|
tertiary,
|
||
|
|
quaternary,
|
||
|
|
strong
|
||
|
|
} = props;
|
||
|
|
// font
|
||
|
|
const fontProps = {
|
||
|
|
'--n-font-weight': strong ? fontWeightStrong : fontWeight
|
||
|
|
};
|
||
|
|
// color
|
||
|
|
let colorProps = {
|
||
|
|
'--n-color': 'initial',
|
||
|
|
'--n-color-hover': 'initial',
|
||
|
|
'--n-color-pressed': 'initial',
|
||
|
|
'--n-color-focus': 'initial',
|
||
|
|
'--n-color-disabled': 'initial',
|
||
|
|
'--n-ripple-color': 'initial',
|
||
|
|
'--n-text-color': 'initial',
|
||
|
|
'--n-text-color-hover': 'initial',
|
||
|
|
'--n-text-color-pressed': 'initial',
|
||
|
|
'--n-text-color-focus': 'initial',
|
||
|
|
'--n-text-color-disabled': 'initial'
|
||
|
|
};
|
||
|
|
const typeIsTertiary = type === 'tertiary';
|
||
|
|
const typeIsDefault = type === 'default';
|
||
|
|
const mergedType = typeIsTertiary ? 'default' : type;
|
||
|
|
if (text) {
|
||
|
|
const propTextColor = textColor || color;
|
||
|
|
const mergedTextColor = propTextColor || self[createKey('textColorText', mergedType)];
|
||
|
|
colorProps = {
|
||
|
|
'--n-color': '#0000',
|
||
|
|
'--n-color-hover': '#0000',
|
||
|
|
'--n-color-pressed': '#0000',
|
||
|
|
'--n-color-focus': '#0000',
|
||
|
|
'--n-color-disabled': '#0000',
|
||
|
|
'--n-ripple-color': '#0000',
|
||
|
|
'--n-text-color': mergedTextColor,
|
||
|
|
'--n-text-color-hover': propTextColor ? createHoverColor(propTextColor) : self[createKey('textColorTextHover', mergedType)],
|
||
|
|
'--n-text-color-pressed': propTextColor ? createPressedColor(propTextColor) : self[createKey('textColorTextPressed', mergedType)],
|
||
|
|
'--n-text-color-focus': propTextColor ? createHoverColor(propTextColor) : self[createKey('textColorTextHover', mergedType)],
|
||
|
|
'--n-text-color-disabled': propTextColor || self[createKey('textColorTextDisabled', mergedType)]
|
||
|
|
};
|
||
|
|
} else if (ghost || dashed) {
|
||
|
|
const mergedTextColor = textColor || color;
|
||
|
|
colorProps = {
|
||
|
|
'--n-color': '#0000',
|
||
|
|
'--n-color-hover': '#0000',
|
||
|
|
'--n-color-pressed': '#0000',
|
||
|
|
'--n-color-focus': '#0000',
|
||
|
|
'--n-color-disabled': '#0000',
|
||
|
|
'--n-ripple-color': color || self[createKey('rippleColor', mergedType)],
|
||
|
|
'--n-text-color': mergedTextColor || self[createKey('textColorGhost', mergedType)],
|
||
|
|
'--n-text-color-hover': mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey('textColorGhostHover', mergedType)],
|
||
|
|
'--n-text-color-pressed': mergedTextColor ? createPressedColor(mergedTextColor) : self[createKey('textColorGhostPressed', mergedType)],
|
||
|
|
'--n-text-color-focus': mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey('textColorGhostHover', mergedType)],
|
||
|
|
'--n-text-color-disabled': mergedTextColor || self[createKey('textColorGhostDisabled', mergedType)]
|
||
|
|
};
|
||
|
|
} else if (secondary) {
|
||
|
|
const typeTextColor = typeIsDefault ? self.textColor : typeIsTertiary ? self.textColorTertiary : self[createKey('color', mergedType)];
|
||
|
|
const mergedTextColor = color || typeTextColor;
|
||
|
|
const isColoredType = type !== 'default' && type !== 'tertiary';
|
||
|
|
colorProps = {
|
||
|
|
'--n-color': isColoredType ? changeColor(mergedTextColor, {
|
||
|
|
alpha: Number(self.colorOpacitySecondary)
|
||
|
|
}) : self.colorSecondary,
|
||
|
|
'--n-color-hover': isColoredType ? changeColor(mergedTextColor, {
|
||
|
|
alpha: Number(self.colorOpacitySecondaryHover)
|
||
|
|
}) : self.colorSecondaryHover,
|
||
|
|
'--n-color-pressed': isColoredType ? changeColor(mergedTextColor, {
|
||
|
|
alpha: Number(self.colorOpacitySecondaryPressed)
|
||
|
|
}) : self.colorSecondaryPressed,
|
||
|
|
'--n-color-focus': isColoredType ? changeColor(mergedTextColor, {
|
||
|
|
alpha: Number(self.colorOpacitySecondaryHover)
|
||
|
|
}) : self.colorSecondaryHover,
|
||
|
|
'--n-color-disabled': self.colorSecondary,
|
||
|
|
'--n-ripple-color': '#0000',
|
||
|
|
'--n-text-color': mergedTextColor,
|
||
|
|
'--n-text-color-hover': mergedTextColor,
|
||
|
|
'--n-text-color-pressed': mergedTextColor,
|
||
|
|
'--n-text-color-focus': mergedTextColor,
|
||
|
|
'--n-text-color-disabled': mergedTextColor
|
||
|
|
};
|
||
|
|
} else if (tertiary || quaternary) {
|
||
|
|
const typeColor = typeIsDefault ? self.textColor : typeIsTertiary ? self.textColorTertiary : self[createKey('color', mergedType)];
|
||
|
|
const mergedColor = color || typeColor;
|
||
|
|
if (tertiary) {
|
||
|
|
colorProps['--n-color'] = self.colorTertiary;
|
||
|
|
colorProps['--n-color-hover'] = self.colorTertiaryHover;
|
||
|
|
colorProps['--n-color-pressed'] = self.colorTertiaryPressed;
|
||
|
|
colorProps['--n-color-focus'] = self.colorSecondaryHover;
|
||
|
|
colorProps['--n-color-disabled'] = self.colorTertiary;
|
||
|
|
} else {
|
||
|
|
colorProps['--n-color'] = self.colorQuaternary;
|
||
|
|
colorProps['--n-color-hover'] = self.colorQuaternaryHover;
|
||
|
|
colorProps['--n-color-pressed'] = self.colorQuaternaryPressed;
|
||
|
|
colorProps['--n-color-focus'] = self.colorQuaternaryHover;
|
||
|
|
colorProps['--n-color-disabled'] = self.colorQuaternary;
|
||
|
|
}
|
||
|
|
colorProps['--n-ripple-color'] = '#0000';
|
||
|
|
colorProps['--n-text-color'] = mergedColor;
|
||
|
|
colorProps['--n-text-color-hover'] = mergedColor;
|
||
|
|
colorProps['--n-text-color-pressed'] = mergedColor;
|
||
|
|
colorProps['--n-text-color-focus'] = mergedColor;
|
||
|
|
colorProps['--n-text-color-disabled'] = mergedColor;
|
||
|
|
} else {
|
||
|
|
colorProps = {
|
||
|
|
'--n-color': color || self[createKey('color', mergedType)],
|
||
|
|
'--n-color-hover': color ? createHoverColor(color) : self[createKey('colorHover', mergedType)],
|
||
|
|
'--n-color-pressed': color ? createPressedColor(color) : self[createKey('colorPressed', mergedType)],
|
||
|
|
'--n-color-focus': color ? createHoverColor(color) : self[createKey('colorFocus', mergedType)],
|
||
|
|
'--n-color-disabled': color || self[createKey('colorDisabled', mergedType)],
|
||
|
|
'--n-ripple-color': color || self[createKey('rippleColor', mergedType)],
|
||
|
|
'--n-text-color': textColor || (color ? self.textColorPrimary : typeIsTertiary ? self.textColorTertiary : self[createKey('textColor', mergedType)]),
|
||
|
|
'--n-text-color-hover': textColor || (color ? self.textColorHoverPrimary : self[createKey('textColorHover', mergedType)]),
|
||
|
|
'--n-text-color-pressed': textColor || (color ? self.textColorPressedPrimary : self[createKey('textColorPressed', mergedType)]),
|
||
|
|
'--n-text-color-focus': textColor || (color ? self.textColorFocusPrimary : self[createKey('textColorFocus', mergedType)]),
|
||
|
|
'--n-text-color-disabled': textColor || (color ? self.textColorDisabledPrimary : self[createKey('textColorDisabled', mergedType)])
|
||
|
|
};
|
||
|
|
}
|
||
|
|
// border
|
||
|
|
let borderProps = {
|
||
|
|
'--n-border': 'initial',
|
||
|
|
'--n-border-hover': 'initial',
|
||
|
|
'--n-border-pressed': 'initial',
|
||
|
|
'--n-border-focus': 'initial',
|
||
|
|
'--n-border-disabled': 'initial'
|
||
|
|
};
|
||
|
|
if (text) {
|
||
|
|
borderProps = {
|
||
|
|
'--n-border': 'none',
|
||
|
|
'--n-border-hover': 'none',
|
||
|
|
'--n-border-pressed': 'none',
|
||
|
|
'--n-border-focus': 'none',
|
||
|
|
'--n-border-disabled': 'none'
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
borderProps = {
|
||
|
|
'--n-border': self[createKey('border', mergedType)],
|
||
|
|
'--n-border-hover': self[createKey('borderHover', mergedType)],
|
||
|
|
'--n-border-pressed': self[createKey('borderPressed', mergedType)],
|
||
|
|
'--n-border-focus': self[createKey('borderFocus', mergedType)],
|
||
|
|
'--n-border-disabled': self[createKey('borderDisabled', mergedType)]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
// size
|
||
|
|
const {
|
||
|
|
[createKey('height', size)]: height,
|
||
|
|
[createKey('fontSize', size)]: fontSize,
|
||
|
|
[createKey('padding', size)]: padding,
|
||
|
|
[createKey('paddingRound', size)]: paddingRound,
|
||
|
|
[createKey('iconSize', size)]: iconSize,
|
||
|
|
[createKey('borderRadius', size)]: borderRadius,
|
||
|
|
[createKey('iconMargin', size)]: iconMargin,
|
||
|
|
waveOpacity
|
||
|
|
} = self;
|
||
|
|
const sizeProps = {
|
||
|
|
'--n-width': circle && !text ? height : 'initial',
|
||
|
|
'--n-height': text ? 'initial' : height,
|
||
|
|
'--n-font-size': fontSize,
|
||
|
|
'--n-padding': circle ? 'initial' : text ? 'initial' : round ? paddingRound : padding,
|
||
|
|
'--n-icon-size': iconSize,
|
||
|
|
'--n-icon-margin': iconMargin,
|
||
|
|
'--n-border-radius': text ? 'initial' : circle || round ? height : borderRadius
|
||
|
|
};
|
||
|
|
return Object.assign(Object.assign(Object.assign(Object.assign({
|
||
|
|
'--n-bezier': cubicBezierEaseInOut,
|
||
|
|
'--n-bezier-ease-out': cubicBezierEaseOut,
|
||
|
|
'--n-ripple-duration': rippleDuration,
|
||
|
|
'--n-opacity-disabled': opacityDisabled,
|
||
|
|
'--n-wave-opacity': waveOpacity
|
||
|
|
}, fontProps), colorProps), borderProps), sizeProps);
|
||
|
|
});
|
||
|
|
const themeClassHandle = inlineThemeDisabled ? useThemeClass('button', computed(() => {
|
||
|
|
let hash = '';
|
||
|
|
const {
|
||
|
|
dashed,
|
||
|
|
type,
|
||
|
|
ghost,
|
||
|
|
text,
|
||
|
|
color,
|
||
|
|
round,
|
||
|
|
circle,
|
||
|
|
textColor,
|
||
|
|
secondary,
|
||
|
|
tertiary,
|
||
|
|
quaternary,
|
||
|
|
strong
|
||
|
|
} = props;
|
||
|
|
if (dashed) hash += 'a';
|
||
|
|
if (ghost) hash += 'b';
|
||
|
|
if (text) hash += 'c';
|
||
|
|
if (round) hash += 'd';
|
||
|
|
if (circle) hash += 'e';
|
||
|
|
if (secondary) hash += 'f';
|
||
|
|
if (tertiary) hash += 'g';
|
||
|
|
if (quaternary) hash += 'h';
|
||
|
|
if (strong) hash += 'i';
|
||
|
|
if (color) hash += `j${color2Class(color)}`;
|
||
|
|
if (textColor) hash += `k${color2Class(textColor)}`;
|
||
|
|
const {
|
||
|
|
value: size
|
||
|
|
} = mergedSizeRef;
|
||
|
|
hash += `l${size[0]}`;
|
||
|
|
hash += `m${type[0]}`;
|
||
|
|
return hash;
|
||
|
|
}), cssVarsRef, props) : undefined;
|
||
|
|
return {
|
||
|
|
selfElRef,
|
||
|
|
waveElRef,
|
||
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
||
|
|
mergedFocusable: mergedFocusableRef,
|
||
|
|
mergedSize: mergedSizeRef,
|
||
|
|
showBorder: showBorderRef,
|
||
|
|
enterPressed: enterPressedRef,
|
||
|
|
rtlEnabled: rtlEnabledRef,
|
||
|
|
handleMousedown,
|
||
|
|
handleKeydown,
|
||
|
|
handleBlur,
|
||
|
|
handleKeyup,
|
||
|
|
handleClick,
|
||
|
|
customColorCssVars: computed(() => {
|
||
|
|
const {
|
||
|
|
color
|
||
|
|
} = props;
|
||
|
|
if (!color) return null;
|
||
|
|
const hoverColor = createHoverColor(color);
|
||
|
|
return {
|
||
|
|
'--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: inlineThemeDisabled ? undefined : cssVarsRef,
|
||
|
|
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||
|
|
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
||
|
|
};
|
||
|
|
},
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
mergedClsPrefix,
|
||
|
|
tag: Component,
|
||
|
|
onRender
|
||
|
|
} = this;
|
||
|
|
onRender === null || onRender === void 0 ? void 0 : onRender();
|
||
|
|
const children = resolveWrappedSlot(this.$slots.default, children => children && h("span", {
|
||
|
|
class: `${mergedClsPrefix}-button__content`
|
||
|
|
}, children));
|
||
|
|
return h(Component, {
|
||
|
|
ref: "selfElRef",
|
||
|
|
class: [this.themeClass, `${mergedClsPrefix}-button`, `${mergedClsPrefix}-button--${this.type}-type`, `${mergedClsPrefix}-button--${this.mergedSize}-type`, this.rtlEnabled && `${mergedClsPrefix}-button--rtl`, this.disabled && `${mergedClsPrefix}-button--disabled`, this.block && `${mergedClsPrefix}-button--block`, this.enterPressed && `${mergedClsPrefix}-button--pressed`, !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
|
||
|
|
}, this.iconPlacement === 'right' && children, h(NFadeInExpandTransition, {
|
||
|
|
width: true
|
||
|
|
}, {
|
||
|
|
default: () => resolveWrappedSlot(this.$slots.icon, children => (this.loading || this.renderIcon || children) && h("span", {
|
||
|
|
class: `${mergedClsPrefix}-button__icon`,
|
||
|
|
style: {
|
||
|
|
margin: isSlotEmpty(this.$slots.default) ? '0' : ''
|
||
|
|
}
|
||
|
|
}, h(NIconSwitchTransition, null, {
|
||
|
|
default: () => this.loading ? h(NBaseLoading, {
|
||
|
|
clsPrefix: mergedClsPrefix,
|
||
|
|
key: "loading",
|
||
|
|
class: `${mergedClsPrefix}-icon-slot`,
|
||
|
|
strokeWidth: 20
|
||
|
|
}) : h("div", {
|
||
|
|
key: "icon",
|
||
|
|
class: `${mergedClsPrefix}-icon-slot`,
|
||
|
|
role: "none"
|
||
|
|
}, this.renderIcon ? this.renderIcon() : children)
|
||
|
|
})))
|
||
|
|
}), this.iconPlacement === 'left' && children, !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);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
export default Button;
|
||
|
|
// XButton is for tsx type checking
|
||
|
|
// It's not compatible with render function `h`
|
||
|
|
// Currently we don't expose it as public
|
||
|
|
// If there's any issue about this, we may expose it
|
||
|
|
// Since most people use template, the type checking phase doesn't work as tsx
|
||
|
|
export const XButton = Button;
|
||
|
|
// Also, we may make XButton a generic type which support `tag` prop
|
||
|
|
// but currently vue doesn't export IntrinsicElementAttributes from runtime-dom
|
||
|
|
// so we can't easily make an attr map by hand
|
||
|
|
// just leave it for later
|