epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
127 lines (126 loc) • 5.83 kB
JavaScript
import { defineComponent as O, computed as T, createElementBlock as m, openBlock as l, createVNode as M, unref as o, withCtx as q, createElementVNode as v, withModifiers as V, normalizeClass as k, createCommentVNode as r, createTextVNode as F, toDisplayString as D, createBlock as f } from "vue";
/* empty css */
import p from "../../../../base-ui/src/icon/icon.vue.js";
/* empty css */
/* empty css */
import { findSchemaInfoById as E, generateNewSchema as G } 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 "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { useDesignerContext as J } from "../../../../../hooks/src/designer/useDesignerContext.js";
import { pluginManager as y } from "../../../../../manager/src/pluginManager.js";
/* empty css */
import P from "../../../../base-ui/src/tree/tree.vue.js";
const Q = { class: "ep-outline" }, R = ["onMouseenter"], U = { class: "max-w-full truncate" }, W = {
key: 0,
class: "ep-event-badge ml-0.5",
title: "已绑定事件"
}, X = { class: "ep-node-type-text w-0 flex-1 truncate" }, ue = /* @__PURE__ */ O({
__name: "outline",
setup(Y) {
const i = J(), a = i.pageSchema, I = T(() => {
var n;
const t = (n = i.state.selectedNode) == null ? void 0 : n.id;
return t ? [t] : [];
});
function K(t) {
return t.on ? Object.keys(t.on).some((s) => {
const e = t.on[s];
return Array.isArray(e) && e.length > 0;
}) : !1;
}
function L(t) {
i.setSelectedNode(t.componentSchema);
}
function A(t) {
t.props || (t.props = {}), t.props.hidden = !t.props.hidden;
}
function H(t) {
t.status || (t.status = { lock: !1 }), t.status.lock = !t.status.lock;
}
function j(t) {
if (!t) return;
const n = E(a.schemas, t.id);
if (!n)
return !1;
const { index: s, schema: e, list: u } = n, d = G(e, a.schemas);
u.splice(s + 1, 0, d), i.setSelectedNode(d), i.revoke.push("复制组件");
}
function z(t) {
if (!t) return;
const n = E(a.schemas, t.id);
if (!n)
return !1;
let { index: s, list: e } = n;
e.splice(s, 1), s === e.length && s--, i.setSelectedNode(e[s]), i.revoke.push("删除组件");
}
return (t, n) => {
var s;
return l(), m("div", Q, [
M(o(P), {
options: o(a).schemas,
draggable: "",
"selected-keys": I.value,
"hover-key": ((s = o(i).state.hoverNode) == null ? void 0 : s.id) ?? "",
onNodeClick: L
}, {
"tree-node": q(({ schema: e }) => {
var u, d, _, g, C, N, x, S, h, $, b, w, B;
return [
v("div", {
class: k(["ep-outline-item ep-text-padding flex", { hidden: (u = e.props) == null ? void 0 : u.hidden }]),
onMouseenter: V((c) => o(i).setHoverNode(e), ["stop"]),
onMouseleave: n[0] || (n[0] = V((c) => o(i).setHoverNode(null), ["stop"]))
}, [
v("span", U, [
M(o(p), {
class: "ep-component-icon translate-y-2px",
name: o(y).component.getIcon(e.type)
}, null, 8, ["name"]),
K(e) ? (l(), m("span", W, " 事件 ")) : r("", !0),
F(" " + D(e.label ?? o(y).component.getLabel(e.type)), 1)
]),
v("span", X, D(e.id), 1),
!o(y).component.getLocked(e) && e.id !== o(i).pageSchema.schemas[0].id ? (l(), m("div", {
key: 0,
class: k(["ep-tree-action", {
active: ((d = e.props) == null ? void 0 : d.hidden) || ((_ = e.status) == null ? void 0 : _.lock)
}])
}, [
(g = e.props) != null && g.hidden ? r("", !0) : (l(), f(o(p), {
key: 0,
class: k(["mr-2", { active: (C = e.status) == null ? void 0 : C.lock }]),
name: (N = e.status) != null && N.lock ? "icon--epic--lock-outline" : "icon--epic--lock-open-outline",
onClick: (c) => H(e)
}, null, 8, ["class", "name", "onClick"])),
(x = e.status) != null && x.lock ? r("", !0) : (l(), f(o(p), {
key: 1,
class: k(["mr-2", { active: (S = e.props) == null ? void 0 : S.hidden }]),
name: (h = e.props) != null && h.hidden ? "icon--epic--visibility-off-outline-rounded" : "icon--epic--visibility-outline-rounded",
onClick: (c) => A(e)
}, null, 8, ["class", "name", "onClick"])),
!(($ = e.status) != null && $.lock) && !((b = e.props) != null && b.hidden) ? (l(), f(o(p), {
key: 2,
class: "mr-2",
name: "icon--epic--copy-all-outline-rounded",
onClick: (c) => j(e)
}, null, 8, ["onClick"])) : r("", !0),
!((w = e.status) != null && w.lock) && !((B = e.props) != null && B.hidden) ? (l(), f(o(p), {
key: 3,
class: "mr-2",
name: "icon--epic--delete-outline-rounded",
onClick: (c) => z(e)
}, null, 8, ["onClick"])) : r("", !0)
], 2)) : r("", !0)
], 42, R)
];
}),
_: 1
}, 8, ["options", "selected-keys", "hover-key"])
]);
};
}
});
export {
ue as default
};