From cfdc4048713b570d5aef6f83e729312692d6d889 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 21 May 2026 16:35:17 +0200
Subject: [PATCH] feat : fermeture backdrop dismissable du MalioDrawer

---
 app/components/malio/drawer/Drawer.test.ts | 28 ++++++++++++++++++++++
 app/components/malio/drawer/Drawer.vue     |  5 ++++
 2 files changed, 33 insertions(+)

diff --git a/app/components/malio/drawer/Drawer.test.ts b/app/components/malio/drawer/Drawer.test.ts
index db9d6df..29874ab 100644
--- a/app/components/malio/drawer/Drawer.test.ts
+++ b/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')
+  })
 })
diff --git a/app/components/malio/drawer/Drawer.vue b/app/components/malio/drawer/Drawer.vue
index fdddf87..c2aca8f 100644
--- a/app/components/malio/drawer/Drawer.vue
+++ b/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)