Files

tristan f09f8a91ac [#MUI-15] Création d'un composant drawer (#21 )

| 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é

Reviewed-on: #21
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

2026-03-24 10:49:27 +00:00

13 KiB

Raw Blame History

@malio/layer-ui — Composants

Tous les composants sont auto-importés avec le préfixe Malio. Utiliser v-model pour le binding bidirectionnel sur les composants de formulaire.

MalioInputText

Champ texte avec label, icône optionnelle et support de masque de saisie.

Prop	Type	Défaut	Description
`id`	`string`	auto	Identifiant HTML
`label`	`string`	`''`	Label du champ
`modelValue`	`string \| null`	`undefined`	Valeur (v-model)
`disabled`	`boolean`	`false`	Désactive le champ
`readonly`	`boolean`	`false`	Lecture seule
`required`	`boolean`	`false`	Champ requis
`hint`	`string`	`''`	Message d'aide
`error`	`string`	`''`	Message d'erreur
`success`	`string`	`''`	Message de succès
`iconName`	`string`	`''`	Icône Iconify (ex: `mdi:magnify`)
`iconPosition`	`'left' \| 'right'`	`'right'`	Position de l'icône
`iconSize`	`string \| number`	`24`	Taille icône
`iconColor`	`string`	`'text-m-muted'`	Classe couleur icône
`mask`	`string \| MaskInputOptions`	—	Masque de saisie (maska)
`maxLength`	`number \| string`	—	Longueur max
`minLength`	`number \| string`	—	Longueur min
`inputClass`	`string`	`''`	Classes CSS input
`labelClass`	`string`	`''`	Classes CSS label
`groupClass`	`string`	`''`	Classes CSS conteneur

Events : update:modelValue(value: string)

<MalioInputText v-model="nom" label="Nom" />
<MalioInputText v-model="search" label="Recherche" icon-name="mdi:magnify" />
<MalioInputText v-model="tel" label="Téléphone" mask="## ## ## ## ##" />
<MalioInputText v-model="email" label="Email" error="Email invalide" />
<MalioInputText v-model="info" label="Info" disabled hint="Champ désactivé" />

MalioInputPassword

Champ mot de passe avec toggle visibilité.

Prop	Type	Défaut	Description
`modelValue`	`string \| null`	`undefined`	Valeur (v-model)
`label`	`string`	`''`	Label
`displayIcon`	`boolean`	`true`	Afficher l'icône toggle
`disabled`	`boolean`	`false`	Désactivé
`readonly`	`boolean`	`false`	Lecture seule
`hint`	`string`	`''`	Message d'aide
`error`	`string`	`''`	Message d'erreur
`success`	`string`	`''`	Message de succès

Events : update:modelValue(value: string)

<MalioInputPassword v-model="password" label="Mot de passe" />
<MalioInputPassword v-model="password" label="Sans icône" :display-icon="false" />

MalioInputAmount

Champ montant avec icône devise (euro par défaut).

Prop	Type	Défaut	Description
`modelValue`	`string \| null`	`undefined`	Valeur (v-model)
`label`	`string`	`''`	Label
`iconName`	`string`	`'mdi:currency-eur'`	Icône devise
`disabled`	`boolean`	`false`	Désactivé
`error`	`string`	`''`	Message d'erreur

Events : update:modelValue(value: string)

<MalioInputAmount v-model="montant" label="Montant TTC" />
<MalioInputAmount v-model="prix" label="Prix" error="Montant invalide" />

MalioInputNumber

Champ numérique avec boutons +/-.

Prop	Type	Défaut	Description
`modelValue`	`string \| null`	`undefined`	Valeur (v-model)
`label`	`string`	`''`	Label
`min`	`number \| string`	—	Valeur minimum
`max`	`number \| string`	—	Valeur maximum
`disabled`	`boolean`	`false`	Désactivé
`error`	`string`	`''`	Message d'erreur

Events : update:modelValue(value: string)

<MalioInputNumber v-model="quantite" label="Quantité" min="0" max="100" />

MalioInputTextArea

Zone de texte multiligne avec compteur et redimensionnement.

Prop	Type	Défaut	Description
`modelValue`	`string \| null`	`undefined`	Valeur (v-model)
`label`	`string`	`''`	Label
`size`	`number \| string`	`2`	Nombre de lignes
`resize`	`'none' \| 'both' \| 'horizontal' \| 'vertical'`	`'both'`	Mode redimensionnement
`maxLength`	`number`	`800`	Longueur max
`showCounter`	`boolean`	`false`	Afficher le compteur
`disabled`	`boolean`	`false`	Désactivé
`error`	`string`	`''`	Message d'erreur

Events : update:modelValue(value: string)

<MalioInputTextArea v-model="commentaire" label="Commentaire" :show-counter="true" />
<MalioInputTextArea v-model="note" label="Note" resize="vertical" :size="4" />

MalioInputUpload

Champ d'upload de fichier.

Prop	Type	Défaut	Description
`modelValue`	`string \| null`	`undefined`	Nom du fichier (v-model)
`label`	`string`	`''`	Label
`accept`	`string`	`''`	Types de fichiers acceptés
`displayIcon`	`boolean`	`true`	Afficher l'icône
`disabled`	`boolean`	`false`	Désactivé
`error`	`string`	`''`	Message d'erreur

Events : update:modelValue(value: string), file-selected(file: File)

<MalioInputUpload v-model="fileName" label="Document" accept=".pdf,.doc" @file-selected="onFile" />

MalioSelect

Liste déroulante.

Prop	Type	Défaut	Description
`modelValue`	`string \| number \| null`	requis	Valeur sélectionnée (v-model)
`options`	`{ value: string \| number, text: string }[]`	`[]`	Options disponibles
`emptyOptionLabel`	`string`	`''`	Placeholder option vide
`label`	`string`	`''`	Label
`disabled`	`boolean`	`false`	Désactivé
`error`	`string`	`''`	Message d'erreur

Events : update:modelValue(value: string | number | null) Slots : icon (icône dropdown custom)

<MalioSelect v-model="pays" label="Pays" :options="[{ value: 'FR', text: 'France' }, { value: 'BE', text: 'Belgique' }]" />
<MalioSelect v-model="ville" label="Ville" :options="villes" empty-option-label="Choisir..." />

MalioSelectCheckbox

Liste déroulante multi-sélection avec checkboxes.

Prop	Type	Défaut	Description
`modelValue`	`(string \| number)[]`	requis	Valeurs sélectionnées (v-model)
`options`	`{ value: string \| number, text: string }[]`	`[]`	Options
`displayTag`	`boolean`	`false`	Afficher les tags sélectionnés
`displaySelectAll`	`boolean`	`false`	Afficher "Tout sélectionner"
`selectAllLabel`	`string`	`'Tout sélectionner'`	Texte du sélecteur global
`label`	`string`	`''`	Label
`disabled`	`boolean`	`false`	Désactivé

Events : update:modelValue(value: (string | number)[])

<MalioSelectCheckbox v-model="competences" label="Compétences" :options="skills" :display-tag="true" />
<MalioSelectCheckbox v-model="sites" label="Sites" :options="sitesList" :display-select-all="true" />

MalioCheckbox

Case à cocher.

Prop	Type	Défaut	Description
`modelValue`	`boolean \| null`	`undefined`	Valeur (v-model)
`label`	`string`	`''`	Label
`disabled`	`boolean`	`false`	Désactivé
`readonly`	`boolean`	`false`	Lecture seule
`error`	`string`	`''`	Message d'erreur

Events : update:modelValue(value: boolean)

<MalioCheckbox v-model="accepte" label="J'accepte les conditions" />
<MalioCheckbox v-model="newsletter" label="Newsletter" disabled />

MalioRadioButton

Bouton radio (à utiliser en groupe avec le même name).

Prop	Type	Défaut	Description
`modelValue`	`string \| number \| boolean \| null`	`undefined`	Valeur du groupe (v-model)
`value`	`string \| number \| boolean \| null`	`undefined`	Valeur de cette option
`label`	`string`	`''`	Label
`name`	`string`	`''`	Nom du groupe radio
`disabled`	`boolean`	`false`	Désactivé
`readonly`	`boolean`	`false`	Lecture seule

Events : update:modelValue(value: string | number | boolean | null)

<MalioRadioButton v-model="civilite" name="civilite" value="M" label="Monsieur" />
<MalioRadioButton v-model="civilite" name="civilite" value="Mme" label="Madame" />

MalioTime

Sélecteur d'heure.

Prop	Type	Défaut	Description
`modelValue`	`string \| null`	`undefined`	Heure au format HH:mm (v-model)
`label`	`string`	`''`	Label
`disabled`	`boolean`	`false`	Désactivé
`readonly`	`boolean`	`false`	Lecture seule
`error`	`string`	`''`	Message d'erreur

Events : update:modelValue(value: string)

<MalioTime v-model="heure" label="Heure de début" />
<MalioTime v-model="fin" label="Heure de fin" readonly />

MalioButton

Bouton d'action avec 4 variantes visuelles et icône optionnelle.

Prop	Type	Défaut	Description
`label`	`string`	`''`	Texte du bouton (ou slot par défaut)
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'danger'`	`'primary'`	Variante visuelle
`disabled`	`boolean`	`false`	Désactivé
`buttonClass`	`string`	`''`	Classes CSS additionnelles (twMerge)
`iconName`	`string`	`''`	Icône Iconify
`iconPosition`	`'left' \| 'right'`	`'right'`	Position icône
`iconSize`	`string \| number`	`16`	Taille icône

Events : click(e: MouseEvent) Slots : default (contenu du bouton, remplace label)

<MalioButton label="Valider" />
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
<MalioButton label="Voir plus" variant="tertiary" />
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash" icon-position="left" />
<MalioButton label="Pleine largeur" button-class="w-full" />

MalioButtonIcon

Bouton icône seul (sans texte).

Prop	Type	Défaut	Description
`icon`	`string`	requis	Icône Iconify
`ariaLabel`	`string`	requis	Label accessible
`variant`	`'filled' \| 'ghost'`	`'filled'`	Variante visuelle
`disabled`	`boolean`	`false`	Désactivé
`buttonClass`	`string`	`''`	Classes CSS additionnelles
`iconSize`	`string \| number`	`24`	Taille icône

Events : click(e: MouseEvent)

<MalioButtonIcon icon="mdi:pencil" aria-label="Modifier" />
<MalioButtonIcon icon="mdi:trash" aria-label="Supprimer" variant="ghost" />

MalioTabList

Navigation par onglets avec contenu dynamique.

Prop	Type	Défaut	Description
`modelValue`	`string`	`undefined`	Onglet actif (v-model)
`tabs`	`{ key: string, label: string, icon?: string }[]`	requis	Liste des onglets

Events : update:modelValue(value: string) Slots : Un slot nommé par tab.key pour le contenu de chaque onglet

<MalioTabList v-model="activeTab" :tabs="[{ key: 'infos', label: 'Informations' }, { key: 'docs', label: 'Documents', icon: 'mdi:file' }]">
  <template #infos>Contenu infos</template>
  <template #docs>Contenu docs</template>
</MalioTabList>

MalioSidebar

Barre latérale de navigation rétractable.

Prop	Type	Défaut	Description
`modelValue`	`boolean`	`undefined`	État ouvert/fermé (v-model)
`sections`	`SidebarSection[]`	requis	Sections de navigation
`sidebarClass`	`string`	`''`	Classes CSS sidebar
`toggleClass`	`string`	`''`	Classes CSS bouton toggle

Type SidebarSection : { title?: string, items: { label: string, icon?: string, to?: string, href?: string, active?: boolean }[] }

Events : update:modelValue(value: boolean) Slots : logo (sidebar ouverte), logo-collapsed (sidebar fermée)

<MalioSidebar v-model="isOpen" :sections="menuSections">
  <template #logo><img src="/logo.png" /></template>
  <template #logo-collapsed><img src="/logo-small.png" /></template>
</MalioSidebar>

MalioDrawer

Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transparent.

Prop	Type	Défaut	Description
`id`	`string`	auto	Identifiant HTML
`modelValue`	`boolean`	`undefined`	État ouvert/fermé (v-model)
`title`	`string`	`''`	Titre affiché dans le header
`showClose`	`boolean`	`true`	Afficher le bouton de fermeture (croix)
`drawerClass`	`string`	`''`	Classes CSS panneau (twMerge)

Events : update:modelValue(value: boolean) Slots : default (contenu du drawer)

<MalioDrawer v-model="isOpen" title="Détails">
  <p>Contenu du drawer</p>
</MalioDrawer>
<MalioDrawer v-model="isOpen" title="Sans croix" :show-close="false">
  <p>Fermeture uniquement via backdrop</p>
</MalioDrawer>
<MalioDrawer v-model="isOpen" title="Large" drawer-class="max-w-2xl">
  <p>Drawer plus large</p>
</MalioDrawer>

13 KiB Raw Blame History

@malio/layer-ui — Composants

MalioInputText

MalioInputPassword

MalioInputAmount

MalioInputNumber

MalioInputTextArea

MalioInputUpload

MalioSelect

MalioSelectCheckbox

MalioCheckbox

MalioRadioButton

MalioTime

MalioButton

MalioButtonIcon

MalioTabList

MalioSidebar

MalioDrawer

13 KiB

Raw Blame History