feat(select) : tags SelectCheckbox restylés + props maxTags et color (MUI-49)

- Style des tags : fond m-bg, sans bordure, texte 18px/500
- Fix du rognage des jambages (g) sans agrandir le tag
- Prop maxTags : limite le nombre de tags affichés + badge "+N"
- Champ color par option : couleur de fond du tag (sinon m-bg)
- Tests, COMPONENTS.md et CHANGELOG.md mis à jour

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-28 12:49:16 +02:00
parent 599a872e0c
commit e866b5dbcc
5 changed files with 123 additions and 5 deletions
+4 -1
View File
@@ -427,8 +427,9 @@ Liste déroulante multi-sélection avec checkboxes.
| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `modelValue` | `(string \| number)[]` | `[]` | Valeurs sélectionnées (v-model) |
| `options` | `{ value: string \| number, text: string }[]` | `[]` | Options |
| `options` | `{ value: string \| number, label: string, color?: string }[]` | `[]` | Options. `color` optionnel = couleur de fond du tag (sinon `m-bg`). |
| `displayTag` | `boolean` | `false` | Afficher les tags sélectionnés |
| `maxTags` | `number` | `0` | Nombre max de tags affichés ; au-delà un tag `+N` résume le surplus. `0` = tous les tags. |
| `displaySelectAll` | `boolean` | `false` | Afficher "Tout sélectionner" |
| `selectAllLabel` | `string` | `'Tout sélectionner'` | Texte du sélecteur global |
| `label` | `string` | `''` | Label |
@@ -445,6 +446,8 @@ Liste déroulante multi-sélection avec checkboxes.
```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" />
<!-- maxTags : 3 tags max + badge "+N" ; color par option pour le fond du tag -->
<MalioSelectCheckbox v-model="pays" label="Pays" :options="paysColorés" :display-tag="true" :max-tags="3" />
```
---