mealcomes/dist/es/form-C5wtqKmX.mjs

MealComes 用于学习前端的组件库

import { c as R, a as K, o as O, w as B } from "./utils-aznwSRCL.mjs";
import { defineComponent as C, provide as G, createElementBlock as z, openBlock as L, normalizeClass as h, unref as i, renderSlot as v, inject as Y, useSlots as Z, ref as F, computed as g, onMounted as H, createCommentVNode as q, createElementVNode as M, normalizeStyle as D, createTextVNode as _, toDisplayString as A, watch as k, createVNode as T, withCtx as W, createSlots as x } from "vue";
import ee from "async-validator";
import { i as te, a as se, M as oe } from "./input-BhhwO05l.mjs";
const re = {
  /**
   * 数据源
   */
  model: Object,
  /**
   * 表单校验规则
   */
  rules: {
    type: Object
  },
  /**
   * 表单是否展示错误信息
   */
  showMessage: {
    type: Boolean,
    default: !0
  }
}, J = Symbol("_fc_k"), ne = /* @__PURE__ */ C({
  name: "mc-form",
  __name: "form",
  props: re,
  setup(m, { expose: l }) {
    const o = R("form"), n = m, f = [], u = {
      ...n,
      addField: (r) => {
        f.push(r);
      }
    };
    return G(J, u), l({
      validate: async (r) => {
        let p = {};
        for (let S of f)
          try {
            await S.validate("");
          } catch (I) {
            p = {
              ...p,
              ...I
            };
          }
        return Object.keys(p).length === 0 ? r == null ? void 0 : r(!0) : r ? r == null ? void 0 : r(!1, p) : Promise.reject(p);
      }
    }), (r, p) => (L(), z("form", {
      class: h([i(o).b()])
    }, [
      v(r.$slots, "default")
    ], 2));
  }
}), fe = [
  "success",
  "error",
  "validating",
  ""
], he = ["default", "small", "large"], Q = {
  /**
   * 表单域 model 字段
   */
  prop: {
    type: String,
    default: ""
  },
  /**
   * 表单 label
   */
  label: {
    type: String,
    default: ""
  },
  /**
   * label 宽度
   */
  labelWidth: {
    type: [String, Number],
    default: ""
  },
  /**
   * 表单校验规则
   */
  rules: {
    type: [Object, Array],
    default: () => []
  },
  /**
   * 是否显示校验错误信息
   */
  showMessage: {
    type: Boolean,
    default: !0
  },
  size: {
    type: String,
    default: "default"
  }
}, ae = Symbol("_fic_k");
function U(m) {
  return m ? Array.isArray(m) ? m : [m] : [];
}
const X = /* @__PURE__ */ C({
  name: "mc-form-item",
  __name: "form-item",
  props: Q,
  setup(m) {
    const l = R("form-item"), o = m, n = Y(J), f = Z(), d = F("error"), u = F(""), w = g(
      () => d.value === "error" && // 表单项校验通过时不展示错误信息
      o.showMessage
    ), r = g(() => {
      const t = U(o.rules), s = n == null ? void 0 : n.rules;
      if (s && o.prop) {
        const a = s[o.prop];
        a && t.push(...U(a));
      }
      return t;
    }), p = g(() => {
      const t = K(o.labelWidth || "");
      return t ? { width: t } : {};
    }), S = g(() => {
      if (!o.label && !o.labelWidth)
        return {};
      const t = K(o.labelWidth || "");
      return !o.label && !f.label ? { marginLeft: t } : {};
    }), I = g(() => !!(o.label || f.label));
    function j(t) {
      return r.value.filter((a) => !a.trigger || !t ? !0 : Array.isArray(a.trigger) ? a.trigger.includes(t) : a.trigger === t);
    }
    function $(t) {
      d.value = t;
    }
    function E() {
      $("success");
    }
    function N(t) {
      var c;
      const { errors: s, fields: a } = t;
      (!s || !a) && console.error(t), $("error"), u.value = s ? ((c = s == null ? void 0 : s[0]) == null ? void 0 : c.message) ?? `${o.prop} is required` : "";
    }
    const P = async (t) => {
      const s = o.prop, a = new ee({
        [s]: t
      }), c = (n == null ? void 0 : n.model) || {};
      return a.validate({
        [s]: c[s]
      }).then(() => (E(), !0)).catch((b) => (N(b), Promise.reject(b)));
    }, y = {
      ...o,
      validate: async (t, s) => {
        const a = typeof s == "function", c = j(t);
        return c.length === 0 ? (s == null || s(!0), !0) : ($("validating"), P(c).then(() => (s == null || s(!0), !0)).catch((b) => {
          const { fields: V } = b;
          return s == null || s(!1, V), a ? !1 : Promise.reject(V);
        }));
      }
    };
    return G(ae, y), H(() => {
      n == null || n.addField(y);
    }), (t, s) => (L(), z("div", {
      class: h([
        i(l).b(),
        i(l).is("error", d.value === "error"),
        i(l).is("validating", d.value === "validating"),
        i(l).is("success", d.value === "success"),
        i(l).m(t.size)
      ])
    }, [
      I.value ? (L(), z("div", {
        key: 0,
        class: h([i(l).e("label-wrap")])
      }, [
        M("label", {
          class: h([i(l).e("label")]),
          style: D(p.value)
        }, [
          v(t.$slots, "label", {}, () => [
            _(A(t.label), 1)
          ])
        ], 6)
      ], 2)) : q("", !0),
      M("div", {
        class: h([i(l).e("content")]),
        style: D(S.value)
      }, [
        v(t.$slots, "default"),
        w.value ? v(t.$slots, "error", {
          key: 0,
          error: u.value
        }, () => [
          M("div", {
            class: h([i(l).e("error")])
          }, A(u.value), 3)
        ]) : q("", !0)
      ], 6)
    ], 2));
  }
}), le = {
  ...O(se, "size"),
  ...O(Q, ["label", "labelWidth"]),
  /**
   * placeholder 为 label 时的宽度
   */
  labelWidth: {
    type: [String, Number],
    default: ""
  }
}, ie = {
  ...te
}, ue = /* @__PURE__ */ C({
  name: "mc-form-item-input",
  __name: "form-item-input",
  props: le,
  emits: ie,
  setup(m, { emit: l }) {
    const o = m, n = l, f = R("form-item-input"), d = F(!1), u = F(), w = F(0);
    let r;
    const p = g(() => o.modelValue !== ""), S = (e) => {
      n("input", e), n("update:modelValue", e);
    }, I = (e) => {
      n("change", e);
    }, j = (e) => {
      d.value = !0, n("focus", e);
    }, $ = (e) => {
      d.value = !1, n("blur", e);
    }, E = (e) => {
      n("keydown", e);
    };
    function N(e) {
      const y = e ? "active" : "inactive", t = e ? "inactive" : "active";
      u.value.classList.add(y), u.value.classList.remove(t);
      const s = e ? r : "0";
      w.value = s;
    }
    function P(e) {
      return new Promise((y) => {
        var s, a;
        const t = u.value.cloneNode(!0);
        t.style.visibility = "hidden", t.style.pointerEvents = "none", t.style.zIndex = "-999", (a = (s = u.value) == null ? void 0 : s.parentElement) == null || a.appendChild(t), requestAnimationFrame(() => {
          t.classList.add(e), t.addEventListener(
            "transitionend",
            () => {
              var b, V;
              const c = t.getBoundingClientRect().width;
              (V = (b = u.value) == null ? void 0 : b.parentElement) == null || V.removeChild(t), y(c);
            },
            { once: !0 }
          );
        });
      });
    }
    return H(async () => {
      o.labelWidth ? r = o.labelWidth : (r = await P("active"), r = `${r + 10}px`), k(
        () => p.value || d.value,
        (e) => {
          N(e || d.value);
        },
        {
          immediate: !0
        }
      );
    }), (e, y) => (L(), z("div", {
      class: h([i(f).b()])
    }, [
      T(X, {
        prop: e.prop,
        "label-width": w.value,
        rules: e.rules,
        "show-message": e.showMessage,
        size: e.size
      }, {
        default: W(() => [
          T(i(oe), {
            type: e.type,
            "model-value": e.modelValue,
            clearable: e.clearable,
            "show-password": e.showPassword,
            disabled: e.disabled,
            readonly: e.readonly,
            "aria-label": e.ariaLabel,
            autocomplete: e.autocomplete,
            onInput: S,
            onChange: I,
            onBlur: $,
            onFocus: j,
            onKeydown: E
          }, x({ _: 2 }, [
            e.$slots.prefix ? {
              name: "prefix",
              fn: W(() => [
                v(e.$slots, "prefix")
              ]),
              key: "0"
            } : void 0,
            e.$slots.suffix ? {
              name: "suffix",
              fn: W(() => [
                v(e.$slots, "suffix")
              ]),
              key: "1"
            } : void 0,
            e.$slots.prepend ? {
              name: "prepend",
              fn: W(() => [
                v(e.$slots, "prepend")
              ]),
              key: "2"
            } : void 0,
            e.$slots.append ? {
              name: "append",
              fn: W(() => [
                v(e.$slots, "append")
              ]),
              key: "3"
            } : void 0
          ]), 1032, ["type", "model-value", "clearable", "show-password", "disabled", "readonly", "aria-label", "autocomplete"]),
          M("span", {
            ref_key: "labelRef",
            ref: u,
            class: h(i(f).e("form-label"))
          }, A(e.placeholder), 3)
        ]),
        _: 3
      }, 8, ["prop", "label-width", "rules", "show-message", "size"])
    ], 2));
  }
}), ve = B(ne), ye = B(X), be = B(ue);
export {
  ve as M,
  ye as a,
  be as b,
  re as c,
  J as d,
  fe as e,
  ae as f,
  he as g,
  Q as h,
  le as i,
  ie as j
};
//# sourceMappingURL=form-C5wtqKmX.mjs.map