epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
269 lines (268 loc) • 8.73 kB
JavaScript
import { av as w, ah as Z, ag as ne, aB as oe } from "./index-97ce4605.js";
import { onMounted as I, onBeforeUnmount as A, ref as P, defineComponent as se, provide as re, watch as R, unref as F, nextTick as M, renderSlot as ce } from "vue";
import { i as ue } from "./isNil-8ef0e4b6.js";
let h;
const Se = (e) => {
var n;
if (!w)
return 0;
if (h !== void 0)
return h;
const o = document.createElement("div");
o.className = `${e}-scrollbar__wrap`, o.style.visibility = "hidden", o.style.width = "100px", o.style.position = "absolute", o.style.top = "-9999px", document.body.appendChild(o);
const s = o.offsetWidth;
o.style.overflow = "scroll";
const r = document.createElement("div");
r.style.width = "100%", o.appendChild(r);
const u = r.offsetWidth;
return (n = o.parentNode) == null || n.removeChild(o), h = s - u, h;
};
function ge(e, n) {
if (!w)
return;
if (!n) {
e.scrollTop = 0;
return;
}
const o = [];
let s = n.offsetParent;
for (; s !== null && e !== s && e.contains(s); )
o.push(s), s = s.offsetParent;
const r = n.offsetTop + o.reduce((m, g) => m + g.offsetTop, 0), u = r + n.offsetHeight, l = e.scrollTop, v = l + e.clientHeight;
r < l ? e.scrollTop = r : u > v && (e.scrollTop = u - e.clientHeight);
}
let E = [];
const j = (e) => {
const n = e;
n.key === Z.esc && E.forEach((o) => o(n));
}, ae = (e) => {
I(() => {
E.length === 0 && document.addEventListener("keydown", j), w && E.push(e);
}), A(() => {
E = E.filter((n) => n !== e), E.length === 0 && w && document.removeEventListener("keydown", j);
});
}, N = "focus-trap.focus-after-trapped", k = "focus-trap.focus-after-released", ie = "focus-trap.focusout-prevented", q = {
cancelable: !0,
bubbles: !1
}, fe = {
cancelable: !0,
bubbles: !1
}, J = "focusAfterTrapped", Y = "focusAfterReleased", le = Symbol("elFocusTrap"), U = P(), S = P(0), K = P(0);
let y = 0;
const ee = (e) => {
const n = [], o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
acceptNode: (s) => {
const r = s.tagName === "INPUT" && s.type === "hidden";
return s.disabled || s.hidden || r ? NodeFilter.FILTER_SKIP : s.tabIndex >= 0 || s === document.activeElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
for (; o.nextNode(); )
n.push(o.currentNode);
return n;
}, z = (e, n) => {
for (const o of e)
if (!de(o, n))
return o;
}, de = (e, n) => {
if (process.env.NODE_ENV === "test")
return !1;
if (getComputedStyle(e).visibility === "hidden")
return !0;
for (; e; ) {
if (n && e === n)
return !1;
if (getComputedStyle(e).display === "none")
return !0;
e = e.parentElement;
}
return !1;
}, pe = (e) => {
const n = ee(e), o = z(n, e), s = z(n.reverse(), e);
return [o, s];
}, ve = (e) => e instanceof HTMLInputElement && "select" in e, p = (e, n) => {
if (e && e.focus) {
const o = document.activeElement;
e.focus({ preventScroll: !0 }), K.value = window.performance.now(), e !== o && ve(e) && n && e.select();
}
};
function G(e, n) {
const o = [...e], s = e.indexOf(n);
return s !== -1 && o.splice(s, 1), o;
}
const Ee = () => {
let e = [];
return {
push: (s) => {
const r = e[0];
r && s !== r && r.pause(), e = G(e, s), e.unshift(s);
},
remove: (s) => {
var r, u;
e = G(e, s), (u = (r = e[0]) == null ? void 0 : r.resume) == null || u.call(r);
}
};
}, me = (e, n = !1) => {
const o = document.activeElement;
for (const s of e)
if (p(s, n), document.activeElement !== o)
return;
}, Q = Ee(), Te = () => S.value > K.value, b = () => {
U.value = "pointer", S.value = window.performance.now();
}, X = () => {
U.value = "keyboard", S.value = window.performance.now();
}, Fe = () => (I(() => {
y === 0 && (document.addEventListener("mousedown", b), document.addEventListener("touchstart", b), document.addEventListener("keydown", X)), y++;
}), A(() => {
y--, y <= 0 && (document.removeEventListener("mousedown", b), document.removeEventListener("touchstart", b), document.removeEventListener("keydown", X));
}), {
focusReason: U,
lastUserFocusTimestamp: S,
lastAutomatedFocusTimestamp: K
}), _ = (e) => new CustomEvent(ie, {
...fe,
detail: e
}), he = se({
name: "ElFocusTrap",
inheritAttrs: !1,
props: {
loop: Boolean,
trapped: Boolean,
focusTrapEl: Object,
focusStartEl: {
type: [Object, String],
default: "first"
}
},
emits: [
J,
Y,
"focusin",
"focusout",
"focusout-prevented",
"release-requested"
],
setup(e, { emit: n }) {
const o = P();
let s, r;
const { focusReason: u } = Fe();
ae((t) => {
e.trapped && !l.paused && n("release-requested", t);
});
const l = {
paused: !1,
pause() {
this.paused = !0;
},
resume() {
this.paused = !1;
}
}, v = (t) => {
if (!e.loop && !e.trapped || l.paused)
return;
const { key: c, altKey: a, ctrlKey: i, metaKey: f, currentTarget: V, shiftKey: W } = t, { loop: $ } = e, te = c === Z.tab && !a && !i && !f, T = document.activeElement;
if (te && T) {
const C = V, [L, O] = pe(C);
if (L && O) {
if (!W && T === O) {
const d = _({
focusReason: u.value
});
n("focusout-prevented", d), d.defaultPrevented || (t.preventDefault(), $ && p(L, !0));
} else if (W && [L, C].includes(T)) {
const d = _({
focusReason: u.value
});
n("focusout-prevented", d), d.defaultPrevented || (t.preventDefault(), $ && p(O, !0));
}
} else if (T === C) {
const d = _({
focusReason: u.value
});
n("focusout-prevented", d), d.defaultPrevented || t.preventDefault();
}
}
};
re(le, {
focusTrapRef: o,
onKeydown: v
}), R(() => e.focusTrapEl, (t) => {
t && (o.value = t);
}, { immediate: !0 }), R([o], ([t], [c]) => {
t && (t.addEventListener("keydown", v), t.addEventListener("focusin", D), t.addEventListener("focusout", B)), c && (c.removeEventListener("keydown", v), c.removeEventListener("focusin", D), c.removeEventListener("focusout", B));
});
const m = (t) => {
n(J, t);
}, g = (t) => n(Y, t), D = (t) => {
const c = F(o);
if (!c)
return;
const a = t.target, i = t.relatedTarget, f = a && c.contains(a);
e.trapped || i && c.contains(i) || (s = i), f && n("focusin", t), !l.paused && e.trapped && (f ? r = a : p(r, !0));
}, B = (t) => {
const c = F(o);
if (!(l.paused || !c))
if (e.trapped) {
const a = t.relatedTarget;
!ue(a) && !c.contains(a) && setTimeout(() => {
if (!l.paused && e.trapped) {
const i = _({
focusReason: u.value
});
n("focusout-prevented", i), i.defaultPrevented || p(r, !0);
}
}, 0);
} else {
const a = t.target;
a && c.contains(a) || n("focusout", t);
}
};
async function H() {
await M();
const t = F(o);
if (t) {
Q.push(l);
const c = t.contains(document.activeElement) ? s : document.activeElement;
if (s = c, !t.contains(c)) {
const i = new Event(N, q);
t.addEventListener(N, m), t.dispatchEvent(i), i.defaultPrevented || M(() => {
let f = e.focusStartEl;
oe(f) || (p(f), document.activeElement !== f && (f = "first")), f === "first" && me(ee(t), !0), (document.activeElement === c || f === "container") && p(t);
});
}
}
}
function x() {
const t = F(o);
if (t) {
t.removeEventListener(N, m);
const c = new CustomEvent(k, {
...q,
detail: {
focusReason: u.value
}
});
t.addEventListener(k, g), t.dispatchEvent(c), !c.defaultPrevented && (u.value == "keyboard" || !Te() || t.contains(document.activeElement)) && p(s ?? document.body), t.removeEventListener(k, m), Q.remove(l);
}
}
return I(() => {
e.trapped && H(), R(() => e.trapped, (t) => {
t ? H() : x();
});
}), A(() => {
e.trapped && x();
}), {
onKeydown: v
};
}
});
function ye(e, n, o, s, r, u) {
return ce(e.$slots, "default", { handleKeydown: e.onKeydown });
}
var Ce = /* @__PURE__ */ ne(he, [["render", ye], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/focus-trap/src/focus-trap.vue"]]);
export {
Ce as E,
le as F,
Se as g,
ge as s,
ae as u
};