Ajout de composant (#7)
All checks were successful
Release / release (push) Successful in 57s
All checks were successful
Release / release (push) Successful in 57s
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Co-authored-by: kevin <kevin@yuno.malio.fr> Reviewed-on: #7 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #7.
This commit is contained in:
148
app/story/InputSelect.story.vue
Normal file
148
app/story/InputSelect.story.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<Story
|
||||
title="Select"
|
||||
>
|
||||
<MalioSelect
|
||||
v-model="value"
|
||||
:options="options"
|
||||
/>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioSelect
|
||||
|
||||
Composant select personnalisé avec label flottant, option vide,
|
||||
états visuels selon la sélection et ouverture/fermeture contrôlée.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: string | number | null
|
||||
- Description: Valeur actuellement sélectionnée.
|
||||
- Comportement:
|
||||
- Compatible avec `v-model`.
|
||||
- Peut valoir `null` pour représenter l’option vide.
|
||||
|
||||
### options
|
||||
|
||||
- Type: Array<{ label: string; value: string | number | null }>
|
||||
- Description: Liste des options affichées dans le menu.
|
||||
- Défaut: tableau vide.
|
||||
|
||||
### emptyOptionLabel
|
||||
|
||||
- Type: string
|
||||
- Description: Texte de l’option vide injectée automatiquement.
|
||||
- Comportement:
|
||||
- Cette option porte toujours la valeur `null`.
|
||||
- Si la prop est vide, l’option reste visuellement discrète.
|
||||
|
||||
### label
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant au-dessus du champ.
|
||||
- Comportement: Si absent, aucun label n’est rendu.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### textField
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au bouton du select.
|
||||
|
||||
### textValue
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées à la valeur affichée.
|
||||
|
||||
### textLabel
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label flottant.
|
||||
|
||||
### 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.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Interaction
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le composant.
|
||||
- Effet:
|
||||
- Empêche l’ouverture du menu.
|
||||
- Applique un style visuel désactivé.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement visuel
|
||||
|
||||
- Au repos sans sélection: bordure grise.
|
||||
- Ouvert: bordure et label en couleur primaire.
|
||||
- Fermé avec valeur sélectionnée: bordure et texte en noir.
|
||||
- L’option vide dans la liste peut être stylée différemment pour être
|
||||
distinguée des autres.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- Le bouton porte `aria-expanded` et `aria-controls`.
|
||||
- La liste utilise `role="listbox"`.
|
||||
- Chaque option utilise `role="option"` et `aria-selected`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque sélection dans la liste.
|
||||
- Permet l’utilisation avec v-model.
|
||||
- Peut émettre `null` si l’option vide est sélectionnée.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MalioSelect from '../components/malio/Select.vue'
|
||||
const value = ref<string | number | null>(null)
|
||||
const options = [
|
||||
{ label: 'France', value: 'fr' },
|
||||
{ label: 'Belgique', value: 'be' },
|
||||
{ label: 'Suisse', value: 'ch' },
|
||||
{ label: 'Canada', value: 'ca' },
|
||||
{ label: 'Allemagne', value: 'de' },
|
||||
{ label: 'Espagne', value: 'es' },
|
||||
{ label: 'Italie', value: 'it' },
|
||||
{ label: 'Portugal', value: 'pt' },
|
||||
{ label: 'Pays-Bas', value: 'nl' },
|
||||
{ label: 'Suède', value: 'se' },
|
||||
{ label: 'Norvège', value: 'no' },
|
||||
{ label: 'Danemark', value: 'dk' },
|
||||
{ label: 'Finlande', value: 'fi' },
|
||||
{ label: 'Autriche', value: 'at' },
|
||||
{ label: 'Irlande', value: 'ie' },
|
||||
{ label: 'Grèce', value: 'gr' },
|
||||
{ label: 'Pologne', value: 'pl' },
|
||||
{ label: 'Hongrie', value: 'hu' },
|
||||
{ label: 'République tchèque', value: 'cz' },
|
||||
]
|
||||
</script>
|
||||
187
app/story/RadioButton.story.vue
Normal file
187
app/story/RadioButton.story.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<Story title="Input/Radio">
|
||||
<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>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`simple-${option.value}`"
|
||||
v-model="primaryChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="primary-choice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Preselected</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`preselected-${option.value}`"
|
||||
v-model="preselectedChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="preselected-choice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Error</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`error-${option.value}`"
|
||||
v-model="errorChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="error-choice"
|
||||
error="Selection required"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Success</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`success-${option.value}`"
|
||||
v-model="successChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="success-choice"
|
||||
success="Selection saved"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Disabled</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`disabled-${option.value}`"
|
||||
v-model="disabledChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="disabled-choice"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`readonly-${option.value}`"
|
||||
v-model="readonlyChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="readonly-choice"
|
||||
readonly
|
||||
hint="Readonly group"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioRadioButton
|
||||
|
||||
Composant radio personnalisé compatible avec `v-model`, les groupes via `name`,
|
||||
et les états visuels de validation.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: `string | number | boolean | null | undefined`
|
||||
- Description: Valeur actuellement sélectionnée dans le groupe.
|
||||
- Comportement:
|
||||
- Compatible avec `v-model`.
|
||||
- Le radio est coché quand `modelValue === value`.
|
||||
|
||||
### value
|
||||
|
||||
- Type: `string | number | boolean | null | undefined`
|
||||
- Description: Valeur portée par le radio courant.
|
||||
|
||||
### label
|
||||
|
||||
- Type: `string`
|
||||
- Description: Texte affiché à droite du radio.
|
||||
|
||||
### name
|
||||
|
||||
- Type: `string`
|
||||
- Description: Nom HTML partagé par les radios d’un même groupe.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États
|
||||
|
||||
### error
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message et style d’erreur.
|
||||
|
||||
### success
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message et style de succès.
|
||||
- Comportement: ignoré si `error` est présent.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: `boolean`
|
||||
- Description: Désactive le radio.
|
||||
|
||||
### readonly
|
||||
|
||||
- Type: `boolean`
|
||||
- Description: Empêche le changement de valeur tout en gardant le rendu affiché.
|
||||
|
||||
### hint
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message d’aide sous le groupe.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à la sélection d’un radio.
|
||||
- Retourne la `value` du radio sélectionné.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioRadioButton from '../components/malio/RadioButton.vue'
|
||||
|
||||
const options = [
|
||||
{label: 'Option 1', value: 'option1'},
|
||||
{label: 'Option 2', value: 'option2'},
|
||||
{label: 'Option 3', value: 'option3'},
|
||||
{label: 'Option 4', value: 'option4'},
|
||||
]
|
||||
|
||||
const primaryChoice = ref<string | null>(null)
|
||||
const preselectedChoice = ref<string | null>('option2')
|
||||
const errorChoice = ref<string | null>(null)
|
||||
const successChoice = ref<string | null>('option3')
|
||||
const disabledChoice = ref<string | null>('option2')
|
||||
const readonlyChoice = ref<string | null>('option4')
|
||||
</script>
|
||||
200
app/story/inputAmount.story.vue
Normal file
200
app/story/inputAmount.story.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<Story
|
||||
title="Input/Amount"
|
||||
>
|
||||
<MalioInputAmount/>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputAmount
|
||||
|
||||
Composant input dédié à la saisie d’un montant décimal avec 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 dans les formulaires.
|
||||
|
||||
### autocomplete
|
||||
|
||||
- Type: string
|
||||
- Description: Valeur de l’attribut `autocomplete`.
|
||||
- Défaut: `off`
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: string | null | undefined
|
||||
- Description: Valeur contrôlée du composant.
|
||||
- Comportement:
|
||||
- Si défini, le composant fonctionne via `v-model`.
|
||||
- Sinon, il conserve une valeur locale interne.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### inputClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS additionnelles appliquées à l’input.
|
||||
|
||||
### labelClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS additionnelles appliquées au label.
|
||||
|
||||
### groupClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS additionnelles appliquées au conteneur.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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.
|
||||
- Positionne `aria-invalid="true"`.
|
||||
- Est 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 affichée dans le champ.
|
||||
- Défaut: `mdi:currency-eur`
|
||||
|
||||
### iconPosition
|
||||
|
||||
- Type: `'left' | 'right'`
|
||||
- Description: Position de l’icône dans le champ.
|
||||
- Défaut: `right`
|
||||
|
||||
### iconSize
|
||||
|
||||
- Type: string | number
|
||||
- Description: Taille de l’icône.
|
||||
|
||||
### iconColor
|
||||
|
||||
- Type: string
|
||||
- Description: Classe de couleur de l’icône en état neutre.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement montant
|
||||
|
||||
- Le champ est rendu en `type="text"` avec `inputmode="decimal"`.
|
||||
- Le séparateur décimal affiché par défaut est `.`.
|
||||
- Les virgules saisies par l’utilisateur sont converties en points.
|
||||
- Tous les caractères non numériques, sauf le séparateur décimal, sont supprimés.
|
||||
- La partie décimale est limitée à 2 chiffres.
|
||||
|
||||
### Exemples de normalisation
|
||||
|
||||
- `12,5` devient `12.5`
|
||||
- `0012,345abc` devient `12.34`
|
||||
- `,5` devient `0.5`
|
||||
|
||||
### Formatage au blur
|
||||
|
||||
- `12` devient `12.00`
|
||||
- `12.5` devient `12.50`
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Priorité visuelle
|
||||
|
||||
1. `error`
|
||||
2. `success`
|
||||
3. état neutre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-invalid` est activé si `error` existe.
|
||||
- `aria-describedby` référence le message affiché sous le champ.
|
||||
- Le composant fonctionne avec ou sans `v-model`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque modification de l’input.
|
||||
- Émis aussi au `blur` si la valeur est reformatée.
|
||||
- Permet l’utilisation avec `v-model`.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MalioInputAmount from '../components/malio/InputAmount.vue'
|
||||
</script>
|
||||
200
app/story/inputText.story.vue
Normal file
200
app/story/inputText.story.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<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>
|
||||
192
app/story/inputTextArea.story.vue
Normal file
192
app/story/inputTextArea.story.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<Story
|
||||
title="Input/TextArea"
|
||||
>
|
||||
<MalioInputTextArea/>
|
||||
</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 MalioInputTextArea from '../components/malio/InputTextArea.vue'
|
||||
</script>
|
||||
Reference in New Issue
Block a user