@coderlt/form-designer
Version:
基于vue3的设计器,可视化开发页面表单
649 lines (648 loc) • 19.1 kB
JavaScript
import { onMounted as me, watchEffect as De, onBeforeUnmount as Me, isRef as _e, watch as q, onScopeDispose as Be, defineComponent as H, createVNode as Y, renderSlot as C, h as Ne, inject as se, computed as L, openBlock as F, createElementBlock as x, unref as s, normalizeClass as k, normalizeStyle as pe, createElementVNode as j, toDisplayString as Ie, withCtx as B, createBlock as G, resolveDynamicComponent as Oe, createCommentVNode as J, getCurrentInstance as Ae, ref as N, nextTick as Fe, useSlots as Le, provide as $e, Teleport as Pe, Transition as Re, withDirectives as Ve, mergeProps as ze, createSlots as Ye, vShow as He } from "vue";
import { aj as ve, aB as Z, bG as je, at as W, a5 as We, bH as ye, aP as Xe, aa as te, aw as he, aH as ne, ak as Ue, bI as xe, bJ as Ke, a6 as oe, a7 as Q, bK as K, ag as qe, ah as ge, au as be, ax as Ge, bj as le, bl as Je, bA as ae, aR as ie, aG as Ze } from "./index-74b7090f.js";
import { i as Qe, u as et, C as tt, c as ot } from "./index-450daacc.js";
import { g as st, F as nt, E as lt } from "./focus-trap-fb4432a9.js";
import { a as at } from "./use-global-config-e19ced52.js";
const it = (...e) => (t) => {
e.forEach((o) => {
ve(o) ? o(t) : o.value = t;
});
}, rt = (e, t, o) => {
let n = {
offsetX: 0,
offsetY: 0
};
const l = (r) => {
const d = r.clientX, v = r.clientY, { offsetX: f, offsetY: y } = n, i = e.value.getBoundingClientRect(), m = i.left, T = i.top, $ = i.width, P = i.height, R = document.documentElement.clientWidth, I = document.documentElement.clientHeight, V = -m + f, O = -T + y, S = R - m - $ + f, D = I - T - P + y, A = (E) => {
const c = Math.min(Math.max(f + E.clientX - d, V), S), b = Math.min(Math.max(y + E.clientY - v, O), D);
n = {
offsetX: c,
offsetY: b
}, e.value.style.transform = `translate(${Z(c)}, ${Z(b)})`;
}, h = () => {
document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", h);
};
document.addEventListener("mousemove", A), document.addEventListener("mouseup", h);
}, u = () => {
t.value && e.value && t.value.addEventListener("mousedown", l);
}, a = () => {
t.value && e.value && t.value.removeEventListener("mousedown", l);
};
me(() => {
De(() => {
o.value ? u() : a();
});
}), Me(() => {
a();
});
};
let ct;
function ut(e, t = ct) {
t && t.active && t.effects.push(e);
}
const re = (e) => {
const t = new Set(e);
return t.w = 0, t.n = 0, t;
}, Ce = (e) => (e.w & w) > 0, Ee = (e) => (e.n & w) > 0, dt = ({ deps: e }) => {
if (e.length)
for (let t = 0; t < e.length; t++)
e[t].w |= w;
}, ft = (e) => {
const { deps: t } = e;
if (t.length) {
let o = 0;
for (let n = 0; n < t.length; n++) {
const l = t[n];
Ce(l) && !Ee(l) ? l.delete(e) : t[o++] = l, l.w &= ~w, l.n &= ~w;
}
t.length = o;
}
};
let z = 0, w = 1;
const ee = 30;
let p;
Symbol(process.env.NODE_ENV !== "production" ? "iterate" : "");
Symbol(process.env.NODE_ENV !== "production" ? "Map key iterate" : "");
class mt {
constructor(t, o = null, n) {
this.fn = t, this.scheduler = o, this.active = !0, this.deps = [], this.parent = void 0, ut(this, n);
}
run() {
if (!this.active)
return this.fn();
let t = p, o = X;
for (; t; ) {
if (t === this)
return;
t = t.parent;
}
try {
return this.parent = p, p = this, X = !0, w = 1 << ++z, z <= ee ? dt(this) : ce(this), this.fn();
} finally {
z <= ee && ft(this), w = 1 << --z, p = this.parent, X = o, this.parent = void 0, this.deferStop && this.stop();
}
}
stop() {
p === this ? this.deferStop = !0 : this.active && (ce(this), this.onStop && this.onStop(), this.active = !1);
}
}
function ce(e) {
const { deps: t } = e;
if (t.length) {
for (let o = 0; o < t.length; o++)
t[o].delete(e);
t.length = 0;
}
}
let X = !0;
function ue(e, t) {
let o = !1;
z <= ee ? Ee(e) || (e.n |= w, o = !Ce(e)) : o = !e.has(p), o && (e.add(p), p.deps.push(e), process.env.NODE_ENV !== "production" && p.onTrack && p.onTrack(
ye(
{
effect: p
},
t
)
));
}
function de(e, t) {
const o = We(e) ? e : [...e];
for (const n of o)
n.computed && fe(n, t);
for (const n of o)
n.computed || fe(n, t);
}
function fe(e, t) {
(e !== p || e.allowRecurse) && (process.env.NODE_ENV !== "production" && e.onTrigger && e.onTrigger(ye({ effect: e }, t)), e.scheduler ? e.scheduler() : e.run());
}
new Set(
/* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((e) => e !== "arguments" && e !== "caller").map((e) => Symbol[e]).filter(je)
);
function U(e) {
const t = e && e.__v_raw;
return t ? U(t) : e;
}
function pt(e) {
X && p && (e = U(e), process.env.NODE_ENV !== "production" ? ue(e.dep || (e.dep = re()), {
target: e,
type: "get",
key: "value"
}) : ue(e.dep || (e.dep = re())));
}
function vt(e, t) {
e = U(e);
const o = e.dep;
o && (process.env.NODE_ENV !== "production" ? de(o, {
target: e,
type: "set",
key: "value",
newValue: t
}) : de(o));
}
class yt {
constructor(t, o, n, l) {
this._setter = o, this.dep = void 0, this.__v_isRef = !0, this.__v_isReadonly = !1, this._dirty = !0, this.effect = new mt(t, () => {
this._dirty || (this._dirty = !0, vt(this));
}), this.effect.computed = this, this.effect.active = this._cacheable = !l, this.__v_isReadonly = n;
}
get value() {
const t = U(this);
return pt(t), (t._dirty || !t._cacheable) && (t._dirty = !1, t._value = t.effect.run()), t._value;
}
set value(t) {
this._setter(t);
}
}
function ht(e, t, o = !1) {
let n, l;
const u = ve(e);
u ? (n = e, l = process.env.NODE_ENV !== "production" ? () => {
console.warn("Write operation failed: computed value is readonly");
} : W) : (n = e.get, l = e.set);
const a = new yt(n, l, u || !l, o);
return process.env.NODE_ENV !== "production" && t && !o && (a.effect.onTrack = t.onTrack, a.effect.onTrigger = t.onTrigger), a;
}
const gt = (e, t = {}) => {
_e(e) || Xe("[useLockscreen]", "You need to pass a ref param to this function");
const o = t.ns || te("popup"), n = ht(() => o.bm("parent", "hidden"));
if (!he || ne(document.body, n.value))
return;
let l = 0, u = !1, a = "0";
const r = () => {
setTimeout(() => {
Ke(document == null ? void 0 : document.body, n.value), u && document && (document.body.style.width = a);
}, 200);
};
q(e, (d) => {
if (!d) {
r();
return;
}
u = !ne(document.body, n.value), u && (a = document.body.style.width), l = st(o.namespace.value);
const v = document.documentElement.clientHeight < document.body.scrollHeight, f = Ue(document.body, "overflowY");
l > 0 && (v || f === "scroll") && u && (document.body.style.width = `calc(100% - ${l}px)`), xe(document.body, n.value);
}), Be(() => r());
}, ke = (e) => {
if (!e)
return { onClick: W, onMousedown: W, onMouseup: W };
let t = !1, o = !1;
return { onClick: (a) => {
t && o && e(a), t = o = !1;
}, onMousedown: (a) => {
t = a.target === a.currentTarget;
}, onMouseup: (a) => {
o = a.target === a.currentTarget;
} };
}, bt = oe({
mask: {
type: Boolean,
default: !0
},
customMaskEvent: {
type: Boolean,
default: !1
},
overlayClass: {
type: Q([
String,
Array,
Object
])
},
zIndex: {
type: Q([String, Number])
}
}), Ct = {
click: (e) => e instanceof MouseEvent
}, Et = "overlay";
var kt = H({
name: "ElOverlay",
props: bt,
emits: Ct,
setup(e, { slots: t, emit: o }) {
const n = te(Et), l = (d) => {
o("click", d);
}, { onClick: u, onMousedown: a, onMouseup: r } = ke(e.customMaskEvent ? void 0 : l);
return () => e.mask ? Y("div", {
class: [n.b(), e.overlayClass],
style: {
zIndex: e.zIndex
},
onClick: u,
onMousedown: a,
onMouseup: r
}, [C(t, "default")], K.STYLE | K.CLASS | K.PROPS, ["onClick", "onMouseup", "onMousedown"]) : Ne("div", {
class: e.overlayClass,
style: {
zIndex: e.zIndex,
position: "fixed",
top: "0px",
right: "0px",
bottom: "0px",
left: "0px"
}
}, [C(t, "default")]);
}
});
const wt = kt, we = Symbol("dialogInjectionKey"), Te = oe({
center: {
type: Boolean,
default: !1
},
alignCenter: {
type: Boolean,
default: !1
},
closeIcon: {
type: Qe
},
customClass: {
type: String,
default: ""
},
draggable: {
type: Boolean,
default: !1
},
fullscreen: {
type: Boolean,
default: !1
},
showClose: {
type: Boolean,
default: !0
},
title: {
type: String,
default: ""
}
}), Tt = {
close: () => !0
}, St = ["aria-label"], Dt = ["id"], Mt = H({ name: "ElDialogContent" }), _t = /* @__PURE__ */ H({
...Mt,
props: Te,
emits: Tt,
setup(e) {
const t = e, { t: o } = et(), { Close: n } = tt, { dialogRef: l, headerRef: u, bodyId: a, ns: r, style: d } = se(we), { focusTrapRef: v } = se(nt), f = it(v, l), y = L(() => t.draggable);
return rt(l, u, y), (i, m) => (F(), x("div", {
ref: s(f),
class: k([
s(r).b(),
s(r).is("fullscreen", i.fullscreen),
s(r).is("draggable", s(y)),
s(r).is("align-center", i.alignCenter),
{ [s(r).m("center")]: i.center },
i.customClass
]),
style: pe(s(d)),
tabindex: "-1"
}, [
j("header", {
ref_key: "headerRef",
ref: u,
class: k(s(r).e("header"))
}, [
C(i.$slots, "header", {}, () => [
j("span", {
role: "heading",
class: k(s(r).e("title"))
}, Ie(i.title), 3)
]),
i.showClose ? (F(), x("button", {
key: 0,
"aria-label": s(o)("el.dialog.close"),
class: k(s(r).e("headerbtn")),
type: "button",
onClick: m[0] || (m[0] = (T) => i.$emit("close"))
}, [
Y(s(qe), {
class: k(s(r).e("close"))
}, {
default: B(() => [
(F(), G(Oe(i.closeIcon || s(n))))
]),
_: 1
}, 8, ["class"])
], 10, St)) : J("v-if", !0)
], 2),
j("div", {
id: s(a),
class: k(s(r).e("body"))
}, [
C(i.$slots, "default")
], 10, Dt),
i.$slots.footer ? (F(), x("footer", {
key: 0,
class: k(s(r).e("footer"))
}, [
C(i.$slots, "footer")
], 2)) : J("v-if", !0)
], 6));
}
});
var Bt = /* @__PURE__ */ ge(_t, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/dialog/src/dialog-content.vue"]]);
const Nt = oe({
...Te,
appendToBody: {
type: Boolean,
default: !1
},
beforeClose: {
type: Q(Function)
},
destroyOnClose: {
type: Boolean,
default: !1
},
closeOnClickModal: {
type: Boolean,
default: !0
},
closeOnPressEscape: {
type: Boolean,
default: !0
},
lockScroll: {
type: Boolean,
default: !0
},
modal: {
type: Boolean,
default: !0
},
openDelay: {
type: Number,
default: 0
},
closeDelay: {
type: Number,
default: 0
},
top: {
type: String
},
modelValue: {
type: Boolean,
default: !1
},
modalClass: String,
width: {
type: [String, Number]
},
zIndex: {
type: Number
},
trapFocus: {
type: Boolean,
default: !1
}
}), It = {
open: () => !0,
opened: () => !0,
close: () => !0,
closed: () => !0,
[be]: (e) => Ge(e),
openAutoFocus: () => !0,
closeAutoFocus: () => !0
}, Ot = (e, t) => {
const n = Ae().emit, { nextZIndex: l } = ot();
let u = "";
const a = le(), r = le(), d = N(!1), v = N(!1), f = N(!1), y = N(e.zIndex || l());
let i, m;
const T = at("namespace", Je), $ = L(() => {
const g = {}, _ = `--${T.value}-dialog`;
return e.fullscreen || (e.top && (g[`${_}-margin-top`] = e.top), e.width && (g[`${_}-width`] = Z(e.width))), g;
}), P = L(() => e.alignCenter ? { display: "flex" } : {});
function R() {
n("opened");
}
function I() {
n("closed"), n(be, !1), e.destroyOnClose && (f.value = !1);
}
function V() {
n("close");
}
function O() {
m == null || m(), i == null || i(), e.openDelay && e.openDelay > 0 ? { stop: i } = ae(() => h(), e.openDelay) : h();
}
function S() {
i == null || i(), m == null || m(), e.closeDelay && e.closeDelay > 0 ? { stop: m } = ae(() => E(), e.closeDelay) : E();
}
function D() {
function g(_) {
_ || (v.value = !0, d.value = !1);
}
e.beforeClose ? e.beforeClose(g) : S();
}
function A() {
e.closeOnClickModal && D();
}
function h() {
he && (d.value = !0);
}
function E() {
d.value = !1;
}
function c() {
n("openAutoFocus");
}
function b() {
n("closeAutoFocus");
}
function M(g) {
var _;
((_ = g.detail) == null ? void 0 : _.focusReason) === "pointer" && g.preventDefault();
}
e.lockScroll && gt(d);
function Se() {
e.closeOnPressEscape && D();
}
return q(() => e.modelValue, (g) => {
g ? (v.value = !1, O(), f.value = !0, y.value = e.zIndex ? y.value++ : l(), Fe(() => {
n("open"), t.value && (t.value.scrollTop = 0);
})) : d.value && S();
}), q(() => e.fullscreen, (g) => {
t.value && (g ? (u = t.value.style.transform, t.value.style.transform = "") : t.value.style.transform = u);
}), me(() => {
e.modelValue && (d.value = !0, f.value = !0, O());
}), {
afterEnter: R,
afterLeave: I,
beforeLeave: V,
handleClose: D,
onModalClick: A,
close: S,
doClose: E,
onOpenAutoFocus: c,
onCloseAutoFocus: b,
onCloseRequested: Se,
onFocusoutPrevented: M,
titleId: a,
bodyId: r,
closed: v,
style: $,
overlayDialogStyle: P,
rendered: f,
visible: d,
zIndex: y
};
}, At = ["aria-label", "aria-labelledby", "aria-describedby"], Ft = H({
name: "ElDialog",
inheritAttrs: !1
}), Lt = /* @__PURE__ */ H({
...Ft,
props: Nt,
emits: It,
setup(e, { expose: t }) {
const o = e, n = Le();
ie({
scope: "el-dialog",
from: "the title slot",
replacement: "the header slot",
version: "3.0.0",
ref: "https://element-plus.org/en-US/component/dialog.html#slots"
}, L(() => !!n.title)), ie({
scope: "el-dialog",
from: "custom-class",
replacement: "class",
version: "2.3.0",
ref: "https://element-plus.org/en-US/component/dialog.html#attributes",
type: "Attribute"
}, L(() => !!o.customClass));
const l = te("dialog"), u = N(), a = N(), r = N(), {
visible: d,
titleId: v,
bodyId: f,
style: y,
overlayDialogStyle: i,
rendered: m,
zIndex: T,
afterEnter: $,
afterLeave: P,
beforeLeave: R,
handleClose: I,
onModalClick: V,
onOpenAutoFocus: O,
onCloseAutoFocus: S,
onCloseRequested: D,
onFocusoutPrevented: A
} = Ot(o, u);
$e(we, {
dialogRef: u,
headerRef: a,
bodyId: f,
ns: l,
rendered: m,
style: y
});
const h = ke(V), E = L(() => o.draggable && !o.fullscreen);
return t({
visible: d,
dialogContentRef: r
}), (c, b) => (F(), G(Pe, {
to: "body",
disabled: !c.appendToBody
}, [
Y(Re, {
name: "dialog-fade",
onAfterEnter: s($),
onAfterLeave: s(P),
onBeforeLeave: s(R),
persisted: ""
}, {
default: B(() => [
Ve(Y(s(wt), {
"custom-mask-event": "",
mask: c.modal,
"overlay-class": c.modalClass,
"z-index": s(T)
}, {
default: B(() => [
j("div", {
role: "dialog",
"aria-modal": "true",
"aria-label": c.title || void 0,
"aria-labelledby": c.title ? void 0 : s(v),
"aria-describedby": s(f),
class: k(`${s(l).namespace.value}-overlay-dialog`),
style: pe(s(i)),
onClick: b[0] || (b[0] = (...M) => s(h).onClick && s(h).onClick(...M)),
onMousedown: b[1] || (b[1] = (...M) => s(h).onMousedown && s(h).onMousedown(...M)),
onMouseup: b[2] || (b[2] = (...M) => s(h).onMouseup && s(h).onMouseup(...M))
}, [
Y(s(lt), {
loop: "",
trapped: s(d),
"focus-start-el": "container",
onFocusAfterTrapped: s(O),
onFocusAfterReleased: s(S),
onFocusoutPrevented: s(A),
onReleaseRequested: s(D)
}, {
default: B(() => [
s(m) ? (F(), G(Bt, ze({
key: 0,
ref_key: "dialogContentRef",
ref: r
}, c.$attrs, {
"custom-class": c.customClass,
center: c.center,
"align-center": c.alignCenter,
"close-icon": c.closeIcon,
draggable: s(E),
fullscreen: c.fullscreen,
"show-close": c.showClose,
title: c.title,
onClose: s(I)
}), Ye({
header: B(() => [
c.$slots.title ? C(c.$slots, "title", { key: 1 }) : C(c.$slots, "header", {
key: 0,
close: s(I),
titleId: s(v),
titleClass: s(l).e("title")
})
]),
default: B(() => [
C(c.$slots, "default")
]),
_: 2
}, [
c.$slots.footer ? {
name: "footer",
fn: B(() => [
C(c.$slots, "footer")
])
} : void 0
]), 1040, ["custom-class", "center", "align-center", "close-icon", "draggable", "fullscreen", "show-close", "title", "onClose"])) : J("v-if", !0)
]),
_: 3
}, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
], 46, At)
]),
_: 3
}, 8, ["mask", "overlay-class", "z-index"]), [
[He, s(d)]
])
]),
_: 3
}, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
], 8, ["disabled"]));
}
});
var $t = /* @__PURE__ */ ge(Lt, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/dialog/src/dialog.vue"]]);
const Ht = Ze($t);
export {
Ht as E,
Nt as a,
we as b,
bt as c,
It as d,
wt as e,
rt as f,
gt as g,
ke as h,
Ct as o,
Ot as u
};