feat : reorganisation de la structure projet
This commit is contained in:
262
app/story/input/inputTextArea.story.vue
Normal file
262
app/story/input/inputTextArea.story.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<Story title="Input/TextArea">
|
||||
<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>
|
||||
<MalioInputTextArea
|
||||
v-model="simpleValue"
|
||||
label="Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="hintValue"
|
||||
label="Commentaire"
|
||||
hint="255 caractères maximum"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="disabledValue"
|
||||
label="Description"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="readonlyValue"
|
||||
label="Description"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="errorValue"
|
||||
label="Description"
|
||||
error="Ce champ est obligatoire"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="successValue"
|
||||
label="Description"
|
||||
success="Description valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec compteur</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="counterValue"
|
||||
label="Bio"
|
||||
:max-length="100"
|
||||
:show-counter="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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 {ref} from 'vue'
|
||||
import MalioInputTextArea from '../../components/malio/input/InputTextArea.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('Texte non modifiable')
|
||||
const readonlyValue = ref('Texte en lecture seule')
|
||||
const errorValue = ref('')
|
||||
const successValue = ref('Description complète et détaillée du projet.')
|
||||
const counterValue = ref('Un texte de démonstration')
|
||||
</script>
|
||||
Reference in New Issue
Block a user