ai-form-designer
Version:
vue3+adv的设计器,可视化开发页面表单
88 lines (87 loc) • 3.51 kB
JavaScript
import { defineComponent as b, inject as B, createElementBlock as s, openBlock as t, Fragment as C, renderList as y, unref as n, createCommentVNode as h, createBlock as w, createElementVNode as r, withModifiers as f, toDisplayString as x, ref as g, computed as S, shallowRef as H, createVNode as k, normalizeClass as _, resolveDynamicComponent as R } from "vue";
import { p as $ } from "./index-DwcJO-0a.js";
import { _ as M } from "./icon.vue_vue_type_script_setup_true_lang-DW206h_7.js";
const V = { class: "epic-breadcrumb pl-4 py-2 truncate h-40px flex items-center" }, j = {
key: 0,
class: "flex items-center"
}, z = { key: 0 }, D = ["onClick", "onMouseenter"], E = /* @__PURE__ */ b({
__name: "breadcrumb",
setup(N) {
const e = B("designer");
function p(i) {
e.setCheckedNode(i);
}
return (i, o) => (t(), s("div", V, [
(t(!0), s(C, null, y(n(e).state.matched, (l, c) => {
var u;
return t(), s("span", { key: c }, [
c > n(e).state.matched.length - 4 ? (t(), s("span", j, [
n(e).state.matched.length > 3 && c === n(e).state.matched.length - 3 ? (t(), s("span", z, "...")) : h("", !0),
c !== 0 ? (t(), w(n(M), {
key: 1,
class: "m-1",
name: "icon--epic--arrow-forward-ios-rounded"
})) : h("", !0),
r("span", {
class: "node-item cursor-pointer",
onClick: (a) => p(l),
onMouseenter: f((a) => n(e).setHoverNode(l), ["stop"]),
onMouseleave: o[0] || (o[0] = f((a) => n(e).setHoverNode(null), ["stop"]))
}, x(l.label ?? ((u = n($).getComponentConfingByType(l.type)) == null ? void 0 : u.defaultSchema.label)), 41, D)
])) : h("", !0)
]);
}), 128))
]));
}
}), F = {
key: 0,
class: "epic-right-sidebar-container relative"
}, I = { class: "w-308px" }, L = { class: "epic-actions-container" }, T = ["title", "onClick"], q = { class: "epic-sidebar-content" }, O = /* @__PURE__ */ b({
__name: "index",
setup(N) {
var u;
const e = g(!1), p = S(() => $.viewsContainers.rightSidebars.value.filter((a) => a.visible)), i = g(0), o = H(null);
o.value = (u = p.value[0]) == null ? void 0 : u.component;
function l() {
e.value = !e.value;
}
function c(a, d) {
if (i.value === d)
return !1;
o.value = a.component, i.value = d;
}
return (a, d) => o.value ? (t(), s("div", F, [
r("div", {
class: "epic-right-sidebar-hide-btn absolute left--18px top-80px cursor-pointer rounded-full flex justify-center items-center w-28px h-28px z-9",
onClick: l
}, [
k(n(M), {
class: _(["transition-all", { "rotate-180": e.value }]),
name: "icon--epic--arrow-forward-ios-rounded"
}, null, 8, ["class"])
]),
d[0] || (d[0] = r("div", { class: "w-10px" }, null, -1)),
r("div", {
class: _(["epic-right-sidebar w-308px", { hide: e.value }])
}, [
r("div", I, [
k(E),
r("ul", L, [
(t(!0), s(C, null, y(p.value, (m, v) => (t(), s("li", {
key: v,
class: _(["epic-action-item", { checked: i.value === v }]),
title: m.title,
onClick: (A) => c(m, v)
}, x(m.title), 11, T))), 128))
]),
r("div", q, [
(t(), w(R(o.value)))
])
])
], 2)
])) : h("", !0);
}
});
export {
O as default
};