vue-tel-num-input
Version:
A flexible and fully customizable Vue 3 component for phone number input with country code selection, flags, masking, and localization.
799 lines (798 loc) • 27.4 kB
JavaScript
import { watch as M, computed as w, ref as ne, nextTick as re, onMounted as Ae, onBeforeUnmount as ze, defineComponent as $e, toRefs as _e, createElementBlock as T, createCommentVNode as j, openBlock as P, normalizeStyle as q, normalizeClass as ie, toDisplayString as Z, toRef as me, useTemplateRef as te, unref as I, createElementVNode as V, createVNode as De, renderSlot as _, createBlock as he, withDirectives as ge, vModelText as ye, Transition as We, withCtx as Be, Fragment as Oe, renderList as Ve } from "vue";
import { getCountries as Ge, parsePhoneNumberWithError as Ce, getCountryCallingCode as qe, parsePhoneNumberFromString as Ke } from "libphonenumber-js";
import { AsYouType as He, getCountryCallingCode as se } from "libphonenumber-js/core";
import J from "libphonenumber-js/metadata.min.json";
const B = (e = !1) => (...n) => !e && console.warn(...n), Ue = () => ({ getNames: (n) => {
const s = new Intl.DisplayNames(["en"], { type: "region" }), o = new Intl.DisplayNames([n.toLowerCase()], {
type: "region"
});
return { name: s.of(n), nativeName: o.of(n) };
} }), Ye = (e, n, s, o) => {
let l = B(o.value);
M(o, (d) => l = B(d));
const u = Ge(), { getNames: p } = Ue(), m = w(() => {
const d = Array.from(
new Set(e.value.map((t) => t.toUpperCase()))
);
let f;
if (!d?.length)
f = u;
else {
const t = d.filter(
(r) => u.includes(r)
), a = d.filter(
(r) => !u.includes(r)
);
a.length > 0 && l(
`[TelNumInput] Country codes not found: ${a.join(", ")}`
), f = t;
}
const A = n.value.map(
(t) => t.toUpperCase()
);
return f = f.filter(
(t) => !A.includes(t)
), f;
}), h = w(
() => m.value.map((d) => {
const { name: f, nativeName: A } = p(d);
return console.log(f, A), {
iso: d,
name: f,
nativeName: A
};
})
), g = w(() => {
const d = s.value?.toUpperCase();
return !d || !u.includes(d) ? "US" : d;
});
return { isoCodes: u, validCountries: h, defaultIso: g };
}, xe = (e, n, s, o) => {
let l = B(s.value);
return M(s, (p) => l = B(p)), { placVal: w(() => {
const p = e ? e.value : null, m = n ? n.value : null;
if (typeof m == "string")
return typeof p == "string" && l(
"Please provide 'placeholder' as an object when 'locale' is a string to support localization. Using string 'placeholder' and ignoring 'locale'."
), m;
if (m && typeof m == "object") {
if (!p) {
l(
"Prop 'locale' is not set while 'placeholder' is an object. First available key from 'placeholder' is used."
);
const g = Object.keys(m)[0];
return g ? m[g] : o;
}
const h = m[p];
if (!h) {
const g = Object.keys(m);
return l(
`No placeholder found for locale '${p}'. First available key from 'placeholder' is used.`
), g.length ? m[g[0]] : o;
}
return h;
}
return m == null && typeof p == "string" && l(
"Prop 'placeholder' is not set while 'locale' is a string. Using default placeholder."
), o;
}) };
}, Ze = {
1: ["US", "CA", "PR", "SX", "TT", "JM", "BS", "BB", "AG", "AI", "DM", "GD", "KN", "LC", "VC", "VG", "VI", "KY", "MS"],
7: ["RU", "KZ"],
39: ["IT", "VA"],
44: ["GB", "GG", "IM", "JE"],
47: ["NO", "SJ"],
61: ["AU", "CX", "CC"],
262: ["RE", "YT"],
358: ["FI", "AX"],
500: ["FK", "GS"],
590: ["GP", "BL", "MF"],
599: ["CW", "BQ"]
};
function Je(e, n) {
const s = Ze[e];
if (!s || s.length === 0) return null;
const o = new Set(n.map((l) => l.toUpperCase()));
for (const l of s)
if (o.has(l)) return l;
return null;
}
const Xe = (() => {
const e = /* @__PURE__ */ new Map(), n = J.countries;
for (const s of Object.keys(n)) {
const o = String(n[s][0]), l = e.get(o) || [];
l.push(s.toUpperCase()), e.set(o, l);
}
return e;
})();
function Qe(e) {
const n = ne(!1), s = ne(!1), o = (t) => Array.isArray(e.excludeCountryCodes.value) && e.excludeCountryCodes.value.some(
(a) => a.toUpperCase() === t.toUpperCase()
), l = (t) => s.value = t, u = (t) => new He(void 0, J).input(t), p = () => (e.iso.value || "").toUpperCase(), m = /^\+\d{1,3}[\s\u00A0\u202F\-\)]*/, h = (t) => {
if (!t) return { cc: "", prefix: "", formattedPrefix: "" };
const a = se(t, J), r = `+${a}`, S = u(r);
return { cc: a, prefix: r, formattedPrefix: S };
}, g = (t) => {
if (!e.international.value) return;
const a = t.match(/^\+(\d{1,3})/);
if (!a) return;
const r = a[1];
for (const S of [3, 2, 1]) {
const E = r.slice(0, S);
if (!E) continue;
const C = Xe.get(E);
if (!C || C.length === 0) continue;
const F = C.filter((v) => !o(v));
if (F.length === 0) return;
if (F.length === 1) {
const v = F[0];
v && v !== (e.iso.value || "").toUpperCase() && (e.iso.value = v);
return;
}
const y = Je(E, F);
if (y && y !== (e.iso.value || "").toUpperCase()) {
e.iso.value = y;
return;
}
return;
}
}, d = () => {
if (!e.international.value) return !1;
const t = p();
if (!t) return !1;
const a = e.value.value || "";
if (a.startsWith("+")) return !1;
const { formattedPrefix: r } = h(t);
return a === "" || !a.startsWith(r) ? (n.value = !0, e.value.value = r, re(() => {
const S = e.inputEl.value;
if (S) {
const E = S.value.length;
try {
S.setSelectionRange(E, E);
} catch {
}
}
e.onAfterFormat?.(e.value.value);
}), !0) : !1;
}, f = (t, a, r) => {
if (e.international.value) {
if (t.startsWith("+")) {
const O = u(t);
let W = u(t.slice(0, a)).length, X = W;
if (r !== a) {
const K = u(t.slice(0, r)).length;
X = Math.max(K, W);
}
return { formattedAll: O, newStart: W, newEnd: X };
}
const S = p();
if (!S)
return { formattedAll: t, newStart: a, newEnd: r };
const { prefix: E, formattedPrefix: C } = h(S), F = t.replace(m, ""), y = t.length - F.length, v = Math.max(0, a - Math.min(y, a)), b = Math.max(0, r - Math.min(y, r)), U = E + F, N = F ? u(U) : C, L = u(
U.slice(0, E.length + v)
).length, k = u(
U.slice(0, E.length + b)
).length, z = C.length;
let R = Math.max(z, L), D = Math.max(R, k);
return { formattedAll: N, newStart: R, newEnd: D };
} else {
const S = p();
if (!S)
return { formattedAll: t, newStart: a, newEnd: r };
const E = se(S, J), C = `+${E}`, F = new RegExp(`^\\+?${E}[\\s\\u00A0\\u202F\\-\\)]*`), y = F.exec(t)?.[0]?.length ?? 0, v = t.replace(F, ""), b = Math.max(
0,
a - Math.min(y, a)
), U = Math.max(0, r - Math.min(y, r)), N = C + v, L = u(N), k = u(C), z = L.slice(k.length).trimStart(), R = u(
N.slice(0, C.length + b)
).length;
let D = Math.max(0, R - k.length), O = D;
if (U !== b) {
const G = u(
N.slice(0, C.length + U)
).length;
O = Math.max(D, G - k.length);
}
return { formattedAll: z, newStart: D, newEnd: O };
}
}, A = (t) => {
const a = e.inputEl.value, r = t ?? e.value.value;
if (!a)
if (e.international.value)
if (r.startsWith("+")) {
const v = u(r);
v !== r && (e.value.value = v), g(e.value.value), e.onAfterFormat?.(e.value.value);
return;
} else {
const v = p();
if (!v) return;
const { prefix: b, formattedPrefix: U } = h(v), N = r.replace(m, ""), L = b + N, k = N ? u(L) : U;
k !== r && (e.value.value = k), e.onAfterFormat?.(e.value.value);
return;
}
else {
const v = p();
if (!v) return;
const { prefix: b } = h(v), U = new RegExp(
`^\\+?${se(
v,
J
)}[\\s\\u00A0\\u202F\\-\\)]*`
), N = r.replace(U, ""), L = b + N, k = u(L), z = u(b), R = k.slice(z.length).trimStart();
R !== r && (e.value.value = R), e.onAfterFormat?.(e.value.value);
return;
}
const S = a.selectionStart ?? r.length, E = a.selectionEnd ?? S, { formattedAll: C, newStart: F, newEnd: y } = f(r, S, E);
C !== r && (n.value = !0, e.value.value = C, re(() => {
const v = e.inputEl.value;
if (!v) return;
const b = v.value.length;
let U = Math.min(F, b), N = Math.min(y, b);
if (e.international.value)
if (v.value.startsWith("+"))
g(v.value);
else {
const L = p();
if (L) {
const { formattedPrefix: k } = h(L), z = k.length;
U = Math.max(U, z), N = Math.max(N, z);
}
}
try {
v.setSelectionRange(U, N);
} catch {
}
e.onAfterFormat?.(v.value);
}));
};
return M(
() => e.value.value,
(t, a) => {
if (e.needFormat.value && !s.value) {
if (n.value) {
n.value = !1;
return;
}
t == null || t === a || e.international.value && !String(t).startsWith("+") && d() || A(t);
}
}
), M(
() => e.needFormat.value,
(t) => {
t && (e.international.value && d(), A());
},
{ immediate: !0 }
), M(
() => e.international.value,
(t) => {
e.needFormat.value && (t && d(), A());
},
{ immediate: !0 }
), M(
() => e.iso.value,
() => {
e.needFormat.value && (e.international.value && d(), A());
},
{ immediate: !0 }
), e.needFormat.value && e.international.value && d(), { isComposing: s, setComposing: l, formatNow: A };
}
const ae = (e, n = !0) => {
const s = (e ?? "").toLowerCase();
return n ? s.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : s;
};
function et(e) {
const {
countries: n,
query: s,
codeGetter: o,
limit: l = null,
normalizeDiacritics: u = !0
} = e;
return { results: w(() => {
const m = Array.isArray(n) ? n : n.value, h = (s.value ?? "").trim();
if (!h) return m;
const g = h.startsWith("+"), d = ae(h, u), f = [];
for (const t of m) {
const a = ae(t.name, u), r = ae(t.nativeName, u), S = t.iso.toLowerCase(), E = o(t.iso).toLowerCase(), C = a.split(/\s+/), F = r.split(/\s+/);
let y = 0;
g && (E.startsWith(h.toLowerCase()) ? y = 1e3 : E.includes(d) && (y = 600)), y === 0 && (a.startsWith(d) || r.startsWith(d) ? y = 900 : C.some((v) => v.startsWith(d)) || F.some((v) => v.startsWith(d)) ? y = 850 : (a.includes(d) || r.includes(d)) && (y = 800)), y === 0 && (!g && E.includes(d) ? y = 500 : S.startsWith(d) ? y = 400 : S.includes(d) && (y = 300)), y > 0 && f.push({ c: t, score: y, sortKey: a || r || S });
}
f.sort((t, a) => a.score !== t.score ? a.score - t.score : t.sortKey.localeCompare(a.sortKey));
const A = f.map((t) => t.c);
return typeof l == "number" && l > 0 ? A.slice(0, l) : A;
}) };
}
const tt = (e, n) => {
const s = (o) => {
const l = e.value;
l && (l === o.target || l.contains(o.target) || n(o));
};
Ae(() => {
document.addEventListener("click", s, !0);
}), ze(() => {
document.removeEventListener("click", s, !0);
});
}, nt = ({
enabled: e,
validCountries: n,
isoRef: s,
silent: o
}) => {
let l = B(o.value);
M(o, (h) => l = B(h));
const u = "https://ipapi.co/country/", p = ne(null), m = async () => {
try {
const g = await (await fetch(u)).text();
n.value.find((d) => d.iso === g) && (p.value = g, s && (s.value = g));
} catch (h) {
return l("Error fetching user country:", h), null;
}
return p.value;
};
return M(e, (h) => {
h && m();
}), e.value && m(), { country: p, requestUserCountry: m };
}, ot = (e, n, s, o) => {
let l = B(o.value);
M(o, (p) => l = B(p));
let u = null;
if (n.length)
if (s) {
e.value && l(
"Prop 'country-code' is ignored when 'initial-value' is set and 'international' is true."
);
try {
u = Ce(n);
} catch {
l(`Initial value '${n}' is not a valid phone number.`);
}
} else if (!e.value)
l(
"Prop 'country-code' should be set when 'initial-value' is provided and 'international' is false."
);
else
try {
u = Ce(n, {
defaultCountry: e.value
});
} catch {
l(
`Initial value '${n}' is not a valid phone number when 'country-code' is set as ${e.value}.`
);
}
return { initialData: u };
}, lt = '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';
function st() {
const e = document.createElement("canvas");
e.width = e.height = 1;
const n = e.getContext("2d", { willReadFrequently: !0 });
return n.textBaseline = "top", n.font = `100px ${lt}`, n.scale(0.01, 0.01), n;
}
function Se(e, n, s) {
return e.clearRect(0, 0, 100, 100), e.fillStyle = s, e.fillText(n, 0, 0), e.getImageData(0, 0, 1, 1).data.join(",");
}
function Ee(e) {
const n = st(), s = Se(n, e, "#fff"), o = Se(n, e, "#000");
return o === s && !o.startsWith("0,0,0,");
}
function at(e = "Twemoji Country Flags", n = "https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") {
if (typeof window < "u" && Ee("😊") && !Ee("🇨🇭")) {
const s = document.createElement("style");
return s.textContent = `@font-face {
font-family: "${e}";
unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
src: url('${n}') format('woff2');
font-display: swap;
}`, document.head.appendChild(s), !0;
}
return !1;
}
const rt = ["src"], it = "flagsapi.com", ut = "flagcdn.com", ct = "sprite", we = 24, ft = "w20", dt = "flat", vt = 44 / 30, pt = /* @__PURE__ */ $e({
__name: "FlagIcon",
props: {
flag: {},
value: {}
},
setup(e) {
at();
const s = _e(e), o = w(
() => s.flag.value || { strategy: ct, size: we }
), l = w(() => o.value.strategy === "sprite"), u = w(() => o.value.strategy === "emoji"), p = w(() => o.value.strategy === "api"), m = w(() => s.value.value.toLowerCase()), h = w(() => {
if (l.value) {
const f = o.value;
return {
width: f.size && `${f.size}px`,
height: f.size && `${f.size / vt}px`
};
}
if (u.value) {
const f = o.value;
return {
fontSize: f.fontSize && (typeof f.fontSize == "string" ? f.fontSize : `${f.fontSize}px`)
};
}
return {};
}), g = w(() => u.value ? m.value.toUpperCase().split("").map((f) => String.fromCodePoint(f.charCodeAt(0) + 127397)).join("") : ""), d = w(() => {
if (!p.value) return "";
let f = o.value;
if (f.cdn == "flagapi")
return f = o.value, `https://${it}/${m.value.toUpperCase()}/${f.style || dt}/${f.size || we}.png`;
if (f.cdn == "flagcdn")
return f = o.value, `https://${ut}/${f.size || ft}/${m.value}.png`;
});
return (f, A) => l.value ? (P(), T("span", {
key: 0,
class: ie(["flag", `flag-${m.value}`]),
style: q(h.value)
}, null, 6)) : u.value ? (P(), T("span", {
key: 1,
class: "emoji",
style: q(h.value)
}, Z(g.value), 5)) : p.value ? (P(), T("img", {
key: 2,
src: d.value,
style: q(h.value),
loading: "lazy",
decoding: "async",
fetchpriority: "low",
alt: ""
}, null, 12, rt)) : j("", !0);
}
}), Ne = (e, n) => {
const s = e.__vccOpts || e;
for (const [o, l] of n)
s[o] = l;
return s;
}, Fe = /* @__PURE__ */ Ne(pt, [["__scopeId", "data-v-38c41da2"]]), mt = { class: "tel-num-input__head" }, ht = {
key: 0,
class: "prefix-container__code"
}, gt = {
key: 0,
class: "prefix-container__country-name"
}, yt = {
key: 0,
class: "prefix-container__chevron",
viewBox: "0 0 16 16"
}, Ct = ["maxLength", "placeholder", "disabled", "required"], xt = {
key: 0,
class: "tel-num-input__body"
}, St = ["placeholder"], Et = ["tabindex", "onClick"], wt = {
key: 0,
class: "tel-num-input__body--item__code"
}, Ft = {
key: 0,
class: "tel-num-input__body--item__country-name"
}, Ie = 5, It = /* @__PURE__ */ $e({
__name: "TelNumInput",
props: {
size: { default: "lg" },
disableSizing: { type: Boolean, default: !1 },
countryCodes: { default: () => [] },
excludeCountryCodes: { default: () => [] },
defaultCountryCode: { default: "US" },
placeholder: {},
locale: {},
itemHeight: {},
disabled: { type: Boolean, default: !1 },
silent: { type: Boolean, default: !1 },
flag: {},
animationName: { default: "fade" },
initialValue: { default: "" },
international: { type: Boolean, default: !0 },
displayName: { default: "english" },
autoDetectCountry: { type: Boolean, default: !1 },
input: { default: () => ({
required: !1,
clearOnCountrySelect: !0,
focusAfterCountrySelect: !0,
formatterEnabled: !0
}) },
search: { default: () => ({
hidden: !1,
clearOnSelect: !0,
autoFocus: !0
}) },
prefix: { default: () => ({
hidden: !1,
hideCode: !1,
hideFlag: !1,
hideCountryName: !1,
hideChevron: !1
}) },
list: { default: () => ({
hidden: !1,
hideCode: !1,
hideFlag: !1,
hideCountryName: !1,
returnToSelected: !0,
itemsPerView: Ie
}) }
},
emits: ["update:modelValue", "toggle", "focus", "blur"],
setup(e, { expose: n, emit: s }) {
const o = s, l = e, u = {
sm: 32,
md: 36,
lg: 40,
xl: 48,
xxl: 56
}, {
countryCodes: p,
excludeCountryCodes: m,
international: h,
input: g,
displayName: d,
defaultCountryCode: f,
silent: A,
locale: t,
placeholder: a,
search: r,
disableSizing: S,
size: E,
list: C,
prefix: F,
itemHeight: y,
animationName: v,
autoDetectCountry: b
} = _e(l), U = me(() => l.search.locale), N = me(() => l.search.placeholder), L = (i) => `+${qe(i)}`, k = w(
() => S.value ? "" : `tel-num-input--${E.value ?? "lg"}`
), z = w(
() => (C.value.itemsPerView || Ie) * R.value
), R = w(
() => y.value || u[E.value || "lg"]
), D = w(
() => K.value.findIndex(
(i) => L(i.iso) === c.value.code
)
), O = w(() => !!g.value?.formatterEnabled), { validCountries: G, defaultIso: W } = Ye(
p,
m,
f,
A
), X = w(() => c.value.search), { results: K } = et({
countries: G,
query: X,
codeGetter: L,
limit: null
}), { initialData: H } = ot(
W,
l.initialValue,
h.value,
A
), { placVal: Le } = xe(
t,
a,
A,
"Enter phone number"
), { placVal: Pe } = xe(
U,
N,
A,
"Search..."
), oe = w(
() => d.value == "english" ? "name" : "nativeName"
), { getNames: be } = Ue(), { name: ke, nativeName: Te } = be(
H?.country || W.value
), c = ne({
iso: H?.country.toString() || W.value,
name: (oe.value == "name" ? ke : Te) || "",
code: H?.countryCallingCode ? `+${H?.countryCallingCode}` : L(W.value),
value: H ? l.initialValue : "",
search: "",
expanded: !1,
valid: !1
}), Me = w({
get: () => c.value.value,
set: (i) => c.value.value = i
}), ue = w({
get: () => c.value.iso,
set: (i) => c.value.iso = i
}), ce = te("telNumInput"), fe = te("scrollList"), Q = te("inputEl"), Y = te("searchEl");
tt(ce, () => {
le(!1);
}), Ae(() => {
O.value && c.value.value && pe();
});
const le = (i) => {
i == null ? c.value.expanded = !c.value.expanded : c.value.expanded = i, C.value.returnToSelected && c.value.expanded && D.value >= 0 && re(
() => fe.value?.scrollTo({
top: D.value * R.value
})
), o("toggle", c.value.expanded);
}, de = (i) => {
c.value = {
...c.value,
...i,
expanded: !1
}, r.value.clearOnSelect && (c.value.search = ""), g.value.clearOnCountrySelect && (c.value.value = ""), g.value.focusAfterCountrySelect && Q.value?.focus();
}, { setComposing: ve, formatNow: pe } = Qe({
value: Me,
iso: ue,
needFormat: O,
inputEl: Q,
international: h,
excludeCountryCodes: m,
onAfterFormat: () => {
o("update:modelValue", c.value);
}
}), { country: Re, requestUserCountry: je } = nt({
enabled: b,
validCountries: G,
isoRef: ue,
silent: A
});
return M(
() => c.value.search,
() => fe.value?.scrollTo({ top: 0 })
), M(
() => c.value.iso,
(i) => {
if (!i) return;
const x = i.toUpperCase(), $ = G.value.find((ee) => ee.iso === x);
$ && (c.value = {
...c.value,
iso: x,
name: $[oe.value] || "",
code: L(x)
});
}
), M(Y, () => {
r.value.autoFocus && Y.value && Y.value.focus();
}), M(
() => c.value.value,
(i) => {
if (!i || i.trim() === c.value.code) {
c.value.valid = !g.value.required;
return;
}
try {
const x = Ke(
i,
c.value.iso
);
x && x.isValid() ? c.value.valid = !0 : c.value.valid = !1;
} catch {
c.value.valid = !1;
}
},
{ immediate: !0 }
), n({
switchDropdown: le,
selectItem: de,
formatNow: pe,
inputEl: Q,
searchEl: Y,
telNumInputEl: ce,
country: Re,
requestUserCountry: je
}), (i, x) => (P(), T("div", {
class: ie(["tel-num-input", [
k.value,
{
expanded: c.value.expanded,
empty: !I(K).length,
listHidden: I(C).hidden
}
]]),
ref: "telNumInput"
}, [
V("div", mt, [
I(F).hidden ? j("", !0) : (P(), T("div", {
key: 0,
class: "prefix-container",
onClick: x[0] || (x[0] = ($) => le())
}, [
_(i.$slots, "prefix:before", {}, void 0, !0),
_(i.$slots, "prefix:flag", {}, () => [
I(F).hideFlag ? j("", !0) : (P(), he(Fe, {
key: 0,
flag: i.flag,
value: c.value.iso,
class: "prefix-container__flag"
}, null, 8, ["flag", "value"]))
], !0),
_(i.$slots, "prefix:code", {}, () => [
I(F).hideCode ? j("", !0) : (P(), T("span", ht, Z(c.value.code), 1))
], !0),
_(i.$slots, "prefix:countryName", {}, () => [
I(F).hideCountryName ? j("", !0) : (P(), T("span", gt, Z(c.value.name), 1))
], !0),
I(C).hidden ? j("", !0) : _(i.$slots, "prefix:chevron", { key: 0 }, () => [
I(F).hideChevron ? j("", !0) : (P(), T("svg", yt, [...x[7] || (x[7] = [
V("path", { d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708" }, null, -1)
])]))
], !0),
_(i.$slots, "prefix:after", {}, void 0, !0)
])),
_(i.$slots, "input", {}, () => [
ge(V("input", {
type: "text",
ref_key: "inputEl",
ref: Q,
maxLength: I(g).maxLength,
onCompositionstart: x[1] || (x[1] = ($) => I(ve)(!0)),
onCompositionend: x[2] || (x[2] = ($) => I(ve)(!1)),
"onUpdate:modelValue": x[3] || (x[3] = ($) => c.value.value = $),
onFocus: x[4] || (x[4] = ($) => o("focus")),
onBlur: x[5] || (x[5] = ($) => o("blur")),
placeholder: I(Le),
disabled: i.disabled,
required: I(g).required
}, null, 40, Ct), [
[ye, c.value.value]
])
], !0)
]),
De(We, { name: I(v) }, {
default: Be(() => [
c.value.expanded && !I(C).hidden ? (P(), T("div", xt, [
_(i.$slots, "body:search", {}, () => [
V("div", {
class: "search-container",
style: q({ height: `${R.value}px` })
}, [
_(i.$slots, "search:before", {}, void 0, !0),
_(i.$slots, "search:icon", {}, () => [
x[8] || (x[8] = V("svg", {
width: "50",
height: "50",
viewBox: "0 0 50 50"
}, [
V("path", { d: "M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z" })
], -1))
], !0),
_(i.$slots, "search:input", {}, () => [
I(r).hidden ? j("", !0) : ge((P(), T("input", {
key: 0,
ref_key: "searchEl",
ref: Y,
type: "text",
"onUpdate:modelValue": x[6] || (x[6] = ($) => c.value.search = $),
placeholder: I(Pe)
}, null, 8, St)), [
[ye, c.value.search]
])
], !0),
_(i.$slots, "search:after", {}, void 0, !0)
], 4)
], !0),
V("div", {
class: "list-container",
ref: "scrollList",
style: q({ maxHeight: `${z.value}px` })
}, [
(P(!0), T(Oe, null, Ve(I(K), ($, ee) => (P(), T("div", {
tabindex: ee,
onClick: (At) => de($),
class: ie([{ selected: c.value.iso == $.iso }, "tel-num-input__body--item"]),
key: ee,
style: q({ height: `${R.value}px` })
}, [
_(i.$slots, "item:before", {}, void 0, !0),
_(i.$slots, "item:flag", {}, () => [
I(C).hideFlag ? j("", !0) : (P(), he(Fe, {
key: 0,
flag: i.flag,
value: $.iso,
class: "tel-num-input__body--item__flag"
}, null, 8, ["flag", "value"]))
], !0),
_(i.$slots, "item:code", {}, () => [
I(C).hideCode ? j("", !0) : (P(), T("span", wt, Z(L($.iso)), 1))
], !0),
_(i.$slots, "item:countryName", {}, () => [
I(C).hideCountryName ? j("", !0) : (P(), T("span", Ft, Z($[oe.value]), 1))
], !0),
_(i.$slots, "item:after", {}, void 0, !0)
], 14, Et))), 128))
], 4)
])) : j("", !0)
]),
_: 3
}, 8, ["name"])
], 2));
}
}), Lt = /* @__PURE__ */ Ne(It, [["__scopeId", "data-v-c1f79fd7"]]);
export {
Lt as default
};