[#MUI-30] Création d'un composant email (#44)
| 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: #44 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #44.
This commit is contained in:
261
app/story/input/inputEmail.story.vue
Normal file
261
app/story/input/inputEmail.story.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<Story title="Input/Email">
|
||||
<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>
|
||||
<MalioInputEmail
|
||||
v-model="simpleValue"
|
||||
label="Adresse email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
|
||||
<MalioInputEmail
|
||||
v-model="leftIconValue"
|
||||
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
|
||||
v-model="noIconValue"
|
||||
label="Adresse email"
|
||||
:icon-name="''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputEmail
|
||||
v-model="hintValue"
|
||||
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">Désactivé</h2>
|
||||
<MalioInputEmail
|
||||
v-model="disabledValue"
|
||||
label="Adresse email"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputEmail
|
||||
v-model="readonlyValue"
|
||||
label="Adresse email"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputEmail
|
||||
v-model="errorValue"
|
||||
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
|
||||
v-model="successValue"
|
||||
label="Adresse email"
|
||||
success="Adresse email valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputEmail
|
||||
|
||||
Champ email avec label flottant, icône email par défaut, états visuels
|
||||
(erreur / succès) et accessibilité. Basé sur InputText mais ciblé sur la
|
||||
saisie d'une adresse email (`type="email"` + `inputmode="email"`).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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-email-`).
|
||||
|
||||
### label
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant.
|
||||
- Comportement: Si absent, aucun label n'est rendu.
|
||||
|
||||
### 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 `email` pour permettre au navigateur de suggérer l'adresse
|
||||
de l'utilisateur (formulaires de connexion / inscription).
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: string | null | undefined
|
||||
- Description: Valeur contrôlée du composant.
|
||||
- Comportement:
|
||||
- Si défini → composant contrôlé (v-model).
|
||||
- Sinon → gestion interne de l'état.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### inputClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées à l'input.
|
||||
|
||||
### labelClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label.
|
||||
|
||||
### groupClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au conteneur.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & Contraintes
|
||||
|
||||
### required
|
||||
|
||||
- Type: boolean
|
||||
- Description: Ajoute l'attribut HTML required.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le champ.
|
||||
|
||||
### readonly
|
||||
|
||||
- Type: boolean
|
||||
- Description: Rend le champ non modifiable mais focusable.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États & Messages
|
||||
|
||||
### hint
|
||||
|
||||
- Type: string
|
||||
- Description: Message d'aide affiché sous le champ.
|
||||
|
||||
### error
|
||||
|
||||
- Type: string
|
||||
- Description: Message d'erreur.
|
||||
- Effet:
|
||||
- Active l'état visuel erreur.
|
||||
- aria-invalid=true
|
||||
- Prioritaire sur success et hint.
|
||||
|
||||
### success
|
||||
|
||||
- Type: string
|
||||
- Description: Message de succès.
|
||||
- Effet:
|
||||
- Actif uniquement si error est absent.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Icône
|
||||
|
||||
### iconName
|
||||
|
||||
- Type: string
|
||||
- Défaut: `mdi:email-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: `right`
|
||||
|
||||
### iconSize
|
||||
|
||||
- Type: string | number
|
||||
- Défaut: `24`
|
||||
|
||||
### iconColor
|
||||
|
||||
- Type: string
|
||||
- Défaut: `text-m-muted`
|
||||
- Description: Classe Tailwind de couleur. Surchargée automatiquement
|
||||
par les états erreur / succès.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement
|
||||
|
||||
- Aucune validation interne — le composant ne vérifie pas le format
|
||||
de l'email. Utiliser la validation HTML native (`type="email"`) ou
|
||||
piloter `error` / `success` depuis le parent.
|
||||
- `inputmode="email"` est appliqué pour adapter le clavier mobile.
|
||||
|
||||
## Priorité visuelle
|
||||
|
||||
1. error
|
||||
2. success
|
||||
3. neutre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- aria-invalid est activé si error existe.
|
||||
- aria-describedby référence dynamiquement le message affiché.
|
||||
- Fonctionne avec ou sans v-model.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque modification de l'input.
|
||||
- Permet l'utilisation avec v-model.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputEmail from '../../components/malio/input/InputEmail.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const leftIconValue = ref('')
|
||||
const noIconValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('contact@malio.fr')
|
||||
const readonlyValue = ref('readonly@malio.fr')
|
||||
const errorValue = ref('pas-un-email')
|
||||
const successValue = ref('contact@malio.fr')
|
||||
</script>
|
||||
Reference in New Issue
Block a user