epic-designer-gold/dist/index-D23fumx-.js

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

import { defineComponent as E, inject as p, ref as b, computed as f, openBlock as h, createElementBlock as V, createElementVNode as c, createVNode as i, unref as a, withCtx as d, isRef as M, Fragment as j, renderList as A, createBlock as D, mergeProps as F, toDisplayString as G } from "vue";
import { d as K } from "./vuedraggable.umd-D908YPOr.js";
import { p as s, a as w, f as R } from "./pluginManager-BNLy8dPz.js";
import { a as q } from "./index-NT_HkNlB.js";
import { _ as I } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
import { u as H, a as J } from "./index-B1s67XDZ.js";
const O = { class: "epic-component-view flex flex-col" }, Q = { class: "epic-search-box px-10px py-6px" }, W = { class: "flex flex-1 overflow-auto" }, X = { class: "box-border h-full flex-1 overflow-auto" }, Y = ["onClick"], Z = ["title"], ce = /* @__PURE__ */ E({
  __name: "index",
  setup(ee) {
    const { t: m } = H(), N = s.getComponent("input"), B = s.getComponent("Collapse"), L = s.getComponent("CollapseItem"), g = p("pageSchema"), v = p("designer"), U = p("revoke"), P = p("designerProps"), C = s.getComponentSchemaGroups(), n = b(""), T = {
      title: m("all"),
      list: []
    }, r = q("epic-component-view-keys", []), $ = f(() => C.value.map((l) => ({
      ...l,
      list: l.list.filter((t) => {
        var e;
        return (e = t.label) == null ? void 0 : e.includes(n.value);
      })
    })).filter((l) => l.list.length > 0));
    f(() => (J.get("saas-locale") || "zh-CN") === "zh-CN");
    const _ = b(T);
    f(() => {
      let l = _.value.list;
      if (_.value.title === m("all")) {
        const t = C.value.map((e) => e.list);
        l = [].concat(...t);
      }
      return l.filter(
        (t) => {
          var e;
          return ((e = t.label) == null ? void 0 : e.includes(n.value)) && (!P.value.formMode || t.type !== "form");
        }
      );
    });
    function z(l) {
      var y, k, S;
      const t = R(g.schemas, ((y = v.state.checkedNode) == null ? void 0 : y.id) ?? "root");
      if (!t)
        return !1;
      let { list: e, schema: o, index: u } = t;
      o.children && !((S = (k = s.getComponentConfingByType(o.type)) == null ? void 0 : k.editConstraints) != null && S.childImmovable) && (e = o.children, u = o.children.length - 1);
      const x = w(l);
      e.splice(u + 1, 0, x), v.setCheckedNode(x), U.push(g.schemas, "插入组件");
    }
    return (l, t) => (h(), V("div", O, [
      c("div", Q, [
        i(a(N), {
          placeholder: a(m)("searchComponent"),
          modelValue: n.value,
          "onUpdate:modelValue": t[0] || (t[0] = (e) => n.value = e),
          clearable: "",
          allowClear: "",
          value: n.value,
          "onUpdate:value": t[1] || (t[1] = (e) => n.value = e)
        }, {
          prefix: d(() => [
            i(a(I), {
              class: "text-$epic-text-helper",
              name: "icon--epic--search-rounded"
            })
          ]),
          _: 1
        }, 8, ["placeholder", "modelValue", "value"])
      ]),
      c("div", W, [
        c("div", X, [
          i(a(B), {
            class: "ep-collapse",
            "default-expand-all": !a(r).length,
            modelValue: a(r),
            "onUpdate:modelValue": t[2] || (t[2] = (e) => M(r) ? r.value = e : null)
          }, {
            default: d(() => [
              (h(!0), V(j, null, A($.value, (e) => (h(), D(a(L), {
                class: "ep-collapse-item",
                name: e.title,
                title: e.title
              }, {
                default: d(() => [
                  i(a(K), F({
                    modelValue: e.list,
                    "onUpdate:modelValue": (o) => e.list = o
                  }, { ref_for: !0 }, {
                    group: { name: "edit-draggable", pull: "clone", put: !1 },
                    sort: !1,
                    animation: 180,
                    ghostClass: "moving"
                  }, {
                    clone: a(w),
                    "item-key": "id",
                    class: "grid grid-cols-[auto_auto] gap-2"
                  }), {
                    item: d(({ element: o }) => [
                      c("div", {
                        class: "epic-componet-item flex items-center truncate",
                        onClick: (u) => z(o)
                      }, [
                        i(a(I), {
                          name: a(s).getComponentConfingByType(o.type).icon ?? ""
                        }, null, 8, ["name"]),
                        c("div", {
                          title: o.label,
                          class: "epic-componet-label w-0 flex-1 truncate"
                        }, G(o.label), 9, Z)
                      ], 8, Y)
                    ]),
                    _: 1
                  }, 16, ["modelValue", "onUpdate:modelValue", "clone"])
                ]),
                _: 2
              }, 1032, ["name", "title"]))), 256))
            ]),
            _: 1
          }, 8, ["default-expand-all", "modelValue"])
        ])
      ])
    ]));
  }
});
export {
  ce as default
};