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