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