fix: multi-select (#91)

| 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é

---------

Co-authored-by: admin malio <malio@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #91
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

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')
+  })
 })

app/components/malio/select/SelectCheckbox.vue

@@ -91,19 +91,19 @@
         <span
           v-for="option in visibleTags"
           :key="String(option.value)"
-          class="inline-flex max-w-full items-center rounded-md px-2 pt-[2px] pb-0 text-lg font-medium leading-[normal]"
+          class="inline-flex max-w-full items-center rounded-[20px] px-2 pt-[2px] pb-0 text-lg font-medium leading-[normal]"
           :class="[
             option.color ? '' : 'bg-m-bg',
             disabled ? 'text-black/60' : 'text-black',
           ]"
-          :style="option.color ? { backgroundColor: option.color } : undefined"
+          :style="tagStyle(option)"
         >
           <span class="truncate pb-[2px]">{{ option.label }}</span>
         </span>
         <span
           v-if="hiddenTagsCount > 0"
           data-test="tags-overflow"
-          class="inline-flex items-center rounded-md bg-m-bg px-2 pt-[2px] pb-0 text-lg font-medium leading-[normal]"
+          class="inline-flex items-center rounded-[20px] bg-m-bg px-2 pt-[2px] pb-0 text-lg font-medium leading-[normal]"
           :class="disabled ? 'text-black/60' : 'text-black'"
         >
           <span class="pb-[2px]">+{{ hiddenTagsCount }}</span>
@@ -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<string | number>
@@ -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<string, string> = {}
+  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)
 )