feat : reorganisation de la structure projet
This commit is contained in:
210
app/story/select/InputSelect.story.vue
Normal file
210
app/story/select/InputSelect.story.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<Story title="Select/Select">
|
||||
<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>
|
||||
<MalioSelect
|
||||
v-model="simpleValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur présélectionnée</h2>
|
||||
<MalioSelect
|
||||
v-model="preselectedValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioSelect
|
||||
v-model="disabledValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioSelect
|
||||
v-model="hintValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
hint="Sélectionnez votre pays de résidence"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioSelect
|
||||
v-model="errorValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
error="Ce champ est obligatoire"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioSelect
|
||||
v-model="successValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
success="Sélection validée"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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/Select.vue'
|
||||
|
||||
const simpleValue = ref<string | number | null>(null)
|
||||
const preselectedValue = ref<string | number | null>('fr')
|
||||
const disabledValue = ref<string | number | null>('be')
|
||||
const hintValue = ref<string | number | null>(null)
|
||||
const errorValue = ref<string | number | null>(null)
|
||||
const successValue = ref<string | number | null>('ch')
|
||||
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>
|
||||
213
app/story/select/selectCheckbox.story.vue
Normal file
213
app/story/select/selectCheckbox.story.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<Story title="Select/Checkbox">
|
||||
<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>
|
||||
<MalioSelectCheckbox
|
||||
v-model="simpleValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec tags</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="tagValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
:display-tag="true"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="hintValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
hint="Sélectionnez un ou plusieurs pays"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="disabledValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="errorValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
error="Sélectionnez au moins un pays"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="successValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
success="Sélection validée"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Tout sélectionner</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="selectAllValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
:display-select-all="true"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Tout sélectionner (label custom)</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="selectAllCustomValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
:display-select-all="true"
|
||||
select-all-label="Cocher tout"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioSelectCheckbox
|
||||
|
||||
Composant select avec checkboxes multiples, label flottant, tags optionnels,
|
||||
états visuels (erreur / succès) et option "tout sélectionner".
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: Array<string | number>
|
||||
- Description: Tableau des valeurs sélectionnées.
|
||||
|
||||
### options
|
||||
|
||||
- Type: Array<{ label: string; value: string | number }>
|
||||
- Description: Liste des options disponibles.
|
||||
|
||||
### emptyOptionLabel
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché quand aucune option n'est sélectionnée (mode tag).
|
||||
|
||||
### label
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### displayTag
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: false
|
||||
- Description: Affiche les sélections sous forme de tags au lieu du compteur.
|
||||
|
||||
### displaySelectAll
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: false
|
||||
- Description: Affiche une checkbox "Tout sélectionner / Tout désélectionner" en haut de la liste.
|
||||
|
||||
### selectAllLabel
|
||||
|
||||
- Type: string
|
||||
- Défaut: "Tout sélectionner"
|
||||
- Description: Label de la checkbox de sélection globale.
|
||||
|
||||
### minWidth / maxWidth
|
||||
|
||||
- Type: string
|
||||
- Description: Classes Tailwind pour contraindre la largeur.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États & Messages
|
||||
|
||||
### hint
|
||||
|
||||
- Type: string
|
||||
- Description: Message d'aide affiché sous le champ.
|
||||
|
||||
### error
|
||||
|
||||
- Type: string
|
||||
- Description: Message d'erreur. Prioritaire sur success et hint.
|
||||
|
||||
### success
|
||||
|
||||
- Type: string
|
||||
- Description: Message de succès. Actif si error est absent.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le composant.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-expanded` et `aria-controls` sur le bouton.
|
||||
- `role="listbox"` sur la liste, `role="option"` et `aria-selected` sur chaque option.
|
||||
- `aria-invalid` activé si error existe.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque changement de sélection.
|
||||
- Retourne un tableau de valeurs.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioSelectCheckbox from '../../components/malio/select/SelectCheckbox.vue'
|
||||
|
||||
const options = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Suisse', value: 'ch'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
{label: 'Allemagne', value: 'de'},
|
||||
]
|
||||
|
||||
const simpleValue = ref<Array<string | number>>([])
|
||||
const tagValue = ref<Array<string | number>>(['fr', 'be'])
|
||||
const hintValue = ref<Array<string | number>>([])
|
||||
const disabledValue = ref<Array<string | number>>(['fr', 'ch'])
|
||||
const errorValue = ref<Array<string | number>>([])
|
||||
const successValue = ref<Array<string | number>>(['be', 'ca'])
|
||||
const selectAllValue = ref<Array<string | number>>([])
|
||||
const selectAllCustomValue = ref<Array<string | number>>([])
|
||||
</script>
|
||||
Reference in New Issue
Block a user