epic-designer-gold/dist/index-BdToAdGK.js

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

import { defineComponent as L, computed as C, inject as D, openBlock as n, createElementBlock as i, Fragment as g, renderList as k, createElementVNode as p, unref as c, toDisplayString as q, createVNode as y, createCommentVNode as M, ref as T, watchEffect as E, createBlock as F, withCtx as O, createTextVNode as I } from "vue";
import { p as N, a as B } from "./pluginManager-BCnrHPYv.js";
import { _ as U, g as A } from "./index-Dx4IQxp4.js";
import { _ as z } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
import { u as $ } from "./index-B1s67XDZ.js";
const R = [
  { 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" }
], j = [
  { label: "change", value: "change" },
  { label: "blur", value: "blur" }
], x = ["string", "number", "url", "array", "email"], G = { class: "rule-item-main bg-white m-t-2 p-2 rounded border border-solid border-gray-200 hover:border-primary transition-all relative" }, H = {
  key: 0,
  class: "flex m-t-2 first:m-0"
}, J = ["title"], K = { class: "epic-attr-input" }, Q = /* @__PURE__ */ L({
  __name: "ERuleItem",
  props: {
    rule: {}
  },
  emits: ["change", "delete", "update:rule"],
  setup(f, { emit: _ }) {
    const { t: e } = $(), m = _, v = f, o = C({
      get() {
        return v.rule;
      },
      set(l) {
        m("update:rule", l);
      }
    }), s = D("pageManager", {}), r = C(() => Object.entries(s.funcs.value).filter(([l, h]) => typeof h == "function").map(([l]) => ({ label: l, value: l }))), V = [
      {
        type: "select",
        label: e("validationTrigger"),
        model: "trigger",
        componentProps: { options: j, placeholder: e("validationTrigger"), multiple: !0, mode: "multiple" }
      },
      {
        type: "switch",
        label: e("customRule"),
        model: "isValidator"
      },
      {
        type: "select",
        label: e("validationFunction"),
        model: "validator",
        show() {
          return !!o.value.isValidator;
        },
        componentProps: { options: r.value, placeholder: e("validationFunction") }
      },
      {
        type: "select",
        label: e("type"),
        model: "type",
        show() {
          return !o.value.isValidator;
        },
        componentProps: { options: R, placeholder: e("type") }
      },
      {
        type: "input",
        label: e("regexValidation"),
        model: "pattern",
        show() {
          return !o.value.isValidator;
        },
        componentProps: { placeholder: e("regexValidation") }
      },
      {
        type: "number",
        label: e("fieldLength"),
        model: "len",
        show() {
          return x.includes(o.value.type ?? "");
        },
        componentProps: { min: 0, placeholder: e("fieldLength") }
      },
      {
        type: "number",
        label: e("minLength"),
        model: "min",
        show() {
          return x.includes(o.value.type ?? "");
        },
        componentProps: { min: 0, placeholder: e("minLength") }
      },
      {
        type: "number",
        label: e("maxLength"),
        model: "max",
        show() {
          return x.includes(o.value.type ?? "");
        },
        componentProps: { min: 0, placeholder: e("maxLength") }
      },
      {
        type: "input",
        label: e("validationMessage"),
        model: "message",
        componentProps: { placeholder: e("validationMessage") }
      }
    ];
    function a() {
      const l = o.value;
      l.isValidator ? (delete l.type, delete l.pattern, delete l.len, delete l.min, delete l.max) : delete l.validator, m("change", l);
    }
    function w() {
      m("delete");
    }
    return (l, h) => (n(), i("div", G, [
      (n(), i(g, null, k(V, (t, P) => (n(), i(g, { key: P }, [
        !t.show || t.show() ? (n(), i("div", H, [
          p("div", {
            class: "epic-attr-label",
            title: c(e)("validationTrigger")
          }, q(t.label), 9, J),
          p("div", K, [
            y(c(U), {
              modelValue: o.value[t.model],
              "onUpdate:modelValue": (u) => o.value[t.model] = u,
              componentSchema: { ...t, noFormItem: !0 },
              onChange: a
            }, null, 8, ["modelValue", "onUpdate:modelValue", "componentSchema"])
          ])
        ])) : M("", !0)
      ], 64))), 64)),
      p("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
      }, [
        y(c(z), { name: "icon--epic--delete-outline-rounded" })
      ])
    ]));
  }
}), W = { class: "rule-item-main m-t-2 p-2 rounded border border-solid transition-all relative" }, X = {
  key: 0,
  class: "flex m-t-2 first:m-0"
}, Y = { class: "epic-attr-label" }, Z = { class: "flex-1" }, oe = /* @__PURE__ */ L({
  __name: "index",
  props: {
    ruleType: {
      type: String,
      default: "string"
    },
    modelValue: {
      type: Array,
      default: void 0
    }
  },
  emits: ["update:modelValue"],
  setup(f, { emit: _ }) {
    const { t: e } = $(), m = N.getComponent("button"), v = f, s = A(v, "modelValue", _), r = T({
      required: !1,
      message: e("required"),
      type: v.ruleType,
      trigger: ["change"]
    }), V = [
      {
        type: "switch",
        label: e("required"),
        model: "required"
      },
      {
        type: "select",
        label: e("validationTrigger"),
        model: "trigger",
        show() {
          return !!r.value.required;
        },
        componentProps: {
          options: j,
          placeholder: e("validationTrigger"),
          multiple: !0,
          mode: "multiple"
        }
      },
      {
        type: "select",
        label: e("type"),
        model: "type",
        show() {
          return !!r.value.required;
        },
        componentProps: { options: R, placeholder: e("type") }
      },
      {
        type: "input",
        label: e("validationMessage"),
        model: "message",
        show() {
          return !!r.value.required;
        },
        componentProps: { placeholder: e("validationMessage") }
      }
    ], a = T([]);
    E(() => {
      s.value && (a.value = [], s.value.forEach((t) => {
        typeof t.required < "u" ? r.value = t : a.value.push(t);
      }));
    });
    function w() {
      a.value.push({
        message: "",
        type: v.ruleType,
        trigger: ["change"]
      }), l();
    }
    function l() {
      if (r.value.required) {
        s.value = B([...a.value, r.value]);
        return;
      }
      if (a.value.length) {
        s.value = B(a.value);
        return;
      }
      s.value = void 0;
    }
    function h(t) {
      a.value.splice(t, 1), l();
    }
    return (t, P) => (n(), i("div", null, [
      p("div", W, [
        (n(), i(g, null, k(V, (u, d) => (n(), i(g, { key: d }, [
          !u.show || u.show() ? (n(), i("div", X, [
            p("div", Y, q(u.label), 1),
            p("div", Z, [
              y(c(U), {
                modelValue: r.value[u.model],
                "onUpdate:modelValue": (b) => r.value[u.model] = b,
                componentSchema: { ...u, noFormItem: !0 },
                onChange: l
              }, null, 8, ["modelValue", "onUpdate:modelValue", "componentSchema"])
            ])
          ])) : M("", !0)
        ], 64))), 64))
      ]),
      (n(!0), i(g, null, k(a.value, (u, d) => (n(), F(Q, {
        key: d,
        rule: a.value[d],
        "onUpdate:rule": (b) => a.value[d] = b,
        onDelete: (b) => h(d),
        onChange: l
      }, null, 8, ["rule", "onUpdate:rule", "onDelete"]))), 128)),
      y(c(m), {
        class: "m-t-2",
        onClick: w
      }, {
        default: O(() => [
          I(q(c(e)("addRule")), 1)
        ]),
        _: 1
      })
    ]));
  }
});
export {
  oe as default
};