[#MUI-31] Création d'un composant téléphone (#45)
| 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é Reviewed-on: #45 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #45.
This commit is contained in:
285
app/story/input/inputPhone.story.vue
Normal file
285
app/story/input/inputPhone.story.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user