504 lines
15 KiB
JavaScript
504 lines
15 KiB
JavaScript
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 };
|