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