@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
216 lines (215 loc) • 6.95 kB
JavaScript
import { defineComponent as J, useSlots as Q, ref as i, computed as M, watch as g, nextTick as N, unref as o, openBlock as b, createBlock as _, withCtx as h, createElementVNode as u, mergeProps as U, withKeys as X, createVNode as Y, Transition as R, withDirectives as ee, normalizeClass as k, renderSlot as z, vShow as te, createElementBlock as ne, withModifiers as ae, createCommentVNode as oe } from "vue";
import "../portal/index.mjs";
import "../resize-observer/index.mjs";
import { useNameHelper as se, useProps as re, useZIndex as le, emitEvent as f } from "@vexip-ui/config";
import { isPromise as ie, queryTabables as ue, getLast as fe } from "@vexip-ui/utils";
import { maskerProps as ce } from "./props.mjs";
import de from "../portal/portal.vue2.mjs";
import me from "../resize-observer/resize-observer.mjs";
const Te = /* @__PURE__ */ J({
name: "Masker",
__name: "masker",
props: ce,
emits: ["update:active"],
setup(I, { expose: L, emit: P }) {
const a = se("masker"), t = re("masker", I, {
active: {
default: !1,
static: !0
},
closable: !1,
inner: !1,
maskTransition: () => a.ns("fade"),
transitionName: () => a.ns("fade"),
disabled: !1,
onBeforeClose: {
default: null,
isFunc: !0
},
transfer: !1,
autoRemove: !1,
permeable: !1,
disableEsc: !1
}), F = P, S = Q(), $ = le(), n = i(t.active), w = i(t.active ? $() : 0), l = i(t.active), s = i(), c = i(), d = i();
let m = !1, v = !1, y = !1, p = null;
const x = M(() => t.inner ? "" : typeof t.transfer == "boolean" ? t.transfer ? "body" : "" : t.transfer), O = M(() => [
a.b(),
a.bs("vars"),
{
[a.bm("inherit")]: x.value !== "body" && t.inherit,
[a.bm("inner")]: t.inner,
[a.bm("disabled")]: t.disabled
}
]);
g(
() => t.active,
(e) => {
n.value = e, e && (l.value = e);
}
), g(n, (e) => {
e ? (p = document.activeElement, w.value = $()) : (y = !1, p && (p.focus(), p = null)), (!t.maskTransition || t.disabled) && !t.transitionName && (e ? C() : E());
}), g(
[() => t.permeable, s],
() => {
s.value && (s.value.removeEventListener("wheel", A), t.permeable || s.value.addEventListener("wheel", A));
},
{ immediate: !0, flush: "post" }
), L({
currentActive: n,
zIndex: w,
wrapperShow: l,
wrapper: s,
topTrap: c,
bottomTrap: d
});
function A(e) {
e.preventDefault(), e.stopPropagation();
}
function D(e) {
n.value !== e && (n.value = e, F("update:active", e), f(t.onToggle, e));
}
async function B() {
if (!t.closable) return;
let e = !0;
typeof t.onBeforeClose == "function" && (e = t.onBeforeClose(), ie(e) && (e = await e)), e !== !1 && N(() => {
D(!1), f(t.onClose);
});
}
function C() {
var r;
if (!n.value) return;
const e = document && document.activeElement;
(!e || !s.value || !s.value.contains(e)) && ((r = c.value) == null || r.focus()), N(() => {
y = !0, f(t.onShow);
});
}
function E() {
n.value || N(() => {
l.value = !1, f(t.onHide);
});
}
function V() {
n.value && (m = !0, (!t.transitionName || !S.default || v) && C());
}
function H() {
n.value || (m = !1, (!t.transitionName || !S.default || !v) && E());
}
function K() {
n.value && (v = !0, (!t.maskTransition || t.disabled || m) && C());
}
function W() {
n.value || (v = !1, (!t.maskTransition || t.disabled || !m) && E());
}
function q(e) {
f(t.onMaskClick, e), B();
}
function Z(e) {
const r = e.target;
if (!y || !s.value || !r || !c.value || !d.value)
return;
const T = ue(s.value);
T.length && (c.value === r ? fe(T).focus() : d.value === r && T[0].focus());
}
function j(e) {
f(t.onResize, e);
}
function G(e) {
t.disableEsc || (e.preventDefault(), B());
}
return (e, r) => !o(t).autoRemove || l.value ? (b(), _(o(de), {
key: 0,
to: x.value
}, {
default: h(() => [
u("div", U(e.$attrs, {
ref_key: "wrapper",
ref: s,
class: [O.value, e.$attrs.class],
tabindex: "-1",
style: {
zIndex: w.value,
...e.$attrs.style || {},
pointerEvents: l.value ? void 0 : "none",
visibility: l.value ? void 0 : "hidden"
},
onFocusin: Z,
onKeydown: X(G, ["escape"])
}), [
Y(o(me), { onResize: j }, {
default: h(() => [
o(t).disabled ? (b(), ne("div", {
key: 1,
class: k(o(a).be("placeholder")),
role: "none",
"aria-hidden": ""
}, null, 2)) : (b(), _(R, {
key: 0,
appear: "",
name: o(t).maskTransition,
onAfterEnter: V,
onAfterLeave: H
}, {
default: h(() => [
ee(u("div", {
class: k(o(a).be("mask")),
onClick: q
}, [
z(e.$slots, "mask", {}, () => [
u("div", {
class: k(o(a).be("mask-inner"))
}, null, 2)
])
], 2), [
[te, n.value]
])
]),
_: 3
}, 8, ["name"]))
]),
_: 3
}),
u("div", {
ref_key: "topTrap",
ref: c,
tabindex: "0",
role: "none",
style: { width: "0", height: "0", overflow: "hidden", outline: "none" }
}, null, 512),
u("div", {
class: k(o(a).be("content")),
onWheel: r[0] || (r[0] = ae(() => {
}, ["stop", "prevent"]))
}, [
o(t).transitionName ? (b(), _(R, {
key: 0,
appear: "",
name: o(t).transitionName,
onAfterEnter: K,
onAfterLeave: W
}, {
default: h(() => [
z(e.$slots, "default", { show: n.value })
]),
_: 3
}, 8, ["name"])) : z(e.$slots, "default", {
key: 1,
show: n.value
})
], 34),
u("div", {
ref_key: "bottomTrap",
ref: d,
tabindex: "0",
role: "none",
style: { width: "0", height: "0", overflow: "hidden", outline: "none" }
}, null, 512)
], 16)
]),
_: 3
}, 8, ["to"])) : oe("", !0);
}
});
export {
Te as default
};
//# sourceMappingURL=masker.vue2.mjs.map