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>
193 lines
4.0 KiB
Vue
193 lines
4.0 KiB
Vue
<template>
|
||
<Story
|
||
title="Input/TextArea"
|
||
>
|
||
<MalioInputTextArea/>
|
||
</Story>
|
||
</template>
|
||
|
||
<docs lang="md">
|
||
# MalioInputTextArea
|
||
|
||
Composant textarea avec label flottant, états visuels (erreur / succès),
|
||
gestion du redimensionnement et compteur optionnel.
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Props détaillées
|
||
|
||
### id
|
||
|
||
- Type: string
|
||
- Description: Identifiant HTML du textarea.
|
||
- 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 du textarea (utile pour les formulaires).
|
||
|
||
### autocomplete
|
||
|
||
- Type: string
|
||
- Description: Active ou configure l’autocomplétion navigateur.
|
||
|
||
### 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
|
||
|
||
### textInput
|
||
|
||
- Type: string
|
||
- Description: Classes CSS appliquées au textarea (taille de texte,
|
||
etc.).
|
||
- Défaut: text-lg
|
||
|
||
### textLabel
|
||
|
||
- Type: string
|
||
- Description: Classes CSS appliquées au label.
|
||
- Défaut: text-sm
|
||
|
||
### rounded
|
||
|
||
- Type: string
|
||
- Description: Classe Tailwind pour le border-radius.
|
||
- Défaut: rounded-md
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Dimensions
|
||
|
||
### size
|
||
|
||
- Type: number | string
|
||
- Description: Nombre de lignes initiales (rows).
|
||
- Défaut: 2
|
||
|
||
### minResizeWidth / maxResizeWidth
|
||
|
||
- Type: number | string
|
||
- Description: Largeur minimale / maximale autorisée lors du
|
||
redimensionnement.
|
||
|
||
### minResizeHeight / maxResizeHeight
|
||
|
||
- Type: number | string
|
||
- Description: Hauteur minimale / maximale autorisée lors du
|
||
redimensionnement.
|
||
|
||
### resize
|
||
- Type: 'none' | 'both' | 'horizontal' | 'vertical'
|
||
- Description: Définit le comportement de redimensionnement CSS.
|
||
- Défaut: both
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Validation & États
|
||
|
||
### required
|
||
|
||
- Type: boolean
|
||
- Description: Ajoute l’attribut HTML required.
|
||
|
||
### maxLength
|
||
|
||
- Type: number | string
|
||
- Description: Longueur maximale autorisée.
|
||
- Effet: Limite la saisie et alimente le compteur.
|
||
|
||
### disabled
|
||
|
||
- Type: boolean
|
||
- Description: Désactive complètement le champ.
|
||
|
||
### readonly
|
||
|
||
- Type: boolean
|
||
- Description: Rend le champ non modifiable mais focusable.
|
||
|
||
### 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.
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Compteur
|
||
|
||
### showCounter
|
||
|
||
- Type: boolean
|
||
- Description: Affiche le compteur x / maxLength.
|
||
- Condition:
|
||
- showCounter = true
|
||
- maxLength défini et > 0
|
||
- Position: Bas gauche du textarea.
|
||
- Mise à jour: Dynamique à chaque saisie.
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Priorité d’affichage
|
||
|
||
### Messages
|
||
|
||
1. error
|
||
2. success
|
||
3. hint
|
||
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Accessibilité
|
||
|
||
- aria-invalid est activé si error existe.
|
||
- aria-describedby référence le message affiché.
|
||
- Fonctionne avec ou sans v-model.
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
## Events
|
||
|
||
### update:modelValue
|
||
|
||
- Émis à chaque modification du textarea.
|
||
- Permet l’utilisation avec v-model.
|
||
|
||
</docs>
|
||
|
||
<script setup lang="ts">
|
||
import MalioInputTextArea from '../components/malio/InputTextArea.vue'
|
||
</script>
|