comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
116 lines (115 loc) • 5.59 kB
JavaScript
import { defineComponent, inject, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, unref, createCommentVNode, renderSlot } from "vue";
import "../style/button.css";
import { FORM_PROVIDE } from "../../form/src/type.mjs";
import { buttonProps, buttonEmits } from "./main.props.mjs";
import { useGlobal } from "../../../utils/config.mjs";
import { isVueComponent } from "../../../utils/typescript.mjs";
import "@vueuse/core";
import { BUTTONGROUP_PROVIDE } from "./type.mjs";
import "../../../icons/index.mjs";
import { Loading } from "../../../icons/components/components.mjs";
const _hoisted_1 = ["disabled"];
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "CuButton"
},
__name: "main",
props: buttonProps,
emits: buttonEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const { globalSize } = useGlobal();
const form = inject(FORM_PROVIDE, void 0);
const group = inject(BUTTONGROUP_PROVIDE, void 0);
const currentSize = computed(() => {
return props.size ?? (group == null ? void 0 : group.props.size) ?? (form == null ? void 0 : form.props.size) ?? (globalSize == null ? void 0 : globalSize.value);
});
const buttonExtraClass = computed(() => {
return props.plain ? "plain" : props.light ? "light" : props.dashed ? "dashed" : props.text ? "text" : void 0;
});
const buttonClassList = computed(() => {
return [
props.type && "cu-button--" + props.type,
currentSize.value,
{ "is-raised": props.raised },
{ "is-circle": props.circle },
{ "is-round": props.round },
buttonExtraClass.value && "is-" + buttonExtraClass.value
];
});
const buttonStyle = computed(() => {
if (props.color) {
if (props.plain) {
return {
"--cu-button-color": props.color,
"--cu-button-color-hover": "#ffffff",
"--cu-button-color-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
"--cu-button-border": props.color,
"--cu-button-border-hover": props.color,
"--cu-button-border-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
"--cu-button-background": `color-mix(in srgb, ${props.color}, white 90%)`,
"--cu-button-background-hover": props.color,
"--cu-button-background-disabled": `color-mix(in srgb, ${props.color}, white 90%)`
};
} else if (props.light) {
return {
"--cu-button-color": props.color,
"--cu-button-color-hover": props.color,
"--cu-button-color-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
"--cu-button-border": props.color,
"--cu-button-border-hover": props.color,
"--cu-button-border-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
"--cu-button-background-hover": `color-mix(in srgb, ${props.color}, white 90%)`,
"--cu-button-border-active": `color-mix(in srgb, ${props.color}, white 80%)`
};
} else if (props.text) {
return {
"--cu-button-color": props.color,
"--cu-button-color-hover": props.color,
"--cu-button-color-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
"--cu-button-background-hover": `color-mix(in srgb, ${props.color}, white 90%)`,
"--cu-button-background-active": `color-mix(in srgb, ${props.color}, white 80%)`
};
} else if (props.dashed) {
return {
"--cu-button-color-hover": props.color,
"--cu-button-border-hover": props.color,
"--cu-button-border-active": `color-mix(in srgb, ${props.color}, white 80%)`
};
} else {
return {
"--cu-button-background": props.color,
"--cu-button-border-hover": `color-mix(in srgb, ${props.color}, white 30%)`,
"--cu-button-border": props.color,
"--cu-button-background-hover": `color-mix(in srgb, ${props.color}, white 30%)`,
"--cu-button-color": "#ffffff",
"--cu-button-border-disabled": `color-mix(in srgb, ${props.color}, white 50%)`,
"--cu-button-color-disabled": "#ffffff",
"--cu-button-background-disabled": `color-mix(in srgb, ${props.color}, white 50%)`
};
}
}
return void 0;
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("button", {
class: normalizeClass(["cu-button", buttonClassList.value]),
disabled: _ctx.disabled || _ctx.loading,
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event)),
style: normalizeStyle(buttonStyle.value)
}, [
_ctx.loading || _ctx.icon ? (openBlock(), createElementBlock("i", {
key: 0,
class: normalizeClass(["cu-button__icon", [{ "is-loading": _ctx.loading }]]),
style: normalizeStyle({ marginRight: _ctx.$slots.default ? "8px" : void 0 })
}, [
_ctx.loading ? (openBlock(), createBlock(resolveDynamicComponent(unref(isVueComponent)(_ctx.loadingIcon) ? _ctx.loadingIcon : unref(Loading)), { key: 0 })) : unref(isVueComponent)(_ctx.icon) ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { key: 1 })) : createCommentVNode("", true)
], 6)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default")
], 14, _hoisted_1);
};
}
});
export {
_sfc_main as default
};