ucc-ui
Version:
ucc-ui components library
227 lines (226 loc) • 9.42 kB
JavaScript
import { defineComponent as T, inject as j, computed as E, provide as C, ref as k, watch as R, onMounted as B, onUnmounted as W, openBlock as b, createElementBlock as w, normalizeClass as _, unref as p, normalizeStyle as U, createCommentVNode as $, renderSlot as M, createTextVNode as D, toDisplayString as q, createElementVNode as O, createVNode as J, Transition as K, withCtx as Y } from "vue";
import { F as Z } from "./Button-DOc5qANu.js";
import { p as G } from "./vendors-PY6Ic9FA.js";
const H = ["data-prop"], Q = {
key: 1,
class: "u-form-item__required-star"
}, te = /* @__PURE__ */ T({
name: "UFormItem",
inheritAttrs: !1,
__name: "FormItem",
props: {
prop: { default: "" },
label: { default: "" },
labelWidth: {}
},
setup(V, { expose: I }) {
const t = V, e = j("form", null), P = E(() => e == null ? void 0 : e.size);
C(Z, P);
const s = k(""), c = k(""), z = E(() => (e == null ? void 0 : e.showMessage) ?? !0), d = k(void 0), x = E(() => {
if (!t.prop || !(e != null && e.rules)) return !1;
const o = e.rules[typeof t.prop == "string" ? t.prop : t.prop[0]];
return o ? (Array.isArray(o) ? o : [o]).some((n) => n.required) : !1;
}), N = E(() => {
if ((e == null ? void 0 : e.labelPosition) === "top") return {};
const o = t.labelWidth || (e == null ? void 0 : e.labelWidth);
return o ? {
width: typeof o == "number" ? `${o}px` : o
} : {};
}), f = async (o) => {
var n;
if (!t.prop) return;
const i = (n = e == null ? void 0 : e.rules) == null ? void 0 : n[typeof t.prop == "string" ? t.prop : t.prop[0]];
if (!i || !i.length) {
s.value = "", c.value = "";
return;
}
s.value = "validating";
try {
const m = e == null ? void 0 : e.model, y = G(m, typeof t.prop == "string" ? t.prop : t.prop[0]), h = Array.isArray(i) ? i : [i], A = h.some((r) => r.trigger ? Array.isArray(r.trigger) ? r.trigger.includes(o) : r.trigger === o : !1);
if (o && !A)
return;
for (const r of h) {
if (o && r.trigger && !Array.isArray(r.trigger) && r.trigger !== o || o && r.trigger && Array.isArray(r.trigger) && !r.trigger.includes(o))
continue;
const a = r.transform ? r.transform(y) : y;
if (r.validator) {
await r.validator(r, a);
continue;
}
if (r.required && (a === "" || a === null || a === void 0))
throw new Error(r.message || "此字段是必填的");
if (!(a == null || a === "")) {
if (r.type) {
let l = !0;
const u = r.type;
switch (u) {
case "number":
l = typeof a == "number";
break;
case "boolean":
l = typeof a == "boolean";
break;
case "array":
l = Array.isArray(a);
break;
case "object":
l = typeof a == "object" && !Array.isArray(a);
break;
case "date":
l = a instanceof Date;
break;
case "url":
try {
new URL(a), l = !0;
} catch {
l = !1;
}
break;
case "email":
l = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a);
break;
default:
l = typeof a == "string";
}
if (!l)
throw new Error(r.message || `类型应该是${u}`);
}
if (typeof a == "string" || Array.isArray(a)) {
if (r.min != null && a.length < r.min)
throw new Error(r.message || `长度不能小于${r.min}`);
if (r.max != null && a.length > r.max)
throw new Error(r.message || `长度不能大于${r.max}`);
if (r.length != null && a.length !== r.length)
throw new Error(r.message || `长度应该是${r.length}`);
}
if (typeof a == "number") {
if (r.min != null && a < r.min)
throw new Error(r.message || `不能小于${r.min}`);
if (r.max != null && a > r.max)
throw new Error(r.message || `不能大于${r.max}`);
}
if (r.enum && !r.enum.includes(a))
throw new Error(r.message || `值应该在 ${r.enum.join(", ")} 中`);
if (r.pattern && !r.pattern.test(a))
throw new Error(r.message || "格式不正确");
}
}
s.value = "success", c.value = "";
} catch (m) {
throw s.value = "error", c.value = m.message, m;
}
}, v = () => {
f("blur").catch(() => {
});
}, g = (o) => {
const i = o.target;
if (!t.prop || !(e != null && e.model)) return;
const n = typeof t.prop == "string" ? t.prop : t.prop[0];
e.model[n] = i.value, s.value === "error" && f("change").catch(() => {
});
}, S = () => {
if (t.prop && (e != null && e.model)) {
const o = typeof t.prop == "string" ? t.prop : t.prop[0];
d.value !== void 0 ? typeof d.value == "object" ? e.model[o] = Array.isArray(d.value) ? [...d.value] : { ...d.value } : e.model[o] = d.value : e.model[o] = "";
}
s.value = "", c.value = "";
}, L = () => {
s.value = "", c.value = "";
};
return R(
() => {
var o;
return (o = e == null ? void 0 : e.model) == null ? void 0 : o[typeof t.prop == "string" ? t.prop : t.prop[0]];
},
(o) => {
s.value === "error" && f("change").catch(() => {
});
},
{ deep: !0 }
), B(() => {
var o;
if (t.prop && (e != null && e.model)) {
const i = typeof t.prop == "string" ? t.prop : t.prop[0];
d.value = e.model[i];
}
if (t.prop) {
(o = e == null ? void 0 : e.addField) == null || o.call(e, {
prop: typeof t.prop == "string" ? t.prop : t.prop[0],
validate: f,
resetField: S,
clearValidate: L
});
const i = document.querySelector(`.u-form-item[data-prop="${t.prop}"] input`), n = document.querySelector(`.u-form-item[data-prop="${t.prop}"] textarea`);
i && (i.addEventListener("blur", v), i.addEventListener("input", g)), n && (n.addEventListener("blur", v), n.addEventListener("input", g));
}
}), W(() => {
var o;
if (t.prop) {
(o = e == null ? void 0 : e.removeField) == null || o.call(e, {
prop: typeof t.prop == "string" ? t.prop : t.prop[0]
});
const i = document.querySelector(`.u-form-item[data-prop="${t.prop}"] input`), n = document.querySelector(`.u-form-item[data-prop="${t.prop}"] textarea`);
i && (i.removeEventListener("blur", v), i.removeEventListener("input", g)), n && (n.removeEventListener("blur", v), n.removeEventListener("input", g));
}
}), I({
validate: f,
resetField: S,
clearValidate: L,
validateMessage: c,
validateState: s
}), (o, i) => {
var n, m, y, h, A, r, a, l;
return b(), w("div", {
class: _(["u-form-item", [
{
"u-form-item--error": s.value === "error",
"u-form-item--validating": s.value === "validating",
"u-form-item--success": s.value === "success",
[`u-form-item--${(n = p(e)) == null ? void 0 : n.size}`]: (m = p(e)) == null ? void 0 : m.size
}
]]),
"data-prop": typeof t.prop == "string" ? t.prop : (y = t.prop) == null ? void 0 : y[0]
}, [
o.label || o.$slots.label ? (b(), w("label", {
key: 0,
class: _(["u-form-item__label", [(h = p(e)) != null && h.labelPosition ? `is-${p(e).labelPosition}` : ""]]),
style: U(N.value)
}, [
x.value && !((A = p(e)) != null && A.hideRequiredAsterisk) ? (b(), w("span", {
key: 0,
class: _(["u-form-item__required-star", { "is-right": ((r = p(e)) == null ? void 0 : r.requiredAsteriskPosition) === "right" }])
}, "*", 2)) : $("", !0),
M(o.$slots, "label", {}, () => {
var u;
return [
D(q(o.label) + q((u = p(e)) == null ? void 0 : u.labelSuffix), 1)
];
}),
x.value && !((a = p(e)) != null && a.hideRequiredAsterisk) && ((l = p(e)) == null ? void 0 : l.requiredAsteriskPosition) === "right" ? (b(), w("span", Q, "*")) : $("", !0)
], 6)) : $("", !0),
O("div", {
class: "u-form-item__content",
onBlur: v,
onInput: g
}, [
M(o.$slots, "default"),
J(K, { name: "u-zoom-in-top" }, {
default: Y(() => {
var u, F;
return [
s.value === "error" && z.value && ((u = p(e)) != null && u.showMessage) ? (b(), w("div", {
key: 0,
class: _(["u-form-item__error", { "u-form-item__error--inline": (F = p(e)) == null ? void 0 : F.inlineMessage }])
}, q(c.value), 3)) : $("", !0)
];
}),
_: 1
})
], 32)
], 10, H);
};
}
});
export {
te as _
};