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

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

import { defineComponent as f, resolveComponent as k, openBlock as _, createBlock as E, unref as t, isRef as I, withCtx as x, createElementVNode as c, createVNode as n, createElementBlock as b, createCommentVNode as $, computed as B, onMounted as w, withDirectives as N, toDisplayString as g, vShow as O, createTextVNode as D } from "vue";
import { d as M } from "./vuedraggable.umd-D908YPOr.js";
import { p as C, g as U } from "./pluginManager-BNLy8dPz.js";
import { _ as v } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
import { u as A } from "./index-NT_HkNlB.js";
import { u as L } from "./index-B1s67XDZ.js";
const R = { class: "option-item text-16px grid text-$epic-text-secondary gap-2 items-center mb-2 grid-cols-[16px_auto_auto_16px_16px]" }, S = {
  key: 0,
  class: "pl-4"
}, T = /* @__PURE__ */ f({
  name: "EColumnItem",
  __name: "columnItem",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(p, { emit: s }) {
    const r = p, i = C.getComponent("input"), d = A(r, "modelValue", s);
    function u(o) {
      const a = {
        type: "table-cell",
        children: [],
        id: "table-cell_" + U(),
        label: "",
        prop: ""
      };
      o.children ? o.children.push(a) : o.children = [a];
    }
    function V(o) {
      d.value = d.value.filter((a, m) => m !== o);
    }
    return (o, a) => {
      const m = k("EColumnItem");
      return _(), E(t(M), {
        modelValue: t(d),
        "onUpdate:modelValue": a[0] || (a[0] = (e) => I(d) ? d.value = e : null),
        "item-key": "id",
        "component-data": {
          type: "transition-group"
        },
        group: "option-list",
        handle: ".handle",
        animation: 200
      }, {
        item: x(({ element: e, index: y }) => [
          c("div", null, [
            c("div", R, [
              n(t(v), {
                class: "mr-2 cursor-move handle",
                name: "icon--epic--drag"
              }),
              n(t(i), {
                modelValue: e.label,
                "onUpdate:modelValue": (l) => e.label = l,
                value: e.label,
                "onUpdate:value": (l) => e.label = l,
                placeholder: "label"
              }, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
              n(t(i), {
                modelValue: e.prop,
                "onUpdate:modelValue": (l) => e.prop = l,
                value: e.prop,
                "onUpdate:value": (l) => e.prop = l,
                placeholder: "value"
              }, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
              n(t(v), {
                class: "cursor-pointer text-lg!",
                name: "icon--epic--add-rounded",
                onClick: (l) => u(e)
              }, null, 8, ["onClick"]),
              n(t(v), {
                class: "hover:text-red cursor-pointer",
                name: "icon--epic--delete-outline-rounded",
                onClick: (l) => V(y)
              }, null, 8, ["onClick"])
            ]),
            e.children ? (_(), b("div", S, [
              n(m, {
                modelValue: e.children,
                "onUpdate:modelValue": (l) => e.children = l
              }, null, 8, ["modelValue", "onUpdate:modelValue"])
            ])) : $("", !0)
          ])
        ]),
        _: 1
      }, 8, ["modelValue"]);
    };
  }
}), j = { class: "" }, K = /* @__PURE__ */ f({
  __name: "index",
  props: {
    tree: { type: Boolean },
    modelValue: {},
    dynamicId: {},
    type: {}
  },
  emits: ["update:modelValue", "update:EOptionsEditor"],
  setup(p, { emit: s }) {
    const { t: r } = L(), i = C.getComponent("button"), h = p, d = s, u = B({
      get() {
        return h.modelValue;
      },
      set(o) {
        d("update:modelValue", o);
      }
    });
    w(() => {
    });
    function V() {
      u.value.push({
        type: "table-cell",
        children: [],
        id: "table-cell_" + U(),
        label: "",
        prop: ""
      });
    }
    return (o, a) => {
      var m;
      return _(), b("div", j, [
        c("div", null, [
          N(c("div", { class: "py-4 my-2 text-center text-gray-400 bg-white" }, g(t(r)("noOptions")), 513), [
            [O, !((m = u.value) != null && m.length)]
          ]),
          n(T, {
            modelValue: u.value,
            "onUpdate:modelValue": a[0] || (a[0] = (e) => u.value = e)
          }, null, 8, ["modelValue"]),
          n(t(i), { onClick: V }, {
            default: x(() => [
              D(g(t(r)("addOption")), 1)
            ]),
            _: 1
          })
        ])
      ]);
    };
  }
});
export {
  K as default
};