MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
## MUI-49 — Revoir le style des tags dans le multi-select

### Style des tags
- Fond `m-bg`, **sans bordure**, padding `2px / 8px`
- Texte **18px / weight 500 / line-height normal**
- Correction du rognage des jambages (`g` de « Belgique ») sans agrandir le tag

### Nouvelles props
- `maxTags` (`number`, défaut `0`) : limite le nombre de tags affichés ; au-delà un tag **`+N`** résume le surplus. `0` = tous les tags.
- Champ `color?` par option : couleur de fond du tag (sinon `m-bg`).

### Divers
- 5 nouveaux tests (maxTags, badge +N, color, fallback m-bg)
- Playground : exemples « max tags (3) » et « couleurs »
- `COMPONENTS.md` et `CHANGELOG.md` mis à jour

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #89
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #89.
This commit is contained in:
Autin
2026-06-28 11:00:40 +00:00
committed by Autin
parent 599a872e0c
commit 3d6b7537cc
5 changed files with 123 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
COMPONENTS.md
+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" />
```
---