kevin
1ab7b2427a
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | #337 | Création d'un composant Select | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [ ] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: tristan <tristan@yuno.malio.fr> Reviewed-on: #3 Reviewed-by: Autin <tristan@yuno.malio.fr> Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>
201 lines
4.0 KiB
Vue
201 lines
4.0 KiB
Vue
<template>
|
||
<Story
|
||
title="Input/Text"
|
||
>
|
||
<MalioInputText/>
|
||
</Story>
|
||
</template>
|
||
|
||
<docs lang="md">
|
||
# MalioInputText
|
||
|
||
Composant input texte avec masque optionnel (maska), label flottant,
|
||
états visuels (erreur / succès) et icône configurable.
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## 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.
|
||
|
||
### 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
|
||
- Description: Active ou configure l’autocomplétion navigateur.
|
||
- Défaut: vide
|
||
|
||
### 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.
|
||
|
||
### mask
|
||
|
||
- Type: string | undefined
|
||
- Description: Masque appliqué via la directive maska.
|
||
- Comportement: Formate la saisie selon les tokens définis.
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Apparence & Style
|
||
|
||
### textInput
|
||
|
||
- Type: string
|
||
- Description: Classes CSS appliquées à l’input (taille de texte,
|
||
etc.).
|
||
|
||
### textLabel
|
||
|
||
- Type: string
|
||
- Description: Classes CSS appliquées au label.
|
||
|
||
### rounded
|
||
|
||
- Type: string
|
||
- Description: Classe Tailwind pour le border-radius.
|
||
- Défaut: rounded-md
|
||
|
||
### minWidth / maxWidth
|
||
|
||
- Type: string
|
||
- Description: Classes utilitaires Tailwind pour contraindre la
|
||
largeur.
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Validation & Contraintes
|
||
|
||
### required
|
||
|
||
- Type: boolean
|
||
- Description: Ajoute l’attribut HTML required.
|
||
|
||
### maxLength
|
||
|
||
- Type: number | string
|
||
- Description: Longueur maximale autorisée.
|
||
|
||
### minLength
|
||
|
||
- Type: number | string
|
||
- Description: Longueur minimale autorisée.
|
||
|
||
### 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
|
||
- Description: Nom de l’icône (ex: mdi:magnify).
|
||
|
||
### iconSize
|
||
|
||
- Type: string | number
|
||
- Description: Taille de l’icône.
|
||
|
||
### iconColor
|
||
|
||
- Type: string
|
||
- Description: Couleur de l’icône.
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Comportement de validation
|
||
|
||
- Aucune validation interne.
|
||
- Les états sont pilotés uniquement par les props.
|
||
|
||
## Priorité visuelle
|
||
|
||
1. error
|
||
2. success
|
||
3. neutre
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Tokens de masque
|
||
|
||
- \# : chiffre
|
||
- A : lettre majuscule
|
||
- a : lettre minuscule
|
||
- \* : chiffre ou lettre
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## 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 MalioInputText from '../components/malio/InputText.vue'
|
||
</script>
|