maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
71 lines (70 loc) • 3.51 kB
JavaScript
import { defineComponent, defineAsyncComponent, computed, useSlots, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createVNode, unref } from "vue";
import { MazXMark } from "@maz-ui/icons";
import MazBackdrop from "./MazBackdrop.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazDrawer.Dodd-EmX.css';const _hoisted_1 = { class: "m-drawer-header__title" }, _hoisted_2 = {
key: 0,
class: "m-drawer-header__close"
}, _hoisted_3 = { class: "m-drawer-body" }, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazDrawer",
props: {
title: { default: void 0 },
variant: { default: "right" },
size: { default: "30rem" },
backdropClass: { default: void 0 },
hideCloseButton: { type: Boolean }
},
emits: ["before-close", "open", "close", "update:model-value"],
setup(__props) {
const props = __props, MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), justify = computed(() => props.variant === "left" ? "start" : props.variant === "right" ? "end" : "none"), align = computed(() => props.variant === "top" ? "start" : props.variant === "bottom" ? "end" : "none"), slots = useSlots(), hasTitle = computed(() => !!(props.title || slots.title));
return (_ctx, _cache) => (openBlock(), createBlock(MazBackdrop, {
"backdrop-class": ["m-drawer", _ctx.backdropClass],
justify: justify.value,
align: align.value,
variant: "drawer",
"transition-name": `drawer-anim-${_ctx.variant}`,
onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close")),
onOpen: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("open")),
onBeforeClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("before-close")),
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.$emit("update:model-value", $event))
}, {
default: withCtx(({ close }) => [
createElementVNode("div", {
class: normalizeClass(["m-drawer-content-wrap", [`--${_ctx.variant}`]]),
style: normalizeStyle({
"--maz-drawer-size": _ctx.size
})
}, [
createElementVNode("header", {
class: normalizeClass(["m-drawer-header", [hasTitle.value ? "--justify-between" : "--justify-end"]])
}, [
createElementVNode("h4", _hoisted_1, [
renderSlot(_ctx.$slots, "title", { close }, () => [
createTextVNode(toDisplayString(_ctx.title), 1)
], !0)
]),
_ctx.hideCloseButton ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_2, [
createVNode(unref(MazBtn), {
size: "sm",
color: "transparent",
onClick: close
}, {
default: withCtx(() => [
createVNode(unref(MazXMark), { class: "icon maz-text-lg" })
]),
_: 2
}, 1032, ["onClick"])
]))
], 2),
createElementVNode("div", _hoisted_3, [
renderSlot(_ctx.$slots, "default", { close }, void 0, !0)
])
], 6)
]),
_: 3
}, 8, ["backdrop-class", "justify", "align", "transition-name"]));
}
}), MazDrawer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8eec10d0"]]);
export {
MazDrawer as default
};