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