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