ai-form-designer/dist/index-CqrhHEgJ.js

vue3+adv的设计器,可视化开发页面表单

import { defineComponent as V, inject as C, createBlock as k, openBlock as _, unref as l, isRef as f, withCtx as x, createElementVNode as c, normalizeClass as y, createVNode as n, provide as B, createElementBlock as b, withDirectives as w, vShow as I, createTextVNode as $, reactive as E } from "vue";
import { d as N } from "./vuedraggable.umd-R2PMz9bE.js";
import { p as g, n as h } from "./index-DwcJO-0a.js";
import { _ as v } from "./icon.vue_vue_type_script_setup_true_lang-DW206h_7.js";
const D = /* @__PURE__ */ V({
  name: "EOptionItem",
  __name: "optionItem",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(d, { emit: m }) {
    const i = d, r = g.getComponent("input");
    C("tree", !1);
    const t = h(i, "modelValue", m);
    function s(u) {
      t.value = t.value.filter((a, e) => e !== u);
    }
    return (u, a) => (_(), k(l(N), {
      modelValue: l(t),
      "onUpdate:modelValue": a[0] || (a[0] = (e) => f(t) ? t.value = e : null),
      "item-key": "id",
      "component-data": {
        type: "transition-group"
      },
      group: "option-list",
      handle: ".handle",
      animation: 200
    }, {
      item: x(({ element: e, index: p }) => [
        c("div", null, [
          c("div", {
            class: y(["grid-cols-[16px_auto_35px_16px]", "option-item text-16px grid text-$epic-text-secondary gap-2 items-center mb-2"])
          }, [
            n(l(v), {
              class: "mr-2 cursor-move handle",
              name: "icon--epic--drag"
            }),
            n(l(r), {
              modelValue: e.rule,
              "onUpdate:modelValue": (o) => e.rule = o,
              value: e.rule,
              "onUpdate:value": (o) => e.rule = o,
              placeholder: "组件ID"
            }, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
            n(l(r), {
              modelValue: e.separator,
              "onUpdate:modelValue": (o) => e.separator = o,
              value: e.separator,
              "onUpdate:value": (o) => e.separator = o,
              placeholder: "分隔符"
            }, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
            n(l(v), {
              class: "hover:text-red cursor-pointer",
              name: "icon--epic--delete-outline-rounded",
              onClick: (o) => s(p)
            }, null, 8, ["onClick"])
          ])
        ])
      ]),
      _: 1
    }, 8, ["modelValue"]));
  }
}), M = { class: "" }, R = { class: "py-4 my-2 text-center text-gray-400 bg-white" }, S = /* @__PURE__ */ V({
  __name: "index",
  props: {
    tree: { type: Boolean },
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(d, { emit: m }) {
    const i = g.getComponent("button"), r = d, t = h(r, "modelValue", m);
    B("tree", r.tree);
    function s() {
      const u = E({
        rule: "",
        separator: ""
      });
      t.value = [...t.value, u];
    }
    return (u, a) => {
      var e;
      return _(), b("div", M, [
        w(c("div", R, "暂无规则", 512), [
          [I, !((e = l(t)) != null && e.length)]
        ]),
        n(D, {
          modelValue: l(t),
          "onUpdate:modelValue": a[0] || (a[0] = (p) => f(t) ? t.value = p : null)
        }, null, 8, ["modelValue"]),
        n(l(i), { onClick: s }, {
          default: x(() => a[1] || (a[1] = [
            $("添加规则")
          ])),
          _: 1,
          __: [1]
        })
      ]);
    };
  }
});
export {
  S as default
};