fix : tag position

.playground/pages/composant/selectCheckbox.vue

@@ -8,7 +8,25 @@
         empty-option-label="Aucune selection"
       />
     </div>
-
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec tag</h2>
+      <MalioSelectCheckbox
+        v-model="labelValue"
+        :options="options"
+        displayTag="true"
+        empty-option-label=" "
+      />
+      </div>
+      <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec tag + label</h2>
+      <MalioSelectCheckbox
+        v-model="labelValue1"
+        :options="options"
+        displayTag="true"
+        label="Pays"
+        empty-option-label=" "
+      />
+    </div>
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec label</h2>
       <MalioSelectCheckbox
@@ -138,6 +156,7 @@ const longOptions = [
 
 const basicValue = ref<Array<string | number>>([])
 const labelValue = ref<Array<string | number>>([])
+const labelValue1 = ref<Array<string | number>>([])
 const selectedValue = ref<Array<string | number>>(['fr'])
 const hintValue = ref<Array<string | number>>([])
 const errorValue = ref<Array<string | number>>([])

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,