maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
225 lines (224 loc) • 6.95 kB
JavaScript
import { openBlock as c, createElementBlock as $, createElementVNode as i, defineComponent as P, ref as j, onMounted as q, watch as F, nextTick as A, createBlock as b, Teleport as I, createVNode as z, Transition as K, withCtx as C, mergeProps as U, normalizeClass as L, withModifiers as X, renderSlot as D, createCommentVNode as N, defineAsyncComponent as G, unref as S } from "vue";
import '../assets/MazBottomSheet.BaTeNHYH.css';const H = {
xmlns: "http://www.w3.org/2000/svg",
width: "1em",
height: "1em",
fill: "none",
viewBox: "0 0 24 24"
};
function J(t, s) {
return c(), $("svg", H, s[0] || (s[0] = [
i(
"path",
{
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "1.5",
d: "M6 18 18 6M6 6l12 12"
},
null,
-1
/* HOISTED */
)
]));
}
const Q = { render: J }, R = {
role: "dialog",
class: "m-backdrop-container",
"aria-modal": "true"
}, W = { class: "m-backdrop-wrapper" }, V = "--backdrop-present", Y = /* @__PURE__ */ P({
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(t, { expose: s, emit: r }) {
const l = r;
function n() {
document.documentElement.classList.add(V);
}
function d() {
document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(V);
}
const o = j(t.modelValue);
function u() {
g(!1);
}
async function g(e) {
var a;
e || (l("before-close"), await ((a = t.beforeClose) == null ? void 0 : a.call(t))), o.value = e;
}
function h() {
l("open");
}
function B() {
l("update:model-value", !1), l("close"), v();
}
function f() {
t.persistent || u();
}
function p(e) {
!t.noCloseOnEscKey && e.key === "Escape" && !t.persistent && u();
}
function E() {
n(), document.addEventListener("keyup", p, !1);
}
function v() {
document.removeEventListener("keyup", p), d();
}
q(() => {
t.modelValue ? E() : v();
});
let m = null;
function T(e) {
const a = document.querySelector(e), k = a && Array.from(a.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), y = k == null ? void 0 : k.filter((w) => {
const M = window.getComputedStyle(w);
return M.display !== "none" && M.visibility !== "hidden" && !w.disabled;
});
return y && y.length > 0 ? y[0] : null;
}
return F(
() => t.modelValue,
async (e) => {
if (o.value = e, e) {
E(), m = document.activeElement, await A();
const a = T(".m-backdrop-content");
a == null || a.focus();
} else
v(), await A(), m == null || m.focus();
}
), s({
onBackdropAnimationEnter: h,
onBackdropAnimationLeave: B,
onBackdropClicked: f,
close: u,
present: o,
toggleModal: g,
onKeyPress: p
}), (e, a) => (c(), b(I, { to: e.teleportSelector }, [
z(K, {
appear: "",
name: e.transitionName,
onAfterEnter: h,
onAfterLeave: B
}, {
default: C(() => [
o.value ? (c(), $(
"div",
U({
key: 0,
class: "m-backdrop --present m-reset-css"
}, e.$attrs, {
class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
}),
[
i("div", R, [
i("div", W, [
i(
"div",
{
class: L(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
role: "button",
tabindex: "-1",
onClick: X(f, ["self"])
},
[
D(e.$slots, "default", {
close: u,
onBackdropClicked: f
}, void 0, !0)
],
2
/* CLASS */
)
])
])
],
16
/* FULL_PROPS */
)) : N("v-if", !0)
]),
_: 3
/* FORWARDED */
}, 8, ["name"])
], 8, ["to"]));
}
}), O = (t, s) => {
const r = t.__vccOpts || t;
for (const [l, n] of s)
r[l] = n;
return r;
}, Z = /* @__PURE__ */ O(Y, [["__scopeId", "data-v-90448c91"]]), x = /* @__PURE__ */ P({
__name: "MazBottomSheet",
props: {
modelValue: { type: Boolean },
noClose: { type: Boolean },
noPadding: { type: Boolean }
},
emits: ["update:model-value", "open", "close"],
setup(t, { emit: s }) {
const r = s, l = G(() => import("./MazBtn.DWNPohkh.mjs"));
return (n, d) => (c(), b(Z, {
"model-value": n.modelValue,
"transition-name": "bottom-sheet-anim",
"backdrop-class": "--bottom-sheet",
"content-padding": !1,
align: "end",
justify: "none",
variant: "bottom-sheet",
onClose: d[0] || (d[0] = (o) => n.$emit("close", o)),
onOpen: d[1] || (d[1] = (o) => n.$emit("open", o)),
"onUpdate:modelValue": d[2] || (d[2] = (o) => r("update:model-value", o))
}, {
default: C(({ close: o }) => [
i(
"div",
{
class: L(["m-bottom-sheet__container", {
"--no-padding": n.noPadding
}])
},
[
D(n.$slots, "default", { close: o }, void 0, !0),
n.noClose ? N("v-if", !0) : (c(), b(S(l), {
key: 0,
size: "sm",
class: "m-bottom-sheet__close",
color: "transparent",
onClick: o
}, {
default: C(() => [
z(S(Q), { class: "maz-text-lg" })
]),
_: 2
/* DYNAMIC */
}, 1032, ["onClick"]))
],
2
/* CLASS */
)
]),
_: 3
/* FORWARDED */
}, 8, ["model-value"]));
}
}), te = /* @__PURE__ */ O(x, [["__scopeId", "data-v-2a65e628"]]);
export {
te as M,
O as _
};