snowy-designer/dist/ui-kit/panel-ui/src/activitybars/componentView/index.vue2.js

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

import { defineComponent as B, inject as c, ref as U, computed as T, watch as E, createElementBlock as x, openBlock as d, createElementVNode as u, createVNode as r, unref as l, withCtx as n, withDirectives as I, isRef as P, Fragment as D, renderList as L, createBlock as M, createTextVNode as j, toDisplayString as V, mergeProps as A, vShow as F } from "vue";
/* empty css                                 */
import G from "../../../../base-ui/src/components/icon/icon.vue.js";
import R from "../../../../base-ui/src/shadch-ui/accordion/Accordion.vue2.js";
import q from "../../../../base-ui/src/shadch-ui/accordion/AccordionContent.vue2.js";
import z from "../../../../base-ui/src/shadch-ui/accordion/AccordionItem.vue2.js";
import H from "../../../../base-ui/src/shadch-ui/accordion/AccordionTrigger.vue2.js";
import "radix-vue";
import "../../../../base-ui/src/shadch-ui/button/index.js";
import "clsx";
import "tailwind-merge";
import "lucide-vue-next";
import { useStorage as J } from "@vueuse/core";
import K from "../../../../base-ui/src/shadch-ui/input/InputSearch.vue2.js";
import O from "../../../../base-ui/src/shadch-ui/scroll-area/ScrollArea.vue.js";
import "../../../../base-ui/src/shadch-ui/toast/index.js";
import Q from "../../../../base-ui/src/components/empty/empty.vue.js";
import { generateNewSchema as C, findSchemaInfoById as W } from "../../../../../utils/src/common/data.js";
import "../../../../../hooks/src/store/index.js";
import "lodash";
import { pluginManager as f } from "../../../../../utils/src/manager/pluginManager.js";
import "monaco-editor";
import "../../../../../utils/src/request/index.js";
import X from "vuedraggable";
const Y = { class: "epic-component-view flex flex-col" }, Z = { class: "epic-search-box px-4 py-1" }, ee = ["onClick"], te = { class: "mt-0.5 truncate" }, $e = /* @__PURE__ */ B({
  __name: "index",
  setup(oe) {
    const _ = c("pageSchema"), h = c("designer"), k = c("revoke"), w = c("designerProps"), b = f.getComponentSchemaGroups(), s = U(""), i = J("epic-componet-collapse-names", []), m = T(() => b.value.map((t) => ({
      title: t.title,
      // 保留原项目的标题
      list: t.list.filter(
        (e) => {
          var o;
          return ((o = e.label) == null ? void 0 : o.includes(s.value)) && (!w.value.formMode || e.type !== "form");
        }
      )
      // 过滤出包含关键字且单表单模式下type不等于form的组件
    })).filter((t) => t.list.length)), $ = () => {
      const a = new Set(i.value);
      m.value.forEach((t) => a.add(t.title)), i.value = [...a];
    };
    E(
      () => s.value,
      (a) => {
        a && $();
      }
    );
    function N(a) {
      var v, S, y;
      const t = W(
        _.schemas,
        ((v = h.state.selectedNode) == null ? void 0 : v.id) ?? "root"
      );
      if (!t)
        return !1;
      let { index: e, schema: o, list: p } = t;
      o.children && !((y = (S = f.getComponentConfingByType(o.type)) == null ? void 0 : S.editConstraints) != null && y.childImmovable) && (p = o.children, e = o.children.length - 1);
      const g = C(a, _.schemas);
      p.splice(e + 1, 0, g), h.setSelectedNode(g), k.push("插入组件");
    }
    return (a, t) => (d(), x("div", Y, [
      u("div", Z, [
        r(l(K), {
          modelValue: s.value,
          "onUpdate:modelValue": t[0] || (t[0] = (e) => s.value = e),
          placeholder: "搜索组件"
        }, null, 8, ["modelValue"])
      ]),
      r(l(O), { class: "box-border h-full flex-1 overflow-auto px-4 py-2" }, {
        default: n(() => [
          r(l(R), {
            modelValue: l(i),
            "onUpdate:modelValue": t[1] || (t[1] = (e) => P(i) ? i.value = e : null),
            type: "multiple",
            class: "w-full",
            collapsible: ""
          }, {
            default: n(() => [
              (d(!0), x(D, null, L(m.value, (e) => (d(), M(l(z), {
                key: e.title,
                value: e.title
              }, {
                default: n(() => [
                  r(l(H), null, {
                    default: n(() => [
                      j(V(e.title), 1)
                    ]),
                    _: 2
                  }, 1024),
                  r(l(q), null, {
                    default: n(() => [
                      r(l(X), A({
                        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: l(C),
                        "item-key": "id",
                        class: "grid grid-cols-[1fr_1fr_1fr] gap-2 py-2"
                      }), {
                        item: n(({ element: o }) => [
                          u("div", {
                            class: "epic-source-componet-item py-3 text-center",
                            onClick: (p) => N(o)
                          }, [
                            r(l(G), {
                              class: "epic-component-icon",
                              name: l(f).getComponentConfingByType(o.type).icon ?? ""
                            }, null, 8, ["name"]),
                            u("div", te, V(o.label), 1)
                          ], 8, ee)
                        ]),
                        _: 2
                      }, 1040, ["modelValue", "onUpdate:modelValue", "clone"])
                    ]),
                    _: 2
                  }, 1024)
                ]),
                _: 2
              }, 1032, ["value"]))), 128))
            ]),
            _: 1
          }, 8, ["modelValue"]),
          I(r(l(Q), { description: "没有查询到的组件" }, null, 512), [
            [F, !m.value.length]
          ])
        ]),
        _: 1
      })
    ]));
  }
});
export {
  $e as default
};