@coderlt/form-designer/dist/index-52c61241.js

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

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