149 lines
3.5 KiB
JavaScript
149 lines
3.5 KiB
JavaScript
import { defineComponent, createVNode as _createVNode } from "vue";
|
|
import { extend, numericProp, preventDefault, makeStringProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
|
|
import { useRoute, routeProps } from "../composables/use-route.mjs";
|
|
import { Icon } from "../icon/index.mjs";
|
|
import { Loading } from "../loading/index.mjs";
|
|
const [name, bem] = createNamespace("button");
|
|
const buttonProps = extend({}, routeProps, {
|
|
tag: makeStringProp("button"),
|
|
text: String,
|
|
icon: String,
|
|
type: makeStringProp("default"),
|
|
size: makeStringProp("normal"),
|
|
color: String,
|
|
block: Boolean,
|
|
plain: Boolean,
|
|
round: Boolean,
|
|
square: Boolean,
|
|
loading: Boolean,
|
|
hairline: Boolean,
|
|
disabled: Boolean,
|
|
iconPrefix: String,
|
|
nativeType: makeStringProp("button"),
|
|
loadingSize: numericProp,
|
|
loadingText: String,
|
|
loadingType: String,
|
|
iconPosition: makeStringProp("left")
|
|
});
|
|
var stdin_default = defineComponent({
|
|
name,
|
|
props: buttonProps,
|
|
emits: ["click"],
|
|
setup(props, {
|
|
emit,
|
|
slots
|
|
}) {
|
|
const route = useRoute();
|
|
const renderLoadingIcon = () => {
|
|
if (slots.loading) {
|
|
return slots.loading();
|
|
}
|
|
return _createVNode(Loading, {
|
|
"size": props.loadingSize,
|
|
"type": props.loadingType,
|
|
"class": bem("loading")
|
|
}, null);
|
|
};
|
|
const renderIcon = () => {
|
|
if (props.loading) {
|
|
return renderLoadingIcon();
|
|
}
|
|
if (slots.icon) {
|
|
return _createVNode("div", {
|
|
"class": bem("icon")
|
|
}, [slots.icon()]);
|
|
}
|
|
if (props.icon) {
|
|
return _createVNode(Icon, {
|
|
"name": props.icon,
|
|
"class": bem("icon"),
|
|
"classPrefix": props.iconPrefix
|
|
}, null);
|
|
}
|
|
};
|
|
const renderText = () => {
|
|
let text;
|
|
if (props.loading) {
|
|
text = props.loadingText;
|
|
} else {
|
|
text = slots.default ? slots.default() : props.text;
|
|
}
|
|
if (text) {
|
|
return _createVNode("span", {
|
|
"class": bem("text")
|
|
}, [text]);
|
|
}
|
|
};
|
|
const getStyle = () => {
|
|
const {
|
|
color,
|
|
plain
|
|
} = props;
|
|
if (color) {
|
|
const style = {
|
|
color: plain ? color : "white"
|
|
};
|
|
if (!plain) {
|
|
style.background = color;
|
|
}
|
|
if (color.includes("gradient")) {
|
|
style.border = 0;
|
|
} else {
|
|
style.borderColor = color;
|
|
}
|
|
return style;
|
|
}
|
|
};
|
|
const onClick = (event) => {
|
|
if (props.loading) {
|
|
preventDefault(event);
|
|
} else if (!props.disabled) {
|
|
emit("click", event);
|
|
route();
|
|
}
|
|
};
|
|
return () => {
|
|
const {
|
|
tag,
|
|
type,
|
|
size,
|
|
block,
|
|
round,
|
|
plain,
|
|
square,
|
|
loading,
|
|
disabled,
|
|
hairline,
|
|
nativeType,
|
|
iconPosition
|
|
} = props;
|
|
const classes = [bem([type, size, {
|
|
plain,
|
|
block,
|
|
round,
|
|
square,
|
|
loading,
|
|
disabled,
|
|
hairline
|
|
}]), {
|
|
[BORDER_SURROUND]: hairline
|
|
}];
|
|
return _createVNode(tag, {
|
|
"type": nativeType,
|
|
"class": classes,
|
|
"style": getStyle(),
|
|
"disabled": disabled,
|
|
"onClick": onClick
|
|
}, {
|
|
default: () => [_createVNode("div", {
|
|
"class": bem("content")
|
|
}, [iconPosition === "left" && renderIcon(), renderText(), iconPosition === "right" && renderIcon()])]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
export {
|
|
buttonProps,
|
|
stdin_default as default
|
|
};
|