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