@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, createBlock as _, createCommentVNode as U, unref as o, openBlock as b, withCtx as h, createElementVNode as u, mergeProps as X, withKeys as Y, createVNode as ee, createElementBlock as te, Transition as R, withDirectives as ne, normalizeClass as k, renderSlot as z, vShow as ae, withModifiers 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", X(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: Y(G, ["escape"])
}), [
ee(o(me), { onResize: j }, {
default: h(() => [
o(t).disabled ? (b(), te("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(() => [
ne(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), [
[ae, 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] = oe(() => {
}, ["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"])) : U("", !0);
}
});
export {
Te as default
};
//# sourceMappingURL=masker.vue2.mjs.map