@desource/phone-mask-vue 1.0.0 → 1.1.1

package/dist/index.js

@@ -9,17 +9,17 @@ var lib = (function(exports, vue) {
     const e2 = [...o2.toUpperCase()].map((t2) => (t2.codePointAt(0) ?? 0) + 127397);
     return String.fromCodePoint(...e2);
   };
-  const o$1 = "en", n = /* @__PURE__ */ new Map(), getDisplayNames = (e2) => {
-    const t2 = e2.toLowerCase(), s2 = n.get(t2);
+  const o$1 = "en", n$1 = /* @__PURE__ */ new Map(), getDisplayNames = (e2) => {
+    const t2 = e2.toLowerCase(), s2 = n$1.get(t2);
     if (s2) return s2;
     const r = new Intl.DisplayNames([e2], { type: "region" });
-    if (n.size >= 10) {
-      for (const e3 of n.keys()) if (e3 !== o$1) {
-        n.delete(e3);
+    if (n$1.size >= 10) {
+      for (const e3 of n$1.keys()) if (e3 !== o$1) {
+        n$1.delete(e3);
         break;
       }
     }
-    return n.set(t2, r), r;
+    return n$1.set(t2, r), r;
   }, s$1 = Object.entries(M), divideMask = (e2) => e2.split(/ (.*)/s);
   function getCodeAndMask(e2) {
     let t2 = "", o2 = "";
@@ -69,32 +69,32 @@ var lib = (function(exports, vue) {
   MasksFull(o$1);
   const k = countryCodeEmoji;
   function getNavigatorLang() {
-    return "undefined" != typeof navigator && navigator.language || "en";
+    return globalThis.navigator?.language || "en";
   }
   function detectCountryFromLocale() {
     try {
       const t2 = getNavigatorLang();
       try {
-        const e3 = new Intl.Locale(t2);
-        if (e3.region) return e3.region.toUpperCase();
+        const r2 = new Intl.Locale(t2);
+        if (r2.region) return r2.region.toUpperCase();
       } catch {
       }
-      const e2 = t2.split(/[-_]/);
-      if (e2.length > 1) return e2[1]?.toUpperCase() || null;
+      const r = t2.split(/[-_]/);
+      if (r.length > 1) return r[1]?.toUpperCase() || null;
     } catch {
     }
     return null;
   }
   function hasCountry(t2) {
-    const r = f;
-    return t2.toUpperCase() in r;
+    const e2 = f;
+    return t2.toUpperCase() in e2;
   }
-  function getCountry(e2, r) {
-    const n2 = MasksFullMap(r), o2 = e2.toUpperCase();
+  function getCountry(r, e2) {
+    const n2 = MasksFullMap(e2), o2 = r.toUpperCase();
     return o2 in n2 ? { id: o2, ...n2[o2] } : { id: "US", ...n2.US };
   }
-  function parseCountryCode(t2, e2) {
-    return t2 && hasCountry(t2) ? t2.toUpperCase() : e2 || "";
+  function parseCountryCode(t2, r) {
+    return t2 && hasCountry(t2) ? t2.toUpperCase() : r || "";
   }
   function toArray(t2) {
     return Array.isArray(t2) ? t2 : [t2];
@@ -105,147 +105,137 @@ var lib = (function(exports, vue) {
   function removeCountryCodePrefix(t2) {
     return t2.replace(/^\+\d+\s?/, "");
   }
-  function pickMaskVariant(t2, e2) {
+  function pickMaskVariant(t2, r) {
+    if (!t2.length) return "";
     if (1 === t2.length) return t2[0];
-    const r = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), n2 = r.filter((t3) => t3.count >= e2).sort((t3, e3) => t3.count - e3.count);
+    const e2 = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), n2 = e2.filter((t3) => t3.count >= r).sort((t3, r2) => t3.count - r2.count);
     if (n2.length > 0) return n2[0].mask;
-    const o2 = r.sort((t3, e3) => e3.count - t3.count)[0];
+    const o2 = e2.sort((t3, r2) => r2.count - t3.count)[0];
     return o2 ? o2.mask : t2[0];
   }
-  function formatDigitsWithMap(t2, e2) {
-    let r = "";
+  function formatDigitsWithMap(t2, r) {
+    let e2 = "";
     const n2 = [];
     let o2 = 0;
-    const a = e2.length, s2 = t2.length;
+    const a = r.length, s2 = t2.length;
     for (let c = 0; c < s2; c++) {
       const s3 = t2[c];
       if ("#" === s3) {
         if (!(o2 < a)) break;
-        r += e2[o2], n2.push(o2), o2++;
+        e2 += r[o2], n2.push(o2), o2++;
       } else {
-        const e3 = -1 !== t2.indexOf("#", c + 1) && o2 < a;
-        (r.length > 0 || e3) && (r += s3, n2.push(-1));
+        const r2 = -1 !== t2.indexOf("#", c + 1) && o2 < a;
+        (e2.length > 0 || r2) && (e2 += s3, n2.push(-1));
       }
     }
-    return { display: r, map: n2 };
+    return { display: e2, map: n2 };
   }
-  function filterCountries(t2, e2) {
-    const r = e2.trim().toUpperCase();
-    if (!r) return t2;
-    const n2 = r.replace(/\D/g, ""), o2 = n2.length > 0;
+  function filterCountries(t2, r) {
+    const e2 = r.trim().toUpperCase();
+    if (!e2) return t2;
+    const n2 = e2.replace(/\D/g, ""), o2 = n2.length > 0;
     return t2.map((t3) => {
-      const e3 = t3.name.toUpperCase(), a = t3.id.toUpperCase(), s2 = t3.code.toUpperCase(), c = t3.code.replace(/\D/g, "");
-      let i2 = 0;
-      return e3.startsWith(r) ? i2 = 1e3 : e3.includes(r) && (i2 = 500), s2.startsWith(r) ? i2 += 100 : s2.includes(r) && (i2 += 50), a === r ? i2 += 200 : a.startsWith(r) && (i2 += 150), o2 && c.startsWith(n2) ? i2 += 80 : o2 && c.includes(n2) && (i2 += 40), { country: t3, score: i2 };
-    }).filter((t3) => t3.score > 0).sort((t3, e3) => e3.score !== t3.score ? e3.score - t3.score : t3.country.name.localeCompare(e3.country.name)).map((t3) => t3.country);
+      const r2 = t3.name.toUpperCase(), a = t3.id.toUpperCase(), s2 = t3.code.toUpperCase(), c = t3.code.replace(/\D/g, "");
+      let i = 0;
+      return r2.startsWith(e2) ? i = 1e3 : r2.includes(e2) && (i = 500), s2.startsWith(e2) ? i += 100 : s2.includes(e2) && (i += 50), a === e2 ? i += 200 : a.startsWith(e2) && (i += 150), o2 && c.startsWith(n2) ? i += 80 : o2 && c.includes(n2) && (i += 40), { country: t3, score: i };
+    }).filter((t3) => t3.score > 0).sort((t3, r2) => r2.score === t3.score ? t3.country.name.localeCompare(r2.country.name) : r2.score - t3.score).map((t3) => t3.country);
   }
-  const t = [" ", "-", "(", ")"], e$1 = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"], i = /[^\d\s\-()]/;
-  function extractDigits(t2, e2) {
-    const i2 = t2.replace(/\D/g, "");
-    return e2 ? i2.slice(0, e2) : i2;
+  const e$1 = [" ", "-", "(", ")"], t = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"], n = /[^\d\s\-()]/;
+  function removeDigitsRange(e2, t2, n2) {
+    return { newDigits: e2.slice(0, t2) + e2.slice(n2), caretDigitIndex: t2 };
   }
-  function getSelection(t2) {
-    return t2 ? [t2.selectionStart ?? 0, t2.selectionEnd ?? 0] : [0, 0];
+  function removeSelectedDigits(e2, t2, n2, i) {
+    if (n2 === i) return;
+    const r = t2.getDigitRange(e2, n2, i);
+    if (!r) return;
+    const [s2, g] = r;
+    return removeDigitsRange(e2, s2, g);
   }
-  function setCaret(t2, e2) {
-    if (t2) try {
-      t2.setSelectionRange(e2, e2);
+  function extractDigits(e2, t2) {
+    const n2 = e2.replace(/\D/g, "");
+    return t2 ? n2.slice(0, t2) : n2;
+  }
+  function getSelection(e2) {
+    return e2 ? [e2.selectionStart ?? 0, e2.selectionEnd ?? 0] : [0, 0];
+  }
+  function setCaret(e2, t2) {
+    if (e2) try {
+      e2.setSelectionRange(t2, t2);
     } catch {
     }
   }
-  function processBeforeInput(t2) {
-    if (!t2.target) return;
-    const e2 = t2.target, n2 = t2.data;
-    "insertText" === t2.inputType && n2 && (i.test(n2) || " " === n2 && e2.value.endsWith(" ")) && t2.preventDefault();
+  function processBeforeInput(e2) {
+    if (!e2.target) return;
+    const t2 = e2.target, i = e2.data;
+    "insertText" === e2.inputType && i && (n.test(i) || " " === i && t2.value.endsWith(" ")) && e2.preventDefault();
   }
-  function processInput(t2, e2) {
-    if (!t2.target) return;
-    const i2 = t2.target, { formatter: n2 } = e2, r = n2.getMaxDigits(), s2 = extractDigits(i2.value, r);
+  function processInput(e2, t2) {
+    if (!e2.target) return;
+    const n2 = e2.target, { formatter: i } = t2, r = i.getMaxDigits(), s2 = extractDigits(n2.value, r);
     return { newDigits: s2, caretDigitIndex: s2.length };
   }
-  function processKeydown(i2, n2) {
-    if (!i2.target) return;
-    const r = i2.target, { digits: s2, formatter: c } = n2;
-    if (i2.ctrlKey || i2.metaKey || i2.altKey || e$1.includes(i2.key)) return;
-    const [g, a] = getSelection(r);
-    if ("Backspace" !== i2.key) if ("Delete" !== i2.key) /^[0-9]$/.test(i2.key) ? s2.length >= c.getMaxDigits() && i2.preventDefault() : 1 === i2.key.length && i2.preventDefault();
-    else {
-      if (i2.preventDefault(), g !== a) {
-        const t2 = c.getDigitRange(s2, g, a);
-        if (t2) {
-          const [e2, i3] = t2;
-          return { newDigits: s2.slice(0, e2) + s2.slice(i3), caretDigitIndex: e2 };
-        }
-      }
-      if (g < r.value.length) {
-        const t2 = c.getDigitRange(s2, g, r.value.length);
-        if (t2) {
-          const [e2] = t2;
-          return { newDigits: s2.slice(0, e2) + s2.slice(e2 + 1), caretDigitIndex: e2 };
-        }
-      }
-    }
-    else {
-      if (i2.preventDefault(), g !== a) {
-        const t2 = c.getDigitRange(s2, g, a);
-        if (t2) {
-          const [e2, i3] = t2;
-          return { newDigits: s2.slice(0, e2) + s2.slice(i3), caretDigitIndex: e2 };
-        }
-      }
-      if (g > 0) {
-        const e2 = r.value;
-        let i3 = g - 1;
-        for (; i3 >= 0 && t.includes(e2[i3]); ) i3--;
-        if (i3 >= 0) {
-          const t2 = c.getDigitRange(s2, i3, i3 + 1);
-          if (t2) {
-            const [e3] = t2;
-            return { newDigits: s2.slice(0, e3) + s2.slice(e3 + 1), caretDigitIndex: e3 };
-          }
-        }
-      }
-    }
+  function processKeydown(n2, i) {
+    if (!n2.target) return;
+    const r = n2.target, { digits: s2, formatter: g } = i;
+    if ((function shouldIgnoreKeydown(e2) {
+      return e2.ctrlKey || e2.metaKey || e2.altKey || t.includes(e2.key);
+    })(n2)) return;
+    const [o2, c] = getSelection(r), a = r.value;
+    return "Backspace" === n2.key ? (n2.preventDefault(), removeSelectedDigits(s2, g, o2, c) ?? (function removePreviousDigit(t2, n3, i2, r2) {
+      if (r2 <= 0) return;
+      let s3 = r2 - 1;
+      for (; s3 >= 0 && e$1.includes(i2[s3]); ) s3--;
+      if (s3 < 0) return;
+      const g2 = n3.getDigitRange(t2, s3, s3 + 1);
+      if (!g2) return;
+      const [o3] = g2;
+      return removeDigitsRange(t2, o3, o3 + 1);
+    })(s2, g, a, o2)) : "Delete" === n2.key ? (n2.preventDefault(), removeSelectedDigits(s2, g, o2, c) ?? (function removeNextDigit(e2, t2, n3, i2) {
+      if (i2 >= n3.length) return;
+      const r2 = t2.getDigitRange(e2, i2, n3.length);
+      if (!r2) return;
+      const [s3] = r2;
+      return removeDigitsRange(e2, s3, s3 + 1);
+    })(s2, g, a, o2)) : void (/^\d$/.test(n2.key) ? s2.length >= g.getMaxDigits() && n2.preventDefault() : 1 === n2.key.length && n2.preventDefault());
   }
-  function processPaste(t2, e2) {
-    if (!t2.target) return;
-    t2.preventDefault();
-    const i2 = t2.target, { digits: n2, formatter: r } = e2, s2 = t2.clipboardData?.getData("text") || "", c = r.getMaxDigits(), g = extractDigits(s2, c);
-    if (0 === g.length) return;
-    const [a, o2] = getSelection(i2);
-    if (a !== o2) {
-      const t3 = r.getDigitRange(n2, a, o2);
-      if (t3) {
-        const [e3, i3] = t3;
-        return { newDigits: extractDigits(n2.slice(0, e3) + g + n2.slice(i3), c), caretDigitIndex: e3 + g.length };
+  function processPaste(e2, t2) {
+    if (!e2.target) return;
+    e2.preventDefault();
+    const n2 = e2.target, { digits: i, formatter: r } = t2, s2 = e2.clipboardData?.getData("text") || "", g = r.getMaxDigits(), o2 = extractDigits(s2, g);
+    if (0 === o2.length) return;
+    const [c, a] = getSelection(n2);
+    if (c !== a) {
+      const e3 = r.getDigitRange(i, c, a);
+      if (e3) {
+        const [t3, n3] = e3;
+        return { newDigits: extractDigits(i.slice(0, t3) + o2 + i.slice(n3), g), caretDigitIndex: t3 + o2.length };
       }
     }
-    const l = r.getDigitRange(n2, 0, a), f2 = l ? l[1] : 0;
-    return { newDigits: extractDigits(n2.slice(0, f2) + g + n2.slice(f2), c), caretDigitIndex: f2 + g.length };
+    const u = r.getDigitRange(i, 0, c), l = u ? u[1] : 0;
+    return { newDigits: extractDigits(i.slice(0, l) + o2 + i.slice(l), g), caretDigitIndex: l + o2.length };
   }
   function createPhoneFormatter(o2) {
-    const a = toArray(o2.mask), i2 = a.map((n2) => countPlaceholders(removeCountryCodePrefix(n2))), g = Math.max(...i2), getMask = (t2) => {
-      const n2 = pickMaskVariant(a, t2);
+    const i = toArray(o2.mask), l = i.map((n2) => countPlaceholders(removeCountryCodePrefix(n2))), s2 = Math.max(...l), getMask = (t2) => {
+      const n2 = pickMaskVariant(i, t2);
       return removeCountryCodePrefix(n2);
     };
     return { formatDisplay: (t2) => {
       const e2 = getMask(t2.length);
       return formatDigitsWithMap(e2, t2).display;
-    }, getMaxDigits: () => g, getPlaceholder: () => getMask(0), getCaretPosition: (t2) => {
-      const e2 = getMask(t2), { display: r, map: l } = formatDigitsWithMap(e2, "0".repeat(t2));
-      for (let e3 = 0; e3 < l.length; e3++) if (l[e3] === t2) return e3;
-      if (t2 >= l.length) return r.length;
-      for (let e3 = 0; e3 < l.length; e3++) if (l[e3] > t2) return e3;
-      return r.length;
+    }, getMaxDigits: () => s2, getPlaceholder: () => getMask(0), getCaretPosition: (t2) => {
+      const e2 = Math.max(0, t2);
+      if (0 === e2) return 0;
+      const r = getMask(e2), { display: a } = formatDigitsWithMap(r, "0".repeat(e2));
+      return a.length;
     }, getDigitRange: (t2, e2, r) => {
-      const l = getMask(t2.length), { map: o3 } = formatDigitsWithMap(l, t2);
-      let a2 = 1 / 0, i3 = -1 / 0;
+      const a = getMask(t2.length), { map: o3 } = formatDigitsWithMap(a, t2);
+      let i2 = 1 / 0, l2 = -1 / 0;
       for (let t3 = e2; t3 < r && t3 < o3.length; t3++) {
         const e3 = o3[t3];
-        void 0 !== e3 && e3 >= 0 && (a2 = Math.min(a2, e3), i3 = Math.max(i3, e3));
+        void 0 !== e3 && e3 >= 0 && (i2 = Math.min(i2, e3), l2 = Math.max(l2, e3));
       }
-      return a2 === 1 / 0 ? null : [a2, i3 + 1];
-    }, isComplete: (t2) => i2.includes(t2.length) };
+      return i2 === 1 / 0 ? null : [i2, l2 + 1];
+    }, isComplete: (t2) => l.includes(t2.length) };
   }
   const o = "https://ipapi.co/json/", e = 1500, p = "@desource/phone-mask:geo", s = 864e5;
   async function detectCountryFromGeoIP(t2 = o, r = e) {
@@ -289,7 +279,7 @@ var lib = (function(exports, vue) {
     const locale = vue.computed(() => vue.toValue(localeOption) || getNavigatorLang());
     const countryCode = vue.ref(parseCountryCode(vue.toValue(countryOption), "US"));
     const country = vue.computed(() => getCountry(countryCode.value, locale.value));
-    const setCountry = (code) => {
+    const setCountry2 = (code) => {
       const parsed = parseCountryCode(code);
       if (parsed) {
         countryCode.value = parsed;
@@ -299,14 +289,14 @@ var lib = (function(exports, vue) {
     };
     const detectCountry = async () => {
       const geoCountry = await detectByGeoIp();
-      if (setCountry(geoCountry)) return;
+      if (setCountry2(geoCountry)) return;
       const localeCountry = detectCountryFromLocale();
-      setCountry(localeCountry);
+      setCountry2(localeCountry);
     };
     vue.watchEffect(() => {
       const newCountry = vue.toValue(countryOption);
       if (newCountry && newCountry !== countryCode.value) {
-        setCountry(newCountry);
+        setCountry2(newCountry);
       }
     });
     vue.watchEffect(() => {
@@ -317,7 +307,7 @@ var lib = (function(exports, vue) {
     vue.watchEffect(() => {
       onCountryChange?.(country.value);
     });
-    return { country, setCountry, locale };
+    return { country, setCountry: setCountry2, locale };
   }
   function useFormatter({
     country,
@@ -504,8 +494,8 @@ var lib = (function(exports, vue) {
       if (!rootRef.value) return;
       const rect = rootRef.value.getBoundingClientRect();
       dropdownStyle.value = {
-        top: `${rect.bottom + window.scrollY + 8}px`,
-        left: `${rect.left + window.scrollX}px`,
+        top: `${rect.bottom + globalThis.scrollY + 8}px`,
+        left: `${rect.left + globalThis.scrollX}px`,
         width: `${rect.width}px`
       };
     };
@@ -544,9 +534,9 @@ var lib = (function(exports, vue) {
       }
     };
     const removeListeners = () => {
-      window.removeEventListener("resize", positionDropdown);
-      window.removeEventListener("scroll", positionDropdown, true);
-      window.removeEventListener("click", onDocClick, true);
+      globalThis.removeEventListener("resize", positionDropdown);
+      globalThis.removeEventListener("scroll", positionDropdown, true);
+      globalThis.removeEventListener("click", onDocClick, true);
     };
     vue.watch(hasDropdown, (dropdownExists) => {
       if (!dropdownExists && dropdownOpen.value) {
@@ -559,9 +549,9 @@ var lib = (function(exports, vue) {
         return;
       }
       positionDropdown();
-      window.addEventListener("resize", positionDropdown);
-      window.addEventListener("scroll", positionDropdown, true);
-      window.addEventListener("click", onDocClick, true);
+      globalThis.addEventListener("resize", positionDropdown);
+      globalThis.addEventListener("scroll", positionDropdown, true);
+      globalThis.addEventListener("click", onDocClick, true);
     });
     vue.onBeforeUnmount(removeListeners);
     return {
@@ -639,15 +629,18 @@ var lib = (function(exports, vue) {
   function useTheme({ theme }) {
     const systemDark = vue.ref(false);
     const themeClass = vue.computed(() => {
-      return vue.toValue(theme) !== "auto" ? `theme-${vue.toValue(theme)}` : systemDark.value ? "theme-dark" : "theme-light";
+      const resolvedTheme = vue.toValue(theme);
+      if (resolvedTheme === "auto") {
+        return systemDark.value ? "theme-dark" : "theme-light";
+      }
+      return `theme-${resolvedTheme}`;
     });
     let mq = null;
     const handler = (e2) => {
       systemDark.value = e2.matches;
     };
     vue.onBeforeMount(() => {
-      if (typeof window === "undefined") return;
-      mq = window.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+      mq = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
       if (!mq) return;
       systemDark.value = mq.matches;
       mq.addEventListener("change", handler);
@@ -696,13 +689,12 @@ var lib = (function(exports, vue) {
     "aria-hidden": "true"
   };
   const _hoisted_12 = { class: "pi-search-wrap" };
-  const _hoisted_13 = ["value", "placeholder"];
-  const _hoisted_14 = ["aria-activedescendant"];
-  const _hoisted_15 = ["id", "aria-selected", "title", "onClick", "onMouseenter"];
-  const _hoisted_16 = ["aria-label"];
-  const _hoisted_17 = { class: "pi-opt-name" };
-  const _hoisted_18 = { class: "pi-opt-code" };
-  const _hoisted_19 = {
+  const _hoisted_13 = ["value", "aria-activedescendant", "placeholder"];
+  const _hoisted_14 = ["id", "aria-selected", "title", "onClick", "onMouseenter"];
+  const _hoisted_15 = ["aria-label"];
+  const _hoisted_16 = { class: "pi-opt-name" };
+  const _hoisted_17 = { class: "pi-opt-code" };
+  const _hoisted_18 = {
     key: 0,
     class: "pi-empty"
   };
@@ -737,7 +729,7 @@ var lib = (function(exports, vue) {
       const onChange = (v) => {
         model.value = v;
       };
-      const { country, setCountry, locale } = useCountry({
+      const { country, setCountry: setCountry2, locale } = useCountry({
         country: () => props.country,
         locale: () => props.locale,
         detect: () => props.detect,
@@ -767,6 +759,9 @@ var lib = (function(exports, vue) {
       const dropdownRef = vue.useTemplateRef("dropdownRef");
       const searchRef = vue.useTemplateRef("searchRef");
       const selectorRef = vue.useTemplateRef("selectorRef");
+      const dropdownId = vue.getCurrentInstance()?.uid ?? 0;
+      const listboxId = `pi-options-${dropdownId}`;
+      const getOptionId = (idx) => `pi-option-${dropdownId}-${idx}`;
       const inactive = vue.computed(() => props.disabled || props.readonly);
       const incomplete = vue.computed(() => showValidationHint.value && shouldShowWarn.value);
       const showCopyButton = vue.computed(() => props.showCopy && !isEmpty.value && !props.disabled);
@@ -798,9 +793,12 @@ var lib = (function(exports, vue) {
         locale,
         countryOption: () => props.country,
         inactive,
-        onSelectCountry: setCountry,
+        onSelectCountry: setCountry2,
         onAfterSelect: focusInput
       });
+      const activeOptionId = vue.computed(
+        () => dropdownOpen.value && filteredCountries.value[focusedIndex.value] ? getOptionId(focusedIndex.value) : void 0
+      );
       const { handleBeforeInput, handleInput, handleKeydown, handlePaste } = useInputHandlers({
         formatter,
         digits,
@@ -1012,6 +1010,8 @@ var lib = (function(exports, vue) {
                       type: "search",
                       class: "pi-search",
                       "aria-label": "Search countries",
+                      "aria-controls": listboxId,
+                      "aria-activedescendant": activeOptionId.value,
                       placeholder: __props.searchPlaceholder,
                       onKeydown: _cache[6] || (_cache[6] = //@ts-ignore
                       (...args) => vue.unref(handleSearchKeydown) && vue.unref(handleSearchKeydown)(...args)),
@@ -1020,14 +1020,14 @@ var lib = (function(exports, vue) {
                     }, null, 40, _hoisted_13)
                   ]),
                   vue.createElementVNode("ul", {
+                    id: listboxId,
                     class: "pi-options",
                     role: "listbox",
-                    "aria-activedescendant": `option-${vue.unref(focusedIndex)}`,
                     tabindex: "-1"
                   }, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(filteredCountries), (c, idx) => {
                       return vue.openBlock(), vue.createElementBlock("li", {
-                        id: `option-${idx}`,
+                        id: getOptionId(idx),
                         key: c.id,
                         role: "option",
                         class: vue.normalizeClass([
@@ -1050,13 +1050,13 @@ var lib = (function(exports, vue) {
                           vue.renderSlot(_ctx.$slots, "flag", { country: c }, () => [
                             vue.createTextVNode(vue.toDisplayString(c.flag), 1)
                           ], true)
-                        ], 8, _hoisted_16),
-                        vue.createElementVNode("span", _hoisted_17, vue.toDisplayString(c.name), 1),
-                        vue.createElementVNode("span", _hoisted_18, vue.toDisplayString(c.code), 1)
-                      ], 42, _hoisted_15);
+                        ], 8, _hoisted_15),
+                        vue.createElementVNode("span", _hoisted_16, vue.toDisplayString(c.name), 1),
+                        vue.createElementVNode("span", _hoisted_17, vue.toDisplayString(c.code), 1)
+                      ], 42, _hoisted_14);
                     }), 128)),
-                    vue.unref(filteredCountries).length === 0 ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_19, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true)
-                  ], 8, _hoisted_14)
+                    vue.unref(filteredCountries).length === 0 ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_18, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true)
+                  ])
                 ], 6)) : vue.createCommentVNode("", true)
               ]),
               _: 3
@@ -1081,47 +1081,18 @@ var lib = (function(exports, vue) {
     }
     return target;
   };
-  const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-33134720"]]);
-  async function initState(binding) {
-    const value = binding.value;
-    let options = {};
-    if (typeof value === "string") {
-      options = { country: value };
-    } else if (typeof value === "object" && value !== null) {
-      options = value;
-    }
-    const locale = options.locale || getNavigatorLang();
-    let country;
-    if (options.country) {
-      country = getCountry(options.country, locale);
-    } else if (options.detect) {
-      const geoCountry = await detectCountryFromGeoIP();
-      if (geoCountry) {
-        country = getCountry(geoCountry, locale);
-      } else {
-        const localeCountry = detectCountryFromLocale();
-        if (localeCountry) {
-          country = getCountry(localeCountry, locale);
-        } else {
-          country = getCountry("US", locale);
-        }
-      }
-    } else {
-      country = getCountry("US", locale);
-    }
-    return {
-      country,
-      formatter: createPhoneFormatter(country),
-      digits: "",
-      locale,
-      options
-    };
+  const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d730aa54"]]);
+  function parseParams(params) {
+    if (typeof params === "string") return { country: params };
+    if (params && typeof params === "object") return params;
+    return {};
   }
-  function updateDisplay(el, state) {
+  function updateDigits(el, state, digits) {
+    state.digits = digits;
     el.value = state.formatter.formatDisplay(state.digits);
     if (state.options.onChange) {
-      const fullNumberFormatted = `${state.country.code} ${el.value}`;
-      const fullNumber = `${state.country.code}${state.digits}`;
+      const fullNumberFormatted = el.value ? `${state.country.code} ${el.value}` : "";
+      const fullNumber = state.digits ? `${state.country.code}${state.digits}` : "";
       state.options.onChange({
         full: fullNumber,
         fullFormatted: fullNumberFormatted,
@@ -1129,113 +1100,92 @@ var lib = (function(exports, vue) {
       });
     }
   }
-  function createInputHandler(el, state) {
-    return (e2) => {
-      const result = processInput(e2, { formatter: state.formatter });
-      if (!result) return;
-      state.digits = result.newDigits;
-      updateDisplay(el, state);
-      vue.nextTick(() => {
-        const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
-        setCaret(el, pos);
-      });
-    };
+  function checkDigitsUpdate(el, state) {
+    const maxDigits = state.formatter.getMaxDigits();
+    const digits = extractDigits(el.value, maxDigits);
+    const displayValue = state.formatter.formatDisplay(digits);
+    if (digits !== state.digits || el.value !== displayValue) {
+      updateDigits(el, state, digits);
+    }
   }
-  function createKeydownHandler(el, state) {
-    return (e2) => {
-      const result = processKeydown(e2, {
-        digits: state.digits,
-        formatter: state.formatter
-      });
-      if (!result) return;
-      state.digits = result.newDigits;
-      updateDisplay(el, state);
-      vue.nextTick(() => {
-        const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
-        setCaret(el, pos);
-      });
-    };
+  function checkCountryUpdate(el, state) {
+    const oldCountry = state.country.id;
+    const newCountry = parseCountryCode(state.options.country);
+    if (newCountry && newCountry !== oldCountry) {
+      setCountry(el, state, newCountry);
+    }
   }
-  function createPasteHandler(el, state) {
+  function createHandler(el, state, handler) {
     return (e2) => {
-      const result = processPaste(e2, {
-        digits: state.digits,
-        formatter: state.formatter
-      });
+      const result = handler(e2, state);
       if (!result) return;
-      state.digits = result.newDigits;
-      updateDisplay(el, state);
+      updateDigits(el, state, result.newDigits);
       vue.nextTick(() => {
         const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
         setCaret(el, pos);
       });
     };
   }
-  async function updateCountry(el, state, newCountryCode) {
-    const newCountry = getCountry(newCountryCode, state.locale);
+  async function detectInitialCountry(options) {
+    const countryOption = parseCountryCode(options.country);
+    if (countryOption) return countryOption;
+    if (options.detect) {
+      const geoCountry = parseCountryCode(await detectByGeoIp());
+      if (geoCountry) return geoCountry;
+      const localeCountry = parseCountryCode(detectCountryFromLocale());
+      if (localeCountry) return localeCountry;
+    }
+    return "US";
+  }
+  function setCountry(el, state, newCountryCode) {
+    const parsed = parseCountryCode(newCountryCode);
+    if (!parsed) return;
+    const newCountry = getCountry(parsed, state.locale);
     state.country = newCountry;
+    state.options.onCountryChange?.(newCountry);
     state.formatter = createPhoneFormatter(newCountry);
     el.placeholder = state.formatter.getPlaceholder();
-    const maxDigits = state.formatter.getMaxDigits();
-    if (state.digits.length > maxDigits) {
-      state.digits = state.digits.slice(0, maxDigits);
-    }
-    updateDisplay(el, state);
-    if (state.options.onCountryChange) {
-      state.options.onCountryChange(newCountry);
-    }
+    checkDigitsUpdate(el, state);
   }
   const vPhoneMask = {
-    async mounted(el, binding) {
+    mounted(el, binding) {
       if (el.tagName !== "INPUT") {
         console.warn("[v-phone-mask] Directive can only be used on input elements");
         return;
       }
       el.setAttribute("type", "tel");
       el.setAttribute("inputmode", "tel");
-      const state = await initState(binding);
+      el.setAttribute("placeholder", "");
+      const options = parseParams(binding.value);
+      const locale = options.locale || getNavigatorLang();
+      const country = getCountry(parseCountryCode(options.country, "US"), locale);
+      const state = {
+        country,
+        formatter: createPhoneFormatter(country),
+        digits: "",
+        locale,
+        options
+      };
       el.__phoneMaskState = state;
-      state.inputHandler = createInputHandler(el, state);
-      state.keydownHandler = createKeydownHandler(el, state);
-      state.pasteHandler = createPasteHandler(el, state);
+      state.inputHandler = createHandler(el, state, processInput);
+      state.keydownHandler = createHandler(el, state, processKeydown);
+      state.pasteHandler = createHandler(el, state, processPaste);
       state.beforeInputHandler = processBeforeInput;
       el.addEventListener("beforeinput", state.beforeInputHandler);
       el.addEventListener("input", state.inputHandler);
       el.addEventListener("keydown", state.keydownHandler);
       el.addEventListener("paste", state.pasteHandler);
-      el.setAttribute("placeholder", state.formatter.getPlaceholder());
-      if (state.options.onCountryChange) {
-        state.options.onCountryChange(state.country);
-      }
-      if (el.value) {
-        const maxDigits = state.formatter.getMaxDigits();
-        state.digits = extractDigits(el.value, maxDigits);
-        updateDisplay(el, state);
-      }
+      detectInitialCountry(options).then((countryCode) => {
+        if (el.__phoneMaskState !== state) return;
+        setCountry(el, state, countryCode);
+      });
     },
-    async updated(el, binding) {
+    updated(el, binding) {
       const state = el.__phoneMaskState;
       if (!state) return;
-      const value = binding.value;
-      let newOptions = {};
-      if (typeof value === "string") {
-        newOptions = { country: value };
-      } else if (typeof value === "object" && value !== null) {
-        newOptions = value;
-      }
-      const oldCountry = state.options.country;
-      state.options = newOptions;
-      const newCountry = newOptions.country;
-      if (newCountry && newCountry !== oldCountry) {
-        await updateCountry(el, state, newCountry);
-      }
-      const maxDigits = state.formatter.getMaxDigits();
-      const newDigits = extractDigits(el.value, maxDigits);
-      const normalizedDisplay = state.formatter.formatDisplay(newDigits);
-      if (newDigits !== state.digits || el.value !== normalizedDisplay) {
-        state.digits = newDigits;
-        updateDisplay(el, state);
-      }
+      state.options = parseParams(binding.value);
+      checkCountryUpdate(el, state);
+      checkDigitsUpdate(el, state);
     },
     unmounted(el) {
       const state = el.__phoneMaskState;
@@ -1249,7 +1199,7 @@ var lib = (function(exports, vue) {
   };
   function usePhoneMask(options) {
     const inputRef = vue.shallowRef(null);
-    const { country, setCountry } = useCountry({
+    const { country, setCountry: setCountry2 } = useCountry({
       country: options.country,
       locale: options.locale,
       detect: options.detect,
@@ -1313,13 +1263,14 @@ var lib = (function(exports, vue) {
     return {
       inputRef,
       digits,
+      formatter,
       full,
       fullFormatted,
       isComplete,
       isEmpty,
       shouldShowWarn,
       country,
-      setCountry,
+      setCountry: setCountry2,
       clear
     };
   }
@@ -1344,7 +1295,7 @@ var lib = (function(exports, vue) {
   exports.install = install;
   exports.usePhoneMask = usePhoneMask;
   exports.vPhoneMask = vPhoneMask;
-  exports.vPhoneMaskSetCountry = updateCountry;
+  exports.vPhoneMaskSetCountry = setCountry;
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
   return exports;
 })({}, Vue);