maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
298 lines (297 loc) • 9.52 kB
JavaScript
import { defineComponent as j, ref as w, onMounted as q, watch as W, nextTick as V, openBlock as m, createBlock as D, Teleport as I, createVNode as U, Transition as X, withCtx as K, createElementBlock as S, mergeProps as M, createElementVNode as f, normalizeClass as T, withModifiers as G, renderSlot as g, createCommentVNode as B, defineAsyncComponent as z, useAttrs as H, computed as E, useSlots as J, createTextVNode as Q, toDisplayString as R, unref as L } from "vue";
import '../assets/MazDialog.BD4tQQQl.css';const Y = {
role: "dialog",
class: "m-backdrop-container",
"aria-modal": "true"
}, Z = { class: "m-backdrop-wrapper" }, N = "--backdrop-present", x = /* @__PURE__ */ j({
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: p, emit: s }) {
const i = s;
function v() {
document.documentElement.classList.add(N);
}
function y() {
document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(N);
}
const r = w(n.modelValue);
function d() {
C(!1);
}
async function C(t) {
var l;
t || (i("before-close"), await ((l = n.beforeClose) == null ? void 0 : l.call(n))), r.value = t;
}
function h() {
i("open");
}
function c() {
i("update:model-value", !1), i("close"), o();
}
function b() {
n.persistent || d();
}
function u(t) {
!n.noCloseOnEscKey && t.key === "Escape" && !n.persistent && d();
}
function e() {
v(), document.addEventListener("keyup", u, !1);
}
function o() {
document.removeEventListener("keyup", u), y();
}
q(() => {
n.modelValue ? e() : o();
});
let a = null;
function k(t) {
const l = document.querySelector(t), $ = l && Array.from(l.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), A = $ == null ? void 0 : $.filter((P) => {
const O = window.getComputedStyle(P);
return O.display !== "none" && O.visibility !== "hidden" && !P.disabled;
});
return A && A.length > 0 ? A[0] : null;
}
return W(
() => n.modelValue,
async (t) => {
if (r.value = t, t) {
e(), a = document.activeElement, await V();
const l = k(".m-backdrop-content");
l == null || l.focus();
} else
o(), await V(), a == null || a.focus();
}
), p({
onBackdropAnimationEnter: h,
onBackdropAnimationLeave: c,
onBackdropClicked: b,
close: d,
present: r,
toggleModal: C,
onKeyPress: u
}), (t, l) => (m(), D(I, { to: t.teleportSelector }, [
U(X, {
appear: "",
name: t.transitionName,
onAfterEnter: h,
onAfterLeave: c
}, {
default: K(() => [
r.value ? (m(), S(
"div",
M({
key: 0,
class: "m-backdrop --present m-reset-css"
}, t.$attrs, {
class: [t.backdropClass, t.variant && `--variant-${t.variant}`, { "--persistent": t.persistent }]
}),
[
f("div", Y, [
f("div", Z, [
f(
"div",
{
class: T(["m-backdrop-content", [t.backdropContentClass, `--justify-${t.justify}`, `--align-${t.align}`, { "--padding": t.contentPadding }]]),
role: "button",
tabindex: "-1",
onClick: G(b, ["self"])
},
[
g(t.$slots, "default", {
close: d,
onBackdropClicked: b
}, void 0, !0)
],
2
/* CLASS */
)
])
])
],
16
/* FULL_PROPS */
)) : B("v-if", !0)
]),
_: 3
/* FORWARDED */
}, 8, ["name"])
], 8, ["to"]));
}
}), F = (n, p) => {
const s = n.__vccOpts || n;
for (const [i, v] of p)
s[i] = v;
return s;
}, _ = /* @__PURE__ */ F(x, [["__scopeId", "data-v-90448c91"]]), ee = {
key: 0,
id: "dialogTitle",
class: "m-dialog-title"
}, te = {
key: 0,
class: "m-dialog-footer"
}, oe = /* @__PURE__ */ j({
name: "MazDialog",
inheritAttrs: !1,
__name: "MazDialog",
props: {
modelValue: { type: Boolean },
title: { default: void 0 },
noClose: { type: Boolean, default: !1 },
maxWidth: { default: "100%" },
minWidth: { default: "32rem" },
scrollable: { type: Boolean, default: !1 },
persistent: { type: Boolean, default: !1 },
teleportSelector: {},
beforeClose: {},
noCloseOnEscKey: { type: Boolean },
transitionName: {},
backdropClass: {},
backdropContentClass: {},
contentPadding: { type: Boolean },
justify: {},
align: {},
variant: {}
},
emits: ["open", "close", "update:model-value"],
setup(n, { expose: p }) {
const s = n, i = z(() => import("./MazBtn.C6vJDOgv.mjs")), v = z(() => import("./x-mark.CnZwVvA7.mjs")), y = H(), r = w();
p({
close: () => {
var e, o;
return (o = (e = r.value) == null ? void 0 : e.close) == null ? void 0 : o.call(e);
}
});
const d = E(() => {
const e = [
"modelValue",
"title",
"noClose",
"maxWidth",
"minWidth",
"scrollable"
];
return Object.fromEntries(
Object.entries(s).filter(([o]) => !e.includes(o))
);
}), C = E(() => ({
...y,
class: void 0,
style: void 0
})), h = E(() => ({
class: y.class,
style: y.style
})), c = w(), b = J(), u = E(() => !!b.footer);
return s.scrollable && W(() => s.modelValue, async (e) => {
await V(), e && c.value && setTimeout(() => {
var o;
(o = c.value) == null || o.scrollTo({ top: 0, behavior: "instant" });
}, 0);
}), (e, o) => (m(), D(_, M({ ...C.value, ...d.value }, {
ref_key: "backdrop",
ref: r,
"model-value": e.modelValue,
"transition-name": "modal-anim",
"aria-labelledby": "dialogTitle",
"aria-describedby": "dialogDesc",
"content-padding": "",
justify: "center",
variant: "dialog",
onClose: o[0] || (o[0] = (a) => e.$emit("close", a)),
onOpen: o[1] || (o[1] = (a) => e.$emit("open", a)),
"onUpdate:modelValue": o[2] || (o[2] = (a) => e.$emit("update:model-value", a))
}), {
default: K(({ close: a, onBackdropClicked: k }) => [
f(
"div",
M({
class: ["m-dialog", { "--scrollable": e.scrollable }],
role: "dialog",
"aria-modal": "true",
style: [{ "--max-width": e.maxWidth, "--min-width": e.minWidth }]
}, h.value),
[
g(e.$slots, "header", {
close: a,
onBackdropClicked: k
}, () => [
f(
"div",
{
class: T(["m-dialog-header", { "--has-title": e.$slots.title || e.title }])
},
[
e.$slots.title || e.title ? (m(), S("h2", ee, [
g(e.$slots, "title", {}, () => [
Q(
R(e.title),
1
/* TEXT */
)
], !0)
])) : B("v-if", !0),
!e.noClose && !e.persistent ? (m(), D(L(i), {
key: 1,
color: "transparent",
size: "sm",
icon: L(v),
onClick: a
}, null, 8, ["icon", "onClick"])) : B("v-if", !0)
],
2
/* CLASS */
)
], !0),
f(
"div",
{
id: "dialogDesc",
ref_key: "dialogContent",
ref: c,
class: T(["m-dialog-content", { "--bottom-padding": !u.value }])
},
[
g(e.$slots, "default", {
close: a,
onBackdropClicked: k
}, void 0, !0)
],
2
/* CLASS */
),
u.value ? (m(), S("div", te, [
g(e.$slots, "footer", {
close: a,
onBackdropClicked: k
}, void 0, !0)
])) : B("v-if", !0)
],
16
/* FULL_PROPS */
)
]),
_: 3
/* FORWARDED */
}, 16, ["model-value"]));
}
}), le = /* @__PURE__ */ F(oe, [["__scopeId", "data-v-17cbcac7"]]);
export {
le as M,
F as _
};