diff --git a/.playground/pages/composant/selectCheckbox.vue b/.playground/pages/composant/selectCheckbox.vue
index 8652f26..cc1df30 100644
--- a/.playground/pages/composant/selectCheckbox.vue
+++ b/.playground/pages/composant/selectCheckbox.vue
@@ -8,7 +8,25 @@
empty-option-label="Aucune selection"
/>
-
+
+
Avec tag
+
+
+
+
Avec tag + label
+
+
Avec label
>([])
const labelValue = ref>([])
+const labelValue1 = ref>([])
const selectedValue = ref>(['fr'])
const hintValue = ref>([])
const errorValue = ref>([])
diff --git a/app/components/malio/SelectCheckbox.test.ts b/app/components/malio/SelectCheckbox.test.ts
index 9ea4e7b..0092f16 100644
--- a/app/components/malio/SelectCheckbox.test.ts
+++ b/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')
+ })
})
diff --git a/app/components/malio/SelectCheckbox.vue b/app/components/malio/SelectCheckbox.vue
index 37e87e7..7778882 100644
--- a/app/components/malio/SelectCheckbox.vue
+++ b/app/components/malio/SelectCheckbox.vue
@@ -63,20 +63,32 @@
- {{ option.label }}
+ {{ option.label }}
+ {{ emptyOptionLabel }}
+
+
+