57 lines
2.4 KiB
Vue
57 lines
2.4 KiB
Vue
<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>
|