Merge branch 'main' into develop
# Conflicts: # CHANGELOG.md # COMPONENTS.md
This commit is contained in:
@@ -450,30 +450,3 @@ Tableau de données presentational avec pagination, filtres par slots et lignes
|
||||
v-model:per-page="perPage"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioSiteSelector
|
||||
|
||||
Sélecteur horizontal pour choisir un site (usine ou lieu) parmi une liste. Les tuiles occupent une largeur proportionnelle du conteneur. La couleur du site sélectionné est appliquée à toutes les tuiles ; la tuile active est opaque, les autres sont atténuées à 40 %.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `sites` | `{ id: string, name: string, color: string }[]` | **requis** | Liste des sites. `color` est un hex (ex : `'#0055ff'`) |
|
||||
| `modelValue` | `string` | `undefined` | `id` du site sélectionné (v-model). Sans v-model, le premier site est sélectionné |
|
||||
| `id` | `string` | auto | Identifiant HTML du conteneur |
|
||||
| `groupClass` | `string` | `''` | Classes CSS du conteneur (twMerge) |
|
||||
| `tileClass` | `string` | `''` | Classes CSS de chaque tuile (twMerge) |
|
||||
| `labelClass` | `string` | `''` | Classes CSS du libellé (twMerge) |
|
||||
|
||||
**Events :**
|
||||
- `update:modelValue(value: string)` — id du site sélectionné (v-model)
|
||||
- `change(site: { id: string, name: string, color: string })` — objet site complet, émis au clic (pratique pour déclencher un appel API côté consommateur)
|
||||
|
||||
```vue
|
||||
<MalioSiteSelector
|
||||
v-model="siteActifId"
|
||||
:sites="sites"
|
||||
@change="(site) => refetch(site.id)"
|
||||
/>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user