form-designer-xinyi/dist/index-Dk_O2Wz7.js

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

import { defineComponent as C, inject as I, resolveComponent as $, openBlock as s, createBlock as g, unref as l, isRef as U, withCtx as b, createElementVNode as f, normalizeClass as w, createVNode as d, createCommentVNode as x, createElementBlock as k, provide as N, withDirectives as O, vShow as j, createTextVNode as z, reactive as A } from "vue";
import { d as M } from "./vuedraggable.umd-BDlqjyNA.js";
import { p as y } from "./revoke-iScTU0eW.js";
import { e as B } from "./index-DWpaTBDO.js";
import { _ as h } from "./icon.vue_vue_type_script_setup_true_lang-BKjDMfHm.js";
const R = {
  key: 0,
  class: "pl-4"
}, D = /* @__PURE__ */ C({
  name: "EOptionItem",
  __name: "optionItem",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(c, { emit: p }) {
    const v = c, m = y.getComponent("input"), V = I("tree", !1), u = B(v, "modelValue", p);
    function i(a) {
      const n = {
        label: "",
        value: ""
      };
      a.children ? a.children.push(n) : a.children = [n];
    }
    function r(a) {
      u.value = u.value.filter((n, _) => _ !== a);
    }
    return (a, n) => {
      const _ = $("EOptionItem");
      return s(), g(l(M), {
        modelValue: l(u),
        "onUpdate:modelValue": n[0] || (n[0] = (e) => U(u) ? u.value = e : null),
        "item-key": "id",
        "component-data": {
          type: "transition-group"
        },
        group: "option-list",
        handle: ".handle",
        animation: 200
      }, {
        item: b(({ element: e, index: E }) => [
          f("div", null, [
            f("div", {
              class: w([l(V) ? "grid-cols-[16px_auto_auto_16px_16px]" : "grid-cols-[16px_auto_auto_16px]", "option-item grid gap-2 items-center mb-2"])
            }, [
              d(l(h), {
                class: "mr-2 text-lg cursor-move handle",
                name: "icon-tuozhuai"
              }),
              d(l(m), {
                modelValue: e.label,
                "onUpdate:modelValue": (t) => e.label = t,
                value: e.label,
                "onUpdate:value": (t) => e.label = t,
                placeholder: "label"
              }, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
              d(l(m), {
                modelValue: e.value,
                "onUpdate:modelValue": (t) => e.value = t,
                value: e.value,
                "onUpdate:value": (t) => e.value = t,
                placeholder: "value"
              }, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
              l(V) ? (s(), g(l(h), {
                key: 0,
                class: "text-lg",
                name: "icon-tianjia1",
                onClick: (t) => i(e)
              }, null, 8, ["onClick"])) : x("", !0),
              d(l(h), {
                class: "text-lg hover:text-red cursor-pointer",
                name: "icon-shanchu1",
                onClick: (t) => r(E)
              }, null, 8, ["onClick"])
            ], 2),
            e.children ? (s(), k("div", R, [
              d(_, {
                modelValue: e.children,
                "onUpdate:modelValue": (t) => e.children = t
              }, null, 8, ["modelValue", "onUpdate:modelValue"])
            ])) : x("", !0)
          ])
        ]),
        _: 1
      }, 8, ["modelValue"]);
    };
  }
}), S = { class: "" }, T = { class: "py-4 my-2 text-center text-gray-400 bg-white" }, K = /* @__PURE__ */ C({
  __name: "index",
  props: {
    tree: { type: Boolean },
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(c, { emit: p }) {
    const v = y.getComponent("button"), m = c, o = B(m, "modelValue", p);
    N("tree", m.tree);
    function u() {
      const i = A({
        label: "",
        value: ""
      });
      o.value = [...o.value, i];
    }
    return (i, r) => {
      var a;
      return s(), k("div", S, [
        O(f("div", T, "暂无选项", 512), [
          [j, !((a = l(o)) != null && a.length)]
        ]),
        d(D, {
          modelValue: l(o),
          "onUpdate:modelValue": r[0] || (r[0] = (n) => U(o) ? o.value = n : null)
        }, null, 8, ["modelValue"]),
        d(l(v), { onClick: u }, {
          default: b(() => [
            z("添加选项")
          ]),
          _: 1
        })
      ]);
    };
  }
});
export {
  K as default
};