epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
55 lines (54 loc) • 2.36 kB
JavaScript
import { defineComponent as g, inject as l, computed as k, openBlock as p, createElementBlock as v, createVNode as N, unref as e, withCtx as x, createElementVNode as i, normalizeClass as C, withModifiers as m, createBlock as M, createCommentVNode as S, createTextVNode as b, toDisplayString as u } from "vue";
import { _ as w } from "./tree.vue_vue_type_script_setup_true_lang-BsVyMb-n.js";
import { p as B } from "./pluginManager-BCnrHPYv.js";
import { _ as V } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
const $ = { class: "epic-outline" }, E = ["onMouseenter"], H = { class: "max-w-full truncate" }, P = { class: "epic-node-type-text flex-1 w-0 truncate" }, q = /* @__PURE__ */ g({
__name: "outline",
setup(T) {
const o = l("designer"), _ = l("pageSchema"), f = k(() => {
var s;
const n = (s = o.state.checkedNode) == null ? void 0 : s.id;
return n ? [n] : [];
});
function h(n) {
o.setCheckedNode(n.componentSchema);
}
return (n, s) => {
var d;
return p(), v("div", $, [
N(e(w), {
options: e(_).schemas,
draggable: "",
"selected-keys": f.value,
"hover-key": (d = e(o).state.hoverNode) == null ? void 0 : d.id,
onNodeClick: h
}, {
"tree-node": x(({ schema: t }) => {
var c, a, r;
return [
i("div", {
class: C(["epic-text-padding flex", { hidden: (c = t.componentProps) == null ? void 0 : c.hidden }]),
onMouseenter: m((y) => e(o).setHoverNode(t), ["stop"]),
onMouseleave: s[0] || (s[0] = m((y) => e(o).setHoverNode(null), ["stop"]))
}, [
i("span", H, [
(a = t.componentProps) != null && a.hidden ? (p(), M(e(V), {
key: 0,
name: "icon--epic--visibility-off-outline-rounded",
class: "translate-y-2px"
})) : S("", !0),
b(" " + u(t.label ?? ((r = e(B).getComponentConfingByType(t.type)) == null ? void 0 : r.defaultSchema.label)), 1)
]),
i("span", P, u(t.id), 1)
], 42, E)
];
}),
_: 1
}, 8, ["options", "selected-keys", "hover-key"])
]);
};
}
});
export {
q as default
};