<template>
  <Story title="Input/Text">
      <MalioInputText/>
  </Story>
</template>

<docs lang="md">
# Input Text

## Liste des props

Le composant Input Text permet de saisir du texte. Il peut afficher des messages d'erreur, de succès ou d'information.
On peut lui passer plusieurs props pour personnaliser son comportement et son apparence.
  - id: Identifiant HTML du champ. Si non fourni, un id est généré automatiquement.
  - label: Texte du label affiché au-dessus du champ (floating label).
  - name: Attribut name de l’input.
  - autocomplete: Attribut autocomplete de l’input.
  - modelValue: Valeur du champ (utilisée avec v-model) ou si valeur brut mettre des " ".
  - minWidth: Classe utilitaire pour la largeur minimale du conteneur. Classe Tailwind de largeur (ex: w-64, w-full).
  - maxWidth: Classe utilitaire pour la largeur maximale du conteneur. Classe Tailwind de largeur maximale.
  - textInput: Classe(s) de style du texte de l’input. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
  - textLabel: Classe(s) de style du texte du label. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
  - required: Rend le champ obligatoire (required).
  - maxLength: Nombre de caractère maximal autorisé.
  - minLength: Nombre de caractère minimal autorisé.
  - disabled: Désactive le champ et applique le style désactivé.
  - readonly: Met le champ en lecture seule.
  - hint: Message informatif affiché sous le champ.
  - error: Message d’erreur affiché sous le champ. Active le style erreur.
  - success: Message de succès affiché sous le champ. Active le style succès.
  - iconName: Nom de l’icône affichée à droite dans le champ.
  - rounded: Classe utilitaire pour le rayon des coins ( rounded- ).
  - iconSize: Taille de l’icône. (ex : 24, 26, 85 ,99, ... ).
  - iconColor: Classe(s) personnalisée(s) de couleur pour l’icône ( text- ).
  - mask: Masque de saisie pour formater la valeur :
      - \# : chiffre
      - A : lettre majuscule
      - a : lettre minuscule
      - \* : chiffre ou lettre

Événement émis :

- update:modelValue: Émis à chaque saisie pour mettre à jour v-model.

Règles d’affichage des messages :

Priorité d’affichage :
  1) error
  2) success
  3) hint


</docs>
<script setup lang="ts">
import MalioInputText from '../components/malio/InputText.vue'
</script>