gepic/dist/core/components/tree/src/tree.vue.js

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

import { defineComponent as S, useSlots as V, provide as n, ref as v, computed as y, createElementBlock as b, openBlock as B, createElementVNode as r, createVNode as d, unref as x, withCtx as E, withDirectives as T, vShow as U } from "vue";
import A from "./treeNodes.vue.js";
import D from "../../icon/src/icon.vue.js";
import { pluginManager as I } from "../../../../utils/manager/pluginManager.js";
import "@vueuse/core";
import "../../../../hooks/store/index.js";
const N = { class: "epic-tree h-full flex flex-col" }, $ = { class: "epic-search-box px-10px py-6px" }, L = { class: "epic-tree-main flex-1 overflow-auto h-0" }, M = { class: "text-center pt-42px text-gray-400" }, J = /* @__PURE__ */ S({
  name: "ETree",
  __name: "tree",
  props: {
    options: {
      type: Array,
      default: () => []
    },
    hoverKey: {
      type: String,
      default: ""
    },
    selectedKeys: {
      type: Array,
      default: () => []
    },
    draggable: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["update:selectedKeys", "nodeClick"],
  setup(g, { emit: _ }) {
    const K = V();
    n("slots", K);
    const C = I.getComponent("input"), o = v(""), w = v([]), a = g, p = _, i = y({
      get() {
        return a.selectedKeys;
      },
      set(t) {
        p("update:selectedKeys", t);
      }
    }), c = y({
      get() {
        return u(a.options, o.value);
      },
      set(t) {
        console.log(t);
      }
    });
    function u(t, e) {
      const l = [];
      return t.forEach((s) => {
        var f;
        if ((f = s.label) != null && f.includes(e))
          l.push(s);
        else if (s.children) {
          const m = u(s.children, e);
          if (m.length > 0) {
            const h = { ...s };
            h.children = m, l.push(h);
          }
        }
      }), l;
    }
    function k(t, e) {
      i.value = [t], p("nodeClick", { id: t, componentSchema: e });
    }
    return n("expandedKeys", w), n("selectedKeys", i), n("treeProps", a), n("handleSelect", k), (t, e) => (B(), b("div", N, [
      r("div", $, [
        d(x(C), {
          modelValue: o.value,
          "onUpdate:modelValue": e[0] || (e[0] = (l) => o.value = l),
          value: o.value,
          "onUpdate:value": e[1] || (e[1] = (l) => o.value = l),
          placeholder: "搜索节点",
          clearable: "",
          "allow-clear": ""
        }, {
          prefix: E(() => [
            d(x(D), { name: "icon--epic--search-rounded" })
          ]),
          _: 1
        }, 8, ["modelValue", "value"])
      ]),
      r("div", L, [
        r("ul", null, [
          d(A, {
            schemas: c.value,
            "onUpdate:schemas": e[2] || (e[2] = (l) => c.value = l)
          }, null, 8, ["schemas"])
        ]),
        T(r("div", M, " 没有查询到的数据 ", 512), [
          [U, !c.value.length]
        ])
      ])
    ]));
  }
});
export {
  J as default
};