fx-epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
122 lines (121 loc) • 4.55 kB
JavaScript
import { defineComponent as B, inject as l, ref as b, computed as N, watch as E, createElementBlock as T, openBlock as $, createElementVNode as r, createVNode as d, unref as i, withCtx as y, withDirectives as D, mergeProps as P, normalizeClass as j, toDisplayString as z, vShow as G } from "vue";
/* empty css */
import k from "../../../../base-ui/src/icon/icon.vue2.js";
import { generateNewSchema as S, findSchemaInfoById as L } from "../../../../../utils/src/common/data.js";
import "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { pluginManager as p } from "../../../../../utils/src/manager/pluginManager.js";
import M from "vuedraggable";
const q = { class: "epic-component-view flex flex-col" }, A = { class: "epic-search-box px-10px py-6px" }, F = { class: "box-border h-full flex-1 overflow-auto py-2" }, H = ["onClick"], J = { class: "epic-componet-label w-0 flex-1 truncate" }, K = { class: "pt-42px text-center text-gray-400" }, oe = /* @__PURE__ */ B({
__name: "index",
setup(O) {
const w = p.getComponent("input"), u = l("pageSchema"), f = l("designer"), h = l("revoke");
l("designerProps"), p.getComponentSchemaGroups();
const s = b(""), V = l("externalConfig", b({ tablist: [] })), a = N(() => V.value.tablist);
function g(o) {
for (const e of o) {
if (e.type === "tabs")
return e;
if (e.children) {
const t = g(e.children);
if (t)
return t;
}
}
return null;
}
function U(o) {
var t, m, x;
if (o.isUse === 1)
return !1;
const e = S(o);
if (o.type === "tabs") {
const n = L(
u.schemas,
((t = f.state.selectedNode) == null ? void 0 : t.id) ?? "root"
);
if (!n) return !1;
let { index: C, schema: c, list: _ } = n;
c.children && !((x = (m = p.getComponentConfingByType(c.type)) == null ? void 0 : m.editConstraints) != null && x.childImmovable) && (_ = c.children, C = c.children.length - 1), _.splice(C + 1, 0, e), h.push("插入组件");
} else {
const n = g(u.schemas);
if (!n)
return alert("请先在画布中添加一个页签容器组件"), !1;
n.children || (n.children = []), n.children.push(e), h.push("添加页签");
}
f.setSelectedNode(e), o.isUse = 1;
}
function I(o) {
return o.isUse === 1;
}
function v(o, e) {
for (const t of o)
if (t.sourceId === e || t.children && v(t.children, e)) return !0;
return !1;
}
return E(
() => u.schemas,
(o) => {
a.value.forEach((e) => {
e.isUse = e.id && v(o, e.id) ? 1 : 0;
});
},
{ deep: !0, immediate: !0 }
), (o, e) => ($(), T("div", q, [
r("div", A, [
d(i(w), {
modelValue: s.value,
"onUpdate:modelValue": e[0] || (e[0] = (t) => s.value = t),
value: s.value,
"onUpdate:value": e[1] || (e[1] = (t) => s.value = t),
placeholder: "搜索容器组件",
clearable: "",
"allow-clear": ""
}, {
prefix: y(() => [
d(i(k), {
class: "text-$epic-text-helper",
name: "icon--epic--search-rounded"
})
]),
_: 1
}, 8, ["modelValue", "value"])
]),
r("div", F, [
d(i(M), P({
modelValue: a.value,
"onUpdate:modelValue": e[2] || (e[2] = (t) => a.value = t)
}, {
group: { name: "edit-draggable", pull: "clone", put: !1 },
sort: !1,
animation: 180,
ghostClass: "moving",
filter: ".epic-componet-item--clicked"
}, {
clone: i(S),
"item-key": "id",
class: "px-10px grid grid-cols-[auto_auto] gap-2"
}), {
item: y(({ element: t }) => [
r("div", {
class: j(["epic-componet-item flex items-center truncate", { "epic-componet-item--clicked": I(t) }]),
onClick: (m) => U(t)
}, [
d(i(k), {
name: i(p).getComponentConfingByType(t.type).icon ?? ""
}, null, 8, ["name"]),
r("div", J, z(t.label), 1)
], 10, H)
]),
_: 1
}, 16, ["modelValue", "clone"]),
D(r("div", K, " 没有查询到的容器组件 ", 512), [
[G, a.value.length === 0]
])
])
]));
}
});
export {
oe as default
};