feat : reorganisation de la structure projet
This commit is contained in:
259
app/story/input/inputAmount.story.vue
Normal file
259
app/story/input/inputAmount.story.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<Story title="Input/Amount">
|
||||
<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>
|
||||
<MalioInputAmount
|
||||
v-model="simpleValue"
|
||||
label="Montant"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputAmount
|
||||
v-model="hintValue"
|
||||
label="Montant HT"
|
||||
hint="Montant hors taxes en euros"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputAmount
|
||||
v-model="disabledValue"
|
||||
label="Montant"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputAmount
|
||||
v-model="readonlyValue"
|
||||
label="Montant"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputAmount
|
||||
v-model="errorValue"
|
||||
label="Montant"
|
||||
error="Le montant doit être supérieur à 0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputAmount
|
||||
v-model="successValue"
|
||||
label="Montant"
|
||||
success="Montant valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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 {ref} from 'vue'
|
||||
import MalioInputAmount from '../../components/malio/input/InputAmount.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('1500.00')
|
||||
const readonlyValue = ref('2450.75')
|
||||
const errorValue = ref('0.00')
|
||||
const successValue = ref('350.50')
|
||||
</script>
|
||||
83
app/story/input/inputNumber.story.vue
Normal file
83
app/story/input/inputNumber.story.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<Story title="Input/Number">
|
||||
<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>
|
||||
<MalioInputNumber
|
||||
v-model="simpleValue"
|
||||
label="Quantite"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioInputNumber
|
||||
v-model="initialValue"
|
||||
label="Participants"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
|
||||
<MalioInputNumber
|
||||
v-model="boundedValue"
|
||||
label="Places"
|
||||
:min="1"
|
||||
:max="5"
|
||||
hint="Minimum 1, maximum 5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioInputNumber
|
||||
v-model="disabledValue"
|
||||
label="Articles"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputNumber
|
||||
v-model="readonlyValue"
|
||||
label="Tickets"
|
||||
readonly
|
||||
hint="Valeur verrouillee"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputNumber
|
||||
v-model="errorValue"
|
||||
label="Quantite"
|
||||
:min="1"
|
||||
error="La quantite minimale est 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioInputNumber
|
||||
v-model="successValue"
|
||||
label="Quantite"
|
||||
success="Quantite validee"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputNumber from '../../components/malio/input/InputNumber.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const initialValue = ref('3')
|
||||
const boundedValue = ref('2')
|
||||
const disabledValue = ref('4')
|
||||
const readonlyValue = ref('7')
|
||||
const errorValue = ref('0')
|
||||
const successValue = ref('2')
|
||||
</script>
|
||||
252
app/story/input/inputPassword.story.vue
Normal file
252
app/story/input/inputPassword.story.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<Story title="Input/Password">
|
||||
<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>
|
||||
<MalioInputPassword
|
||||
v-model="simpleValue"
|
||||
label="Mot de passe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
||||
<MalioInputPassword
|
||||
v-model="noIconValue"
|
||||
label="Mot de passe"
|
||||
:display-icon="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputPassword
|
||||
v-model="hintValue"
|
||||
label="Mot de passe"
|
||||
hint="8 caractères minimum"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputPassword
|
||||
v-model="disabledValue"
|
||||
label="Mot de passe"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputPassword
|
||||
v-model="readonlyValue"
|
||||
label="Mot de passe"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputPassword
|
||||
v-model="errorValue"
|
||||
label="Mot de passe"
|
||||
error="Le mot de passe est trop court"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputPassword
|
||||
v-model="successValue"
|
||||
label="Mot de passe"
|
||||
success="Mot de passe valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputPassword
|
||||
|
||||
Composant input mot de passe avec label flottant, toggle de visibilité
|
||||
(icône oeil), états visuels (erreur / succès) et accessibilité.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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: off
|
||||
|
||||
### 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
|
||||
|
||||
### inputClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées à l'input.
|
||||
|
||||
### labelClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label.
|
||||
|
||||
### groupClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS 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.
|
||||
- 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 de visibilité
|
||||
|
||||
### displayIcon
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: true
|
||||
- Description: Affiche ou masque l'icône toggle de visibilité.
|
||||
- Comportement:
|
||||
- `true` : affiche une icône oeil cliquable à droite de l'input.
|
||||
- `false` : pas d'icône, le type reste `password`.
|
||||
|
||||
### Icônes utilisées
|
||||
|
||||
- `mdi:eye-off-outline` : mot de passe masqué (état par défaut).
|
||||
- `mdi:eye-outline` : mot de passe visible (après clic).
|
||||
|
||||
### Couleur de l'icône
|
||||
|
||||
- `text-m-muted` par défaut.
|
||||
- `text-m-error` si la prop `error` est renseignée.
|
||||
- `text-m-success` si la prop `success` est renseignée.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement
|
||||
|
||||
- Au clic sur l'icône, le type de l'input alterne entre `password` et `text`.
|
||||
- Aucune validation interne.
|
||||
- Les états sont pilotés uniquement par les props.
|
||||
|
||||
## Priorité visuelle
|
||||
|
||||
1. error
|
||||
2. success
|
||||
3. neutre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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 {ref} from 'vue'
|
||||
import MalioInputPassword from '../../components/malio/input/InputPassword.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const noIconValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('motdepasse123')
|
||||
const readonlyValue = ref('lectureseule')
|
||||
const errorValue = ref('abc')
|
||||
const successValue = ref('Str0ngP@ss!')
|
||||
</script>
|
||||
279
app/story/input/inputText.story.vue
Normal file
279
app/story/input/inputText.story.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<Story title="Input/Text">
|
||||
<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>
|
||||
<MalioInputText
|
||||
v-model="simpleValue"
|
||||
label="Nom"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputText
|
||||
v-model="hintValue"
|
||||
label="Email"
|
||||
hint="Votre adresse email professionnelle"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputText
|
||||
v-model="disabledValue"
|
||||
label="Nom"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputText
|
||||
v-model="readonlyValue"
|
||||
label="Nom"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputText
|
||||
v-model="errorValue"
|
||||
label="Email"
|
||||
error="Adresse email invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputText
|
||||
v-model="successValue"
|
||||
label="Email"
|
||||
success="Email valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec masque (téléphone)</h2>
|
||||
<MalioInputText
|
||||
v-model="maskValue"
|
||||
label="Téléphone"
|
||||
mask="## ## ## ## ##"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône</h2>
|
||||
<MalioInputText
|
||||
v-model="iconValue"
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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 {ref} from 'vue'
|
||||
import MalioInputText from '../../components/malio/input/InputText.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('Jean Dupont')
|
||||
const readonlyValue = ref('Marie Martin')
|
||||
const errorValue = ref('jean@')
|
||||
const successValue = ref('jean@example.com')
|
||||
const maskValue = ref('06 12 34 56 78')
|
||||
const iconValue = ref('')
|
||||
</script>
|
||||
262
app/story/input/inputTextArea.story.vue
Normal file
262
app/story/input/inputTextArea.story.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<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>
|
||||
236
app/story/input/inputUpload.story.vue
Normal file
236
app/story/input/inputUpload.story.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<Story title="Input/Upload">
|
||||
<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>
|
||||
<MalioInputUpload
|
||||
v-model="simpleValue"
|
||||
label="Fichier"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
||||
<MalioInputUpload
|
||||
v-model="noIconValue"
|
||||
label="Fichier"
|
||||
:display-icon="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputUpload
|
||||
v-model="hintValue"
|
||||
label="Fichier"
|
||||
hint="Formats acceptés : PDF, DOC, DOCX"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputUpload
|
||||
v-model="disabledValue"
|
||||
label="Fichier"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly (avec fichier)</h2>
|
||||
<MalioInputUpload
|
||||
v-model="readonlyValue"
|
||||
label="Fichier"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputUpload
|
||||
v-model="errorValue"
|
||||
label="Fichier"
|
||||
error="Format non supporté"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputUpload
|
||||
v-model="successValue"
|
||||
label="Fichier"
|
||||
success="Fichier valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
|
||||
<MalioInputUpload
|
||||
v-model="acceptValue"
|
||||
label="Document PDF"
|
||||
accept=".pdf"
|
||||
hint="Seuls les fichiers PDF sont acceptés"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputUpload
|
||||
|
||||
Composant input d'upload de fichier avec label flottant, icône cloud,
|
||||
affichage du nom du fichier sélectionné, états visuels (erreur / succès)
|
||||
et accessibilité.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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.
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: string | null | undefined
|
||||
- Description: Nom du fichier sélectionné (valeur contrôlée).
|
||||
- Comportement:
|
||||
- Si défini → composant contrôlé (v-model).
|
||||
- Sinon → gestion interne de l'état.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### inputClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées à l'input texte.
|
||||
|
||||
### labelClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label.
|
||||
|
||||
### groupClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au conteneur.
|
||||
|
||||
### displayIcon
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: true
|
||||
- Description: Affiche ou masque l'icône d'upload.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & Contraintes
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le champ.
|
||||
|
||||
### accept
|
||||
|
||||
- Type: string
|
||||
- Description: Types de fichiers acceptés (ex: `.pdf,.doc`).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## É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
|
||||
|
||||
- `mdi:cloud-arrow-up-outline` : icône d'upload affichée à droite.
|
||||
|
||||
### Couleur de l'icône
|
||||
|
||||
- `text-m-muted` par défaut.
|
||||
- `text-m-error` si la prop `error` est renseignée.
|
||||
- `text-m-success` si la prop `success` est renseignée.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement
|
||||
|
||||
- Au clic sur l'input texte, le sélecteur de fichier natif s'ouvre.
|
||||
- Le nom du fichier sélectionné est affiché dans l'input.
|
||||
- L'input texte est en readonly — la saisie manuelle n'est pas autorisée.
|
||||
|
||||
## Priorité visuelle
|
||||
|
||||
1. error
|
||||
2. success
|
||||
3. neutre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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 quand un fichier est sélectionné (valeur = nom du fichier).
|
||||
- Permet l'utilisation avec v-model.
|
||||
|
||||
### file-selected
|
||||
|
||||
- Émis quand un fichier est sélectionné (valeur = objet File).
|
||||
- Permet d'accéder au fichier pour l'upload.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputUpload from '../../components/malio/input/InputUpload.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const noIconValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('document.pdf')
|
||||
const readonlyValue = ref('rapport.pdf')
|
||||
const errorValue = ref('image.bmp')
|
||||
const successValue = ref('rapport.pdf')
|
||||
const acceptValue = ref('')
|
||||
</script>
|
||||
Reference in New Issue
Block a user