malio-layer-ui/app/story/input/inputTextArea.story.vue

<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>