@coderlt/form-designer
Version:
基于vue3的设计器,可视化开发页面表单
1,948 lines (1,946 loc) • 367 kB
JavaScript
var Dn = Object.defineProperty;
var Bn = (e, t, l) => t in e ? Dn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l;
var he = (e, t, l) => (Bn(e, typeof t != "symbol" ? t + "" : t, l), l);
import { defineAsyncComponent as qn, effectScope as Hn, watch as L, nextTick as me, getCurrentScope as To, onScopeDispose as Io, unref as g, computed as C, ref as $, getCurrentInstance as ie, onMounted as Be, defineComponent as W, reactive as ge, inject as J, useAttrs as Wn, provide as le, shallowRef as _t, onUnmounted as Ao, resolveComponent as Un, openBlock as I, createBlock as ue, mergeProps as Xe, withCtx as G, resolveDynamicComponent as Ut, createVNode as F, normalizeProps as Ol, guardReactiveProps as Tl, renderSlot as Y, createCommentVNode as nt, useSlots as sl, Suspense as zo, createElementVNode as T, createElementBlock as V, Fragment as Ro, renderList as Kn, normalizeClass as oe, toRaw as Il, watchEffect as Vo, readonly as No, warn as Gn, isVNode as Kt, toRefs as Lo, onBeforeUnmount as Fo, onUpdated as Mo, normalizeStyle as Gt, createTextVNode as ko, toDisplayString as Yt, TransitionGroup as Yn, Transition as Jn, toHandlers as Zn, withKeys as Qn, withModifiers as Xn, withDirectives as jo, vShow as Do, h as ea } from "vue";
const de = (e, t) => qn({
loader: e,
loadingComponent: t,
delay: 80
});
function $t(e = 10) {
return Math.random().toString(36).substring(2, 2 + e);
}
function ta(e) {
return e.charAt(0).toUpperCase() + e.slice(1);
}
function Oe(e, t = /* @__PURE__ */ new WeakMap()) {
if (typeof e != "object" || e === null)
return e;
if (t.has(e))
return t.get(e);
if (Array.isArray(e)) {
const o = e.map((n) => Oe(n, t));
return t.set(e, o), o;
}
const l = {};
return t.set(e, l), Object.keys(e).forEach((o) => {
l[o] = Oe(e[o], t);
}), l;
}
function ly(e) {
const [t] = na([Oe(e)], (l) => {
const o = {
...l
};
return l.isUnique ? (l.id || console.warn("唯一组件id不建议为空"), o.id = l.id || `${l.type}_${$t(8)}`) : (o.id = `${l.type}_${$t(8)}`, o.field = o.id), o;
});
return t;
}
function at(e, t) {
for (const [l, o] of Object.entries(t)) {
const n = e == null ? void 0 : e[l];
n && o && typeof n == "object" && typeof o == "object" ? at(n, o) : e[l] = o;
}
Object.keys(e).reverse().forEach((l) => {
t.hasOwnProperty(l) || (Array.isArray(t) ? e.splice(l, 1) : delete e[l]);
});
}
function la(e, t, l = /* @__PURE__ */ new WeakMap()) {
const o = (n) => {
if (Array.isArray(n))
return n.map(o);
if (typeof n == "object" && n !== null) {
if (l.has(n))
return "[Circular]";
l.set(n, !0);
const a = Object.keys(n).sort(), r = {};
return a.forEach((i) => {
r[i] = o(n[i]);
}), l.delete(n), r;
} else
return n;
};
return JSON.stringify(o(e)) === JSON.stringify(o(t));
}
function oa(e, t) {
const l = [];
let o = !1;
function n(a) {
if (l.push(a), a.id === t && (o = !0), !o && a.children != null && a.children.length > 0)
for (let r = 0; r < a.children.length && (n(a.children[r]), !o); r++)
;
if (!o && a.slots)
for (let r in a.slots)
for (let i = 0; i < a.slots[r].length && (n(a.slots[r][i]), !o); i++)
;
o || l.pop();
}
return e.forEach(n), o || console.error(`没有查询到id为${t}的节点`), l;
}
function oy(e, t) {
const l = e.split(".");
let o = t;
for (let n = 0; n < l.length; n++)
if (o = o[l[n]], typeof o > "u")
return;
return o;
}
function ny(e, t, l) {
const o = t.split(".");
let n = l;
o.forEach((a, r) => {
if (r === o.length - 1) {
n[a] = e;
return;
}
n = n[a] ?? (n[a] = {});
});
}
function ay(e, t = "default") {
const l = xt(
e,
(n) => n.type === "form" && n.name === t,
!0
);
return xt(
(l == null ? void 0 : l.children) ?? [],
(n) => !!n.input,
!1,
(n) => n.type !== "subform"
).map((n) => n.field);
}
function xt(e, t, l = !1, o) {
const n = [], a = [...e];
for (; a.length; ) {
const r = a.pop();
if (r != null && r.children && (!o || o(r)) && a.push(...r.children), r != null && r.slots && (!o || o(r)))
for (let i in r.slots)
a.push(...r.slots[i]);
if (t(r) && (n.push(r), l))
return r;
}
return l ? !1 : n;
}
function na(e, t, l) {
const o = [...e];
for (; o.length; ) {
const n = o.pop();
if (n != null && n.children && (!l || l(n)) && o.push(...n.children), n != null && n.slots && (!l || l(n)))
for (let a in n.slots)
o.push(...n.slots[a]);
at(n, t(n));
}
return e;
}
function ry(e, t) {
const l = xt(
e,
(o) => o.id === t,
!0
);
if (!l)
throw new Error(`没有查询到id为${t}的节点`);
return l;
}
function iy(e, t) {
const l = [{ type: "", children: e }];
let o = 0, n = null;
if (xt(
l,
(a) => {
if (n = a.children ?? null, !n) {
if (a != null && a.slots)
for (let r in a.slots) {
n = a.slots[r];
for (let i = 0; i < n.length; i++)
if (n[i].id === t)
return o = i, !0;
}
return !1;
}
for (let r = 0; r < n.length; r++)
if (n[r].id === t)
return o = r, !0;
return !1;
},
!0
), !n)
throw new Error(`没有查询到id为${t}的节点`);
return {
list: n,
schema: n[o],
index: o
};
}
function sy(e) {
const t = {
schemas: [
{
type: "page",
id: "root",
label: "页面",
children: [
{
label: "表单",
type: "form",
icon: "epic-icon-daibanshixiang",
labelWidth: e.config.labelWidth || 100,
name: "default",
componentProps: {
layout: e.config.layout || "horizontal",
labelWidth: e.config.labelWidth || 100,
labelLayout: e.config.labelLayout === "flex" ? "fixed" : "flex",
labelCol: e.config.labelCol || { span: 5 },
wrapperCol: e.config.wrapperCol || { span: 19 },
hideRequiredMark: e.config.hideRequiredMark || !1,
colon: e.config.colon || !0,
labelAlign: e.config.labelAlign || "right",
size: e.config.size || "middle"
},
children: [],
id: "form_" + $t()
}
],
componentProps: {
style: {
padding: "16px"
}
}
}
],
script: e.script || ""
};
return t.schemas[0].children[0].children = Ze(
e.list
), t;
}
function Ze(e, t) {
return e.map((l) => {
var s, u, p;
let o = l.type ?? "";
const n = l.options ?? {}, a = (d, f) => {
o === d && (o = f, n.defaultValue && (n.defaultValue = JSON.parse(n.defaultValue)));
};
if (a("uploadImg", "upload-image"), a("uploadFile", "upload-file"), o === "date" && n.range && (n.type = "daterange", delete n.range), (o === "date" || o === "time") && (n.valueFormat = n.format), o === "textarea") {
const { minRows: d, maxRows: f } = n;
n.autoSize = { minRows: d, maxRows: f }, delete n.minRows, delete n.maxRows;
}
o === "number" && !n.precision && delete n.precision, n.width && (n.style = { width: n.width }, delete n.width), o === "grid" && (o = "row", l.childImmovable = !0), t && t.type === "grid" && (o = "col", n.span = l.span, l.key = $t());
const r = {
label: l.label,
type: o,
icon: l.icon || "",
field: l.model,
componentProps: n,
childImmovable: l.childImmovable,
id: l.key
};
return (n.noFormItem || !n.showLabel) && (r.noFormItem = !0, delete n.noFormItem, delete n.showLabel), n.clearable && (n.allowClear = !0, delete n.clearable), [
"input",
"textarea",
"number",
"password",
"select",
"cascader",
"checkbox",
"radio",
"date",
"time",
"slider",
"switch",
"color-picker",
"upload-file",
"upload-image"
].includes(o) && (r.input = !0, ((u = (s = l.rules) == null ? void 0 : s[0]) == null ? void 0 : u.required) === !1 && l.rules.shift(), ((p = l.rules) == null ? void 0 : p.length) > 0 && (r.rules = l.rules)), l.list && (r.children = Ze(l.list, l)), l.columns && (r.children = Ze(l.columns, l)), l.trs && (r.children = Ze(l.trs, l)), l.tds && (r.children = Ze(l.tds, l)), r;
});
}
function pl(e) {
return To() ? (Io(e), !0) : !1;
}
function aa(e) {
let t = 0, l, o;
const n = () => {
t -= 1, o && t <= 0 && (o.stop(), l = void 0, o = void 0);
};
return (...a) => (t += 1, l || (o = Hn(!0), l = o.run(() => e(...a))), pl(n), l);
}
function cl(e) {
return typeof e == "function" ? e() : g(e);
}
const ra = typeof window < "u", ia = () => {
};
function py(e, t, l) {
const o = L(e, (...n) => (me(() => o()), t(...n)), l);
}
function Me(e) {
var t;
const l = cl(e);
return (t = l == null ? void 0 : l.$el) != null ? t : l;
}
const Ot = ra ? window : void 0;
function sa(...e) {
let t, l, o, n;
if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([l, o, n] = e, t = Ot) : [t, l, o, n] = e, !t)
return ia;
Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
const a = [], r = () => {
a.forEach((p) => p()), a.length = 0;
}, i = (p, d, f, h) => (p.addEventListener(d, f, h), () => p.removeEventListener(d, f, h)), s = L(
() => [Me(t), cl(n)],
([p, d]) => {
r(), p && a.push(
...l.flatMap((f) => o.map((h) => i(p, f, h, d)))
);
},
{ immediate: !0, flush: "post" }
), u = () => {
s(), r();
};
return pl(u), u;
}
var pa = Object.defineProperty, ca = Object.defineProperties, da = Object.getOwnPropertyDescriptors, Al = Object.getOwnPropertySymbols, ua = Object.prototype.hasOwnProperty, fa = Object.prototype.propertyIsEnumerable, zl = (e, t, l) => t in e ? pa(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Bo = (e, t) => {
for (var l in t || (t = {}))
ua.call(t, l) && zl(e, l, t[l]);
if (Al)
for (var l of Al(t))
fa.call(t, l) && zl(e, l, t[l]);
return e;
}, qo = (e, t) => ca(e, da(t));
function ma(e) {
return typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
}
function Ho(...e) {
let t, l, o = {};
e.length === 3 ? (t = e[0], l = e[1], o = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, l = e[0], o = e[1]) : (t = e[0], l = e[1]) : (t = !0, l = e[0]);
const {
target: n = Ot,
eventName: a = "keydown",
passive: r = !1,
dedupe: i = !1
} = o, s = ma(t);
return sa(n, a, (p) => {
p.repeat && cl(i) || s(p) && l(p);
}, r);
}
function Mt(e, t, l = {}) {
return Ho(e, t, qo(Bo({}, l), { eventName: "keydown" }));
}
function kt(e, t, l = {}) {
return Ho(e, t, qo(Bo({}, l), { eventName: "keyup" }));
}
function ba() {
const e = $(!1);
return ie() && Be(() => {
e.value = !0;
}), e;
}
function ha(e) {
const t = ba();
return C(() => (t.value, !!e()));
}
var Rl = Object.getOwnPropertySymbols, ya = Object.prototype.hasOwnProperty, va = Object.prototype.propertyIsEnumerable, ga = (e, t) => {
var l = {};
for (var o in e)
ya.call(e, o) && t.indexOf(o) < 0 && (l[o] = e[o]);
if (e != null && Rl)
for (var o of Rl(e))
t.indexOf(o) < 0 && va.call(e, o) && (l[o] = e[o]);
return l;
};
function Pa(e, t, l = {}) {
const o = l, { window: n = Ot } = o, a = ga(o, ["window"]);
let r;
const i = ha(() => n && "ResizeObserver" in n), s = () => {
r && (r.disconnect(), r = void 0);
}, u = C(
() => Array.isArray(e) ? e.map((f) => Me(f)) : [Me(e)]
), p = L(
u,
(f) => {
if (s(), i.value && n) {
r = new ResizeObserver(t);
for (const h of f)
h && r.observe(h, a);
}
},
{ immediate: !0, flush: "post", deep: !0 }
), d = () => {
s(), p();
};
return pl(d), {
isSupported: i,
stop: d
};
}
function cy(e, t = { width: 0, height: 0 }, l = {}) {
const { window: o = Ot, box: n = "content-box" } = l, a = C(() => {
var s, u;
return (u = (s = Me(e)) == null ? void 0 : s.namespaceURI) == null ? void 0 : u.includes("svg");
}), r = $(t.width), i = $(t.height);
return Pa(
e,
([s]) => {
const u = n === "border-box" ? s.borderBoxSize : n === "content-box" ? s.contentBoxSize : s.devicePixelContentBoxSize;
if (o && a.value) {
const p = Me(e);
if (p) {
const d = o.getComputedStyle(p);
r.value = Number.parseFloat(d.width), i.value = Number.parseFloat(d.height);
}
} else if (u) {
const p = Array.isArray(u) ? u : [u];
r.value = p.reduce((d, { inlineSize: f }) => d + f, 0), i.value = p.reduce((d, { blockSize: f }) => d + f, 0);
} else
r.value = s.contentRect.width, i.value = s.contentRect.height;
},
l
), L(
() => Me(e),
(s) => {
r.value = s ? t.width : 0, i.value = s ? t.height : 0;
}
), {
width: r,
height: i
};
}
function wa() {
const e = $(1), t = $(!1), { pressSpace: l, pressShift: o, pressCtrl: n } = _a();
return {
canvasScale: e,
pressSpace: l,
pressShift: o,
pressCtrl: n,
disabledZoom: t
};
}
const dl = aa(wa);
function _a() {
const e = $(!1), t = $(!1), l = $(!1);
return Mt(" ", (o) => {
var n = o.target;
["INPUT", "TEXTAREA"].includes(n.tagName) || o.preventDefault(), e.value = !0;
}), kt(" ", () => {
e.value = !1;
}), Mt("Shift", (o) => {
o.preventDefault(), t.value = !0;
}), kt("Shift", () => {
t.value = !1;
}), Mt("Control", (o) => {
o.preventDefault(), l.value = !0;
}), kt("Control", () => {
l.value = !1;
}), { pressSpace: e, pressShift: t, pressCtrl: l };
}
function dy(e) {
const { pressSpace: t } = dl();
let l = 0, o = 0;
function n(i) {
var s;
l = i.x, o = i.y, (s = i.dataTransfer) == null || s.setDragImage(document.createElement("div"), 0, 0);
}
function a(i) {
if (i.preventDefault(), !i.x || !i.y || !t.value)
return;
const s = i.x - l, u = i.y - o;
l = i.x, o = i.y, e.value && (e.value.scrollTop -= u, e.value.scrollLeft -= s);
}
function r() {
t.value = !1;
}
return { handleElementDragStart: n, handleElementDrag: a, handleElementDragEnd: r };
}
function uy(e) {
const { pressCtrl: t, canvasScale: l, disabledZoom: o } = dl();
function n(a) {
if (!t.value || o.value)
return;
a.preventDefault();
let r = 0;
a.deltaY < 0 ? r = l.value + 0.05 : r = l.value - 0.05, !(r > 150 || r < 0.5) && (l.value = r);
}
return L(
() => l.value,
(a) => {
e.value && !o.value && (e.value.style.transform = `scale(${a})`);
}
), { handleZoom: n, canvasScale: l };
}
function fy(e, t = 16.66) {
let l;
function o() {
n(), l = window.setInterval(e, t);
}
function n() {
window.clearInterval(l);
}
return {
startTimedQuery: o,
stopTimedQuery: n
};
}
function my(e, t) {
let l = null;
return (...o) => {
l && clearTimeout(l), l = setTimeout(() => {
e.apply(this, o);
}, t);
};
}
class $a {
constructor() {
he(this, "components", {});
he(this, "componentConfigs", {});
he(this, "currentSchemaType", []);
he(this, "schemaGroup", []);
he(this, "schemaGroupList", $([]));
he(this, "viewsContainers", {
activitybars: [],
rightSidebars: []
});
he(this, "publicMethods", {
// test: {
// describe: "测试函数",
// methodName: "test",
// method: () => {
// alert("测试函数弹出");
// },
// },
});
}
/**
* 添加组件到插件管理器中
* @param componentName 组件名称
* @param component 组件
*/
component(t, l) {
typeof l == "function" && (l = de(l)), this.components[t] = l;
}
/**
* 注册组件到插件管理器中
* @param component 组件
* @param schema 组件结构
* @param attrSchemas 属性结构
* @param bindModel 双向绑定value
*/
registerComponent(t) {
this.component(
t.defaultSchema.type,
t.component
), t.defaultSchema.input && (t.config.action || (t.config.action = []), t.config.action.unshift(
{
type: "setValue",
describe: "设置值",
argsConfigs: [
{
...t.defaultSchema,
label: "设置数据",
field: "0"
}
]
},
{
type: "getValue",
describe: "获取值"
}
)), this.componentConfigs[t.defaultSchema.type] = t;
}
/**
* 获取所有插件管理中的所有组件
* @returns components
*/
getComponents() {
return this.components;
}
/**
* 通过type 查询相应的组件
* @returns components
*/
getComponent(t) {
return this.components[t];
}
/**
* 注册活动栏
*/
registerActivitybar(t) {
typeof t.component == "function" && (t.component = de(t.component));
const l = this.viewsContainers.activitybars.findIndex(
(o) => o.id === t.id
);
l !== -1 ? this.viewsContainers.activitybars[l] = t : this.viewsContainers.activitybars.push(t);
}
/**
* 获取所有activitybars
* @returns activitybars
*/
getActivitybars() {
return this.viewsContainers.activitybars;
}
/**
* 注册右侧栏
*/
registerRightSidebar(t) {
typeof t.component == "function" && (t.component = de(t.component));
const l = this.viewsContainers.rightSidebars.findIndex(
(o) => o.id === t.id
);
l !== -1 ? this.viewsContainers.rightSidebars[l] = t : this.viewsContainers.rightSidebars.push(t);
}
/**
* 获取所有rightSidebars
* @returns rightSidebars
*/
getRightSidebars() {
return this.viewsContainers.rightSidebars;
}
/**
* 获取所有插件管理中的所有组件配置
* @returns componentAttrs
*/
getComponentConfings() {
return this.componentConfigs;
}
/**
* 通过type获取ComponentConfing
* @returns
*/
getComponentConfingByType(t) {
return this.componentConfigs[t];
}
/**
* 设置分组类型，用来区分不同类型下的菜单
* @param SchemaTypes
*/
setCurrentSchemaType(t) {
this.currentSchemaType = t, this.computedSchemaGroupList();
}
/**
* 设置分组,这个操作将会覆盖原来的数据
* @param {*} schemaGroup
* @returns
*/
setSchemaGroup(t) {
this.schemaGroup = t, this.computedSchemaGroupList();
}
/**
* 添加分组
* @param {*} schemaGroupItem
* @returns
*/
addSchemaGroup(t) {
this.schemaGroup.push(t), this.computedSchemaGroupList();
}
/**
* 计算schemaGroupList
*/
computedSchemaGroupList() {
let t = JSON.parse(JSON.stringify(this.schemaGroup));
this.currentSchemaType.length !== 0 && (t = t.filter((o) => this.currentSchemaType.includes(o.title)));
const l = t.map((o) => {
const n = o.list.map((a) => {
var i;
const r = (i = this.componentConfigs[a]) == null ? void 0 : i.defaultSchema;
return r ?? (console.warn(`${a} 组件未注册到pluginManager中`), !1);
}).filter((a) => a);
return {
...o,
list: n
};
});
this.schemaGroupList.value = l;
}
/**
* 按照分组获取schemaGroupList
* @returns schemaGroupList
*/
getSchemaByGroup() {
return this.schemaGroupList;
}
/**
* 添加公共方法
* @param method
*/
addPublicMethod(t) {
this.publicMethods[t.methodName] = t;
}
}
const ke = new $a();
function Wo() {
const e = $({}), t = $({});
function l(s) {
return e.value[s];
}
function o(s, u) {
e.value[s] = u;
}
function n(s) {
delete e.value[s];
}
function a(s) {
const u = Object.entries(
ke.publicMethods
).reduce((p, [d, f]) => (p[d] = f.method, p), {});
new Function(`const epic = this;${s}`).bind({
...u,
getComponent: l,
find: l,
defineExpose: r,
publicMethods: u
})();
}
function r(s) {
s != null && (t.value = s);
}
function i(s, ...u) {
s == null || s.forEach((p) => {
var d, f, h;
if (p.type === "public" && ((d = ke.publicMethods[p.methodName]) == null || d.method(p.args)), p.type === "custom" && ((h = (f = t.value)[p.methodName]) == null || h.call(f, ...u)), p.type === "component") {
(p.componentId != null && l(p.componentId))[p.methodName](
...p.args ? JSON.parse(p.args) : u
);
return;
}
});
}
return {
componentInstances: e,
funcs: t,
getComponentInstance: l,
addComponentInstance: o,
removeComponentInstance: n,
setMethods: a,
doActions: i
};
}
function xa() {
const e = $([]), t = $([]), l = $(null);
let o = 0;
function n(i, s = "插入组件") {
const u = Date.now();
o + 150 > u || (o = u, l.value != null && (e.value.push(l.value), t.value.splice(0, t.value.length)), l.value = {
type: s,
record: JSON.stringify(i)
}, e.value.length > 20 && e.value.unshift());
}
function a() {
if (e.value.length === 0)
return !1;
const i = e.value.pop();
return l.value != null && t.value.push(l.value), l.value = i, JSON.parse(i.record);
}
function r() {
if (t.value.length === 0)
return !1;
const i = t.value.pop();
return l.value != null && e.value.push(l.value), l.value = i, JSON.parse(i.record);
}
return {
recordList: e,
undoList: t,
currentRecord: l,
push: n,
undo: a,
redo: r
};
}
const Vl = xa(), Ea = /* @__PURE__ */ W({
name: "ENode",
__name: "node",
props: {
record: {},
modelValue: {},
ruleField: {},
resetFormData: {},
name: {}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const l = e, o = ge(l.record);
let n = J("formData", {});
const a = J("slots", {}), r = J("pageManager", {}), i = J("disabled", $(!1)), s = J("ruleFieldPrefix", null), u = J("resetFormData", !1);
(l.resetFormData || u) && (n = {});
const p = ke.getComponent("form-item"), d = $(), f = $(), h = Wn();
Object.keys(h).length && le("nodeAttrs", h);
const w = _t(null), m = _t({}), b = ge({}), c = C(() => {
var _, S;
return (_ = o.componentProps) != null && _.hidden ? !1 : typeof o.show == "boolean" ? o.show : ((S = o.show) == null ? void 0 : S.call(o, { values: n })) ?? !0;
}), v = C(() => {
var K;
const _ = c.value && ((K = o.rules) == null ? void 0 : K.map((q) => q));
let S = o.field;
l.ruleField ? S = l.ruleField : s && o.field && (S = Oe(s), S.push(o.field));
const M = {
...o,
rules: _,
rule: _,
field: S
};
return M.children && delete M.children, M;
}), y = C(() => ({
...m.value
})), x = C(() => {
var _;
return (i == null ? void 0 : i.value) || ((_ = o.componentProps) == null ? void 0 : _.disabled);
}), A = C(() => ke.getComponentConfingByType(o.type) ?? null), z = () => n[o.field ?? ""] ?? l.modelValue;
L(() => d.value, () => {
Z();
});
function Z() {
var _;
o.id && d.value && (o.input && (d.value.setValue = P, d.value.getValue = () => n[o.field] || l.modelValue), d.value.setAttr = (S, M) => o.componentProps[S] = M, d.value.getAttr = (S) => o.componentProps[S], d.value.getComponentAttr = (S) => o[S], r.addComponentInstance(o.id, d.value), (_ = A.value) != null && _.defaultSchema.input && o.noFormItem !== !0 && f.value && r.addComponentInstance(o.id + "formItem", f.value));
}
function U() {
var _;
o.id && (r.removeComponentInstance(o.id), (_ = A.value) != null && _.defaultSchema.input && o.noFormItem !== !0 && r.removeComponentInstance(o.id + "formItem"));
}
async function R() {
var K, q, D;
if (typeof ((K = o.componentProps) == null ? void 0 : K.defaultValue) < "u") {
const te = n[o.field] ?? ((q = o.componentProps) == null ? void 0 : q.defaultValue);
P(Oe(te));
}
if (o.type === "slot") {
const te = o.slotName;
if (!te)
return;
w.value = W({
setup() {
return () => Y(a, te, {
record: o,
model: n
});
}
});
return;
}
const _ = ke.getComponent(o.type);
if (!_) {
console.error(`组件${o.type}未注册`);
return;
}
const S = ((D = A.value) == null ? void 0 : D.bindModel) ?? "modelValue";
if (typeof _ == "function") {
const te = await _();
w.value = te.default ?? te;
} else
w.value = _;
const M = {};
o.on && Object.keys(o.on).forEach((te) => {
M[`on${ta(te)}`] = (...$e) => r.doActions(o.on[te], ...$e);
}), m.value = {
...l,
bindModel: S,
[`onUpdate:${S}`]: P,
...M
};
}
function P(_) {
t("update:modelValue", _), t("change", _), o.field && (n[o.field] = _);
}
let E = null;
return L(() => o, (_) => {
const S = JSON.stringify({ ..._, children: void 0 });
if (S === E)
return !1;
E = S, R();
}, {
immediate: !0,
deep: !0
}), Ao(U), (_, S) => {
var K;
const M = Un("ENode");
return o.noFormItem !== !0 && ((K = A.value) != null && K.defaultSchema.input) && w.value && c.value ? (I(), ue(g(p), Xe({
key: 0,
ref_key: "formItemRef",
ref: f
}, v.value), {
default: G(() => [
(I(), ue(Ut(w.value), Xe({
ref_key: "componentInstance",
ref: d,
onVnodeMounted: Z
}, { ...y.value, ...o.componentProps, disabled: x.value, ...b, [m.value.bindModel]: z() }), {
node: G((q) => [
F(M, Ol(Tl(q)), null, 16)
]),
"edit-node": G(() => [
Y(_.$slots, "edit-node")
]),
_: 3
}, 16))
]),
_: 3
}, 16)) : w.value && c.value ? (I(), ue(Ut(w.value), Xe({
key: 1,
onVnodeMounted: Z,
ref_key: "componentInstance",
ref: d,
model: g(n)
}, { ...y.value, ...o.componentProps, disabled: x.value, ...b, [m.value.bindModel]: z() }), {
node: G((q) => [
F(M, Ol(Tl(q)), null, 16)
]),
"edit-node": G(() => [
Y(_.$slots, "edit-node")
]),
_: 3
}, 16, ["model"])) : nt("", !0);
};
}
}), Ca = { class: "epic-builder-main" }, Sa = { class: "loading-box" }, by = /* @__PURE__ */ W({
__name: "builder",
props: {
pageSchema: {},
disabled: { type: Boolean }
},
emits: ["ready"],
setup(e, { expose: t, emit: l }) {
const o = e, n = de(() => import("./index-ab078c8b.js")), a = Wo(), r = sl(), i = $({}), s = $(!1), u = ge({
schemas: []
});
L(() => o.pageSchema, (b) => {
at(u, b);
}, {
immediate: !0,
deep: !0
}), L(() => u.script, (b) => {
b && b !== "" && a.setMethods(b);
}, {
immediate: !0
}), le("slots", r), le("pageManager", a), le("forms", i), le("pageSchema", u);
const p = C(() => o.disabled || !1);
le("disabled", p);
function d(b = "default") {
return new Promise(async (c, v) => {
var A;
if (!s.value) {
const z = L(s, () => {
z(), c(d(b));
});
return;
}
const y = (A = i.value) == null ? void 0 : A[b];
if (!y)
return v(`表单 [name=${b}] 不存在`), !1;
const x = Oe(await y.getData());
c(x);
});
}
function f(b = "default") {
return new Promise(async (c, v) => {
var A;
if (!s.value) {
const z = L(s, () => {
z(), c(d(b));
});
return;
}
const y = (A = i.value) == null ? void 0 : A[b];
if (!y)
return v(`表单 [name=${b}] 不存在`), !1;
await y.validate();
const x = await y.getData();
c(x);
});
}
function h(b, c = "default") {
var y;
if (!s.value) {
const x = L(s, () => {
x(), h(b, c);
});
return;
}
const v = (y = i.value) == null ? void 0 : y[c];
if (!v)
return console.error(`表单 [name=${c}] 不存在`), !1;
v.setData(b);
}
const { proxy: w } = ie();
function m() {
me(() => {
s.value = !0, l("ready", a), w && a.addComponentInstance("builder", w);
});
}
return t({
ready: s,
getData: d,
setData: h,
validate: f
}), (b, c) => (I(), ue(zo, { onResolve: m }, {
default: G(() => [
T("div", Ca, [
(I(!0), V(Ro, null, Kn(u.schemas, (v, y) => (I(), ue(g(Ea), {
key: y,
record: v
}, null, 8, ["record"]))), 128))
])
]),
fallback: G(() => [
T("div", Sa, [
F(g(n))
])
]),
_: 1
}));
}
}), Oa = { class: "epic-designer-main" }, Ta = { class: "epic-header-container" }, Ia = { class: "loading-box" }, jt = `const { defineExpose, find } = epic;
function test (){
console.log('test')
}
// 通过defineExpose暴露的函数或者属性
defineExpose({
test
})`, hy = /* @__PURE__ */ W({
__name: "designer",
props: {
disabledZoom: { type: Boolean, default: !1 },
hiddenHeader: { type: Boolean, default: !1 },
editContainerDisabled: { type: Boolean, default: !1 }
},
emits: ["ready", "save"],
setup(e, { expose: t, emit: l }) {
const o = e, n = de(() => import("./index-1286ff9d.js")), a = de(() => import("./index-e7c166eb.js")), r = de(() => import("./index-0126b8fc.js")), i = de(() => import("./index-21f6d078.js")), s = de(() => import("./index-ab078c8b.js")), u = Wo(), p = ge({
checkedNode: null,
hoverNode: null,
disableHover: !1,
matched: [],
disabledItems: []
}), d = ge({
schemas: [],
script: ""
}), { disabledZoom: f } = dl();
L(() => o.disabledZoom, (P) => {
f.value = P;
}, {
immediate: !0
}), L(() => d.script, (P) => {
P && P !== "" && u.setMethods(P);
});
const h = [{
type: "page",
id: "root",
label: "页面",
children: [],
componentProps: {
style: {
padding: "16px"
}
}
}];
d.script = jt, le("pageSchema", d), le("pageManager", u), le("designerProps", o), le("designer", {
setCheckedNode: c,
setHoverNode: v,
setDisableHover: x,
addDisabledNode: (P) => {
p.disabledItems.push(P);
},
delectDisabledNode: (P) => {
p.disabledItems = p.disabledItems.filter((E) => E !== P);
},
reset: U,
state: p
});
function b() {
d.schemas = Oe(h), c(d.schemas[0]), Vl.push(d.schemas, "初始化撤销功能");
}
async function c(P = d.schemas[0]) {
p.checkedNode = P, p.matched = oa(d.schemas, P.id);
}
async function v(P = null) {
var E;
if (!P || p.disableHover)
return p.hoverNode = null, !1;
if ((P == null ? void 0 : P.id) === ((E = p.hoverNode) == null ? void 0 : E.id))
return !1;
p.hoverNode = P;
}
function y() {
me(() => {
l("ready", { pageManager: u });
});
}
async function x(P = !1) {
p.disableHover = P;
}
function A(P, E) {
var _;
at(d, P), p.disabledItems = [], z(d.schemas), E && ((_ = d.schemas[0].children) != null && _.length) && c(d.schemas[0].children[0]);
}
function z(P) {
P.length && P.forEach((E) => {
E.isUnique && E.id && p.disabledItems.push(E.id), z(E.children || []);
});
}
function Z() {
return Il(d);
}
function U() {
la(d.schemas, h) && d.script === jt || (at(d.schemas, h), d.script = jt, c(d.schemas[0]), Vl.push(d.schemas, "重置操作"));
}
function R() {
l("save", Il(d));
}
return b(), t({
setData: A,
getData: Z,
reset: U
}), (P, E) => (I(), ue(zo, { onResolve: y }, {
default: G(() => [
T("div", Oa, [
T("div", Ta, [
Y(P.$slots, "header", {}, () => [
o.hiddenHeader ? nt("", !0) : (I(), ue(g(n), {
key: 0,
onSave: R
}, {
header: G(() => [
Y(P.$slots, "header-prefix")
]),
prefix: G(() => [
Y(P.$slots, "header-prefix")
]),
title: G(() => [
Y(P.$slots, "header-title")
]),
"right-prefix": G(() => [
Y(P.$slots, "header-right-prefix")
]),
"right-action": G(() => [
Y(P.$slots, "header-right-action")
]),
"right-suffix": G(() => [
Y(P.$slots, "header-right-suffix")
]),
_: 3
}))
])
]),
T("div", {
class: oe(["epic-split-view-container", { "hidden-header": P.hiddenHeader }])
}, [
F(g(a)),
F(g(r), { disabled: P.editContainerDisabled }, null, 8, ["disabled"]),
F(g(i))
], 2)
])
]),
fallback: G(() => [
T("div", Ia, [
F(g(s))
])
]),
_: 3
}));
}
}), Aa = {
component: async () => await import("./index-b5c6df47.js"),
defaultSchema: {
label: "代码编辑器",
type: "monacoEditor",
field: "monacoEditor",
icon: "epic-icon-write",
input: !0
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "标题",
type: "input",
field: "label"
},
{
label: "默认值",
type: "monacoEditor",
field: "componentProps.defaultValue"
}
]
},
bindModel: "model-value"
}, za = {
component: async () => await import("./index-a654f291.js"),
defaultSchema: {
label: "页面",
type: "page",
componentProps: {},
children: []
},
config: {
attribute: [
{
label: "页面名称",
type: "input",
componentProps: {
placeholder: "请输入"
},
field: "name"
}
]
}
};
function Ra(e) {
e.component("ETabPaneEditor", async () => await import("./index-7db4a1be.js")), e.component("EInputSize", async () => await import("./index-ce119ede.js")), e.component("EColEditor", async () => await import("./index-3d640c3d.js")), e.component("EActionEditor", async () => await import("./index-5e07a032.js")), e.component("ERuleEditor", async () => await import("./index-49192570.js")), e.component("EOptionsEditor", async () => await import("./index-52c61241.js")), e.component("ENode", async () => await import("./index-43971623.js")), e.registerActivitybar({
id: "component_view",
title: "组件",
icon: "epic-icon-mokuai_1",
component: async () => await import("./index-f15fb024.js")
}), e.registerActivitybar({
id: "sound_code_view",
title: "源码",
icon: "epic-icon-daima1",
component: async () => await import("./index-2f403390.js")
}), e.registerActivitybar({
id: "outline_view",
title: "大纲",
icon: "epic-icon-juxingkaobei",
component: async () => await import("./outline-3c722153.js")
}), e.registerRightSidebar({
id: "attribute_view",
title: "属性",
component: async () => await import("./attributeView-c9acc768.js")
}), e.registerRightSidebar({
id: "style_view",
title: "样式",
component: async () => await import("./styleView-7fde5eb6.js")
}), e.registerRightSidebar({
id: "event_view",
title: "事件",
component: async () => await import("./eventView-e0763d0d.js")
}), [Aa, za].forEach((l) => {
e.registerComponent(l);
});
}
Ra(ke);
const Va = {
component: () => import("./index-6b5281d9.js").then((e) => e.i),
defaultSchema: {
label: "输入框",
type: "input",
field: "input",
icon: "epic-icon-write",
input: !0,
id: "unique-input",
isUnique: !0,
componentProps: {
bordered: !0,
placeholder: "请输入"
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "标题",
type: "input",
field: "label"
},
{
label: "占位内容",
type: "input",
field: "componentProps.placeholder"
},
{
label: "默认值",
type: "input",
field: "componentProps.defaultValue",
componentProps: {
placeholder: "请输入"
}
},
{
label: "输入类型",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "text",
value: "text"
},
{
label: "number",
value: "number"
},
{
label: "password",
value: "password"
}
]
},
field: "componentProps.type"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "可清空",
type: "switch",
field: "componentProps.allowClear"
},
{
label: "有边框",
type: "switch",
field: "componentProps.bordered"
},
{
label: "最大输入长度",
type: "number",
field: "componentProps.maxLength",
componentProps: {
placeholder: "请输入"
}
},
{
label: "统计字数",
type: "switch",
field: "componentProps.showCount"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "input",
describe: "输入值"
},
{
type: "change",
describe: "值修改"
},
{
type: "pressEnter",
describe: "按下回车的回调"
},
{
type: "focus",
describe: "获取焦点"
},
{
type: "blur",
describe: "失去焦点"
}
],
action: [
{
type: "focus",
describe: "使 input 获取焦点"
},
{
type: "blur",
describe: "使 input 失去焦点"
},
{
type: "select",
describe: "选中 input 中的文字"
}
]
},
bindModel: "value"
}, Na = {
component: async () => (await import("./index-6b5281d9.js").then((e) => e.i)).Textarea,
defaultSchema: {
label: "文本域",
type: "textarea",
field: "textarea",
icon: "epic-icon-edit",
input: !0,
componentProps: {
placeholder: "请输入"
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "标题",
type: "input",
field: "label"
},
{
label: "默认值",
type: "textarea",
field: "componentProps.defaultValue",
componentProps: {
placeholder: "请输入"
}
},
{
label: "占位内容",
type: "input",
field: "componentProps.placeholder"
},
{
label: "最小行数",
type: "number",
field: "componentProps.autoSize.minRows",
componentProps: {
placeholder: "请输入"
}
},
{
label: "最大行数",
type: "number",
field: "componentProps.autoSize.maxRows",
componentProps: {
placeholder: "请输入"
}
},
{
label: "有边框",
type: "switch",
field: "componentProps.bordered"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "最大输入长度",
type: "number",
field: "componentProps.maxLength",
componentProps: {
placeholder: "请输入"
}
},
{
label: "统计字数",
type: "switch",
field: "componentProps.showCount"
},
{
label: "可清除",
type: "switch",
field: "componentProps.allowClear"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "input",
describe: "输入值"
},
{
type: "change",
describe: "值修改"
},
{
type: "pressEnter",
describe: "按下回车的回调"
},
{
type: "focus",
describe: "获取焦点"
},
{
type: "blur",
describe: "失去焦点"
}
],
action: [
{
type: "focus",
describe: "使 input 获取焦点"
},
{
type: "blur",
describe: "使 input 失去焦点"
},
{
type: "select",
describe: "选中 input 中的文字"
}
]
},
bindModel: "value"
}, La = {
component: () => import("./index-4d604834.js").then((e) => e.i),
defaultSchema: {
label: "数字输入框",
type: "number",
icon: "epic-icon-number",
field: "number",
input: !0,
componentProps: {
style: { width: "100%" },
placeholder: "请输入"
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "文字",
type: "input",
field: "label"
},
{
label: "默认值",
type: "input",
field: "componentProps.defaultValue",
componentProps: {
placeholder: "请输入",
size: "middle"
}
},
{
label: "占位内容",
type: "input",
field: "componentProps.placeholder"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "键盘快捷行为",
type: "switch",
field: "componentProps.keyboard"
},
{
label: "最大值",
type: "number",
field: "componentProps.max",
componentProps: {
placeholder: "请输入"
}
},
{
label: "最小值",
type: "number",
field: "componentProps.min",
componentProps: {
placeholder: "请输入"
}
},
{
label: "精度",
type: "number",
field: "componentProps.precision",
componentProps: {
placeholder: "请输入"
}
},
{
label: "步长",
type: "number",
field: "componentProps.step",
componentProps: {
placeholder: "请输入"
}
},
{
label: "字符模式",
type: "switch",
field: "componentProps.stringMode"
},
{
label: "有边框",
type: "switch",
field: "componentProps.bordered"
},
{
label: "可清空",
type: "switch",
field: "componentProps.allowClear"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "input",
describe: "输入值"
},
{
type: "change",
describe: "值修改"
},
{
type: "pressEnter",
describe: "按下回车的回调"
},
{
type: "focus",
describe: "获取焦点"
},
{
type: "blur",
describe: "失去焦点"
}
],
action: [
{
type: "focus",
describe: "使 input 获取焦点"
},
{
type: "blur",
describe: "使 input 失去焦点"
},
{
type: "select",
describe: "选中 input 中的文字"
}
]
},
bindModel: "value"
}, Fa = {
component: async () => (await import("./index-6b5281d9.js").then((e) => e.i)).InputPassword,
defaultSchema: {
label: "密码输入框",
type: "password",
icon: "epic-icon-mima",
field: "password",
input: !0,
componentProps: {
placeholder: "请输入",
bordered: !0
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "文字",
type: "input",
field: "label"
},
{
label: "占位内容",
type: "input",
field: "componentProps.placeholder"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "有边框",
type: "switch",
field: "componentProps.bordered"
},
{
label: "最大输入长度",
type: "number",
field: "componentProps.maxLength",
componentProps: {
placeholder: "请输入"
}
},
{
label: "统计字数",
type: "switch",
field: "componentProps.showCount"
},
{
label: "可清空",
type: "switch",
field: "componentProps.allowClear"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "input",
describe: "输入值"
},
{
type: "change",
describe: "值修改"
},
{
type: "pressEnter",
describe: "按下回车的回调"
},
{
type: "focus",
describe: "获取焦点"
},
{
type: "blur",
describe: "失去焦点"
}
],
action: [
{
type: "focus",
describe: "使 input 获取焦点"
},
{
type: "blur",
describe: "使 input 失去焦点"
},
{
type: "select",
describe: "选中 input 中的文字"
}
]
},
bindModel: "value"
}, Ma = {
component: () => import("./Group-9e132bf3.js").then((e) => e.G),
defaultSchema: {
label: "单选框",
type: "radio",
icon: "epic-icon-danxuan-cuxiantiao",
field: "radio",
input: !0,
componentProps: {
options: [
{
label: "选项1",
value: "选项1"
},
{
label: "选项2",
value: "选项2"
}
],
optionType: "default"
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "默认值",
type: "radio",
field: "componentProps.defaultValue"
},
{
label: "文字",
type: "input",
field: "label"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "option类型",
type: "select",
componentProps: {
options: [
{
label: "default",
value: "default"
},
{
label: "button",
value: "button"
}
]
},
field: "componentProps.optionType"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "选项管理",
type: "EOptionsEditor",
layout: "vertical",
field: "componentProps.options"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "