Phone (saisie de téléphone)

Le composant Vue Phone du paquet @framework/ui sert à saisir un numéro de téléphone avec son indicatif international. Il affiche un sélecteur de pays avec drapeau et renvoie une seule valeur au format "+indicatif-numéro".

Le type de champ Phone des formulaires FormLayout utilise ce composant.

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
• Étiquetage commun : les props label, description, error et required fonctionnent comme dans les autres champs de @framework/ui

Utilisation de base

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

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

<template>
  <Phone 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 de contact

Exemple fictif :

<script setup>
import { ref } from "vue";
import { Button, TextInput, call } from "frappe-ui";
import { Phone } from "@framework/ui";

const contactName = ref("Sophie Martin");
const contactPhone = ref("");

async function saveContact() {
    await call("frappe.client.insert", {
        doc: {
            doctype: "Contact",
            first_name: contactName.value,
            phone_nos: [{ phone: contactPhone.value, is_primary_phone: 1 }],
        },
    });
}
</script>

<template>
    <TextInput v-model="contactName" label="Nom" />
    <Phone v-model="contactPhone" label="Numéro de téléphone" description="Avec l'indicatif du pays" />
    <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 l'indicatif +33, sélectionne la France, et reconstruit la valeur normalisée. Un champ vide donne "". Un numéro sans indicatif reconnu est gardé tel quel.

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 l'importe lui-même.