epic-designer-cjh/dist/index-94b447ce.js

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

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