tristan
f09f8a91ac
| 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>
387 lines
13 KiB
Markdown
387 lines
13 KiB
Markdown
# @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)`
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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)
|
|
|
|
```vue
|
|
<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)[])`
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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`)
|
|
|
|
```vue
|
|
<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)`
|
|
|
|
```vue
|
|
<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
|
|
|
|
```vue
|
|
<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)
|
|
|
|
```vue
|
|
<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)
|
|
|
|
```vue
|
|
<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>
|
|
```
|