PhoneInput

Le composant PhoneInput permet aux utilisateurs de saisir un numéro de téléphone accompagné de son indicatif international. Il intègre un sélecteur de pays avec drapeau, détecte automatiquement le pays à partir du fuseau horaire de l'utilisateur, et retourne une valeur unique au format normalisé "+indicatif-numéro".

Fonctionnalités

• Sélecteur de pays avec drapeau : liste déroulante consultable par nom de pays ou indicatif téléphonique (ex. +33, France)
• Détection automatique du pays : à l'initialisation, le pays est présélectionné en fonction du fuseau horaire de l'utilisateur
• Reconnaissance à la saisie : si l'utilisateur colle ou remplit automatiquement un numéro comme +33612345678, le composant identifie l'indicatif et affiche le drapeau correspondant
• Valeur liée unique : la valeur v-model est une chaîne de caractères au format "+33-612345678" — indicatif et numéro séparés par un tiret
• Contrat d'étiquetage commun : les props label, description, error et required fonctionnent de manière identique au composant TextInput

Utilisation de base

<script setup>
import { PhoneInput } from '@framework/ui'
import { ref } from 'vue'

const phone = ref('')
</script>

<template>
  <PhoneInput v-model="phone" label="Téléphone du contact" />
</template>

La valeur liée dans phone sera automatiquement mise à jour sous la forme "+33-612345678" dès que l'utilisateur a sélectionné un pays et saisi un numéro.

Exemple — Formulaire client

Dans un formulaire de création de contact pour le client « Maison Verte SARL » :

<script setup>
import { PhoneInput, TextInput, Button } from '@framework/ui'
import { ref } from 'vue'

const contactPhone = ref('')
const contactName = ref('Sophie Martin')

async function saveContact() {
  await frappe.call({
    method: 'frappe.client.insert',
    args: {
      doc: {
        doctype: 'Contact',
        first_name: contactName.value,
        phone: contactPhone.value, // ex. "+33-612345678"
      }
    }
  })
}
</script>

<template>
  <TextInput v-model="contactName" label="Nom" />
  <PhoneInput
    v-model="contactPhone"
    label="Numéro de téléphone"
    description="Inclure l'indicatif international"
  />
  <Button @click="saveContact">Enregistrer</Button>
</template>

API

Props

Slots

Format de la valeur

Le composant produit et consomme une valeur au format :

"+<indicatif>-<numéro local>"

Exemples :

Si l'utilisateur colle directement +33612345678 (sans tiret), le composant détecte automatiquement l'indicatif +33, sélectionne la France, et reconstruit la valeur normalisée.

Flux de fonctionnement

      
flowchart TD
    A[Utilisateur ouvre le champ] --> B[Détection du fuseau horaire]
    B --> C[Présélection du pays correspondant]
    C --> D{L'utilisateur saisit ou colle un numéro}
    D -->|Numéro avec indicatif ex. +33...| E[Extraction de l'indicatif]
    D -->|Numéro local sans indicatif| F[Conservation du pays sélectionné]
    E --> G[Mise à jour du drapeau et du pays]
    F --> G
    G --> H[Émission de la valeur normalisée +indicatif-numéro]

    

Gestion des indicatifs partagés

Certains pays partagent le même indicatif téléphonique (ex. +1 pour les États-Unis et le Canada, +599 pour Bonaire et Curaçao). Dans ce cas, le composant applique la logique suivante :

1. Il recherche d'abord l'indicatif le plus long correspondant au numéro saisi (ex. +1242 pour les Bahamas plutôt que +1)
2. Si plusieurs pays ont le même indicatif, il utilise le fuseau horaire de l'utilisateur pour choisir le pays le plus probable
3. L'utilisateur peut toujours sélectionner manuellement un autre pays dans la liste déroulante

Accessibilité et navigation clavier

• La liste déroulante de pays est navigable au clavier (flèches, Entrée, Échap)
• La recherche dans la liste peut s'effectuer en tapant le nom du pays ou l'indicatif
• Le champ respecte l'attribut disabled sur les deux éléments (sélecteur et champ numéro)

Intégration avec les données géographiques

Les données de pays, indicatifs et fuseaux horaires sont centralisées dans frappe/geo/country_info.json. Ce fichier inclut également les alias pour les fuseaux horaires dépréciés afin d'assurer la compatibilité avec les navigateurs et systèmes d'exploitation plus anciens.

Il n'est pas nécessaire d'importer ou de configurer ce fichier manuellement : le composant PhoneInput l'utilise automatiquement via le framework.