import { bn as e, aj as t, aR as a, aO as l, bo as r, H as n, J as o, a0 as s, a1 as i, a5 as u, an as c, I as d, a3 as g, j as f, ao as p, c as m, ag as v, ad as h, ar as b, bp as y, w as k, a8 as x, D as w, a6 as S, v as C, bm as M, ah as V, aN as I, bq as B, aE as A, P as E, aw as z, y as j, br as P, Q as T, } from "./index-476be0bb.js"; import { c as L, C as W } from "./index-325f2a5d.js"; import { u as q } from "./use-id-50eda0ee.js"; function H(e) { return Array.isArray(e) ? !e.length : 0 !== e && !e; } function R(e, t) { const { message: a } = t; return l(a) ? a(e, t) : a || ""; } function D({ target: e }) { e.composing = !0; } function F({ target: e }) { e.composing && ((e.composing = !1), e.dispatchEvent(new Event("input"))); } function O(e) { return [...e].length; } function J(e, t) { return [...e].slice(0, t).join(""); } const [K, N] = n("field"); const Q = T( d({ name: K, props: u( {}, L, { id: String, name: String, leftIcon: String, rightIcon: String, autofocus: Boolean, clearable: Boolean, maxlength: o, formatter: Function, clearIcon: s("clear"), modelValue: i(""), inputAlign: String, placeholder: String, autocomplete: String, autocapitalize: String, autocorrect: String, errorMessage: String, enterkeyhint: String, spellcheck: { type: Boolean, default: null }, clearTrigger: s("focus"), formatTrigger: s("onChange"), error: { type: Boolean, default: null }, disabled: { type: Boolean, default: null }, readonly: { type: Boolean, default: null }, }, { rows: o, type: s("text"), rules: Array, autosize: [Boolean, Object], labelWidth: o, labelClass: c, labelAlign: String, showWordLimit: Boolean, errorMessageAlign: String, colon: { type: Boolean, default: null }, } ), emits: [ "blur", "focus", "clear", "keypress", "clickInput", "endValidate", "startValidate", "clickLeftIcon", "clickRightIcon", "update:modelValue", ], setup(l, { emit: n, slots: o }) { const s = q(), i = g({ status: "unvalidated", focused: !1, validateMessage: "" }), u = f(), c = f(), d = f(), { parent: T } = p(M), L = () => { var e; return String(null != (e = l.modelValue) ? e : ""); }, K = (e) => (V(l[e]) ? l[e] : T && V(T.props[e]) ? T.props[e] : void 0), Q = m(() => { const e = K("readonly"); if (l.clearable && !e) { const e = "" !== L(), t = "always" === l.clearTrigger || ("focus" === l.clearTrigger && i.focused); return e && t; } return !1; }), X = m(() => (d.value && o.input ? d.value() : l.modelValue)), $ = (e) => e.reduce( (e, t) => e.then(() => { if ("failed" === i.status) return; let { value: e } = X; if ( (t.formatter && (e = t.formatter(e, t)), !(function (e, t) { if (H(e)) { if (t.required) return !1; if (!1 === t.validateEmpty) return !0; } return !(t.pattern && !t.pattern.test(String(e))); })(e, t)) ) return ( (i.status = "failed"), void (i.validateMessage = R(e, t)) ); if (t.validator) { if (H(e) && !1 === t.validateEmpty) return; return (function (e, t) { return new Promise((l) => { const r = t.validator(e, t); a(r) ? r.then(l) : l(r); }); })(e, t).then((a) => { a && "string" == typeof a ? ((i.status = "failed"), (i.validateMessage = a)) : !1 === a && ((i.status = "failed"), (i.validateMessage = R(e, t))); }); } }), Promise.resolve() ), G = () => { (i.status = "unvalidated"), (i.validateMessage = ""); }, U = () => n("endValidate", { status: i.status, message: i.validateMessage }), Y = (e = l.rules) => new Promise((t) => { G(), e ? (n("startValidate"), $(e).then(() => { "failed" === i.status ? (t({ name: l.name, message: i.validateMessage }), U()) : ((i.status = "passed"), t(), U()); })) : t(); }), Z = (e) => { if (T && l.rules) { const { validateTrigger: t } = T.props, a = I(t).includes(e), r = l.rules.filter((t) => t.trigger ? I(t.trigger).includes(e) : a ); r.length && Y(r); } }, _ = (e, t = "onChange") => { const a = e; e = ((e) => { var t; const { maxlength: a } = l; if (V(a) && O(e) > +a) { const l = L(); if (l && O(l) === +a) return l; const r = null == (t = u.value) ? void 0 : t.selectionEnd; if (i.focused && r) { const t = [...e], l = t.length - +a; return t.splice(r - l, l), t.join(""); } return J(e, +a); } return e; })(e); const r = O(a) - O(e); if ("number" === l.type || "digit" === l.type) { const t = "number" === l.type; e = B(e, t, t); } let o = 0; if (l.formatter && t === l.formatTrigger) { const { formatter: t, maxlength: r } = l; if ( ((e = t(e)), V(r) && O(e) > +r && (e = J(e, +r)), u.value && i.focused) ) { const { selectionEnd: e } = u.value, l = J(a, e); o = O(t(l)) - O(l); } } if (u.value && u.value.value !== e) if (i.focused) { let { selectionStart: t, selectionEnd: a } = u.value; if (((u.value.value = e), V(t) && V(a))) { const l = O(e); r ? ((t -= r), (a -= r)) : o && ((t += o), (a += o)), u.value.setSelectionRange(Math.min(t, l), Math.min(a, l)); } } else u.value.value = e; e !== l.modelValue && n("update:modelValue", e); }, ee = (e) => { e.target.composing || _(e.target.value); }, te = () => { var e; return null == (e = u.value) ? void 0 : e.blur(); }, ae = () => { var e; return null == (e = u.value) ? void 0 : e.focus(); }, le = () => { const a = u.value; "textarea" === l.type && l.autosize && a && (function (a, l) { const n = e(); a.style.height = "auto"; let o = a.scrollHeight; if (r(l)) { const { maxHeight: e, minHeight: t } = l; void 0 !== e && (o = Math.min(o, e)), void 0 !== t && (o = Math.max(o, t)); } o && ((a.style.height = "".concat(o, "px")), t(n)); })(a, l.autosize); }, re = (e) => { (i.focused = !0), n("focus", e), x(le), K("readonly") && te(); }, ne = (e) => { (i.focused = !1), _(L(), "onBlur"), n("blur", e), K("readonly") || (Z("onBlur"), x(le), P()); }, oe = (e) => n("clickInput", e), se = (e) => n("clickLeftIcon", e), ie = (e) => n("clickRightIcon", e), ue = m(() => "boolean" == typeof l.error ? l.error : !(!T || !T.props.showError || "failed" !== i.status) || void 0 ), ce = m(() => { const e = K("labelWidth"), t = K("labelAlign"); if (e && "top" !== t) return { width: v(e) }; }), de = (e) => { if (13 === e.keyCode) { (T && T.props.submitOnEnter) || "textarea" === l.type || A(e), "search" === l.type && te(); } n("keypress", e); }, ge = () => l.id || "".concat(s, "-input"), fe = () => { const e = N("control", [ K("inputAlign"), { error: ue.value, custom: !!o.input, "min-height": "textarea" === l.type && !l.autosize, }, ]); if (o.input) return C("div", { class: e, onClick: oe }, [o.input()]); const t = { id: ge(), ref: u, name: l.name, rows: void 0 !== l.rows ? +l.rows : void 0, class: e, disabled: K("disabled"), readonly: K("readonly"), autofocus: l.autofocus, placeholder: l.placeholder, autocomplete: l.autocomplete, autocapitalize: l.autocapitalize, autocorrect: l.autocorrect, enterkeyhint: l.enterkeyhint, spellcheck: l.spellcheck, "aria-labelledby": l.label ? "".concat(s, "-label") : void 0, onBlur: ne, onFocus: re, onInput: ee, onClick: oe, onChange: F, onKeypress: de, onCompositionend: F, onCompositionstart: D, }; return "textarea" === l.type ? C("textarea", t, null) : C( "input", z( "number" === (a = l.type) ? { type: "text", inputmode: "decimal" } : "digit" === a ? { type: "tel", inputmode: "numeric" } : { type: a }, t ), null ); var a; }, pe = () => { const e = o["right-icon"]; if (l.rightIcon || e) return C("div", { class: N("right-icon"), onClick: ie }, [ e ? e() : C(E, { name: l.rightIcon, classPrefix: l.iconPrefix }, null), ]); }, me = () => { if (l.showWordLimit && l.maxlength) { const e = O(L()); return C("div", { class: N("word-limit") }, [ C("span", { class: N("word-num") }, [e]), j("/"), l.maxlength, ]); } }, ve = () => { if (T && !1 === T.props.showErrorMessage) return; const e = l.errorMessage || i.validateMessage; if (e) { const t = o["error-message"], a = K("errorMessageAlign"); return C("div", { class: N("error-message", a) }, [ t ? t({ message: e }) : e, ]); } }, he = () => [ C("div", { class: N("body") }, [ fe(), Q.value && C(E, { ref: c, name: l.clearIcon, class: N("clear") }, null), pe(), o.button && C("div", { class: N("button") }, [o.button()]), ]), me(), ve(), ]; return ( h({ blur: te, focus: ae, validate: Y, formValue: X, resetValidation: G, getValidationStatus: () => i.status, }), b(y, { customValue: d, resetValidation: G, validateWithTrigger: Z }), k( () => l.modelValue, () => { _(L()), G(), Z("onChange"), x(le); } ), w(() => { _(L(), l.formatTrigger), x(le); }), S( "touchstart", (e) => { A(e), n("update:modelValue", ""), n("clear", e); }, { target: m(() => { var e; return null == (e = c.value) ? void 0 : e.$el; }), } ), () => { const e = K("disabled"), t = K("labelAlign"), a = (() => { const e = o["left-icon"]; if (l.leftIcon || e) return C("div", { class: N("left-icon"), onClick: se }, [ e ? e() : C( E, { name: l.leftIcon, classPrefix: l.iconPrefix }, null ), ]); })(); return C( W, { size: l.size, class: N({ error: ue.value, disabled: e, ["label-".concat(t)]: t, }), center: l.center, border: l.border, isLink: l.isLink, clickable: l.clickable, titleStyle: ce.value, valueClass: N("value"), titleClass: [ N("label", [t, { required: l.required }]), l.labelClass, ], arrowDirection: l.arrowDirection, }, { icon: a && "top" !== t ? () => a : null, title: () => { const e = (() => { const e = K("labelWidth"), t = K("labelAlign"), a = K("colon") ? ":" : ""; return o.label ? [o.label(), a] : l.label ? C( "label", { id: "".concat(s, "-label"), for: o.input ? void 0 : ge(), onClick: (e) => { A(e), ae(); }, style: "top" === t && e ? { width: v(e) } : void 0, }, [l.label + a] ) : void 0; })(); return "top" === t ? [a, e].filter(Boolean) : e || []; }, value: he, extra: o.extra, } ); } ); }, }) ); export { Q as F };