Intégration fonctionnalites V1

resources/js/Components/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 
 const props = defineProps({
     align: {
@@ -16,47 +16,65 @@ const props = defineProps({
     },
 });
 
+const open = ref(false);
+const dropdownRef = ref(null);
+
 const closeOnEscape = (e) => {
     if (open.value && e.key === 'Escape') {
         open.value = false;
     }
 };
 
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
-onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+const closeOnClickOutside = (e) => {
+    if (open.value && dropdownRef.value && !dropdownRef.value.contains(e.target)) {
+        open.value = false;
+    }
+};
+
+watch(open, (isOpen) => {
+    if (isOpen) {
+        document.addEventListener('keydown', closeOnEscape);
+        document.addEventListener('click', closeOnClickOutside);
+    } else {
+        document.removeEventListener('keydown', closeOnEscape);
+        document.removeEventListener('click', closeOnClickOutside);
+    }
+});
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape);
+    document.removeEventListener('click', closeOnClickOutside);
+});
 
 const widthClass = computed(() => {
-    return {
+    const widths = {
         48: 'w-48',
-    }[props.width.toString()];
+        56: 'w-56',
+        64: 'w-64',
+        72: 'w-72',
+    };
+
+    return widths[props.width.toString()] ?? 'w-48';
 });
 
 const alignmentClasses = computed(() => {
     if (props.align === 'left') {
         return 'ltr:origin-top-left rtl:origin-top-right start-0';
-    } else if (props.align === 'right') {
-        return 'ltr:origin-top-right rtl:origin-top-left end-0';
-    } else {
-        return 'origin-top';
     }
-});
+    if (props.align === 'right') {
+        return 'ltr:origin-top-right rtl:origin-top-left end-0';
+    }
 
-const open = ref(false);
+    return 'origin-top';
+});
 </script>
 
 <template>
-    <div class="relative">
-        <div @click="open = !open">
+    <div ref="dropdownRef" class="relative">
+        <div @click.stop="open = !open">
             <slot name="trigger" />
         </div>
 
-        <!-- Full Screen Dropdown Overlay -->
-        <div
-            v-show="open"
-            class="fixed inset-0 z-40"
-            @click="open = false"
-        ></div>
-
         <Transition
             enter-active-class="transition ease-out duration-200"
             enter-from-class="opacity-0 scale-95"
@@ -69,8 +87,6 @@ const open = ref(false);
                 v-show="open"
                 class="absolute z-50 mt-2 rounded-md shadow-lg"
                 :class="[widthClass, alignmentClasses]"
-                style="display: none"
-                @click="open = false"
             >
                 <div
                     class="rounded-md ring-1 ring-black ring-opacity-5"