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