malio-layer-ui/app/story/input/inputPhone.story.vue

<template>
  <Story title="Input/Phone">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioInputPhone
          v-model="simpleValue"
          label="Téléphone"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
        <MalioInputPhone
          v-model="addableValue"
          label="Téléphone"
          addable
          @add="onAdd"
        />
        <p v-if="addClicks > 0" class="mt-2 text-sm text-m-muted">
          Bouton cliqué {{ addClicks }} fois
        </p>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Icône à droite</h2>
        <MalioInputPhone
          v-model="rightIconValue"
          label="Téléphone"
          icon-position="right"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
        <MalioInputPhone
          v-model="noIconValue"
          label="Téléphone"
          :icon-name="''"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec masque français</h2>
        <MalioInputPhone
          v-model="maskedValue"
          label="Téléphone (FR)"
          mask="+33 # ## ## ## ##"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
        <MalioInputPhone
          v-model="hintValue"
          label="Téléphone"
          hint="Format international recommandé"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé (avec addable)</h2>
        <MalioInputPhone
          v-model="disabledValue"
          label="Téléphone"
          addable
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
        <MalioInputPhone
          v-model="readonlyValue"
          label="Téléphone"
          addable
          readonly
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioInputPhone
          v-model="errorValue"
          label="Téléphone"
          error="Numéro de téléphone invalide"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioInputPhone
          v-model="successValue"
          label="Téléphone"
          success="Numéro valide"
        />
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# MalioInputPhone

Champ téléphone avec label flottant, icône phone par défaut (à gauche),
états visuels (erreur / succès), accessibilité et bouton « + » optionnel
pour gérer une liste de numéros côté parent (`type="tel"` +
`inputmode="tel"`).

------------------------------------------------------------------------

## Props détaillées

### id

-   Type: string
-   Description: Identifiant HTML de l'input.
-   Comportement: Si non fourni, un id unique est généré automatiquement
    (préfixe `malio-input-phone-`).

### label

-   Type: string
-   Description: Texte affiché comme label flottant.

### name

-   Type: string
-   Description: Attribut name de l'input (utile pour les formulaires).

### autocomplete

-   Type: string
-   Défaut: `off`
-   Description: Active ou configure l'autocomplétion navigateur. La
    valeur par défaut est `off` pour les formulaires de création d'ERP.
    Passer `tel` pour permettre au navigateur de suggérer un numéro
    enregistré.

### modelValue

-   Type: string | null | undefined
-   Description: Valeur contrôlée du composant.

------------------------------------------------------------------------

## Apparence & Style

### inputClass / labelClass / groupClass

-   Type: string
-   Description: Classes CSS appliquées respectivement à l'input, au
    label et au conteneur.

### mask

-   Type: string | MaskInputOptions
-   Description: Masque maska à appliquer. Aucun masque par défaut —
    les formats téléphoniques varient trop selon les pays. À activer
    pour un usage mono-pays.

------------------------------------------------------------------------

## Validation & Contraintes

### required / disabled / readonly

-   Type: boolean
-   Description: Attributs HTML standards.

------------------------------------------------------------------------

## États & Messages

### hint / error / success

-   Type: string
-   Description: Messages affichés sous le champ.
-   `error` est prioritaire sur `success` et active `aria-invalid`.

------------------------------------------------------------------------

## Icône

### iconName

-   Type: string
-   Défaut: `mdi:phone-outline`
-   Description: Nom Iconify de l'icône affichée. Passer une chaîne
    vide pour ne pas afficher d'icône.

### iconPosition

-   Type: `'left' | 'right'`
-   Défaut: `left` (laisse la droite libre pour le bouton +).

### iconSize / iconColor

-   Type: number / string
-   Défaut: `24` / `text-m-muted`

------------------------------------------------------------------------

## Bouton « ajouter »

### addable

-   Type: boolean
-   Défaut: `false`
-   Description: Affiche un bouton à droite du champ. Au clic, le
    composant émet l'event `add` — c'est au parent de gérer l'ajout
    d'un nouveau champ téléphone.

### addIconName

-   Type: string
-   Défaut: `mdi:plus`
-   Description: Nom Iconify de l'icône du bouton d'ajout.

### addButtonLabel

-   Type: string
-   Défaut: `Ajouter un numéro`
-   Description: Attribut `aria-label` du bouton (accessibilité).

------------------------------------------------------------------------

## Comportement

-   Aucune validation interne — le composant ne vérifie pas le format
    du numéro. Piloter `error` / `success` depuis le parent.
-   `inputmode="tel"` adapte le clavier mobile.
-   Le bouton `+` est désactivé quand `disabled` ou `readonly` est
    actif et n'émet pas l'event dans ce cas.

## Priorité visuelle

1.  error
2.  success
3.  neutre

------------------------------------------------------------------------

## Accessibilité

-   `aria-invalid` activé si `error` existe.
-   `aria-describedby` référence dynamiquement le message affiché.
-   Le bouton `+` expose un `aria-label` configurable.

------------------------------------------------------------------------

## Events

### update:modelValue

-   Émis à chaque modification de l'input. Permet l'utilisation avec
    v-model.

### add

-   Émis au clic du bouton `+` (uniquement si `addable` est vrai et
    que le champ n'est ni `disabled` ni `readonly`).

</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioInputPhone from '../../components/malio/input/InputPhone.vue'

const simpleValue = ref('')
const addableValue = ref('')
const rightIconValue = ref('')
const noIconValue = ref('')
const maskedValue = ref('')
const hintValue = ref('')
const disabledValue = ref('+33 6 12 34 56 78')
const readonlyValue = ref('+33 6 12 34 56 78')
const errorValue = ref('abc')
const successValue = ref('+33 6 12 34 56 78')

const addClicks = ref(0)
const onAdd = () => {
  addClicks.value++
}
</script>