epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
113 lines (112 loc) • 5.09 kB
JavaScript
import { defineComponent as U, ref as D, computed as E, createElementBlock as d, openBlock as i, createElementVNode as s, createVNode as c, unref as o, withCtx as m, withDirectives as I, isRef as T, Fragment as y, renderList as k, createBlock as $, toDisplayString as L, vShow as F } from "vue";
import { VueDraggable as G } from "vue-draggable-plus";
/* empty css */
import V from "../../../../base-ui/src/icon/icon.vue.js";
import K from "../../../../base-ui/src/collapse/collapse.vue.js";
import M from "../../../../base-ui/src/collapse/collapsePanel.vue.js";
import { generateNewSchema as w, findSchemaInfoById as P } from "../../../../../utils/src/common/data.js";
import "../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import { useStorage as R } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { useDesignerContext as j } from "../../../../../hooks/src/designer/useDesignerContext.js";
import { pluginManager as u } from "../../../../../manager/src/pluginManager.js";
/* empty css */
const q = { class: "epic-component-view flex flex-col" }, z = { class: "epic-search-box px-10px py-2" }, A = { class: "flex flex-1 overflow-auto" }, H = { class: "box-border h-full flex-1 overflow-auto" }, J = ["onClick"], O = { class: "epic-componet-label w-0 flex-1 truncate" }, Q = { class: "pt-42px text-center text-gray-400" }, pe = /* @__PURE__ */ U({
__name: "index",
setup(W) {
const C = u.component.get("input"), r = j(), S = r.revoke, b = r.pageSchema, B = u.component.getComponentSchemaGroups(), a = D(""), p = R("epic-component-view-keys", []), h = E(() => B.value.map((n) => ({
...n,
list: n.list.filter((t) => {
var e;
return (e = t.label) == null ? void 0 : e.includes(a.value);
})
})).filter((n) => n.list.length > 0));
function N(n) {
var g, x, _;
const t = P(
b.schemas,
((g = r.state.selectedNode) == null ? void 0 : g.id) ?? "root"
);
if (!t)
return !1;
let { index: e, schema: l, list: f } = t;
l.children && !((_ = (x = u.component.getConfigByType(l.type)) == null ? void 0 : x.editConstraints) != null && _.childImmovable) && (f = l.children, e = l.children.length - 1);
const v = w(n);
f.splice(e + 1, 0, v), r.setSelectedNode(v), S.push("插入组件", !0);
}
return (n, t) => (i(), d("div", q, [
s("div", z, [
c(o(C), {
modelValue: a.value,
"onUpdate:modelValue": t[0] || (t[0] = (e) => a.value = e),
value: a.value,
"onUpdate:value": t[1] || (t[1] = (e) => a.value = e),
placeholder: "搜索组件",
clearable: "",
"allow-clear": ""
}, {
prefix: m(() => [
c(o(V), {
class: "text-$ep-text-helper",
name: "icon--epic--search-rounded"
})
]),
_: 1
}, 8, ["modelValue", "value"])
]),
s("div", A, [
s("div", H, [
c(o(K), {
"default-expand-all": !o(p).length,
modelValue: o(p),
"onUpdate:modelValue": t[2] || (t[2] = (e) => T(p) ? p.value = e : null)
}, {
default: m(() => [
(i(!0), d(y, null, k(h.value, (e) => (i(), $(o(M), {
name: e.title,
title: e.title,
key: e.title
}, {
default: m(() => [
c(o(G), {
modelValue: e.list,
"onUpdate:modelValue": (l) => e.list = l,
group: { name: "edit-draggable", pull: "clone", put: !1 },
sort: !1,
animation: 180,
"ghost-class": "moving",
clone: o(w),
"item-key": "id",
class: "grid grid-cols-[auto_auto] gap-2 px-2 pb-2 pt-1"
}, {
default: m(() => [
(i(!0), d(y, null, k(e.list, (l) => (i(), d("div", {
key: l.type,
class: "epic-componet-item flex items-center truncate",
onClick: (f) => N(l)
}, [
c(o(V), {
name: o(u).component.getConfigByType(l.type).icon ?? ""
}, null, 8, ["name"]),
s("div", O, L(l.label), 1)
], 8, J))), 128))
]),
_: 2
}, 1032, ["modelValue", "onUpdate:modelValue", "clone"])
]),
_: 2
}, 1032, ["name", "title"]))), 128))
]),
_: 1
}, 8, ["default-expand-all", "modelValue"]),
I(s("div", Q, " 没有查询到的组件 ", 512), [
[F, h.value.length === 0]
])
])
])
]));
}
});
export {
pe as default
};