y-design-ssr/libs/formItem/index.mjs

SSR component library of YUI with Vue3

import { ref as y, reactive as T, inject as V, getCurrentInstance as F, onUnmounted as z, computed as p, provide as j, defineComponent as W, createVNode as h } from "vue";
const $ = (t) => (e) => Object.prototype.toString.call(e) === `[object ${t}]`, D = $("Function"), L = $("String"), G = $("Object"), x = (t, e) => e ? typeof e == "string" ? ` ${t}--${e}` : Array.isArray(e) ? e.reduce((i, r) => i + x(t, r), "") : Object.keys(e).reduce(
  (i, r) => i + (e[r] ? x(t, r) : ""),
  ""
) : "", U = (t) => (e, i) => {
  let r = e, f = i;
  return r && typeof r != "string" && (f = r, r = ""), r = r ? `${t}__${r}` : t, `${r}${x(r, f)}`;
}, k = () => (t, e) => e ? `${x(`y-${t}`, e)}` : `y-${t}`, H = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
}, S = y("zh-CN"), E = T({
  "zh-CN": H
}), J = {
  text() {
    return E[S.value];
  },
  use(t, e) {
    S.value = t, this.add({ [t]: e });
  },
  add(t = {}) {
    Object.assign(E, t);
  }
}, R = (t) => {
  const e = `y-${t}`;
  return [e, U(e), k()];
}, K = (t) => J.text()[t], Q = (t) => {
  const e = V(t, null), i = F();
  if (e && i) {
    const { children: r, addChild: f, removeChild: o } = e;
    return f(i), z(() => o(i)), {
      index: p(() => r.indexOf(i)),
      parent: e
    };
  }
  return {
    parent: null,
    index: y(-1)
  };
}, X = "y-form-item", Y = () => {
  const t = F(), e = y();
  return {
    filed: e,
    initProvide: (r) => {
      j(X, {
        setField: (o) => {
          o != null && o.proxy && (e.value = o);
        },
        instance: t,
        ...r
      });
    }
  };
}, Z = {
  size: {
    type: String,
    default: null
  },
  border: {
    type: Boolean,
    default: !0
  },
  labelWidth: {
    type: [Number, String],
    default: null
  },
  colon: {
    // 是否有 "："
    type: Boolean,
    default: !1
  },
  labelAlign: {
    type: String,
    default: null
  },
  showError: {
    type: Boolean,
    default: !0
  },
  showErrorMessage: {
    type: Boolean,
    default: !0
  },
  errorMessageAlign: {
    type: String,
    default: null
  },
  rules: {
    type: [Object, Array],
    default: null
  }
}, [ee, ue] = R("form"), te = ee, _ = "form-item", [re, b, ne] = R(_), le = K(_), ae = /* @__PURE__ */ W({
  name: re,
  props: {
    ...Z,
    label: {
      type: [Number, String],
      default: ""
    },
    icon: {
      type: String,
      default: ""
    },
    prop: {
      // form 收集数据的标示
      type: String,
      default: ""
    }
  },
  setup(t, {
    slots: e,
    expose: i
  }) {
    const {
      parent: r
    } = Q(te), {
      initProvide: f,
      filed: o
    } = Y(), c = y(!1), v = y(le.validateMessage), d = (n) => {
      if (t[n] && t[n] !== null)
        return t[n];
      const l = r && r.props;
      return l && l[n] || null;
    }, g = p(() => {
      const n = r && r.props.rules, l = t.rules || (n == null ? void 0 : n[t.prop]);
      return G(l) ? [l] : l;
    }), C = p(() => g.value && g.value.some((n) => n.required)), M = p(() => o.value ? o.value.proxy.modelValue : null), I = p(() => d("showError") && c.value), N = (n, l) => !(l.required && (o.value && o.value.exposed && typeof o.value.exposed.isRequired < "u" && !o.value.exposed.isRequired || !(Array.isArray(n) ? n.length : n)) || l.pattern && L(n) && !l.pattern.test(n)), P = (n, l) => {
      const {
        message: a
      } = l;
      return D(a) ? a(n, l) : a;
    }, q = (n) => n.reduce((l, a) => l.then(() => {
      if (c.value)
        return null;
      const u = a.formatter ? a.formatter(M.value, a) : M.value;
      if (!N(u, a))
        return c.value = !0, v.value = P(u, a), null;
      if (a.validator) {
        const s = a.validator(u, a);
        return typeof s == "boolean" ? (s || (c.value = !0, v.value = P(u, a)), Promise.resolve(s)) : s.then((m) => (m || (c.value = !0, v.value = P(u, a)), m));
      }
      return null;
    }), Promise.resolve()), O = async (n) => {
      const l = n || g.value;
      return l ? (await q(l), c.value ? {
        name: t.prop,
        message: v.value
      } : null) : Promise.resolve();
    }, w = (n) => {
      var l;
      if (r && g.value) {
        const a = ((l = r.props) == null ? void 0 : l.validateTrigger) === n, u = g.value.filter((s) => s.trigger ? s.trigger === n : a);
        return O(u);
      }
      return Promise.resolve(null);
    }, A = () => {
      c.value && (c.value = !1, v.value = "");
    };
    f({
      getProp: d,
      validateWithTrigger: w,
      resetValidation: A,
      change: r == null ? void 0 : r.change
    }), i({
      resetValidation: A,
      formValue: M,
      validate: O
    });
    const B = () => I.value ? e.error ? e.error() : d("showErrorMessage") ? h("p", {
      class: b("error"),
      style: {
        textAlign: "left"
      }
    }, [v.value]) : null : null;
    return () => {
      var u, s, m;
      const {
        label: n,
        border: l,
        colon: a
      } = t;
      return h("div", {
        class: [b({
          "is-error": I.value,
          [d("size")]: d("size"),
          hairline: l
        }), ne("el", {
          "hairline-bottom": l
        })]
      }, [h("label", {
        class: b("label", {
          "is-required": C.value
        }),
        style: {
          width: d("labelWidth"),
          textAlign: d("labelAlign") || "left"
        }
      }, [(u = e.labelIcon) == null ? void 0 : u.call(e), n, a ? " :" : ""]), h("div", {
        class: b("content")
      }, [(s = e.default) == null ? void 0 : s.call(e), B()]), (m = e.extra) == null ? void 0 : m.call(e)]);
    };
  }
});
function ie(t) {
  const e = t;
  return e.install = (i) => {
    const { name: r } = t;
    r && i.component(r, t);
  }, e;
}
const se = ie(ae);
export {
  se as default
};