diff --git a/.playground/pages/composant/select/selectCheckbox.vue b/.playground/pages/composant/select/selectCheckbox.vue index d435acd..340886e 100644 --- a/.playground/pages/composant/select/selectCheckbox.vue +++ b/.playground/pages/composant/select/selectCheckbox.vue @@ -207,12 +207,12 @@ const options = [ ] const colorOptions = [ - {label: 'France', value: 'fr', color: '#fde2e2'}, - {label: 'Belgique', value: 'be', color: '#fff3cd'}, - {label: 'Suisse', value: 'ch', color: '#d1e7dd'}, - {label: 'Canada', value: 'ca', color: '#cfe2ff'}, + {label: 'France', value: 'fr', color: '#b91c1c', textColor: '#ffffff'}, + {label: 'Belgique', value: 'be', color: '#fff3cd', textColor: '#92400e'}, + {label: 'Suisse', value: 'ch', color: '#d1e7dd', textColor: '#0f5132'}, + {label: 'Canada', value: 'ca', color: '#1e3a8a', textColor: '#ffffff'}, {label: 'Allemagne', value: 'de'}, - {label: 'Espagne', value: 'es', color: '#e2d9f3'}, + {label: 'Espagne', value: 'es', color: '#e2d9f3', textColor: '#5b21b6'}, ] const longOptions = [ diff --git a/CHANGELOG.md b/CHANGELOG.md index e26c0fa..3cd2b4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -58,7 +58,7 @@ Liste des évolutions de la librairie Malio layer UI * [#MUI-45] MalioDate : prop `markedDates` (`Record<"YYYY-MM-DD", 'success' | 'danger'>`) appliquant un fond tokenisé par jour dans la grille (générique, fourni par le consommateur ; précédence sélection/`today` > variante marquée > défaut) + event `month-change` (`{ month: 0-11, year }`) émis à l'ouverture du popover et à chaque navigation de mois. Sert l'écran *Heures* de SIRH (jours validés en vert, chargement du mois visible à la volée). * Calendrier (Date/DateRange/DateTime/DateWeek) : sélecteur d'année (3ᵉ niveau de navigation — jours → mois → années) et grisage des mois et années hors `min`/`max`. * MalioSidebar : slots `footer` / `footer-collapsed` pour ajouter un contenu en bas de la sidebar (profil, déconnexion, version…). Toujours collé en bas (la nav `flex-1` le pousse), reste visible quand la liste de liens scrolle ; bordure haute `m-primary` en mode déplié, à l'image du bloc logo. -* [#MUI-49] SelectCheckbox : refonte du style des tags (fond `m-bg`, sans bordure, texte 18px/500). Nouvelle prop `maxTags` (nombre max de tags affichés, `0` = tous ; au-delà un tag `+N` résume le surplus) et champ `color` optionnel par option (couleur de fond du tag, sinon `m-bg`). +* [#MUI-49] SelectCheckbox : refonte du style des tags (fond `m-bg`, sans bordure, radius 20px, texte 18px/500). Nouvelle prop `maxTags` (nombre max de tags affichés, `0` = tous ; au-delà un tag `+N` résume le surplus) et champs optionnels par option `color` (fond du tag, sinon `m-bg`) et `textColor` (couleur du texte, ignorée en `disabled`). ### Changed * Cohérence du mode **`disabled`** sur toute la famille formulaire (calqué sur InputText : texte + label grisés, `cursor-not-allowed`, aucune affordance interactive). Concrètement, quand `disabled` : le **bouton « + »** d'ajout disparaît (InputPhone, InputEmail), l'**œil** de révélation disparaît (InputPassword), le **chevron** disparaît (Select, SelectCheckbox, InputAutocomplete), la **croix d'effacement** reste masquée (date, upload, time), le **label** passe en `text-m-muted` (Select, SelectCheckbox, famille Date via CalendarField, TimePicker), et les **tags** du SelectCheckbox + la valeur du Select passent en gris. (InputText, InputAmount, InputNumber, InputTextArea, InputRichText, Checkbox, RadioButton, InputUpload étaient déjà conformes.) diff --git a/COMPONENTS.md b/COMPONENTS.md index 26bed7e..5610fed 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -427,7 +427,7 @@ 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, label: string, color?: string }[]` | `[]` | Options. `color` optionnel = couleur de fond du tag (sinon `m-bg`). | +| `options` | `{ value: string \| number, label: string, color?: string, textColor?: string }[]` | `[]` | Options. `color` optionnel = couleur de fond du tag (sinon `m-bg`) ; `textColor` optionnel = couleur du texte du tag (ignorée en `disabled`). | | `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" | diff --git a/app/components/malio/select/SelectCheckbox.test.ts b/app/components/malio/select/SelectCheckbox.test.ts index 19443b8..b5a4030 100644 --- a/app/components/malio/select/SelectCheckbox.test.ts +++ b/app/components/malio/select/SelectCheckbox.test.ts @@ -7,6 +7,7 @@ type Option = { label: string value: string | number color?: string + textColor?: string } type SelectCheckboxProps = { @@ -441,4 +442,23 @@ describe('MalioSelectCheckbox', () => { expect(tag.classes()).toContain('bg-m-bg') expect(tag.attributes('style')).toBeFalsy() }) + + it('applique la couleur de texte fournie par l’option', () => { + const wrapper = mount(SelectCheckboxForTest, { + props: {modelValue: ['fr'], options: [{label: 'France', value: 'fr', textColor: '#ffffff'}], displayTag: true}, + }) + + const tag = wrapper.findAll('span.inline-flex')[0] + expect(tag.attributes('style')).toContain('color') + }) + + it('n’applique pas la couleur de texte custom en disabled (reste grisé)', () => { + const wrapper = mount(SelectCheckboxForTest, { + props: {modelValue: ['fr'], options: [{label: 'France', value: 'fr', textColor: '#ffffff'}], displayTag: true, disabled: true}, + }) + + const tag = wrapper.findAll('span.inline-flex')[0] + expect(tag.classes()).toContain('text-black/60') + expect(tag.attributes('style') ?? '').not.toContain('color') + }) }) diff --git a/app/components/malio/select/SelectCheckbox.vue b/app/components/malio/select/SelectCheckbox.vue index e06c329..d02578e 100644 --- a/app/components/malio/select/SelectCheckbox.vue +++ b/app/components/malio/select/SelectCheckbox.vue @@ -91,19 +91,19 @@ {{ option.label }} +{{ hiddenTagsCount }} @@ -282,7 +282,8 @@ const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRin type Option = { label: string; value: string | number; - color?: string + color?: string; + textColor?: string } const props = withDefaults(defineProps<{ modelValue?: Array @@ -368,6 +369,13 @@ const visibleTags = computed(() => const hiddenTagsCount = computed(() => props.maxTags > 0 ? Math.max(selectedOptions.value.length - props.maxTags, 0) : 0, ) +function tagStyle(option: Option) { + const style: Record = {} + if (option.color) style.backgroundColor = option.color + // En disabled on garde le gris hérité (text-black/60), on n'applique pas la couleur custom + if (option.textColor && !props.disabled) style.color = option.textColor + return Object.keys(style).length ? style : undefined +} const shouldFloatLabel = computed(() => isReadonly.value ? isOptionSelected.value : (isOpen.value || displayTags.value) )