fix : tag position

app/components/malio/SelectCheckbox.test.ts

@@ -22,6 +22,7 @@ type SelectCheckboxProps = {
   textValue?: string
   textLabel?: string
   rounded?: string
+  displayTag?: boolean
   disabled?: boolean
 }
 
@@ -72,4 +73,23 @@ describe('MalioSelectCheckbox', () => {
 
     expect(wrapper.text()).toContain('0/3')
   })
+
+  it('hides the summary when displayTag is enabled and options are selected', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'ca'], options, displayTag: true},
+    })
+
+    expect(wrapper.text()).not.toContain('2/3')
+    expect(wrapper.text()).toContain('France')
+    expect(wrapper.text()).toContain('Canada')
+  })
+
+  it('hides the summary when displayTag is enabled and nothing is selected', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displayTag: true, emptyOptionLabel: 'Aucune selection'},
+    })
+
+    expect(wrapper.text()).not.toContain('0/3')
+    expect(wrapper.text()).toContain('Aucune selection')
+  })
 })

app/components/malio/SelectCheckbox.vue

@@ -63,20 +63,32 @@
 
       <div
         v-if="displayTags && selectedOptions.length > 0"
-        class="flex flex-wrap items-center justify-start gap-1 px-1 pr-6"
-        :class="[label ? 'pt-3 pb-1' : '']"
+        class="flex flex-wrap items-center justify-start gap-1"
+        :class="[label ? 'pt-1' : '']"
       >
         <span
           v-for="option in selectedOptions"
           :key="String(option.value)"
           class="inline-flex max-w-full items-center rounded-md border border-black px-2 text-sm leading-none text-black"
         >
-          <span class="truncate">{{ option.label }}</span>
+          <span class="truncate pb-[2px]">{{ option.label }}</span>
         </span>
       </div>
 
       <span
-        v-show="!displayTags"
+        v-else-if="displayTag && emptyOptionLabel"
+        class="block truncate text-right"
+        :class="[
+          textValue,
+          label ? 'pl-24' : '',
+          'text-m-muted'
+        ]"
+      >
+        {{ emptyOptionLabel }}
+      </span>
+
+      <span
+        v-if="!displayTag"
         class="block truncate text-right"
         :class="[
           textValue,