@coderlt/form-designer
Version:
基于vue3的设计器,可视化开发页面表单
602 lines (601 loc) • 21.7 kB
JavaScript
import { defineComponent as q, inject as M, ref as T, computed as z, watch as K, onMounted as ge, openBlock as $, createElementBlock as V, Fragment as Y, withDirectives as ae, createElementVNode as N, normalizeClass as Z, toDisplayString as xe, unref as h, createVNode as F, createCommentVNode as G, vShow as le, createBlock as X, mergeProps as ye, withCtx as ee, useAttrs as be, provide as fe, onUnmounted as Se, resolveComponent as _e, createSlots as Ce, renderList as re, isRef as he, nextTick as we, normalizeStyle as ie, renderSlot as ke } from "vue";
import { u as de, p as W, a as ce, b as Ne, f as ve, c as $e, d as De, r as P, e as Be, h as ne, i as Te, j as Oe, k as Le, l as He, w as Re } from "./index-74b7090f.js";
import { _ as te } from "./icon.vue_vue_type_script_setup_true_lang-3f9e4127.js";
import { d as Ue } from "./vuedraggable.umd-6a5b6da9.js";
import "./_commonjsHelpers-c5d32002.js";
import "./_vue_commonjs-external-eb7fec7f.js";
const Ve = { class: "action-item whitespace-nowrap" }, Ae = /* @__PURE__ */ q({
__name: "previewWidgets",
setup(j) {
const v = M("pageManager", {}), g = M("pageSchema"), s = M("designer"), b = T(null), m = T(null), a = T(null), D = T(!1), O = T(!1), L = T(!0), o = T("top"), { canvasScale: f, disabledZoom: d } = de();
let t = null;
const C = z(() => {
var _, k, u, B;
const e = v.componentInstances.value, n = (_ = s.state.checkedNode) == null ? void 0 : _.id, l = W.getComponentConfingByType((k = s.state.checkedNode) == null ? void 0 : k.type) ?? null;
if (!n || !(e != null && e[n]))
return null;
const i = e[n].getComponentAttr("hideCopy"), y = e[n].getComponentAttr("hideDel");
return {
hideCopy: i ?? ((u = l == null ? void 0 : l.defaultSchema) == null ? void 0 : u.hideCopy),
hideDel: y ?? ((B = l == null ? void 0 : l.defaultSchema) == null ? void 0 : B.hideDel)
};
}), A = z(() => {
var y, _, k, u, B;
const e = v.componentInstances.value, n = (y = s.state.checkedNode) == null ? void 0 : y.id, l = W.getComponentConfingByType((_ = s.state.checkedNode) == null ? void 0 : _.type) ?? null;
if (!n || !(e != null && e[n]))
return null;
if (l != null && l.defaultSchema.input && ((k = s.state.checkedNode) == null ? void 0 : k.noFormItem) !== !0)
return (u = e[n + "formItem"]) == null ? void 0 : u.$el;
const i = e[n];
return ((B = i == null ? void 0 : i.$el) == null ? void 0 : B.nodeName) === "#text" ? null : i == null ? void 0 : i.$el;
}), H = z(() => {
var y, _, k, u;
const e = v.componentInstances.value, n = (y = s.state.hoverNode) == null ? void 0 : y.id, l = W.getComponentConfingByType((_ = s.state.hoverNode) == null ? void 0 : _.type) ?? null;
if (!n || !(e != null && e[n]))
return null;
if (l != null && l.defaultSchema.input && ((k = s.state.hoverNode) == null ? void 0 : k.noFormItem) !== !0)
return (u = e[n + "formItem"]) == null ? void 0 : u.$el;
const i = e[n];
return (i == null ? void 0 : i.$el.nodeName) === "#text" ? null : i == null ? void 0 : i.$el;
}), { mutationObserver: R, observerConfig: I } = U(r), { startTimedQuery: Q, stopTimedQuery: S } = Ne(r);
K(() => A.value, (e) => {
if (e) {
D.value = !0, R.observe(e, I);
const n = e.parentNode;
n && (n.ondragstart = () => {
L.value = !1, Q();
}, n.ondragend = () => {
L.value = !0, S();
}), r();
} else
D.value = !1;
});
const { mutationObserver: x, observerConfig: w } = U(p);
K(() => H.value, (e) => {
e && (x.observe(e, w), p());
});
let c = 0;
K(() => {
var e;
return (e = s.state.hoverNode) == null ? void 0 : e.id;
}, (e) => {
if (e) {
O.value = !0, clearTimeout(c);
return;
}
c = setTimeout(() => {
O.value = !1;
}, 300);
});
function r() {
const e = A.value;
if (!e)
return;
const { top: n, left: l } = (t == null ? void 0 : t.getBoundingClientRect()) ?? { top: 0, left: 0 }, { top: i, left: y, width: _, height: k } = e.getBoundingClientRect(), u = d.value ? 1 : f.value, B = i - n + ((t == null ? void 0 : t.scrollTop) ?? 0) * u, se = y - l + ((t == null ? void 0 : t.scrollLeft) ?? 0) * u, J = k / u;
b.value && (b.value.style.width = `${_ / u}px`, b.value.style.height = `${J}px`, b.value.style.top = `${B / u}px`, b.value.style.left = `${se / u}px`), a.value && (B < 45 && J < 100 ? (a.value.style.top = "", a.value.style.bottom = "-30px", a.value.style["border-radius"] = "0px 0px 4px 4px", o.value = "bottom") : B < 45 ? (a.value.style.top = "0px", a.value.style["border-radius"] = "0px 0px 4px 0", o.value = "center") : (a.value.style.top = "-30px", a.value.style["border-radius"] = "4px 4px 0px 0px", o.value = "top"));
}
function p() {
var J, ue;
const e = H.value;
if (!e)
return;
const { top: n, left: l } = (t == null ? void 0 : t.getBoundingClientRect()) ?? { top: 0, left: 0 }, { top: i, left: y, width: _, height: k } = ((J = e.getBoundingClientRect) == null ? void 0 : J.call(e)) ?? ((ue = e.nextElementSibling) == null ? void 0 : ue.getBoundingClientRect()), u = d.value ? 1 : f.value, B = i - n + ((t == null ? void 0 : t.scrollTop) ?? 0) * u, se = y - l + ((t == null ? void 0 : t.scrollLeft) ?? 0) * u;
m.value && (m.value.style.width = `${_ / u}px`, m.value.style.height = `${k / u}px`, m.value.style.top = `${B / u}px`, m.value.style.left = `${se / u}px`);
}
function U(e) {
const n = window.MutationObserver, l = {
childList: !0,
attributes: !0,
subtree: !0
};
return {
mutationObserver: new n(e),
observerConfig: l
};
}
function oe() {
var _;
const e = ve(g.schemas, ((_ = s.state.checkedNode) == null ? void 0 : _.id) ?? "root");
if (!e)
return !1;
const { list: n, schema: l, index: i } = e;
if (l.isUnique && $e(
g.schemas,
(u) => u.id === (l == null ? void 0 : l.id),
!0
))
return console.error("data已存在，不能重复添加"), !1;
const y = De(l);
n.splice(i + 1, 0, y), s.setCheckedNode(y), P.push(g.schemas, "复制组件");
}
function E(e) {
e.forEach((n) => {
n.isUnique && s.delectDisabledNode(n.id), E(n.children || []);
});
}
function me() {
var y;
const e = ve(g.schemas, ((y = s.state.checkedNode) == null ? void 0 : y.id) ?? "root");
if (!e)
return !1;
let { list: n, schema: l, index: i } = e;
n.splice(i, 1), i === n.length && i--, s.setCheckedNode(n[i]), P.push(g.schemas, "删除组件"), s.delectDisabledNode(l.id), E(l.children || []);
}
return ge(() => {
t = document.querySelector(".epic-edit-range"), t == null || t.addEventListener("scroll", () => {
r();
}), ce(A, r), ce(H, r);
}), (e, n) => {
var l, i, y, _, k, u, B;
return $(), V(Y, null, [
ae(N("div", {
ref_key: "selectorRef",
ref: b,
class: Z(["checked-widget absolute pointer-events-none z-20", o.value + " " + (L.value ? "transition-all" : "")])
}, [
N("div", {
class: "action-box",
ref_key: "actionBoxRef",
ref: a
}, [
N("div", Ve, xe((i = h(W).getComponentConfingByType(((l = h(s).state.checkedNode) == null ? void 0 : l.type) ?? "")) == null ? void 0 : i.defaultSchema.label), 1),
(y = C.value) != null && y.hideCopy ? G("", !0) : ($(), V("div", {
key: 0,
title: "复制",
class: "action-item pointer-events-auto",
onClick: oe
}, [
F(h(te), { name: "icon-fuzhi3" })
])),
(_ = C.value) != null && _.hideDel ? G("", !0) : ($(), V("div", {
key: 1,
title: "删除",
class: "action-item pointer-events-auto",
onClick: me
}, [
F(h(te), { name: "icon-shanchu1" })
]))
], 512)
], 2), [
[le, D.value && ((k = h(s).state.checkedNode) == null ? void 0 : k.id) !== "root"]
]),
ae(N("div", {
ref_key: "hoverWidgetRef",
ref: m,
class: "hover-widget absolute transition-all pointer-events-none z-998"
}, null, 512), [
[le, O.value && ((u = h(s).state.checkedNode) == null ? void 0 : u.id) !== ((B = h(s).state.hoverNode) == null ? void 0 : B.id)]
])
], 64);
};
}
}), Fe = /* @__PURE__ */ q({
name: "EditNodeItem",
__name: "editNodeItem",
props: {
schemas: {}
},
emits: ["update:schemas"],
setup(j, { emit: v }) {
const g = j, s = M("designer"), b = M("pageSchema"), m = z({
get() {
return g.schemas;
},
set(o) {
v("update:schemas", o);
}
});
function a(o) {
s.setCheckedNode(m.value[o]), s.setDisableHover(!0);
}
function D() {
s.setDisableHover(), P.push(b.schemas, "拖拽组件");
}
function O() {
P.push(b.schemas, "插入组件");
}
function L(o) {
return o.relatedContext.element ? !o.relatedContext.element.freezePos : !0;
}
return (o, f) => ($(), X(h(Ue), ye({
modelValue: m.value,
"onUpdate:modelValue": f[0] || (f[0] = (d) => m.value = d),
"item-key": "id",
"component-data": {
type: "transition-group"
},
class: "draggable-range"
}, {
animation: 200,
group: "edit-draggable",
handle: ".draggable-item",
filter: ".filter-item",
ghostClass: "moveing"
}, {
move: L,
onStart: f[1] || (f[1] = (d) => a(d.oldIndex)),
onEnd: f[2] || (f[2] = (d) => D()),
onAdd: f[3] || (f[3] = (d) => {
a(d.newIndex), O();
})
}), {
item: ee(({ element: d, index: t }) => [
($(), V("div", {
class: Z(["widget-box", {
"draggable-item": !d.freezePos,
"form-box": d.id === "union-form"
}]),
key: t
}, [
F(pe, { schema: d }, null, 8, ["schema"])
], 2))
]),
_: 1
}, 16, ["modelValue"]));
}
}), pe = /* @__PURE__ */ q({
name: "ENodeItem",
__name: "nodeItem",
props: {
schema: {},
name: {}
},
setup(j) {
const v = j, g = be(), s = M("designer"), b = M("pageManager", {}), m = T(null);
fe("nodeAttrs", g);
const a = z(() => {
var C, A, H, R, I;
const o = b.componentInstances.value, f = (C = v.schema) == null ? void 0 : C.id, d = W.getComponentConfingByType((A = v.schema) == null ? void 0 : A.type) ?? null;
if (!f || !(o != null && o[f]))
return null;
if (d != null && d.defaultSchema.input && ((H = v.schema) == null ? void 0 : H.noFormItem) !== !0)
return (R = o[f + "formItem"]) == null ? void 0 : R.$el;
const t = o[f];
return ((I = t == null ? void 0 : t.$el) == null ? void 0 : I.nodeName) === "#text" ? null : t == null ? void 0 : t.$el;
});
K(() => a.value, (o) => {
o == null || o.addEventListener("click", D, !1), o == null || o.addEventListener("mouseover", O, !1), o == null || o.addEventListener("mouseout", L, !1);
}), Se(() => {
var o, f, d;
(o = a.value) == null || o.removeEventListener("click", D, !1), (f = a.value) == null || f.removeEventListener("mouseover", O, !1), (d = a.value) == null || d.removeEventListener("mouseout", L, !1);
});
function D(o) {
o.stopPropagation(), s.setCheckedNode(v.schema);
}
function O(o) {
v.schema.type !== "page" && (o.stopPropagation(), s.setHoverNode(v.schema));
}
function L(o) {
o.stopPropagation(), s.setHoverNode(null);
}
return (o, f) => {
var t;
const d = _e("ENodeItem");
return $(), X(h(Be), {
ref_key: "nodeRef",
ref: m,
record: v.schema
}, Ce({ _: 2 }, [
(t = v.schema) != null && t.childImmovable ? {
name: "edit-node",
fn: ee(() => [
($(!0), V(Y, null, re(v.schema.children, (C) => ($(), X(d, {
key: C.id,
schema: C
}, null, 8, ["schema"]))), 128))
]),
key: "0"
} : {
name: "edit-node",
fn: ee(() => [
v.schema.children ? ($(), X(Fe, {
key: 0,
schemas: v.schema.children,
"onUpdate:schemas": f[0] || (f[0] = (C) => v.schema.children = C)
}, null, 8, ["schemas"])) : G("", !0)
]),
key: "1"
}
]), 1032, ["record"]);
};
}
}), Me = { class: "edit-toolbar flex items-center justify-between px-4 mx-1" }, ze = { class: "flex-1 h-full flex items-center" }, Ie = ["title", "onClick"], je = { class: "flex-1 h-full flex items-center justify-center" }, Pe = ["title", "onClick"], We = { class: "flex-1 h-full flex items-center justify-end" }, Ze = {
key: 0,
class: "flex items-center ml-12px"
}, qe = { class: "pr-8px w-82px cursor-pointer" }, Qe = { class: "w-90px cursor-pointer" }, Ee = /* @__PURE__ */ q({
__name: "toolbar",
setup(j) {
const v = W.getComponent("slider"), g = W.getComponent("select"), { canvasScale: s, disabledZoom: b } = de(), m = T("pc"), a = M("pageSchema"), D = M("designer"), O = [
{
icon: "icon-a-diannaotoubu",
title: "pc",
key: "pc"
},
{
icon: "icon-a-pingbantoubu",
title: "平板",
key: "pad"
},
{
icon: "icon-a-shoujitoubu",
title: "手机",
key: "mobile"
}
], L = P.recordList, o = P.undoList, f = z(() => [
{
icon: "icon-daima1",
title: "导出数据",
on: () => I()
},
{
icon: "icon-shangchuan1",
title: "导入数据",
on: Q
},
{
icon: "icon-shanchu1",
title: "清空",
on: R
},
{
icon: "icon-chexiao2x",
title: "撤销",
on: A,
disabled: !L.value.length
},
{
icon: "icon-fanhui2x",
title: "重做",
on: H,
disabled: !o.value.length
}
]), d = T(null), t = z({
get() {
return `${(s.value * 100).toFixed(0)}%`;
},
set(c) {
s.value = Number(c);
}
}), C = [
{
label: "60%",
value: "0.6"
},
{
label: "80%",
value: "0.8"
},
{
label: "100%",
value: "1.0"
},
{
label: "120%",
value: "1.2"
},
{
label: "140%",
value: "1.4"
}
];
function A() {
const c = P.undo();
c && (ne(a.schemas, c), D.setCheckedNode(a.schemas[0]));
}
function H() {
const c = P.redo();
c && (ne(a.schemas, c), D.setCheckedNode(a.schemas[0]));
}
function R() {
D.reset();
}
function I(c = "epic-data.json") {
let r = "data:text/json;charset=utf-8,";
r += JSON.stringify(a, null, 2);
var p = encodeURI(r), U = document.createElement("a");
U.setAttribute("href", p), U.setAttribute("download", c), U.click();
}
function Q() {
var c;
(c = d.value) == null || c.click();
}
function S(c) {
var U;
const r = (U = c.target.files) == null ? void 0 : U[0];
if (!r)
return;
c.target.value = null;
const p = new FileReader();
p.readAsText(r), p.onload = (oe) => {
var E;
x((E = oe.target) == null ? void 0 : E.result);
};
}
function x(c) {
try {
let r = JSON.parse(c ?? "");
r.schemas || (r = Te(r)), ne(a, r);
} catch (r) {
console.error(r);
}
}
function w(c) {
m.value = c;
const r = {
pc: {},
pad: {
width: "800px"
},
mobile: {
width: "420px"
}
};
a.canvas = r[c];
}
return (c, r) => ($(), V("div", Me, [
N("div", ze, [
($(!0), V(Y, null, re(f.value, (p, U) => ($(), V("div", {
title: p.title,
class: Z(["action-item h-90% px-10px flex items-center hover:bg-gray-50 cursor-pointer", { disabled: p.disabled }]),
key: U,
onClick: p.on
}, [
F(h(te), {
name: p.icon
}, null, 8, ["name"])
], 10, Ie))), 128))
]),
ae(N("input", {
type: "file",
ref_key: "fileRef",
ref: d,
onChange: S
}, null, 544), [
[le, !1]
]),
N("div", je, [
($(), V(Y, null, re(O, (p) => N("div", {
title: p.title,
class: Z(["device-item h-90% px-10px flex items-center hover:bg-gray-50 cursor-pointer", { checked: p.key === m.value }]),
key: p.key,
onClick: (U) => w(p.key)
}, [
F(h(te), {
name: p.icon
}, null, 8, ["name"])
], 10, Pe)), 64))
]),
N("div", We, [
h(b) ? G("", !0) : ($(), V("div", Ze, [
N("div", qe, [
F(h(g), {
value: t.value,
"onUpdate:value": r[0] || (r[0] = (p) => t.value = p),
modelValue: t.value,
"onUpdate:modelValue": r[1] || (r[1] = (p) => t.value = p),
options: C,
size: "small"
}, null, 8, ["value", "modelValue"])
]),
N("div", Qe, [
F(h(v), {
min: 0.6,
max: 1.4,
step: 0.01,
tooltip: !1,
value: h(s),
"onUpdate:value": r[2] || (r[2] = (p) => he(s) ? s.value = p : null),
modelValue: h(s),
"onUpdate:modelValue": r[3] || (r[3] = (p) => he(s) ? s.value = p : null)
}, null, 8, ["value", "modelValue"])
])
]))
])
]));
}
}), Je = { class: "h-full flex flex-col relative" }, Ke = ["draggable"], Xe = /* @__PURE__ */ q({
__name: "editScreenContainer",
setup(j) {
const v = M("pageSchema"), g = T(null), s = T(null), { pressSpace: b, disabledZoom: m } = de(), { handleElementDragStart: a, handleElementDrag: D, handleElementDragEnd: O } = Oe(g), { width: L, height: o } = Le(g), { canvasScale: f, handleZoom: d } = He(s);
let t = 0, C = 0;
const A = T({}), H = T({}), R = z(() => {
var w, c;
const S = parseFloat(((w = v.canvas) == null ? void 0 : w.width) ?? "0"), x = parseFloat(((c = v.canvas) == null ? void 0 : c.height) ?? "0");
return { width: S, height: x };
});
Re(L, I), K(() => {
var S;
return (S = v.canvas) == null ? void 0 : S.width;
}, I);
function I() {
if (m.value) {
H.value = { width: t + "px", height: C + "px", transform: "translate(0px, 20px)" };
return;
}
let S = R.value.width || t, x = R.value.height || C;
A.value = { width: L.value + S + "px", height: o.value + x + "px" }, H.value = { width: S + "px", height: x + "px" }, Q();
}
function Q() {
we(() => {
let S = R.value.width || t;
const w = (R.value.height || C) / 2, c = S / 2;
g.value.scrollTo(c, w);
});
}
return ce(g, ([{ contentRect: S }]) => {
if (t = S.width - 60, C = S.height - 80, !m.value) {
const x = (S.width - 20) / R.value.width;
x < 1.2 && (f.value = x);
}
I();
}), (S, x) => ($(), V("div", Je, [
F(Ee),
N("div", {
ref_key: "editScreenContainerRef",
ref: g,
class: Z(["flex-1 overflow-auto overflow-y-hidden epic-edit-screen-container", { "cursor-grab": h(b) }]),
draggable: h(b),
onWheel: x[0] || (x[0] = //@ts-ignore
(...w) => h(d) && h(d)(...w)),
onDragstart: x[1] || (x[1] = //@ts-ignore
(...w) => h(a) && h(a)(...w)),
onDragend: x[2] || (x[2] = //@ts-ignore
(...w) => h(O) && h(O)(...w)),
onDrag: x[3] || (x[3] = //@ts-ignore
(...w) => h(D) && h(D)(...w))
}, [
N("div", {
id: "canvasContainer",
class: "flex items-center justify-center",
style: ie(A.value)
}, [
N("div", {
ref_key: "draggableElRef",
ref: s,
class: "transition-all"
}, [
N("div", {
class: Z({ "pointer-events-none": h(b) }),
style: ie(H.value)
}, [
ke(S.$slots, "default")
], 6)
], 512)
], 4)
], 42, Ke)
]));
}
}), Ye = { class: "epic-edit-canvas" }, at = /* @__PURE__ */ q({
__name: "index",
props: {
disabled: { type: Boolean, default: !1 }
},
setup(j) {
const v = j;
fe("disabled", z(() => v.disabled));
const g = M("pageSchema"), s = z(() => g.schemas[0]), b = z(() => {
var m, a;
return {
width: ((m = g.canvas) == null ? void 0 : m.width) ?? "100%",
height: ((a = g.canvas) == null ? void 0 : a.height) ?? "100%"
};
});
return (m, a) => ($(), V("section", Ye, [
F(Xe, null, {
default: ee(() => [
N("div", {
class: "epic-edit-range rounded-md overflow-auto relative",
style: ie(b.value)
}, [
F(pe, { schema: s.value }, null, 8, ["schema"]),
F(Ae)
], 4)
]),
_: 1
})
]));
}
});
export {
at as default
};