ai-form-designer/dist/index-TwN-wYTG.js

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

import { defineComponent as B, computed as P, inject as O, createElementBlock as u, openBlock as r, createElementVNode as d, Fragment as c, renderList as k, createCommentVNode as U, toDisplayString as $, createVNode as g, unref as y, ref as C, watchEffect as T, createBlock as I, withCtx as M, createTextVNode as N } from "vue";
import { _ as j, p as R, n as F, m as q } from "./index-DwcJO-0a.js";
import { _ as A } from "./icon.vue_vue_type_script_setup_true_lang-DW206h_7.js";
const D = [
  { label: "string", value: "string" },
  { label: "number", value: "number" },
  { label: "boolean", value: "boolean" },
  { label: "method", value: "method" },
  { label: "regexp", value: "regexp" },
  { label: "integer", value: "integer" },
  { label: "float", value: "float" },
  { label: "array", value: "array" },
  { label: "object", value: "object" },
  // { label: 'enum', value: 'enum' },
  { label: "date", value: "date" },
  { label: "url", value: "url" },
  { label: "hex", value: "hex" },
  { label: "email", value: "email" },
  { label: "any", value: "any" }
], E = [
  { label: "change", value: "change" },
  { label: "blur", value: "blur" }
], x = ["string", "number", "url", "array", "email"], L = { class: "rule-item-main bg-white m-t-2 p-2 rounded border border-solid border-gray-200 hover:border-primary transition-all relative" }, z = {
  key: 0,
  class: "flex m-t-2 first:m-0"
}, G = {
  class: "epic-attr-label",
  title: "校验时机"
}, H = { class: "epic-attr-input" }, J = /* @__PURE__ */ B({
  __name: "ERuleItem",
  props: {
    rule: {}
  },
  emits: ["change", "delete", "update:rule"],
  setup(f, { emit: _ }) {
    const p = _, m = f, a = P({
      get() {
        return m.rule;
      },
      set(e) {
        p("update:rule", e);
      }
    }), s = O("pageManager", {}), o = P(() => Object.entries(s.funcs.value).filter(([e, v]) => typeof v == "function").map(([e]) => ({ label: e, value: e }))), V = [
      {
        type: "select",
        label: "校验时机",
        model: "trigger",
        componentProps: { options: E, placeholder: "校验时机", multiple: !0, mode: "multiple" }
      },
      {
        type: "switch",
        label: "自定义规则",
        model: "isValidator"
      },
      {
        type: "select",
        label: "校验函数",
        model: "validator",
        show() {
          return !!a.value.isValidator;
        },
        componentProps: { options: o.value, placeholder: "校验函数" }
      },
      {
        type: "select",
        label: "类型",
        model: "type",
        show() {
          return !a.value.isValidator;
        },
        componentProps: { options: D, placeholder: "类型" }
      },
      {
        type: "input",
        label: "正则校验",
        model: "pattern",
        show() {
          return !a.value.isValidator;
        },
        componentProps: { placeholder: "正则校验" }
      },
      {
        type: "number",
        label: "字段长度",
        model: "len",
        show() {
          return x.includes(a.value.type ?? "");
        },
        componentProps: { min: 0, placeholder: "字段长度" }
      },
      {
        type: "number",
        label: "最小长度",
        model: "min",
        show() {
          return x.includes(a.value.type ?? "");
        },
        componentProps: { min: 0, placeholder: "最小长度" }
      },
      {
        type: "number",
        label: "最大长度",
        model: "max",
        show() {
          return x.includes(a.value.type ?? "");
        },
        componentProps: { min: 0, placeholder: "最大长度" }
      },
      {
        type: "input",
        label: "校验信息",
        model: "message",
        componentProps: { placeholder: "校验信息" }
      }
    ];
    function t() {
      const e = a.value;
      e.isValidator ? (delete e.type, delete e.pattern, delete e.len, delete e.min, delete e.max) : delete e.validator, p("change", e);
    }
    function w() {
      p("delete");
    }
    return (e, v) => (r(), u("div", L, [
      (r(), u(c, null, k(V, (l, h) => (r(), u(c, { key: h }, [
        !l.show || l.show() ? (r(), u("div", z, [
          d("div", G, $(l.label), 1),
          d("div", H, [
            g(y(j), {
              modelValue: a.value[l.model],
              "onUpdate:modelValue": (n) => a.value[l.model] = n,
              componentSchema: { ...l, noFormItem: !0 },
              onChange: t
            }, null, 8, ["modelValue", "onUpdate:modelValue", "componentSchema"])
          ])
        ])) : U("", !0)
      ], 64))), 64)),
      d("div", {
        class: "rule-btn-delete absolute top-0 text-md right-0 transition-all w-24px h-24px cursor-pointer rounded-bl-2 flex justify-center items-center color-white",
        onClick: w
      }, [
        g(y(A), { name: "icon--epic--delete-outline-rounded" })
      ])
    ]));
  }
}), K = { class: "rule-item-main m-t-2 p-2 rounded border border-solid transition-all relative" }, Q = {
  key: 0,
  class: "flex m-t-2 first:m-0"
}, W = { class: "epic-attr-label" }, X = { class: "flex-1" }, ee = /* @__PURE__ */ B({
  __name: "index",
  props: {
    ruleType: {
      type: String,
      default: "string"
    },
    modelValue: {
      type: Array,
      default: void 0
    }
  },
  emits: ["update:modelValue"],
  setup(f, { emit: _ }) {
    const p = R.getComponent("button"), m = f, s = F(m, "modelValue", _), o = C({
      required: !1,
      message: "必填项",
      type: m.ruleType,
      trigger: ["change"]
    }), V = [
      {
        type: "switch",
        label: "必填项",
        model: "required"
      },
      {
        type: "select",
        label: "校验时机",
        model: "trigger",
        show() {
          return !!o.value.required;
        },
        componentProps: {
          options: E,
          placeholder: "校验时机",
          multiple: !0,
          mode: "multiple"
        }
      },
      {
        type: "select",
        label: "类型",
        model: "type",
        show() {
          return !!o.value.required;
        },
        componentProps: { options: D, placeholder: "类型" }
      },
      {
        type: "input",
        label: "校验信息",
        model: "message",
        show() {
          return !!o.value.required;
        },
        componentProps: { placeholder: "校验信息" }
      }
    ], t = C([]);
    T(() => {
      s.value && (t.value = [], s.value.forEach((l) => {
        typeof l.required < "u" ? o.value = l : t.value.push(l);
      }));
    });
    function w() {
      t.value.push({
        message: "",
        type: m.ruleType,
        trigger: ["change"]
      }), e();
    }
    function e() {
      if (o.value.required) {
        s.value = q([...t.value, o.value]);
        return;
      }
      if (t.value.length) {
        s.value = q(t.value);
        return;
      }
      s.value = void 0;
    }
    function v(l) {
      t.value.splice(l, 1), e();
    }
    return (l, h) => (r(), u("div", null, [
      d("div", K, [
        (r(), u(c, null, k(V, (n, i) => (r(), u(c, { key: i }, [
          !n.show || n.show() ? (r(), u("div", Q, [
            d("div", W, $(n.label), 1),
            d("div", X, [
              g(y(j), {
                modelValue: o.value[n.model],
                "onUpdate:modelValue": (b) => o.value[n.model] = b,
                componentSchema: { ...n, noFormItem: !0 },
                onChange: e
              }, null, 8, ["modelValue", "onUpdate:modelValue", "componentSchema"])
            ])
          ])) : U("", !0)
        ], 64))), 64))
      ]),
      (r(!0), u(c, null, k(t.value, (n, i) => (r(), I(J, {
        key: i,
        rule: t.value[i],
        "onUpdate:rule": (b) => t.value[i] = b,
        onDelete: (b) => v(i),
        onChange: e
      }, null, 8, ["rule", "onUpdate:rule", "onDelete"]))), 128)),
      g(y(p), {
        class: "m-t-2",
        onClick: w
      }, {
        default: M(() => h[0] || (h[0] = [
          N(" 添加规则 ")
        ])),
        _: 1,
        __: [0]
      })
    ]));
  }
});
export {
  ee as default
};