intl-tel-input
Version:
A JavaScript plugin for entering and validating international telephone numbers
87 lines (86 loc) • 3.23 kB
JavaScript
import { defineComponent as x, computed as h, ref as s, shallowRef as B, onMounted as D, watch as V, onUnmounted as k, openBlock as w, createElementBlock as F, mergeProps as S } from "vue";
import { i as T } from "../intl-tel-input-BhNWNtVs.mjs";
const R = /* @__PURE__ */ x({
inheritAttrs: !1,
__name: "IntlTelInput",
props: {
options: { default: () => ({}) },
usePreciseValidation: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
inputProps: { default: () => ({}) },
value: {},
modelValue: {}
},
emits: [
"changeNumber",
"changeCountry",
"changeValidity",
"changeErrorCode",
"update:modelValue"
],
setup(b, { expose: _, emit: E }) {
const o = b, r = E, N = h(() => {
const {
type: e,
ref: t,
value: u,
// disabled: _disabled,
onInput: a,
oninput: l,
onCountrychange: f,
onCountryChange: z,
...P
} = o.inputProps ?? {};
return P;
}), d = h(() => o.value ?? o.modelValue ?? ""), i = s(null), n = B(null), c = s(), p = s(), v = s(), m = s(), y = () => n.value ? o.usePreciseValidation ? n.value.isValidNumberPrecise() : n.value.isValidNumber() : null, g = () => {
var a, l;
const e = y();
if (e === null) return;
const t = !!e, u = t ? null : ((l = (a = n.value) == null ? void 0 : a.getValidationError) == null ? void 0 : l.call(a)) ?? null;
t !== v.value && (v.value = t, r("changeValidity", t)), u !== m.value && (m.value = u, r("changeErrorCode", u));
}, C = () => {
var t;
const e = ((t = n.value) == null ? void 0 : t.getNumber()) ?? "";
e !== c.value && (c.value = e, r("changeNumber", e), r("update:modelValue", e)), g();
}, I = () => {
var t;
const e = ((t = n.value) == null ? void 0 : t.getSelectedCountryData().iso2) ?? "";
e !== p.value && (p.value = e, r("changeCountry", e)), C();
};
return D(() => {
var e, t, u, a;
if (i.value) {
n.value = T(i.value, o.options), d.value && n.value.setNumber(d.value), o.disabled && n.value.setDisabled(o.disabled), c.value = ((t = (e = n.value).getNumber) == null ? void 0 : t.call(e)) ?? "", p.value = n.value.getSelectedCountryData().iso2 ?? "";
const l = y();
l !== null && (v.value = !!l, m.value = l ? null : ((a = (u = n.value).getValidationError) == null ? void 0 : a.call(u)) ?? null);
}
}), V(
() => o.disabled,
(e) => {
var t;
return (t = n.value) == null ? void 0 : t.setDisabled(e);
}
), V(
() => d.value,
(e) => {
var l, f;
if (!n.value) return;
const t = e ?? "", u = ((f = (l = n.value).getNumber) == null ? void 0 : f.call(l)) ?? "";
document.activeElement === i.value || u === t || (n.value.setNumber(t), g());
},
{ flush: "post" }
), k(() => {
var e;
return (e = n.value) == null ? void 0 : e.destroy();
}), _({ instance: n, input: i }), (e, t) => (w(), F("input", S(N.value, {
ref_key: "input",
ref: i,
type: "tel",
onCountrychange: I,
onInput: C
}), null, 16));
}
});
export {
R as default
};