@coderlt/form-designer/dist/index-f15fb024.js

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

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