form-designer-xinyi/dist/index-DWCjsALD.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as b, inject as B, openBlock as t, createElementBlock as s, Fragment as C, renderList as y, unref as n, createCommentVNode as p, createBlock as $, createElementVNode as i, withModifiers as f, toDisplayString as x, ref as k, computed as S, shallowRef as z, createVNode as g, normalizeClass as v, resolveDynamicComponent as H } from "vue";
import { p as w } from "./revoke-iScTU0eW.js";
import { _ as M } from "./icon.vue_vue_type_script_setup_true_lang-BKjDMfHm.js";
const R = { class: "epic-breadcrumb pl-4 py-2 truncate" }, V = { key: 0 }, j = { key: 0 }, D = ["onClick", "onMouseenter"], E = /* @__PURE__ */ b({
  __name: "breadcrumb",
  setup(N) {
    const e = B("designer");
    function d(c) {
      e.setCheckedNode(c);
    }
    return (c, o) => (t(), s("div", R, [
      (t(!0), s(C, null, y(n(e).state.matched, (l, r) => {
        var u;
        return t(), s("span", { key: r }, [
          r > n(e).state.matched.length - 4 ? (t(), s("span", V, [
            n(e).state.matched.length > 3 && r === n(e).state.matched.length - 3 ? (t(), s("span", j, "...")) : p("", !0),
            r !== 0 ? (t(), $(n(M), {
              key: 1,
              class: "m-1",
              name: "icon-zhankai"
            })) : p("", !0),
            i("span", {
              class: "node-item cursor-pointer",
              onClick: (a) => d(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(w).getComponentConfingByType(l.type)) == null ? void 0 : u.defaultSchema.label)), 41, D)
          ])) : p("", !0)
        ]);
      }), 128))
    ]));
  }
}), F = {
  key: 0,
  class: "epic-right-sidebar-container relative"
}, I = /* @__PURE__ */ i("div", { class: "w-10px" }, null, -1), L = { class: "w-280px" }, T = { class: "epic-actions-container" }, q = ["title", "onClick"], A = { class: "epic-sidebar-content" }, P = /* @__PURE__ */ b({
  __name: "index",
  setup(N) {
    var u;
    const e = k(!1), d = S(() => w.viewsContainers.rightSidebars.value.filter((a) => a.visible)), c = k(0), o = z(null);
    o.value = (u = d.value[0]) == null ? void 0 : u.component;
    function l() {
      e.value = !e.value;
    }
    function r(a, h) {
      if (c.value === h)
        return !1;
      o.value = a.component, c.value = h;
    }
    return (a, h) => o.value ? (t(), s("div", F, [
      i("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
      }, [
        g(n(M), {
          prefix: "",
          class: v(["iconfont transition-all", { "rotate-180": e.value }]),
          name: "epic-icon-zhankai"
        }, null, 8, ["class"])
      ]),
      I,
      i("div", {
        class: v(["epic-right-sidebar w-280px", { hide: e.value }])
      }, [
        i("div", L, [
          g(E),
          i("ul", T, [
            (t(!0), s(C, null, y(d.value, (_, m) => (t(), s("li", {
              key: m,
              class: v(["epic-action-item", { checked: c.value === m }]),
              title: _.title,
              onClick: (G) => r(_, m)
            }, x(_.title), 11, q))), 128))
          ]),
          i("div", A, [
            (t(), $(H(o.value)))
          ])
        ])
      ], 2)
    ])) : p("", !0);
  }
});
export {
  P as default
};