fix: refonte du composant Drawer (#51)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #51
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/drawer/Drawer.vue

@@ -1,59 +1,76 @@
 <template>
   <Teleport to="body">
     <Transition
-      name="drawer"
+      :name="`drawer-${side}`"
       appear
       @after-leave="isRendered = false"
     >
       <div
         v-if="isRendered && isOpen"
         :id="componentId"
-        class="fixed inset-0 z-50 flex justify-end"
+        class="fixed inset-0 z-50 flex"
+        :class="side === 'right' ? 'justify-end' : 'justify-start'"
         v-bind="attrs"
       >
         <div
-          class="absolute inset-0 bg-black/40"
+          :class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
           data-test="backdrop"
-          @click="close"
+          @click="onBackdropClick"
         />
 
         <div
+          ref="panelRef"
           :class="twMerge(
-            'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
+            'relative z-50 flex h-full w-full max-w-md flex-col bg-white',
             drawerClass,
           )"
           role="dialog"
-          :aria-modal="true"
-          :aria-labelledby="titleId"
+          aria-modal="true"
+          :aria-labelledby="hasHeader ? headerId : undefined"
+          :aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
+          tabindex="-1"
           data-test="panel"
+          @keydown="onKeydown"
         >
-          <div class="flex items-center justify-between px-5 pb-8 pt-8">
-            <h2
-              :id="titleId"
-              class="text-[32px] font-semibold text-m-primary"
+          <div
+            v-if="hasHeader || showClose"
+            :class="twMerge('flex items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
+            data-test="header"
+          >
+            <div
+              :id="headerId"
+              class="min-w-0 flex-1"
+              data-test="header-content"
             >
-              {{ title }}
-            </h2>
+              <slot name="header" />
+            </div>
             <button
               v-if="showClose"
               type="button"
               aria-label="Fermer"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
+              class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
               data-test="close-button"
               @click="close"
             >
               <IconifyIcon
-                icon="mdi:close"
-                :width="24"
-                :height="24"
+                icon="mdi:cancel-bold"
+                :width="16"
+                :height="16"
               />
             </button>
           </div>
-
           <div
-            class="flex-1 overflow-y-auto px-5"
+            :class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
+            data-test="body"
           >
             <slot />
+            <div
+              v-if="$slots.footer"
+              :class="footerClass"
+              data-test="footer"
+            >
+              <slot name="footer" />
+            </div>
           </div>
         </div>
       </div>
@@ -62,7 +79,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useAttrs, useId, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useAttrs,
+  useId,
+  useSlots,
+  watch,
+} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { twMerge } from 'tailwind-merge'
 
@@ -72,68 +99,195 @@ const props = withDefaults(
   defineProps<{
     id?: string
     modelValue?: boolean
-    title?: string
+    side?: 'right' | 'left'
     showClose?: boolean
+    dismissable?: boolean
+    closeOnEscape?: boolean
+    ariaLabel?: string
     drawerClass?: string
+    overlayClass?: string
+    headerClass?: string
+    bodyClass?: string
+    footerClass?: string
   }>(),
   {
     id: '',
     modelValue: undefined,
-    title: '',
+    side: 'right',
     showClose: true,
+    dismissable: true,
+    closeOnEscape: true,
+    ariaLabel: '',
     drawerClass: '',
+    overlayClass: '',
+    headerClass: '',
+    bodyClass: '',
+    footerClass: '',
   },
 )
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
+  (e: 'close'): void
 }>()
 
 const attrs = useAttrs()
 const generatedId = useId()
 
 const componentId = computed(() => props.id || `malio-drawer-${generatedId}`)
-const titleId = computed(() => `${componentId.value}-title`)
+
+const slots = useSlots()
+const headerId = computed(() => `${componentId.value}-header`)
+const hasHeader = computed(() => !!slots.header)
 
 const isControlled = computed(() => props.modelValue !== undefined)
 const localValue = ref(false)
-
 const isOpen = computed(() =>
   isControlled.value ? props.modelValue! : localValue.value,
 )
-
 const isRendered = ref(isOpen.value)
 
+const panelRef = ref<HTMLElement | null>(null)
+
+let previouslyFocused: HTMLElement | null = null
+// Per-instance flag: true while this drawer holds a scroll-lock count slot.
+let lockedByThisInstance = false
+
+function getFocusable(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
+    ),
+  ).filter((el) => el.tabIndex !== -1)
+}
+
+function onOpen() {
+  previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
+  if (!lockedByThisInstance) {
+    lockedByThisInstance = true
+    openDrawerCount++
+    if (openDrawerCount === 1) {
+      document.body.style.overflow = 'hidden'
+    }
+  }
+  nextTick(() => {
+    const panel = panelRef.value
+    if (!panel) return
+    const focusable = getFocusable(panel)
+    ;(focusable[0] ?? panel).focus()
+  })
+}
+
+function onClose() {
+  if (lockedByThisInstance) {
+    lockedByThisInstance = false
+    openDrawerCount = Math.max(0, openDrawerCount - 1)
+    if (openDrawerCount === 0) {
+      document.body.style.overflow = ''
+    }
+  }
+  previouslyFocused?.focus?.()
+  previouslyFocused = null
+}
+
 watch(isOpen, (val) => {
-  if (val) isRendered.value = true
+  if (val) {
+    isRendered.value = true
+    onOpen()
+  }
+  else {
+    onClose()
+  }
 })
 
-function close() {
-  if (!isControlled.value) {
-    localValue.value = false
+onMounted(() => {
+  if (isOpen.value) onOpen()
+})
+
+onBeforeUnmount(() => {
+  // If this instance is still holding a scroll-lock slot, release it.
+  if (lockedByThisInstance) {
+    lockedByThisInstance = false
+    openDrawerCount = Math.max(0, openDrawerCount - 1)
+    if (openDrawerCount === 0) {
+      document.body.style.overflow = ''
+    }
   }
+})
+
+function onBackdropClick() {
+  if (props.dismissable) close()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.closeOnEscape) {
+    e.stopPropagation()
+    close()
+    return
+  }
+  if (e.key !== 'Tab') return
+
+  const panel = panelRef.value
+  if (!panel) return
+  const focusable = getFocusable(panel)
+  if (focusable.length === 0) {
+    e.preventDefault()
+    panel.focus()
+    return
+  }
+  const first = focusable[0]!
+  const last = focusable[focusable.length - 1]!
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault()
+    last.focus()
+  }
+  else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+function close() {
+  if (!isControlled.value) localValue.value = false
   emit('update:modelValue', false)
+  emit('close')
 }
 </script>
 
+<script lang="ts">
+// Shared across all MalioDrawer instances: only the last open drawer releases the body scroll-lock.
+let openDrawerCount = 0
+</script>
+
 <style scoped>
-.drawer-enter-active,
-.drawer-leave-active {
+.drawer-right-enter-active,
+.drawer-right-leave-active,
+.drawer-left-enter-active,
+.drawer-left-leave-active {
   transition: opacity 0.2s ease;
 }
 
-.drawer-enter-active > div:last-child,
-.drawer-leave-active > div:last-child {
+.drawer-right-enter-active > div:last-child,
+.drawer-right-leave-active > div:last-child,
+.drawer-left-enter-active > div:last-child,
+.drawer-left-leave-active > div:last-child {
   transition: transform 0.3s ease;
 }
 
-.drawer-enter-from,
-.drawer-leave-to {
+.drawer-right-enter-from,
+.drawer-right-leave-to,
+.drawer-left-enter-from,
+.drawer-left-leave-to {
   opacity: 0;
 }
 
-.drawer-enter-from > div:last-child,
-.drawer-leave-to > div:last-child {
+.drawer-right-enter-from > div:last-child,
+.drawer-right-leave-to > div:last-child {
   transform: translateX(100%);
 }
+
+.drawer-left-enter-from > div:last-child,
+.drawer-left-leave-to > div:last-child {
+  transform: translateX(-100%);
+}
 </style>