feat: composant saisie assistée, composant téléphone et composant mail (#47)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #47
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.playground/pages/composant/form/client.vue

@@ -1,8 +1,16 @@
 <template>
-  <div>
-  <div class="flex justify-center mt-8">
-    <div>
-      <div class="w-[1348px] grid grid-cols-3 gap-x-[160px] gap-y-8">
+  <div class="flex justify-center">
+    <div class="w-[1348px]">
+      <div class="flex gap-3 mt-[46px]">
+        <MalioButtonIcon
+          icon="mdi:arrow-left-bold"
+          icon-size="24"
+          aria-label="Précédent"
+          variant="ghost"
+        />
+        <h1 class="text-[32px] text-m-primary font-bold">Ajouter un client</h1>
+      </div>
+      <div class="mt-[48px] grid grid-cols-3 gap-x-[80px] gap-y-8">
         <MalioInputText
           label="Nom du client (Entreprise)"
         />
@@ -13,20 +21,27 @@
           label="Prénom du contact principal"
         />
         <MalioSelectCheckbox
-          label="Catégorie"
           v-model="multiselectValue"
+          label="Catégorie"
           :options="[
             {label: 'Catégorie 1', value: 'Catégorie 1'},
             {label: 'Catégorie 2', value: 'Catégorie 2'}
           ]"
         />
-        <MalioInputText
+        <MalioInputPhone
+          v-for="(_, index) in phones"
+          :key="index"
+          v-model="phones[index]"
           label="Téléphone"
+          add-icon-name="mdi:plus"
+          :addable="phones.length === 1"
+          @add="addPhoneInput"
         />
-        <MalioInputText
+        <MalioInputEmail
           label="Email"
         />
         <MalioSelect
+          v-model="distributeur"
           value=""
           label="Distributeur / Courtier"
           :options="[
@@ -36,6 +51,7 @@
           ]"
         />
         <MalioSelect
+          v-model="nomCourtier"
           value=""
           label="Nom du courtier"
           :options="[
@@ -43,83 +59,259 @@
           ]"
         />
         <MalioSelect
+          v-model="nomDistributeur"
           value=""
-          label="Distributeur / Courtier"
+          label="Nom du distributeur"
           :options="[
             {label: 'Nom 1', value: 'Nom 1'}
           ]"
         />
-        <MalioCheckbox label="Prestation de triage"/>
+        <MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
       </div>
-      <div class="mt-16 flex justify-center">
+
+      <div class="mt-12 flex justify-center">
         <MalioButton label="Valider" variant="primary"/>
       </div>
-    </div>
-  </div>
-  <div class="flex justify-center mt-16">
-    <div>
-      <div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
-        <MalioInputText
-          label="Nom du client (Entreprise)"
-        />
-        <MalioInputText
-          label="Nom du contact principal"
-        />
-        <MalioInputText
-          label="Prénom du contact principal"
-        />
-        <MalioSelectCheckbox
-          label="Catégorie"
-          v-model="multiselectValue"
-          :options="[
-            {label: 'Catégorie 1', value: 'Catégorie 1'},
-            {label: 'Catégorie 2', value: 'Catégorie 2'}
-          ]"
-        />
-        <MalioInputText
-          label="Téléphone"
-        />
-        <MalioInputText
-          label="Email"
-        />
-        <MalioSelect
-          value=""
-          label="Distributeur / Courtier"
-          :options="[
-            {label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
-            {label: 'Distributeur', value: 'Distributeur'},
-            {label: 'Courtier', value: 'Courtier'},
-          ]"
-        />
-        <MalioSelect
-          value=""
-          label="Nom du courtier"
-          :options="[
-            {label: 'Nom 1', value: 'Nom 1'}
-          ]"
-        />
-        <MalioSelect
-          value=""
-          label="Distributeur / Courtier"
-          :options="[
-            {label: 'Nom 1', value: 'Nom 1'}
-          ]"
-        />
-        <MalioCheckbox label="Prestation de triage"/>
-      </div>
-      <div class="mt-16 flex justify-center">
-        <MalioButton label="Valider" variant="primary"/>
+      <div class="mt-[60px]">
+        <MalioTabList :tabs="tabs" v-model="tabsValue">
+          <template #information>
+            <div class="grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
+              <MalioInputTextArea label="Descritpion" resize="none" groupClass="row-span-2" textInput="h-full"/>
+              <MalioInputText v-model="concurrent" label="Concurrent"/>
+              <MalioInputText label="Date création"/>
+              <MalioInputText label="Nombre de salariés" />
+              <MalioInputAmount label="CA"/>
+              <MalioInputText label="Dirigeant" />
+              <MalioInputText label="Résultat" />
+            </div>
+            <div class="mt-12 flex justify-center">
+              <MalioButton label="Valider" variant="primary"/>
+            </div>
+          </template>
+          <template #adresses>
+            <div class="relative grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
+              <MalioButtonIcon
+                icon="mdi:delete-outline"
+                aria-label="Supprimer l'adresse"
+                variant="ghost"
+                button-class="absolute top-3 right-3"
+                @click="onDeleteAdresse"
+              />
+              <MalioCheckbox label="Prospect" groupClass="self-center"/>
+              <MalioCheckbox label="Adresse de livraison" groupClass="self-center"/>
+              <MalioCheckbox label="Facturation" groupClass="self-center"/>
+              <MalioSelectCheckbox
+                v-model="multiselectValue"
+                label="Catégorie"
+                :options="[
+              {label: 'Catégorie 1', value: 'Catégorie 1'},
+              {label: 'Catégorie 2', value: 'Catégorie 2'}
+            ]"
+              />
+              <MalioSelect
+                label="Pays"
+                v-model="pays"
+                :options="[
+                    {label: 'France', value: 'France'},
+                    {label: 'Espagne', value: 'Espagne'}
+            ]"/>
+              <MalioInputText v-model="codePostal" label="Code postal" />
+              <MalioSelect
+                v-model="ville"
+                label="Ville"
+                :options="villeOptions"
+                :no-options-text="villeNoOptionsText"
+              />
+              <MalioInputAutocomplete
+                v-model="adresse"
+                label="Adresse"
+                :options="adresseOptions"
+                :loading="adresseLoading"
+                :min-search-length="2"
+                :no-results-text="adresseNoResultsText"
+                :min-search-text="adresseMinSearchText"
+                @search="onSearchAdresse"
+              />
+              <MalioInputText label="Adresse complémentaire"/>
+              <div class="flex justify-between">
+                <MalioCheckbox
+                  v-for="dep in departements"
+                  :key="dep"
+                  v-model="departementsSelected[dep]"
+                  :label="dep"
+                  group-class="w-auto self-center"
+                />
+              </div>
+              <MalioSelect label="Contact" :options="[]"/>
+              <MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
+            </div>
+            <div class="mt-12 flex justify-center gap-6">
+              <MalioButton label="Nouvelle Adresse" variant="secondary" icon-name="mdi:add-bold" icon-position="left"/>
+              <MalioButton label="Valider" variant="primary"/>
+            </div>
+          </template>
+        </MalioTabList>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-import {ref} from "vue";
-import MalioSelect from "../../../../app/components/malio/select/Select.vue";
-import MalioCheckbox from "../../../../app/components/malio/checkbox/Checkbox.vue";
-import MalioButton from "../../../../app/components/malio/button/Button.vue";
+import {ref, computed, watch} from 'vue'
+
+type Commune = {
+  nom: string
+  code: string
+  codesPostaux: string[]
+}
+
+type BanFeature = {
+  properties: {
+    label: string
+    id: string
+    name: string
+    housenumber?: string
+    street?: string
+    postcode: string
+    citycode: string
+    city: string
+  }
+}
 
 const multiselectValue = ref<Array<string | number>>([])
+const distributeur = ref<string>('')
+const phones = ref<string[]>([''])
+const nomDistributeur = ref<string>('')
+const nomCourtier = ref<string>('')
+
+function addPhoneInput() {
+  phones.value.push('')
+}
+
+function onDeleteAdresse() {
+  console.log('Supprimer cette adresse')
+}
+
+const departements = ['86', '17', '82']
+const departementsSelected = ref<Record<string, boolean>>({86: false, 17: false, 82: false})
+
+const pays = ref<string>('France')
+const codePostal = ref<string>('')
+const ville = ref<string | number | null>(null)
+const villeOptions = ref<Array<{label: string; value: string}>>([])
+const villeLoading = ref(false)
+
+const villeNoOptionsText = computed(() => {
+  if (villeLoading.value) return 'Chargement…'
+  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir un code postal (5 chiffres)'
+  return 'Aucune ville pour ce code postal'
+})
+
+let villeFetchId = 0
+watch(codePostal, async (cp) => {
+  ville.value = null
+  villeOptions.value = []
+  adresse.value = null
+  adresseOptions.value = []
+  if (!/^\d{5}$/.test(cp)) {
+    villeLoading.value = false
+    return
+  }
+  const requestId = ++villeFetchId
+  villeLoading.value = true
+  try {
+    const response = await fetch(`https://geo.api.gouv.fr/communes?codePostal=${cp}`)
+    const data = await response.json() as Commune[]
+    if (requestId !== villeFetchId) return
+    villeOptions.value = data.map(c => ({label: c.nom, value: c.code}))
+  } catch (err) {
+    if (requestId !== villeFetchId) return
+    villeOptions.value = []
+    console.error('Erreur lors du chargement des villes', err)
+  } finally {
+    if (requestId === villeFetchId) villeLoading.value = false
+  }
+})
+
+const adresse = ref<string | number | null>(null)
+const adresseOptions = ref<Array<{label: string; value: string}>>([])
+const adresseLoading = ref(false)
+
+const adresseMinSearchText = computed(() => {
+  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir d\'abord un code postal'
+  return 'Tapez au moins 3 caractères'
+})
+const adresseNoResultsText = computed(() => {
+  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir d\'abord un code postal'
+  return 'Aucune adresse trouvée'
+})
+
+let adresseFetchId = 0
+const onSearchAdresse = async (query: string) => {
+  if (!/^\d{5}$/.test(codePostal.value) || query.length < 3) {
+    adresseOptions.value = []
+    adresseLoading.value = false
+    return
+  }
+  const requestId = ++adresseFetchId
+  adresseLoading.value = true
+  try {
+    const params = new URLSearchParams({
+      q: query,
+      postcode: codePostal.value,
+      type: 'housenumber',
+    })
+    const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`)
+    const data = await response.json() as {features: BanFeature[]}
+    if (requestId !== adresseFetchId) return
+    adresseOptions.value = data.features.map(f => ({
+      label: f.properties.name,
+      value: f.properties.name,
+    }))
+  } catch (err) {
+    if (requestId !== adresseFetchId) return
+    adresseOptions.value = []
+    console.error('Erreur lors du chargement des adresses', err)
+  } finally {
+    if (requestId === adresseFetchId) adresseLoading.value = false
+  }
+}
+
+const tabsValue = ref('information')
+const concurrent = ref('')
+
+const informationValid = computed(() => concurrent.value.trim().length > 0)
+const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
+
+const tabs = computed(() => [
+  {
+    key: 'information',
+    label: 'Information',
+    icon: 'mdi:account-outline',
+  },
+  {
+    key: 'contacts',
+    label: 'Contacts',
+    icon: 'mdi:account-box-plus-outline',
+    disabled: !informationValid.value,
+  },
+  {
+    key: 'adresses',
+    label: 'Adresses',
+    icon: 'mdi:map-marker-outline',
+    disabled: !informationValid.value,
+  },
+  {
+    key: 'transport',
+    label: 'Transport',
+    icon: 'mdi:truck-delivery-outline',
+    disabled: !informationValid.value || !adressesValid.value,
+  },
+  {
+    key: 'comptabilité',
+    label: 'Comptabilité',
+    icon: 'mdi:bank-circle-outline',
+    disabled: !informationValid.value || !adressesValid.value,
+  },
+])
 </script>

.playground/pages/composant/input/inputAutocomplete.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple (statique)</h2>
+      <MalioInputAutocomplete
+        v-model="simpleValue"
+        label="Pays"
+        :options="staticOptions"
+      />
+      <p class="mt-2 text-sm text-m-muted">
+        Valeur sélectionnée : <code>{{ simpleValue ?? 'null' }}</code>
+      </p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
+      <MalioInputAutocomplete
+        v-model="leftIconValue"
+        label="Recherche"
+        icon-name="mdi:magnify"
+        icon-position="left"
+        :options="staticOptions"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-4 text-xl font-bold">Branché sur une API (simulé)</h2>
+      <p class="mb-3 text-sm text-m-muted">
+        Le parent écoute l'event <code>search</code> et alimente <code>options</code> + <code>loading</code>.
+        Tapez au moins 2 caractères.
+      </p>
+      <MalioInputAutocomplete
+        v-model="apiValue"
+        label="Client"
+        :options="apiOptions"
+        :loading="apiLoading"
+        :min-search-length="2"
+        icon-name="mdi:magnify"
+        icon-position="left"
+        @search="onSearchApi"
+        @select="onSelectApi"
+      />
+      <p v-if="apiSelected" class="mt-2 text-sm text-m-muted">
+        Sélection : <code>{{ apiSelected.label }} (id={{ apiSelected.value }})</code>
+      </p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec création (allowCreate)</h2>
+      <MalioInputAutocomplete
+        v-model="createValue"
+        label="Catégorie"
+        :options="staticOptions"
+        allow-create
+        hint="Taper Entrée pour créer une nouvelle valeur"
+        @create="onCreate"
+      />
+      <p v-if="createdItems.length > 0" class="mt-2 text-sm text-m-muted">
+        Créés : {{ createdItems.join(', ') }}
+      </p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputAutocomplete
+        model-value="fr"
+        label="Pays"
+        :options="staticOptions"
+        disabled
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputAutocomplete
+        model-value="fr"
+        label="Pays"
+        :options="staticOptions"
+        readonly
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+      <MalioInputAutocomplete
+        v-model="hintValue"
+        label="Pays"
+        :options="staticOptions"
+        hint="Sélectionne un pays dans la liste"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioInputAutocomplete
+        model-value="fr"
+        label="Pays"
+        :options="staticOptions"
+        error="Sélection invalide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioInputAutocomplete
+        model-value="fr"
+        label="Pays"
+        :options="staticOptions"
+        success="Sélection valide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Liste vide</h2>
+      <MalioInputAutocomplete
+        v-model="emptyValue"
+        label="Recherche"
+        :options="[]"
+        no-results-text="Aucun élément disponible"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+type Option = {label: string; value: string | number}
+
+const staticOptions: Option[] = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Luxembourg', value: 'lu'},
+  {label: 'Allemagne', value: 'de'},
+  {label: 'Espagne', value: 'es'},
+  {label: 'Italie', value: 'it'},
+]
+
+const simpleValue = ref<string | number | null>(null)
+const leftIconValue = ref<string | number | null>(null)
+const createValue = ref<string | number | null>(null)
+const hintValue = ref<string | number | null>(null)
+const emptyValue = ref<string | number | null>(null)
+
+const createdItems = ref<string[]>([])
+const onCreate = (value: string) => {
+  createdItems.value.push(value)
+}
+
+const apiValue = ref<string | number | null>(null)
+const apiOptions = ref<Option[]>([])
+const apiLoading = ref(false)
+const apiSelected = ref<Option | null>(null)
+
+const fakeClients: Option[] = [
+  {label: 'Yuno Malio', value: 1},
+  {label: 'Yuna Corp', value: 2},
+  {label: 'Yum Foods', value: 3},
+  {label: 'Yumi Studio', value: 4},
+  {label: 'Acme Inc.', value: 5},
+  {label: 'Globex Corp', value: 6},
+  {label: 'Initech', value: 7},
+  {label: 'Soylent Corp', value: 8},
+]
+
+const onSearchApi = async (query: string) => {
+  apiLoading.value = true
+  await new Promise(resolve => setTimeout(resolve, 400))
+  apiOptions.value = fakeClients.filter(c =>
+    c.label.toLowerCase().includes(query.toLowerCase()),
+  )
+  apiLoading.value = false
+}
+
+const onSelectApi = (option: Option | null) => {
+  apiSelected.value = option
+}
+</script>

.playground/pages/composant/input/inputEmail.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioInputEmail />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioInputEmail
+        v-model="emailValue"
+        label="Adresse email"
+        name="email"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
+      <MalioInputEmail
+        label="Adresse email"
+        icon-position="left"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
+      <MalioInputEmail
+        label="Adresse email"
+        :icon-name="''"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputEmail
+        model-value="contact@malio.fr"
+        disabled
+        label="Adresse email"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputEmail
+        model-value="readonly@malio.fr"
+        readonly
+        label="Adresse email"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+      <MalioInputEmail
+        label="Adresse email"
+        hint="ex: prenom.nom@malio.fr"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioInputEmail
+        model-value="pas-un-email"
+        label="Adresse email"
+        error="Adresse email invalide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioInputEmail
+        model-value="contact@malio.fr"
+        label="Adresse email"
+        success="Adresse email valide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
+      <MalioInputEmail
+        v-model="dynamicEmail"
+        label="Adresse email"
+        hint="Saisir une adresse au format prenom@domaine.tld"
+        :error="dynamicError"
+        :success="dynamicSuccess"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const emailValue = ref('')
+const dynamicEmail = ref('')
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const isDynamicValid = computed(() => emailRegex.test(dynamicEmail.value))
+const dynamicError = computed(() => {
+  if (!dynamicEmail.value) return ''
+  return isDynamicValid.value ? '' : 'Adresse email invalide'
+})
+const dynamicSuccess = computed(() => {
+  if (!dynamicEmail.value) return ''
+  return isDynamicValid.value ? 'Adresse email valide' : ''
+})
+</script>

.playground/pages/composant/input/inputPhone.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioInputPhone />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioInputPhone
+        v-model="phoneValue"
+        label="Téléphone"
+        name="phone"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
+      <MalioInputPhone
+        v-model="phoneAddable"
+        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 (sans bouton +)</h2>
+      <MalioInputPhone
+        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
+        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="phoneFrench"
+        label="Téléphone (FR)"
+        mask="+33 # ## ## ## ##"
+        hint="Saisir uniquement les chiffres"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé (avec addable)</h2>
+      <MalioInputPhone
+        model-value="+33 6 12 34 56 78"
+        addable
+        disabled
+        label="Téléphone"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (avec addable)</h2>
+      <MalioInputPhone
+        model-value="+33 6 12 34 56 78"
+        addable
+        readonly
+        label="Téléphone"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+      <MalioInputPhone
+        label="Téléphone"
+        hint="Format international recommandé"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioInputPhone
+        model-value="abc"
+        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
+        model-value="+33 6 12 34 56 78"
+        label="Téléphone"
+        success="Numéro valide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-4 text-xl font-bold">Cas ERP — liste de téléphones (max 2)</h2>
+      <p class="mb-3 text-sm text-m-muted">
+        Le bouton + s'affiche sur le dernier champ tant que la liste contient moins de {{ MAX_PHONES }} numéros.
+      </p>
+      <div class="flex flex-col gap-4">
+        <MalioInputPhone
+          v-for="(phone, index) in phones"
+          :key="index"
+          v-model="phones[index]"
+          :label="`Téléphone ${index + 1}`"
+          :addable="index === phones.length - 1 && phones.length < MAX_PHONES"
+          @add="addPhone"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const phoneValue = ref('')
+const phoneAddable = ref('')
+const phoneFrench = ref('')
+const addClicks = ref(0)
+
+const onAdd = () => {
+  addClicks.value++
+}
+
+const MAX_PHONES = 2
+const phones = ref<string[]>([''])
+
+const addPhone = () => {
+  if (phones.value.length < MAX_PHONES) {
+    phones.value.push('')
+  }
+}
+</script>