epic-designer-cjh/dist/index-28eb23c0.js

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

import { defineComponent as U, inject as _, ref as k, computed as S, openBlock as d, createElementBlock as m, createElementVNode as a, createVNode as c, unref as s, withCtx as y, Fragment as $, renderList as D, normalizeClass as E, toDisplayString as C, mergeProps as T, withDirectives as j, vShow as z } from "vue";
import { d as A } from "./vuedraggable.umd-6a5b6da9.js";
import { p as b, c as w, f as F, r as G } from "./index-97ce4605.js";
import { _ as V } from "./icon.vue_vue_type_script_setup_true_lang-3f9e4127.js";
import "./_commonjsHelpers-c5d32002.js";
import "./_vue_commonjs-external-eb7fec7f.js";
const M = { class: "epic-component-view flex flex-col" }, P = { class: "search-box px-10px py-6px" }, q = { class: "flex flex-1 overflow-auto" }, H = { class: "tabs-box" }, J = ["title", "onClick"], K = { class: "h-full flex-1 overflow-auto py-2 box-border" }, O = ["onClick"], Q = { class: "text-center pt-42px text-gray-400" }, le = /* @__PURE__ */ U({
  __name: "index",
  setup(R) {
    const I = b.getComponent("input"), p = _("pageSchema"), h = _("designer"), v = b.getSchemaByGroup(), n = k(""), f = {
      title: "全部",
      list: []
    }, i = k(f), L = S(() => [
      f,
      ...v.value
    ]), r = S(() => {
      let o = i.value.list;
      if (i.value.title === "全部") {
        let l = v.value.filter((t) => t.title == "所有").map((t) => t.list);
        o = [].concat(...l);
        let e = {};
        o = o.filter((t) => e[t.type] ? !1 : (e[t.type] = !0, !0));
      }
      return n.value ? o.filter((l) => {
        var e;
        return (e = l.label) == null ? void 0 : e.includes(n.value);
      }) : o;
    });
    function N(o) {
      i.value = o;
    }
    function B(o) {
      var x;
      const l = F(p.schemas, ((x = h.state.checkedNode) == null ? void 0 : x.id) ?? "root");
      if (!l)
        return !1;
      let { list: e, schema: t, index: u } = l;
      t.children && !t.childImmovable && (e = t.children, u = t.children.length - 1);
      const g = w(o);
      e.splice(u + 1, 0, g), h.setCheckedNode(g), G.push(p.schemas, "插入组件");
    }
    return (o, l) => (d(), m("div", M, [
      a("div", P, [
        c(s(I), {
          placeholder: "搜索组件",
          modelValue: n.value,
          "onUpdate:modelValue": l[0] || (l[0] = (e) => n.value = e),
          clearable: "",
          allowClear: "",
          value: n.value,
          "onUpdate:value": l[1] || (l[1] = (e) => n.value = e)
        }, {
          prefix: y(() => [
            c(s(V), { name: "icon-chaxun" })
          ]),
          _: 1
        }, 8, ["modelValue", "value"])
      ]),
      a("div", q, [
        a("div", H, [
          (d(!0), m($, null, D(L.value, (e, t) => (d(), m("div", {
            class: E(["tab cursor-pointer truncate", { checked: i.value.title === e.title }]),
            key: t,
            title: e.title,
            onClick: (u) => N(e)
          }, C(e.title), 11, J))), 128))
        ]),
        a("div", K, [
          c(s(A), T({
            modelValue: r.value,
            "onUpdate:modelValue": l[2] || (l[2] = (e) => r.value = e)
          }, {
            group: { name: "edit-draggable", pull: "clone", put: !1 },
            sort: !1,
            animation: 180,
            ghostClass: "moving"
          }, {
            clone: s(w),
            "item-key": "id",
            class: "grid grid-cols-[auto_auto] px-10px gap-2"
          }), {
            item: y(({ element: e }) => [
              a("div", {
                class: "source-componet-item flex items-center truncate",
                onClick: (t) => B(e)
              }, [
                c(s(V), {
                  prefix: "",
                  name: e.icon
                }, null, 8, ["name"]),
                a("div", null, C(e.label), 1)
              ], 8, O)
            ]),
            _: 1
          }, 16, ["modelValue", "clone"]),
          j(a("div", Q, "没有查询到的组件", 512), [
            [z, !r.value.length]
          ])
        ])
      ])
    ]));
  }
});
export {
  le as default
};