maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
227 lines (226 loc) • 7.78 kB
JavaScript
import { defineComponent as L, ref as F, onMounted as I, watch as K, nextTick as M, openBlock as p, createBlock as T, Teleport as U, createVNode as $, Transition as X, withCtx as E, createElementBlock as N, mergeProps as G, createElementVNode as i, normalizeClass as h, withModifiers as H, renderSlot as B, createCommentVNode as P, defineAsyncComponent as D, computed as g, useSlots as J, normalizeStyle as Q, createTextVNode as R, toDisplayString as W, unref as V } from "vue";
import '../assets/MazDrawer.BdI1nBQ8.css';const Y = {
role: "dialog",
class: "m-backdrop-container",
"aria-modal": "true"
}, Z = { class: "m-backdrop-wrapper" }, j = "--backdrop-present", x = /* @__PURE__ */ L({
inheritAttrs: !1,
__name: "MazBackdrop",
props: {
modelValue: { type: Boolean, default: !1 },
teleportSelector: { default: "body" },
beforeClose: { type: Function, default: void 0 },
persistent: { type: Boolean, default: !1 },
noCloseOnEscKey: { type: Boolean, default: !1 },
transitionName: { default: "backdrop-anim" },
backdropClass: { default: () => {
} },
backdropContentClass: { default: () => {
} },
contentPadding: { type: Boolean, default: !1 },
justify: { default: "none" },
align: { default: "none" },
variant: {}
},
emits: ["open", "close", "update:model-value", "before-close"],
setup(n, { expose: r, emit: d }) {
const l = d;
function f() {
document.documentElement.classList.add(j);
}
function v() {
document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(j);
}
const c = F(n.modelValue);
function u() {
t(!1);
}
async function t(e) {
var s;
e || (l("before-close"), await ((s = n.beforeClose) == null ? void 0 : s.call(n))), c.value = e;
}
function o() {
l("open");
}
function a() {
l("update:model-value", !1), l("close"), b();
}
function y() {
n.persistent || u();
}
function k(e) {
!n.noCloseOnEscKey && e.key === "Escape" && !n.persistent && u();
}
function z() {
f(), document.addEventListener("keyup", k, !1);
}
function b() {
document.removeEventListener("keyup", k), v();
}
I(() => {
n.modelValue ? z() : b();
});
let m = null;
function q(e) {
const s = document.querySelector(e), C = s && Array.from(s.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), w = C == null ? void 0 : C.filter((S) => {
const A = window.getComputedStyle(S);
return A.display !== "none" && A.visibility !== "hidden" && !S.disabled;
});
return w && w.length > 0 ? w[0] : null;
}
return K(
() => n.modelValue,
async (e) => {
if (c.value = e, e) {
z(), m = document.activeElement, await M();
const s = q(".m-backdrop-content");
s == null || s.focus();
} else
b(), await M(), m == null || m.focus();
}
), r({
onBackdropAnimationEnter: o,
onBackdropAnimationLeave: a,
onBackdropClicked: y,
close: u,
present: c,
toggleModal: t,
onKeyPress: k
}), (e, s) => (p(), T(U, { to: e.teleportSelector }, [
$(X, {
appear: "",
name: e.transitionName,
onAfterEnter: o,
onAfterLeave: a
}, {
default: E(() => [
c.value ? (p(), N(
"div",
G({
key: 0,
class: "m-backdrop --present m-reset-css"
}, e.$attrs, {
class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
}),
[
i("div", Y, [
i("div", Z, [
i(
"div",
{
class: h(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
role: "button",
tabindex: "-1",
onClick: H(y, ["self"])
},
[
B(e.$slots, "default", {
close: u,
onBackdropClicked: y
}, void 0, !0)
],
2
/* CLASS */
)
])
])
],
16
/* FULL_PROPS */
)) : P("v-if", !0)
]),
_: 3
/* FORWARDED */
}, 8, ["name"])
], 8, ["to"]));
}
}), O = (n, r) => {
const d = n.__vccOpts || n;
for (const [l, f] of r)
d[l] = f;
return d;
}, _ = /* @__PURE__ */ O(x, [["__scopeId", "data-v-90448c91"]]), ee = { class: "m-drawer-header__title" }, te = {
key: 0,
class: "m-drawer-header__close"
}, ne = { class: "m-drawer-body" }, oe = /* @__PURE__ */ L({
__name: "MazDrawer",
props: {
title: { default: void 0 },
variant: { default: "right" },
size: { default: "30rem" },
backdropClass: { default: void 0 },
noClose: { type: Boolean, default: !1 }
},
emits: ["before-close", "open", "close", "update:model-value"],
setup(n) {
const r = n, d = D(() => import("./MazBtn.CtfRyE0d.mjs")), l = D(() => import("./x-mark.CnZwVvA7.mjs")), f = g(() => r.variant === "left" ? "start" : r.variant === "right" ? "end" : "none"), v = g(() => r.variant === "top" ? "start" : r.variant === "bottom" ? "end" : "none"), c = J(), u = g(() => !!(r.title || c.title));
return (t, o) => (p(), T(_, {
"backdrop-class": ["m-drawer", t.backdropClass],
justify: f.value,
align: v.value,
variant: "drawer",
"transition-name": `drawer-anim-${t.variant}`,
onClose: o[0] || (o[0] = (a) => t.$emit("close")),
onOpen: o[1] || (o[1] = (a) => t.$emit("open")),
onBeforeClose: o[2] || (o[2] = (a) => t.$emit("before-close")),
"onUpdate:modelValue": o[3] || (o[3] = (a) => t.$emit("update:model-value", a))
}, {
default: E(({ close: a }) => [
i(
"div",
{
class: h(["m-drawer-content-wrap", [`--${t.variant}`]]),
style: Q({
"--maz-drawer-size": t.size
})
},
[
i(
"header",
{
class: h(["m-drawer-header", [u.value ? "--justify-between" : "--justify-end"]])
},
[
i("h4", ee, [
B(t.$slots, "title", { close: a }, () => [
R(
W(t.title),
1
/* TEXT */
)
], !0)
]),
t.noClose ? P("v-if", !0) : (p(), N("div", te, [
$(V(d), {
size: "sm",
color: "transparent",
onClick: a
}, {
default: E(() => [
$(V(l), { class: "icon maz-text-lg" })
]),
_: 2
/* DYNAMIC */
}, 1032, ["onClick"])
]))
],
2
/* CLASS */
),
i("div", ne, [
B(t.$slots, "default", { close: a }, void 0, !0)
])
],
6
/* CLASS, STYLE */
)
]),
_: 3
/* FORWARDED */
}, 8, ["backdrop-class", "justify", "align", "transition-name"]));
}
}), re = /* @__PURE__ */ O(oe, [["__scopeId", "data-v-f0b7ef9f"]]);
export {
re as M,
O as _
};