epic-designer-dev/dist/ui-kit/base-ui/src/tree/treeNodeItem.vue.js

基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器

import { defineComponent as g, inject as n, computed as b, h as t, createElementBlock as v, openBlock as r, normalizeClass as i, unref as l, createElementVNode as V, createBlock as w, createCommentVNode as y, createVNode as k } from "vue";
/* empty css            */
import I from "../icon/icon.vue2.js";
import "@vueuse/core";
import "../../../../hooks/src/store/index.js";
import { pluginManager as P } from "../../../../utils/src/manager/pluginManager.js";
import $ from "./treeNodes.vue.js";
const F = /* @__PURE__ */ g({
  name: "ETreeNodeItem",
  __name: "treeNodeItem",
  props: {
    schema: {}
  },
  setup(_) {
    const e = _, d = n("slots", {}), o = n("pageSchema", {}), c = n("expandedKeys"), C = n("treeProps"), N = n("selectedKeys"), K = n("handleSelect"), m = b(() => c.value.includes(e.schema.id ?? "")), S = g({
      setup() {
        return () => {
          var a;
          return t(
            "span",
            {
              class: {
                checked: N.value.includes(e.schema.id),
                hover: C.hoverKey === e.schema.id,
                text: !0
              },
              onClick: () => K(e.schema.id, e.schema)
            },
            ((a = d["tree-node"]) == null ? void 0 : a.call(d, e)) ?? t(
              "span",
              { class: "epic-text-padding flex" },
              {
                default: () => {
                  var s;
                  return [
                    t(
                      "span",
                      { class: "max-w-full truncate" },
                      e.schema.label ?? ((s = P.getComponentConfingByType(e.schema.type)) == null ? void 0 : s.defaultSchema.label)
                    ),
                    t(
                      "span",
                      { class: "epic-node-type-text flex-1 w-0 truncate" },
                      e.schema.id
                    )
                  ];
                }
              }
            )
          );
        };
      }
    });
    function B() {
      const a = e.schema.id;
      if (!a)
        return !1;
      c.value.includes(a) ? c.value = c.value.filter((s) => s !== a) : c.value.push(a);
    }
    function E() {
      var s;
      const a = e.schema.id;
      if (!a || !((s = e.schema.children) != null && s.length))
        return !1;
      c.value.push(a);
    }
    return E(), (a, s) => {
      var p, h, u, f, x;
      return r(), v("li", {
        class: i(["epic-tree-node", {
          expanded: (p = e.schema.children) == null ? void 0 : p.length,
          "level-1": e.schema.id === ((h = l(o).schemas[0]) == null ? void 0 : h.id)
        }])
      }, [
        V("a", null, [
          (u = e.schema.children) != null && u.length && e.schema.id !== ((f = l(o).schemas[0]) == null ? void 0 : f.id) ? (r(), v("span", {
            key: 0,
            class: i(["icon-expanded", { expanded: m.value }]),
            onClick: B
          }, [
            k(l(I), { name: "icon--epic--caret-right-outlined" })
          ], 2)) : y("", !0),
          k(l(S))
        ]),
        (x = e.schema.children) != null && x.length ? (r(), w($, {
          key: 0,
          schemas: e.schema.children,
          "onUpdate:schemas": s[0] || (s[0] = (T) => e.schema.children = T),
          class: i(["epic-tree-sublist", { expanded: m.value }]),
          "parent-schema": e.schema
        }, null, 8, ["schemas", "class", "parent-schema"])) : y("", !0)
      ], 2);
    };
  }
});
export {
  F as default
};