maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
97 lines (96 loc) • 5.22 kB
JavaScript
import { defineComponent, defineAsyncComponent, useAttrs, computed, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, unref, withCtx, renderSlot, createElementBlock, createCommentVNode, createTextVNode, toDisplayString, createVNode } from "vue";
import { g as getColor } from "../chunks/types.D0Bp_UhS.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazBtn.C66LMWa-.css';const _hoisted_1 = {
key: 0,
class: "m-btn-loader-container"
}, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazBtn",
props: {
text: {},
size: { default: "md" },
color: { default: "primary" },
type: { default: "button" },
roundedSize: { default: "lg" },
outlined: { type: Boolean },
pastel: { type: Boolean },
block: { type: Boolean },
loading: { type: Boolean },
disabled: { type: Boolean },
fab: { type: Boolean },
icon: { type: [String, Function, Object] },
leftIcon: { type: [String, Function, Object] },
rightIcon: { type: [String, Function, Object] },
padding: { type: Boolean, default: !0 },
justify: { default: "center" }
},
setup(__props) {
const MazIcon = defineAsyncComponent(() => import("./MazIcon.js")), MazSpinner = defineAsyncComponent(() => import("./MazSpinner.js")), { href, to } = useAttrs(), component = computed(() => href ? "a" : to ? "router-link" : "button"), btnColorClass = computed(() => __props.pastel ? `--${getColor(__props.color)}-pastel` : __props.outlined ? `--${getColor(__props.color)}-outlined` : `--${getColor(__props.color)}`), isDisabled = computed(
() => (__props.loading || __props.disabled) && component.value === "button"
), cursorClass = computed(() => isDisabled.value ? "--cursor-default" : "--cursor-pointer"), btnType = computed(() => component.value === "button" ? __props.type : void 0), iconClassSize = computed(() => __props.size === "xl" ? "maz-text-2xl" : __props.size === "lg" ? "maz-text-xl" : __props.size === "md" ? "maz-text-lg" : __props.size === "sm" ? "maz-text-base" : __props.size === "xs" ? "maz-text-sm" : __props.size === "mini" ? "maz-text-xs" : "maz-text-lg");
return (_ctx, _cache) => (openBlock(), createBlock(resolveDynamicComponent(component.value), {
disabled: isDisabled.value,
class: normalizeClass(["m-btn m-reset-css", [
`--${_ctx.size}`,
!_ctx.fab && _ctx.roundedSize && `--rounded-${_ctx.roundedSize}`,
btnColorClass.value,
cursorClass.value,
{
"--block": _ctx.block,
"--fab": _ctx.fab,
"--loading": _ctx.loading,
"--no-padding": !_ctx.padding,
"--has-left-icon": !!_ctx.leftIcon || !!_ctx.$slots["left-icon"],
"--has-right-icon": !!_ctx.rightIcon || !!_ctx.$slots["right-icon"]
}
]]),
style: normalizeStyle([`--justify: ${_ctx.justify}`, `--color: var(--maz-${unref(getColor)(_ctx.color)})`]),
type: btnType.value
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "left-icon", {}, () => [
typeof _ctx.leftIcon == "string" ? (openBlock(), createBlock(unref(MazIcon), {
key: 0,
name: _ctx.leftIcon,
class: normalizeClass([iconClassSize.value])
}, null, 8, ["name", "class"])) : _ctx.leftIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.leftIcon), {
key: 1,
class: normalizeClass([iconClassSize.value])
}, null, 8, ["class"])) : createCommentVNode("", !0)
], !0),
renderSlot(_ctx.$slots, "icon", {}, () => [
typeof _ctx.icon == "string" ? (openBlock(), createBlock(unref(MazIcon), {
key: 0,
name: _ctx.icon,
class: normalizeClass([iconClassSize.value])
}, null, 8, ["name", "class"])) : _ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), {
key: 1,
class: normalizeClass([iconClassSize.value])
}, null, 8, ["class"])) : createCommentVNode("", !0)
], !0),
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(_ctx.text), 1)
], !0),
renderSlot(_ctx.$slots, "right-icon", {}, () => [
typeof _ctx.rightIcon == "string" ? (openBlock(), createBlock(unref(MazIcon), {
key: 0,
name: _ctx.rightIcon,
class: normalizeClass([iconClassSize.value])
}, null, 8, ["name", "class"])) : _ctx.rightIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.rightIcon), {
key: 1,
class: normalizeClass([iconClassSize.value])
}, null, 8, ["class"])) : createCommentVNode("", !0)
], !0),
_ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "loader", {}, () => [
createVNode(unref(MazSpinner), { size: "2em" })
], !0)
])) : createCommentVNode("", !0)
]),
_: 3
}, 8, ["disabled", "class", "style", "type"]));
}
}), MazBtn = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ba65b740"]]);
export {
MazBtn as default
};