vue-next-form/dist/vue-next-form.es.js

A configurable form component based on Vue 3 and Element Plus

import { defineComponent as _, mergeModels as b, useModel as x, createBlock as m, openBlock as r, unref as i, ref as T, computed as L, createElementBlock as F, withDirectives as U, createVNode as w, withCtx as f, createTextVNode as S, toDisplayString as N, vShow as E, mergeProps as h, createSlots as G, Fragment as z, renderList as M, resolveComponent as C, normalizeStyle as $, renderSlot as j, useTemplateRef as q, createCommentVNode as B, toRef as A, watchEffect as H } from "vue";
import { ElInput as W, ElInputNumber as K, ElText as O, ElSelect as J, ElOption as Q, ElButton as X, ElDatePicker as Y, ElRadioGroup as Z, ElRadio as ee, ElCheckbox as I, ElCheckboxGroup as le, ElForm as ae, ElRow as oe, ElCol as te, ElFormItem as ue } from "element-plus";
const ne = /* @__PURE__ */ _({
  __name: "InputText",
  props: /* @__PURE__ */ b({
    type: {},
    placeholder: { default: "请输入" },
    clearable: { type: Boolean },
    disabled: { type: Boolean },
    size: {},
    itemLabel: {},
    model: {},
    defaultValue: {},
    rule: {},
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean }
  }, {
    modelValue: { type: String, default: "" },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(n) {
    const d = x(n, "modelValue"), e = n;
    return (u, a) => (r(), m(i(W), {
      class: "j-input-text",
      modelValue: d.value,
      "onUpdate:modelValue": a[0] || (a[0] = (t) => d.value = t),
      type: "text",
      placeholder: e.placeholder,
      clearable: e.clearable,
      disabled: e.disabled,
      size: e.size
    }, null, 8, ["modelValue", "placeholder", "clearable", "disabled", "size"]));
  }
}), re = /* @__PURE__ */ _({
  name: "InputNumber",
  __name: "InputNumber",
  props: /* @__PURE__ */ b({
    type: {},
    max: { default: 1 / 0 },
    maxRel: {},
    min: { default: -1 / 0 },
    step: { default: 1 },
    precision: { default: 0 },
    itemLabel: {},
    placeholder: {},
    size: {},
    model: {},
    defaultValue: {},
    rule: {},
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean },
    disabled: { type: Boolean }
  }, {
    modelValue: { type: Number, default: 0 },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(n) {
    const d = x(n, "modelValue"), e = n;
    return (u, a) => (r(), m(i(K), {
      class: "j-input-number-box",
      modelValue: d.value,
      "onUpdate:modelValue": a[0] || (a[0] = (t) => d.value = t),
      min: e.min,
      max: e.max,
      step: e.step,
      precision: e.precision
    }, null, 8, ["modelValue", "min", "max", "step", "precision"]));
  }
}), de = { class: "select-single-container" }, se = /* @__PURE__ */ _({
  name: "SelectSingle",
  __name: "SelectSingle",
  props: /* @__PURE__ */ b({
    type: {},
    placeholder: { default: "请选择" },
    url: { default: "" },
    urlParams: {},
    options: {},
    extraOptions: {},
    extraPoistion: { default: "bottom" },
    disabledOptions: { default: () => [] },
    getDate: {},
    showTextValue: { type: Boolean },
    footerFunctionName: { default: "" },
    itemLabel: {},
    size: {},
    model: {},
    defaultValue: {},
    rule: {},
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean },
    disabled: { type: Boolean }
  }, {
    modelValue: {
      type: [String, Number],
      default: ""
    },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ b(["change", "clickFooter"], ["update:modelValue"]),
  setup(n, { expose: d, emit: e }) {
    const u = x(n, "modelValue"), a = n, t = T([]);
    a.getDate !== void 0 ? t.value = a.getDate() : a.options ? t.value = a.options : t.value = [];
    const c = () => {
      a.extraOptions && a.extraOptions.length && (a.extraPoistion === "bottom" && t.value.push(...a.extraOptions), a.extraPoistion === "top" && t.value.unshift(...a.extraOptions));
    };
    c();
    const g = (o) => {
      o && a.getDate !== void 0 && (t.value = a.getDate(), c());
    }, P = L(() => {
      if (a.showTextValue)
        return V(u.value);
    }), v = e, R = () => {
      v("clickFooter", a.footerFunctionName);
    }, V = (o) => {
      const s = t.value.find((l) => l.value === o);
      return s ? s.label : "";
    }, y = (o) => {
      const s = V(o);
      v("change", o, s);
    };
    return d({ addNewOption: (o) => {
      t.value.push(o);
    } }), (o, s) => (r(), F("div", de, [
      U(w(i(O), null, {
        default: f(() => [
          S(N(P.value), 1)
        ]),
        _: 1
      }, 512), [
        [E, a.showTextValue]
      ]),
      U(w(i(J), h({
        class: "w-full",
        modelValue: u.value,
        "onUpdate:modelValue": s[0] || (s[0] = (l) => u.value = l)
      }, o.$attrs, a, {
        onChange: y,
        onVisibleChange: g
      }), G({
        default: f(() => [
          (r(!0), F(z, null, M(t.value, (l) => (r(), m(i(Q), {
            key: l.value,
            label: l.label,
            value: l.value,
            disabled: a.disabledOptions.includes(l.value)
          }, null, 8, ["label", "value", "disabled"]))), 128))
        ]),
        _: 2
      }, [
        a.footerFunctionName !== "" ? {
          name: "footer",
          fn: f(() => [
            w(i(X), {
              class: "w-full",
              size: "small",
              onClick: R
            }, {
              default: f(() => s[1] || (s[1] = [
                S(" 新增 ")
              ])),
              _: 1
            })
          ]),
          key: "0"
        } : void 0
      ]), 1040, ["modelValue"]), [
        [E, !a.showTextValue]
      ])
    ]));
  }
}), ie = { class: "w-full text-left" }, me = /* @__PURE__ */ _({
  name: "AhSelectSingleGroup",
  __name: "SelectSingleGroup",
  props: /* @__PURE__ */ b({
    type: {},
    url: { default: "" },
    urlParams: {},
    options: {},
    extraOptions: {},
    extraPoistion: { default: "bottom" },
    showTextValue: { type: Boolean },
    disabledOptions: { default: () => [] },
    clearable: {},
    filterable: { type: Boolean },
    change: {},
    getData: {},
    itemLabel: {},
    placeholder: { default: "请选择" },
    size: {},
    model: {},
    defaultValue: {},
    rule: {},
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean },
    disabled: { type: Boolean }
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ b(["change"], ["update:modelValue"]),
  setup(n, { emit: d }) {
    const e = d, u = x(n, "modelValue"), a = n, t = T([]);
    a.getData !== void 0 ? t.value = a.getData() : a.options ? t.value = a.options : t.value = [];
    const c = () => {
      a.extraOptions && a.extraOptions.length && (a.extraPoistion === "bottom" && t.value.push(...a.extraOptions), a.extraPoistion === "top" && t.value.unshift(...a.extraOptions));
    };
    c();
    const g = (V) => {
      V && a.getData !== void 0 && (t.value = a.getData(), c());
    }, P = L(() => {
      if (a.showTextValue) {
        const V = t.value.find((y) => y.value === u.value);
        return V ? V.label : "";
      }
    }), v = (V) => {
      for (let y = 0; y < t.value.length; y++) {
        const D = t.value[y].options;
        for (let o = 0; o < D.length; o++)
          if (D[o].value === V)
            return D[o].label;
      }
    }, R = (V) => {
      const y = v(V);
      e("change", V, y);
    };
    return (V, y) => {
      const D = C("el-text"), o = C("el-option"), s = C("el-option-group"), l = C("el-select");
      return r(), F("div", ie, [
        U(w(D, null, {
          default: f(() => [
            S(N(P.value), 1)
          ]),
          _: 1
        }, 512), [
          [E, a.showTextValue]
        ]),
        U(w(l, h({
          class: "w-full",
          modelValue: u.value,
          "onUpdate:modelValue": y[0] || (y[0] = (k) => u.value = k)
        }, V.$attrs, a, {
          onChange: R,
          onVisibleChange: g
        }), {
          default: f(() => [
            (r(!0), F(z, null, M(t.value, (k) => (r(), m(s, {
              key: k.label,
              label: k.label
            }, {
              default: f(() => [
                (r(!0), F(z, null, M(k.options, (p) => (r(), m(o, {
                  key: p.value,
                  label: p.label,
                  value: p.value,
                  disabled: a.disabledOptions.includes(p.value)
                }, null, 8, ["label", "value", "disabled"]))), 128))
              ]),
              _: 2
            }, 1032, ["label"]))), 128))
          ]),
          _: 1
        }, 16, ["modelValue"]), [
          [E, !a.showTextValue]
        ])
      ]);
    };
  }
}), pe = (n, d) => {
  const e = n.__vccOpts || n;
  for (const [u, a] of d)
    e[u] = a;
  return e;
}, ce = /* @__PURE__ */ pe(me, [["__scopeId", "data-v-0ebf3bbc"]]), fe = /* @__PURE__ */ _({
  name: "AhDatePicker",
  __name: "DatePicker",
  props: /* @__PURE__ */ b({
    type: {},
    clearable: { type: Boolean },
    disabled: { type: Boolean },
    format: { default: "YYYY-MM-DD" },
    valueFormat: { default: "YYYY-MM-DD" },
    itemLabel: {},
    placeholder: {},
    size: {},
    model: {},
    defaultValue: {},
    rule: { type: Function },
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean }
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ b(["update:modelValue"], ["update:modelValue"]),
  setup(n, { emit: d }) {
    const e = x(n, "modelValue");
    return (u, a) => (r(), m(i(Y), {
      style: { width: "100%" },
      modelValue: e.value,
      "onUpdate:modelValue": a[0] || (a[0] = (t) => e.value = t),
      placeholder: u.placeholder,
      format: u.format,
      "value-format": u.valueFormat,
      disabled: u.disabled
    }, null, 8, ["modelValue", "placeholder", "format", "value-format", "disabled"]));
  }
}), ve = /* @__PURE__ */ _({
  name: "DatePickerRange",
  __name: "DatePickerRange",
  props: /* @__PURE__ */ b({
    type: {},
    clearable: { type: Boolean },
    disabled: { type: Boolean },
    format: { default: "YYYY-MM-DD" },
    valueFormat: { default: "YYYY-MM-DD" },
    startPlaceholder: { default: "请选择开始日期" },
    endPlaceholder: { default: "请选择结束日期" },
    itemLabel: {},
    placeholder: {},
    size: {},
    model: {},
    defaultValue: {},
    rule: { type: Function },
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean }
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ b(["update:modelValue"], ["update:modelValue"]),
  setup(n, { emit: d }) {
    const e = x(n, "modelValue");
    return (u, a) => (r(), m(i(Y), {
      style: { width: "100%" },
      modelValue: e.value,
      "onUpdate:modelValue": a[0] || (a[0] = (t) => e.value = t),
      "start-placeholder": u.startPlaceholder,
      "end-placeholder": u.endPlaceholder,
      format: u.format,
      "value-format": u.valueFormat,
      disabled: u.disabled,
      type: "daterange"
    }, null, 8, ["modelValue", "start-placeholder", "end-placeholder", "format", "value-format", "disabled"]));
  }
}), Ve = /* @__PURE__ */ _({
  name: "Text",
  __name: "Text",
  props: /* @__PURE__ */ b({
    type: {},
    formatter: {},
    fontSize: {},
    color: { default: "#606266" },
    itemLabel: {},
    placeholder: {},
    size: {},
    model: {},
    defaultValue: {},
    rule: {},
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean },
    disabled: { type: Boolean }
  }, {
    modelValue: { type: String, default: "" },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(n) {
    const d = x(n, "modelValue"), e = n;
    return (u, a) => e.formatter ? (r(), m(i(O), {
      key: 0,
      innerHTML: e.formatter(d.value),
      style: $({ fontSize: `${e.fontSize}px`, color: e.color })
    }, null, 8, ["innerHTML", "style"])) : u.$slots.default ? (r(), m(i(O), {
      key: 1,
      style: $({ fontSize: `${e.fontSize}px`, color: e.color })
    }, {
      default: f(() => [
        j(u.$slots, "default")
      ]),
      _: 3
    }, 8, ["style"])) : (r(), m(i(O), {
      key: 2,
      style: $({ fontSize: `${e.fontSize}px`, color: e.color })
    }, {
      default: f(() => [
        S(N(d.value), 1)
      ]),
      _: 1
    }, 8, ["style"]));
  }
}), be = { style: { width: "100%" } }, ye = /* @__PURE__ */ _({
  name: "RadioGroup",
  __name: "RadioGroup",
  props: /* @__PURE__ */ b({
    type: {},
    options: {},
    showTextValue: { type: Boolean, default: !1 },
    getData: {},
    itemLabel: {},
    placeholder: {},
    size: {},
    model: {},
    defaultValue: {},
    rule: {},
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean },
    disabled: { type: Boolean }
  }, {
    modelValue: { type: [String, Boolean, Number], required: !0 },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(n) {
    const d = x(n, "modelValue"), e = n, u = T([]);
    e.getData !== void 0 ? u.value = e.getData() : e.options && e.options.length ? u.value = e.options : u.value = [];
    const a = L(() => {
      var t;
      if (e.showTextValue) {
        const c = (t = u.value) == null ? void 0 : t.find((g) => g.value === d.value);
        return c ? c.label : "";
      }
    });
    return (t, c) => (r(), F("div", be, [
      U(w(i(O), null, {
        default: f(() => [
          S(N(a.value), 1)
        ]),
        _: 1
      }, 512), [
        [E, e.showTextValue]
      ]),
      U(w(i(Z), {
        modelValue: d.value,
        "onUpdate:modelValue": c[0] || (c[0] = (g) => d.value = g),
        disabled: e.disabled
      }, {
        default: f(() => [
          (r(!0), F(z, null, M(u.value, (g, P) => (r(), m(i(ee), {
            key: P,
            label: g.label,
            value: g.value
          }, null, 8, ["label", "value"]))), 128))
        ]),
        _: 1
      }, 8, ["modelValue", "disabled"]), [
        [E, !e.showTextValue]
      ])
    ]));
  }
}), ge = /* @__PURE__ */ _({
  name: "Checkbox",
  __name: "Checkbox",
  props: /* @__PURE__ */ b({
    type: {},
    label: {},
    trueValue: {},
    falseValue: {},
    itemLabel: {},
    placeholder: {},
    size: {},
    model: {},
    defaultValue: {},
    rule: {},
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean },
    disabled: { type: Boolean }
  }, {
    modelValue: { type: [String, Number, Boolean] },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(n) {
    const d = x(n, "modelValue"), e = n;
    return (u, a) => (r(), m(i(I), {
      modelValue: d.value,
      "onUpdate:modelValue": a[0] || (a[0] = (t) => d.value = t),
      label: e.label,
      "true-value": e.trueValue,
      "false-value": e.falseValue,
      size: e.size
    }, null, 8, ["modelValue", "label", "true-value", "false-value", "size"]));
  }
}), he = /* @__PURE__ */ _({
  name: "CheckboxGroup",
  __name: "checkbox-group",
  props: /* @__PURE__ */ b({
    type: {},
    getData: {},
    options: {},
    itemLabel: {},
    placeholder: {},
    size: {},
    model: {},
    defaultValue: {},
    rule: {},
    ruleTrigger: {},
    reset: { type: Boolean },
    validate: { type: Boolean },
    disabled: { type: Boolean }
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(n) {
    const d = n, e = x(n, "modelValue"), u = T(d.getData ? d.getData() : d.options || []);
    return (a, t) => (r(), m(i(le), {
      modelValue: e.value,
      "onUpdate:modelValue": t[0] || (t[0] = (c) => e.value = c)
    }, {
      default: f(() => [
        (r(!0), F(z, null, M(u.value, (c) => (r(), m(i(I), {
          key: c.value,
          value: c.value
        }, {
          default: f(() => [
            S(N(c.label), 1)
          ]),
          _: 2
        }, 1032, ["value"]))), 128))
      ]),
      _: 1
    }, 8, ["modelValue"]));
  }
}), _e = /* @__PURE__ */ _({
  name: "VueNextForm",
  __name: "index",
  props: /* @__PURE__ */ b({
    labelPosition: { default: "left" },
    inline: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    formField: { default: () => [] }
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(n, { expose: d }) {
    const e = x(n, "modelValue"), u = T({}), a = T([]), t = T([]), c = T([]), g = () => {
      let o = [];
      n.formField.forEach((s) => {
        if ((s.type === "select-single" || s.type === "select-single-group") && s.urlParams !== void 0 && Object.keys(s.urlParams).forEach((l) => {
          if (typeof s.urlParams[l] == "string" && s.urlParams[l].startsWith("form:")) {
            const k = s.urlParams[l].split(":")[1];
            s.urlParams[l] = A(e.value, k);
          }
        }), s.type === "input-number" && s.maxRel !== void 0 && s.maxRel !== "" && s.maxRel.startsWith("form:")) {
          const l = s.maxRel.split(":")[1];
          H(() => {
            s.min !== void 0 && e.value[l] < s.min ? s.max = s.min : s.max = e.value[l];
          });
        }
        o.push(s);
      }), c.value = o, console.log("handleUrlParams _newFormField", c.value);
    };
    (() => {
      n.formField.forEach((o) => {
        e.value[o.model] = o.defaultValue, o.rule && (o.ruleTrigger ? u.value[o.model] = [{ required: !0, validator: o.rule, trigger: o.ruleTrigger }] : u.value[o.model] = [{ required: !0, validator: o.rule, trigger: "blur" }]), (o.reset === void 0 || o.reset === !0) && t.value.push(o.model), (o.validate === void 0 || o.validate !== !1) && a.value.push(o.model), console.log("generateFormValue", o);
      }), console.log("_formValue", e.value), console.log("_formRules", u.value), g();
    })();
    const v = q("elFormRef");
    return d({
      validate: () => {
        v.value && v.value.validate();
      },
      validateField: () => {
        v.value && (v.value.clearValidate(), v.value.validateField(a.value));
      },
      reset: () => {
        v.value && v.value.resetFields();
      },
      resetFields: () => {
        v.value && v.value.resetFields(t.value);
      }
    }), (o, s) => (r(), m(i(ae), {
      ref_key: "elFormRef",
      ref: v,
      class: "v-form-box",
      model: e.value,
      rules: u.value,
      "label-position": o.labelPosition,
      inline: o.inline,
      disabled: o.disabled
    }, {
      default: f(() => [
        w(i(oe), { gutter: 20 }, {
          default: f(() => [
            (r(!0), F(z, null, M(c.value, (l, k) => (r(), m(i(te), {
              key: l.model + k,
              xs: 24,
              sm: 12,
              md: 6,
              lg: 4,
              xl: 3
            }, {
              default: f(() => [
                w(i(ue), {
                  label: l.itemLabel,
                  style: { width: "100%" },
                  prop: l.model
                }, {
                  default: f(() => [
                    l.type === "input-text" ? (r(), m(i(ne), h({
                      key: 0,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "input-number" ? (r(), m(i(re), h({
                      key: 1,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "select-single" ? (r(), m(i(se), h({
                      key: 2,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "select-single-group" ? (r(), m(i(ce), h({
                      key: 3,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "date-picker" ? (r(), m(i(fe), h({
                      key: 4,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "date-picker-range" ? (r(), m(i(ve), h({
                      key: 5,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "text" ? (r(), m(i(Ve), h({
                      key: 6,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "radio-group" ? (r(), m(i(ye), h({
                      key: 7,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "checkbox" ? (r(), m(i(ge), h({
                      key: 8,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0),
                    l.type === "checkbox-group" ? (r(), m(i(he), h({
                      key: 9,
                      modelValue: e.value[l.model],
                      "onUpdate:modelValue": (p) => e.value[l.model] = p,
                      ref_for: !0
                    }, l), null, 16, ["modelValue", "onUpdate:modelValue"])) : B("", !0)
                  ]),
                  _: 2
                }, 1032, ["label", "prop"])
              ]),
              _: 2
            }, 1024))), 128))
          ]),
          _: 1
        })
      ]),
      _: 1
    }, 8, ["model", "rules", "label-position", "inline", "disabled"]));
  }
}), xe = [_e], Be = (n) => {
  xe.forEach((d) => {
    n.component(d.name, d);
  }), window.ElementPlus ? n.use(window.ElementPlus) : console.warn("[VueNextForm] 检测到未安装 ElementPlus，你需要自行安装：npm install element-plus");
}, we = { install: Be };
export {
  _e as VueNextForm,
  we as default
};