feat : fermeture backdrop dismissable du MalioDrawer

app/components/malio/drawer/Drawer.test.ts

@@ -173,4 +173,32 @@ describe('MalioDrawer', () => {
     expect(footer.classes()).toContain('sticky')
     expect(footer.classes()).toContain('bottom-0')
   })
+
+  it('aligns to the right by default', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    expect(wrapper.find('.fixed').classes()).toContain('justify-end')
+  })
+
+  it('aligns to the left when side is "left"', () => {
+    const wrapper = mountComponent({ modelValue: true, side: 'left' })
+    expect(wrapper.find('.fixed').classes()).toContain('justify-start')
+  })
+
+  it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
+    const wrapper = mountComponent({ modelValue: true })
+    await wrapper.find('[data-test="backdrop"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+
+  it('does not close on backdrop click when dismissable is false', async () => {
+    const wrapper = mountComponent({ modelValue: true, dismissable: false })
+    await wrapper.find('[data-test="backdrop"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('applies overlayClass to the backdrop', () => {
+    const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
+    expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
+  })
 })

app/components/malio/drawer/Drawer.vue

@@ -15,6 +15,7 @@
         <div
           :class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
           data-test="backdrop"
+          @click="onBackdropClick"
         />
 
         <div
@@ -137,6 +138,10 @@ const isRendered = ref(isOpen.value)
 
 const panelRef = ref<HTMLElement | null>(null)
 
+function onBackdropClick() {
+  if (props.dismissable) close()
+}
+
 function close() {
   if (!isControlled.value) localValue.value = false
   emit('update:modelValue', false)