nuxt-phone-number 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Adama Sambe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,56 @@
+# nuxt-phone-number
+
+`nuxt-phone-number` is a Nuxt-first phone input module.
+
+It provides:
+
+- auto-registered `<UPhoneInput />`
+- `usePhone()` composable
+- global config via `nuxt.config.ts`
+- live formatting and validation with `libphonenumber-js`
+- configurable UI props like `variant`, `rounded` and `size`
+
+## Installation
+
+```bash
+npm install nuxt-phone-number libphonenumber-js
+```
+
+```ts
+export default defineNuxtConfig({
+  modules: ["nuxt-phone-number"],
+
+  phoneInput: {
+    defaultCountry: "SN",
+    preferredCountries: ["SN", "FR"],
+    format: "international",
+  },
+});
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+const phone = ref("");
+</script>
+
+<template>
+  <UPhoneInput
+    v-model="phone"
+    variant="outline"
+    rounded="lg"
+  />
+</template>
+```
+
+## usePhone
+
+```vue
+<script setup lang="ts">
+const { formatPhone, validatePhone } = usePhone();
+
+const formatted = formatPhone("+221771234567");
+const isValid = validatePhone("+221771234567");
+</script>
+```

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from '../dist/runtime/types/index.js';
+export { ModuleOptions, PhoneFormat, PhoneInputData, PhoneInputUiOptions } from '../dist/runtime/types/index.js';
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from '../dist/runtime/types/index.js';
+export { ModuleOptions, PhoneFormat, PhoneInputData, PhoneInputUiOptions } from '../dist/runtime/types/index.js';
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-phone-number",
+  "configKey": "phoneInput",
+  "compatibility": {
+    "nuxt": "^3.0.0 || ^4.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,50 @@
+import { defineNuxtModule, createResolver, addPlugin, addImports, addComponent } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "nuxt-phone-number",
+    configKey: "phoneInput",
+    compatibility: {
+      nuxt: "^3.0.0 || ^4.0.0"
+    }
+  },
+  defaults: {
+    defaultCountry: "SN",
+    preferredCountries: ["SN", "FR"],
+    onlyCountries: [],
+    ignoredCountries: [],
+    useBrowserLocale: true,
+    format: "international",
+    ui: {
+      variant: "outline",
+      size: "md",
+      rounded: "lg"
+    }
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.public.phoneInput = {
+      defaultCountry: options.defaultCountry,
+      preferredCountries: options.preferredCountries,
+      onlyCountries: options.onlyCountries,
+      ignoredCountries: options.ignoredCountries,
+      useBrowserLocale: options.useBrowserLocale,
+      format: options.format,
+      ui: options.ui
+    };
+    addPlugin(resolver.resolve("./runtime/plugins/phone"));
+    addImports([
+      {
+        name: "usePhone",
+        as: "usePhone",
+        from: resolver.resolve("./runtime/composables/usePhone")
+      }
+    ]);
+    addComponent({
+      name: "UPhoneInput",
+      filePath: resolver.resolve("./runtime/components/UPhoneInput.vue")
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/UPhoneInput.vue

@@ -0,0 +1,514 @@
+<template>
+  <div class="npi-root" ref="triggerRef" :style="cssVars">
+    <div
+      class="npi-control"
+      :class="[
+        roundedClass,
+        sizeClass,
+        variantClass,
+        hasError ? 'npi-control-error' : isFocused || isOpen ? 'npi-control-active' : 'npi-control-idle',
+        props.disabled ? 'npi-control-disabled' : '',
+      ]"
+    >
+      <button
+        type="button"
+        class="npi-country-button"
+        :class="props.disabled ? 'npi-country-button-disabled' : ''"
+        :disabled="props.disabled"
+        @click="toggleDropdown"
+        @keydown.escape="closeDropdown"
+        @keydown.enter.prevent="toggleDropdown"
+        @keydown.space.prevent="toggleDropdown"
+      >
+        <span class="npi-flag" role="img" :aria-label="selectedCountry?.name">
+          {{ selectedCountry ? countryFlag(selectedCountry.code) : "🌍" }}
+        </span>
+        <span class="npi-dial-code">+{{ selectedCountry?.dial }}</span>
+        <svg
+          width="14"
+          height="14"
+          class="npi-chevron"
+          :class="isOpen ? 'npi-chevron-open' : ''"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <div class="npi-input-wrap">
+        <input
+          ref="inputRef"
+          v-model="displayValue"
+          type="tel"
+          inputmode="tel"
+          class="npi-input"
+          :placeholder="currentPlaceholder"
+          :disabled="props.disabled"
+          :aria-invalid="hasError"
+          autocomplete="tel"
+          @input="onInput"
+          @focus="isFocused = true"
+          @blur="onBlur"
+          @keydown.escape="closeDropdown"
+        />
+        <span
+          v-if="displayValue.replace(/\D/g, '').length >= 7 && isValid"
+          class="npi-check"
+        >
+          <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+            <path
+              fill-rule="evenodd"
+              d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+
+    <p v-if="hasError && errorMessage" class="npi-error">
+      {{ errorMessage }}
+    </p>
+
+    <Transition
+      enter-active-class="npi-transition-enter-active"
+      enter-from-class="npi-transition-enter-from"
+      enter-to-class="npi-transition-enter-to"
+      leave-active-class="npi-transition-leave-active"
+      leave-from-class="npi-transition-leave-from"
+      leave-to-class="npi-transition-leave-to"
+    >
+      <div v-if="isOpen" ref="dropdownRef" class="npi-dropdown">
+        <div class="npi-search-wrap">
+          <div class="npi-search-box">
+            <svg
+              width="14"
+              height="14"
+              class="npi-search-icon"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+              />
+            </svg>
+            <input
+              ref="searchRef"
+              v-model="searchQuery"
+              type="text"
+              class="npi-search-input"
+              :placeholder="searchPlaceholder"
+              @keydown.escape="closeDropdown"
+              @keydown.enter.prevent="selectFirstResult"
+            />
+          </div>
+        </div>
+
+        <ul class="npi-list" role="listbox">
+          <template v-if="!searchQuery && preferredCountriesList.length">
+            <li
+              v-for="country in preferredCountriesList"
+              :key="`pref-${country.code}`"
+              class="npi-item"
+              :class="selectedCountry?.code === country.code ? 'npi-item-selected' : 'npi-item-idle'"
+              role="option"
+              :aria-selected="selectedCountry?.code === country.code"
+              @click="selectCountry(country)"
+            >
+              <span class="npi-item-flag">{{ countryFlag(country.code) }}</span>
+              <span class="npi-item-name">{{ country.name }}</span>
+              <span class="npi-item-dial">+{{ country.dial }}</span>
+            </li>
+            <li class="npi-divider" aria-hidden="true" />
+          </template>
+
+          <li
+            v-for="country in filteredCountries"
+            :key="country.code"
+            class="npi-item"
+            :class="selectedCountry?.code === country.code ? 'npi-item-selected' : 'npi-item-idle'"
+            role="option"
+            :aria-selected="selectedCountry?.code === country.code"
+            @click="selectCountry(country)"
+          >
+            <span class="npi-item-flag">{{ countryFlag(country.code) }}</span>
+            <span class="npi-item-name">{{ country.name }}</span>
+            <span class="npi-item-dial">+{{ country.dial }}</span>
+          </li>
+
+          <li v-if="filteredCountries.length === 0" class="npi-empty">
+            {{ noResultsText }}
+          </li>
+        </ul>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { useRuntimeConfig } from "#imports";
+import {
+  AsYouType,
+  getCountries,
+  getCountryCallingCode,
+  type CountryCode,
+} from "libphonenumber-js";
+import { parsePhoneNumberFromString } from "libphonenumber-js/max";
+import type { ModuleOptions, PhoneFormat, PhoneInputData, PhoneInputUiOptions } from "../types";
+
+interface Country {
+  code: CountryCode;
+  name: string;
+  dial: string;
+}
+
+const defaults = useRuntimeConfig().public.phoneInput as Required<ModuleOptions>;
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    countryCode?: CountryCode | string;
+    defaultCountry?: string;
+    preferredCountries?: string[];
+    onlyCountries?: string[];
+    ignoredCountries?: string[];
+    useBrowserLocale?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string | boolean;
+    locale?: string;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    invalidMessage?: string;
+    format?: PhoneFormat;
+    variant?: PhoneInputUiOptions["variant"];
+    size?: PhoneInputUiOptions["size"];
+    rounded?: PhoneInputUiOptions["rounded"];
+  }>(),
+  {
+    modelValue: "",
+    preferredCountries: () => [],
+    onlyCountries: () => [],
+    ignoredCountries: () => [],
+    disabled: false,
+    locale: "fr",
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  "update:countryCode": [code: CountryCode];
+  data: [data: PhoneInputData];
+}>();
+
+const resolvedVariant = computed(() => props.variant ?? defaults.ui.variant ?? "outline");
+const resolvedSize = computed(() => props.size ?? defaults.ui.size ?? "md");
+const resolvedRounded = computed(() => props.rounded ?? defaults.ui.rounded ?? "lg");
+const resolvedFormat = computed(() => props.format ?? defaults.format ?? "international");
+const resolvedPreferredCountries = computed(
+  () => (props.preferredCountries.length ? props.preferredCountries : defaults.preferredCountries) ?? [],
+);
+const resolvedOnlyCountries = computed(
+  () => (props.onlyCountries.length ? props.onlyCountries : defaults.onlyCountries) ?? [],
+);
+const resolvedIgnoredCountries = computed(
+  () => (props.ignoredCountries.length ? props.ignoredCountries : defaults.ignoredCountries) ?? [],
+);
+const resolvedDefaultCountry = computed(
+  () => props.defaultCountry ?? defaults.defaultCountry ?? "SN",
+);
+const resolvedUseBrowserLocale = computed(
+  () => props.useBrowserLocale ?? defaults.useBrowserLocale ?? true,
+);
+const searchPlaceholder = computed(() => props.searchPlaceholder ?? "Search country...");
+const noResultsText = computed(() => props.noResultsText ?? "No country found");
+const invalidMessage = computed(() => props.invalidMessage ?? "Invalid phone number");
+
+const roundedClass = computed(() => `npi-rounded-${resolvedRounded.value}`);
+const sizeClass = computed(() => `npi-size-${resolvedSize.value}`);
+const variantClass = computed(() => `npi-variant-${resolvedVariant.value}`);
+const cssVars = computed(() => ({}));
+const displayNames = computed(
+  () => new Intl.DisplayNames([props.locale || "fr"], { type: "region" }),
+);
+
+const allCountries = computed<Country[]>(() => {
+  let codes = getCountries() as CountryCode[];
+
+  if (resolvedOnlyCountries.value.length) {
+    codes = codes.filter((code) => resolvedOnlyCountries.value.includes(code));
+  }
+  if (resolvedIgnoredCountries.value.length) {
+    codes = codes.filter((code) => !resolvedIgnoredCountries.value.includes(code));
+  }
+
+  return codes
+    .map((code) => ({
+      code,
+      name: displayNames.value.of(code) ?? code,
+      dial: getCountryCallingCode(code),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name, props.locale || "fr"));
+});
+
+const preferredCountriesList = computed<Country[]>(
+  () =>
+    resolvedPreferredCountries.value
+      .map((code) => allCountries.value.find((country) => country.code === code))
+      .filter(Boolean) as Country[],
+);
+
+const selectedCountry = ref<Country | null>(null);
+const displayValue = ref("");
+const isOpen = ref(false);
+const isFocused = ref(false);
+const searchQuery = ref("");
+const isValid = ref(false);
+
+const searchRef = ref<HTMLInputElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const triggerRef = ref<HTMLElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const filteredCountries = computed<Country[]>(() => {
+  if (!searchQuery.value) return allCountries.value;
+  const q = searchQuery.value.toLowerCase();
+  return allCountries.value.filter(
+    (country) =>
+      country.name.toLowerCase().includes(q) ||
+      country.dial.includes(q) ||
+      country.code.toLowerCase().includes(q),
+  );
+});
+
+const currentPlaceholder = computed(() => props.placeholder || "Phone number");
+const hasError = computed(
+  () =>
+    !!props.error ||
+    (displayValue.value.length > 3 && !isValid.value && !isFocused.value),
+);
+const errorMessage = computed(() => {
+  if (typeof props.error === "string") return props.error;
+  if (displayValue.value.length > 3 && !isValid.value) return invalidMessage.value;
+  return "";
+});
+
+function countryFlag(code: string): string {
+  return code
+    .toUpperCase()
+    .split("")
+    .map((char) => String.fromCodePoint(0x1f1e6 - 65 + char.charCodeAt(0)))
+    .join("");
+}
+
+function formatOutput(e164: string | null, nationalFallback: string): string {
+  if (!e164) return nationalFallback;
+  try {
+    const parsed = parsePhoneNumberFromString(e164);
+    if (!parsed) return nationalFallback;
+    if (resolvedFormat.value === "e164") return parsed.number;
+    if (resolvedFormat.value === "national") return parsed.formatNational();
+    return parsed.formatInternational();
+  } catch {
+    return nationalFallback;
+  }
+}
+
+function selectCountry(country: Country) {
+  selectedCountry.value = country;
+  closeDropdown();
+  if (displayValue.value) {
+    const formatter = new AsYouType(country.code);
+    displayValue.value = formatter.input(displayValue.value.replace(/\D/g, ""));
+  }
+  emit("update:countryCode", country.code);
+  nextTick(() => inputRef.value?.focus());
+  emitData();
+}
+
+function onInput() {
+  if (!selectedCountry.value) return;
+
+  if (displayValue.value.startsWith("+")) {
+    const parsed = parsePhoneNumberFromString(displayValue.value);
+    if (parsed?.country && parsed.isValid()) {
+      const found = allCountries.value.find((country) => country.code === parsed.country);
+      if (found) selectedCountry.value = found;
+      displayValue.value = parsed.formatNational();
+      isValid.value = true;
+      emitData();
+      return;
+    }
+    displayValue.value = displayValue.value.replace(/^\+/, "");
+  }
+
+  let raw = displayValue.value.replace(/[^\d]/g, "");
+  const dial = selectedCountry.value.dial;
+  if (raw.startsWith(dial) && raw.length > dial.length) {
+    raw = raw.slice(dial.length);
+  }
+
+  const formatter = new AsYouType(selectedCountry.value.code);
+  displayValue.value = formatter.input(raw) || raw;
+
+  try {
+    const parsed = parsePhoneNumberFromString(
+      `+${dial}${raw}`,
+      selectedCountry.value.code,
+    );
+    isValid.value = parsed?.isValid() ?? false;
+  } catch {
+    isValid.value = false;
+  }
+
+  emitData();
+}
+
+function onBlur() {
+  isFocused.value = false;
+  emitData();
+}
+
+function emitData() {
+  if (!selectedCountry.value) return;
+
+  const raw = displayValue.value.replace(/[^\d]/g, "");
+  const e164 = raw ? `+${selectedCountry.value.dial}${raw}` : null;
+  let valid = false;
+
+  if (e164) {
+    try {
+      const parsed = parsePhoneNumberFromString(e164, selectedCountry.value.code);
+      valid = parsed?.isValid() ?? false;
+    } catch {
+      valid = false;
+    }
+  }
+
+  isValid.value = valid;
+  emit("update:modelValue", formatOutput(e164, displayValue.value));
+  emit("data", {
+    e164,
+    countryCode: selectedCountry.value.code,
+    formatted: formatOutput(e164, displayValue.value),
+    isValid: valid,
+  });
+}
+
+function toggleDropdown() {
+  if (isOpen.value) {
+    closeDropdown();
+    return;
+  }
+  isOpen.value = true;
+  searchQuery.value = "";
+  nextTick(() => searchRef.value?.focus());
+}
+
+function closeDropdown() {
+  isOpen.value = false;
+  searchQuery.value = "";
+}
+
+function selectFirstResult() {
+  const firstCountry = filteredCountries.value[0];
+  if (firstCountry) selectCountry(firstCountry);
+}
+
+function onClickOutside(event: MouseEvent) {
+  if (
+    !triggerRef.value?.contains(event.target as Node) &&
+    !dropdownRef.value?.contains(event.target as Node)
+  ) {
+    closeDropdown();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", onClickOutside);
+
+  if (props.countryCode) {
+    const found = allCountries.value.find((country) => country.code === props.countryCode);
+    if (found) {
+      selectedCountry.value = found;
+      return;
+    }
+  }
+
+  const initialCountry = String(resolvedDefaultCountry.value).toUpperCase();
+  const foundDefault = allCountries.value.find((country) => country.code === initialCountry);
+  if (foundDefault) {
+    selectedCountry.value = foundDefault;
+    return;
+  }
+
+  if (resolvedUseBrowserLocale.value && typeof navigator !== "undefined") {
+    const region = (navigator.language || navigator.languages?.[0] || "")
+      .split("-")[1]
+      ?.toUpperCase();
+    if (region) {
+      const found = allCountries.value.find((country) => country.code === region);
+      if (found) {
+        selectedCountry.value = found;
+        return;
+      }
+    }
+  }
+
+  if (resolvedPreferredCountries.value.length) {
+    const found = allCountries.value.find(
+      (country) => country.code === resolvedPreferredCountries.value[0],
+    );
+    if (found) {
+      selectedCountry.value = found;
+      return;
+    }
+  }
+
+  selectedCountry.value =
+    allCountries.value.find((country) => country.code === "SN") ||
+    allCountries.value[0] ||
+    null;
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", onClickOutside);
+});
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value || value === displayValue.value) return;
+    if (value.startsWith("+")) {
+      const parsed = parsePhoneNumberFromString(value);
+      if (parsed?.country) {
+        const found = allCountries.value.find((country) => country.code === parsed.country);
+        if (found) selectedCountry.value = found;
+      }
+      displayValue.value =
+        resolvedFormat.value === "national"
+          ? (parsed?.formatNational() ?? value)
+          : resolvedFormat.value === "international"
+            ? (parsed?.formatInternational() ?? value)
+            : value;
+      return;
+    }
+    displayValue.value = value;
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.npi-root{position:relative;width:100%;--npi-border:#d1d5db;--npi-border-hover:#9ca3af;--npi-border-active:#0f172a;--npi-border-error:#ef4444;--npi-ring:rgba(148,163,184,.2);--npi-ring-error:rgba(239,68,68,.2);--npi-bg:#fff;--npi-bg-soft:#f8fafc;--npi-bg-hover:#f1f5f9;--npi-bg-selected:#e2e8f0;--npi-text:#0f172a;--npi-muted:#64748b;--npi-placeholder:#94a3b8;--npi-success:#16a34a;--npi-error:#dc2626;font-family:Inter,ui-sans-serif,system-ui,sans-serif}.npi-control{background:var(--npi-bg);border:1px solid var(--npi-border);display:flex;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;width:100%}.npi-control-idle:hover{border-color:var(--npi-border-hover)}.npi-control-active{border-color:var(--npi-border-active);box-shadow:0 0 0 4px var(--npi-ring)}.npi-control-error{border-color:var(--npi-border-error);box-shadow:0 0 0 4px var(--npi-ring-error)}.npi-control-disabled{background:var(--npi-bg-soft);opacity:.55}.npi-variant-outline{background:var(--npi-bg)}.npi-variant-soft{background:var(--npi-bg-soft)}.npi-variant-ghost{background:transparent}.npi-rounded-sm{border-radius:.375rem}.npi-rounded-md{border-radius:.5rem}.npi-rounded-lg{border-radius:.75rem}.npi-rounded-xl{border-radius:1rem}.npi-rounded-full{border-radius:9999px}.npi-size-sm .npi-country-button,.npi-size-sm .npi-input{font-size:.875rem;padding:.55rem .75rem}.npi-size-md .npi-country-button,.npi-size-md .npi-input{font-size:.95rem;padding:.75rem .9rem}.npi-size-lg .npi-country-button,.npi-size-lg .npi-input{font-size:1rem;padding:.95rem 1rem}.npi-country-button{align-items:center;background:transparent;border:0;border-right:1px solid var(--npi-border);cursor:pointer;display:flex;flex-shrink:0;gap:.45rem}.npi-country-button:hover{background:var(--npi-bg-hover)}.npi-country-button-disabled{cursor:not-allowed}.npi-flag{font-size:1.1rem;line-height:1}.npi-chevron,.npi-dial-code,.npi-item-dial,.npi-search-icon{color:var(--npi-muted)}.npi-chevron{transition:transform .2s ease}.npi-chevron-open{transform:rotate(180deg)}.npi-input-wrap{align-items:center;display:flex;flex:1 1 0%;position:relative}.npi-input,.npi-search-input{background:transparent;border:0;color:var(--npi-text);outline:none;width:100%}.npi-input::-moz-placeholder,.npi-search-input::-moz-placeholder{color:var(--npi-placeholder)}.npi-input::placeholder,.npi-search-input::placeholder{color:var(--npi-placeholder)}.npi-check{color:var(--npi-success);padding-right:.9rem}.npi-error{color:var(--npi-error);font-size:.875rem;margin-top:.5rem}.npi-dropdown{background:var(--npi-bg);border:1px solid var(--npi-border);border-radius:1rem;box-shadow:0 18px 40px rgba(15,23,42,.12);left:0;overflow:hidden;position:absolute;top:calc(100% + .4rem);width:18rem;z-index:50}.npi-search-wrap{border-bottom:1px solid #e5e7eb;padding:.625rem}.npi-search-box{align-items:center;background:var(--npi-bg-soft);border:1px solid var(--npi-border);border-radius:.75rem;display:flex;gap:.5rem;padding:.5rem .75rem}.npi-list{max-height:15rem;overflow-y:auto;padding:.375rem}.npi-item{align-items:center;border-radius:.75rem;cursor:pointer;display:flex;font-size:.875rem;gap:.625rem;padding:.625rem}.npi-item-idle{color:var(--npi-text)}.npi-item-idle:hover{background:var(--npi-bg-hover)}.npi-item-selected{background:var(--npi-bg-selected);color:var(--npi-text);font-weight:600}.npi-item-flag{flex-shrink:0;font-size:1.125rem}.npi-item-name{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.npi-divider{background:#e5e7eb;height:1px;margin:.25rem .5rem}.npi-empty{color:var(--npi-muted);font-size:.875rem;padding:1rem;text-align:center}.npi-transition-enter-active{transition:all .15s ease-out}.npi-transition-enter-from{opacity:0;transform:translateY(-.25rem) scale(.96)}.npi-transition-enter-to{opacity:1;transform:translateY(0) scale(1)}.npi-transition-leave-active{transition:all .1s ease-in}.npi-transition-leave-from{opacity:1}.npi-transition-leave-to{opacity:0;transform:translateY(-.25rem) scale(.96)}
+</style>

package/dist/runtime/composables/usePhone.d.ts

@@ -0,0 +1,2 @@
+import type { PhoneHelpers } from "../types/index.js";
+export declare function usePhone(): PhoneHelpers;

package/dist/runtime/composables/usePhone.js

@@ -0,0 +1,5 @@
+import { useNuxtApp } from "#imports";
+export function usePhone() {
+  const nuxtApp = useNuxtApp();
+  return nuxtApp.$phone;
+}

package/dist/runtime/plugins/phone.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/phone.js

@@ -0,0 +1,76 @@
+import { parsePhoneNumberFromString } from "libphonenumber-js/max";
+import { defineNuxtPlugin, useRuntimeConfig } from "#imports";
+function normalizeCountryCode(code) {
+  if (!code) return void 0;
+  return String(code).toUpperCase();
+}
+function parsePhone(phone, countryCode) {
+  const normalizedCountry = normalizeCountryCode(countryCode);
+  try {
+    const parsed = parsePhoneNumberFromString(phone, normalizedCountry);
+    if (!parsed) {
+      return {
+        e164: null,
+        countryCode: normalizedCountry ?? null,
+        formatted: phone,
+        isValid: false
+      };
+    }
+    return {
+      e164: parsed.number ?? null,
+      countryCode: parsed.country ?? normalizedCountry ?? null,
+      formatted: parsed.formatInternational(),
+      isValid: parsed.isValid()
+    };
+  } catch {
+    return {
+      e164: null,
+      countryCode: normalizedCountry ?? null,
+      formatted: phone,
+      isValid: false
+    };
+  }
+}
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+  const defaults = {
+    defaultCountry: config.public.phoneInput?.defaultCountry ?? "SN",
+    preferredCountries: config.public.phoneInput?.preferredCountries ?? ["SN", "FR"],
+    onlyCountries: config.public.phoneInput?.onlyCountries ?? [],
+    ignoredCountries: config.public.phoneInput?.ignoredCountries ?? [],
+    useBrowserLocale: config.public.phoneInput?.useBrowserLocale ?? true,
+    format: config.public.phoneInput?.format ?? "international",
+    ui: {
+      variant: config.public.phoneInput?.ui?.variant ?? "outline",
+      size: config.public.phoneInput?.ui?.size ?? "md",
+      rounded: config.public.phoneInput?.ui?.rounded ?? "lg"
+    }
+  };
+  const phoneHelpers = {
+    formatPhone(phone, countryCode, format = defaults.format) {
+      const parsed = parsePhone(phone, countryCode);
+      if (!parsed.e164) return phone;
+      if (format === "e164") return parsed.e164;
+      try {
+        const phoneNumber = parsePhoneNumberFromString(
+          parsed.e164,
+          normalizeCountryCode(countryCode)
+        );
+        if (!phoneNumber) return parsed.formatted;
+        return format === "national" ? phoneNumber.formatNational() : phoneNumber.formatInternational();
+      } catch {
+        return parsed.formatted;
+      }
+    },
+    validatePhone(phone, countryCode) {
+      return parsePhone(phone, countryCode).isValid;
+    },
+    parsePhone,
+    defaults
+  };
+  return {
+    provide: {
+      phone: phoneHelpers
+    }
+  };
+});

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,28 @@
+import type { CountryCode } from "libphonenumber-js";
+export type PhoneFormat = "national" | "international" | "e164";
+export interface PhoneInputUiOptions {
+    variant?: "outline" | "soft" | "ghost";
+    size?: "sm" | "md" | "lg";
+    rounded?: "sm" | "md" | "lg" | "xl" | "full";
+}
+export interface ModuleOptions {
+    defaultCountry?: CountryCode | string;
+    preferredCountries?: string[];
+    onlyCountries?: string[];
+    ignoredCountries?: string[];
+    useBrowserLocale?: boolean;
+    format?: PhoneFormat;
+    ui?: PhoneInputUiOptions;
+}
+export interface PhoneInputData {
+    e164: string | null;
+    countryCode: CountryCode | null;
+    formatted: string;
+    isValid: boolean;
+}
+export interface PhoneHelpers {
+    formatPhone: (phone: string, countryCode?: CountryCode | string, format?: PhoneFormat) => string;
+    validatePhone: (phone: string, countryCode?: CountryCode | string) => boolean;
+    parsePhone: (phone: string, countryCode?: CountryCode | string) => PhoneInputData;
+    defaults: Required<ModuleOptions>;
+}

package/dist/runtime/types/nuxt.d.ts

@@ -0,0 +1,15 @@
+import type { PhoneHelpers } from "./index";
+
+declare module "#app" {
+  interface NuxtApp {
+    $phone: PhoneHelpers;
+  }
+}
+
+declare module "vue" {
+  interface ComponentCustomProperties {
+    $phone: PhoneHelpers;
+  }
+}
+
+export {};

package/dist/types.d.mts

@@ -0,0 +1 @@
+export { type ModuleOptions, type PhoneFormat, type PhoneInputData, type PhoneInputUiOptions } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1 @@
+export { type ModuleOptions, type PhoneFormat, type PhoneInputData, type PhoneInputUiOptions } from './module'

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "nuxt-phone-number",
+  "version": "0.1.0",
+  "description": "Nuxt-first phone input module with UPhoneInput, usePhone and global phoneInput config",
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "phone-input",
+    "telephone",
+    "libphonenumber",
+    "nuxt-ui"
+  ],
+  "author": "Adama Sambe",
+  "homepage": "https://thecodemaker12.github.io/nuxt-phone-input",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thecodemaker12/nuxt-phone-input.git"
+  },
+  "bugs": {
+    "url": "https://github.com/thecodemaker12/nuxt-phone-input/issues"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "preinstall": "npx only-allow npm",
+    "build": "npx nuxt-module-build build",
+    "dev": "npx nuxt-module-build build --stub && npx nuxt-module-build prepare",
+    "dev:prepare": "npx nuxt-module-build build --stub && npx nuxt-module-build prepare",
+    "typecheck": "npx vue-tsc --noEmit -p tsconfig.json",
+    "release": "npm run build && npm publish --access public"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.0.0 || ^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/ui": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "libphonenumber-js": "^1.12.41"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.13.0",
+    "@types/node": "^22.15.3",
+    "nuxt": "^3.13.0",
+    "typescript": "^5.5.0",
+    "vue-tsc": "^2.1.0"
+  }
+}