Primer commit

resources/js/Components/Dropdown.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+    align: {
+        type: String,
+        default: 'right',
+    },
+    width: {
+        type: String,
+        default: '48',
+    },
+    contentClasses: {
+        type: String,
+        default: 'dropdown-menu',
+    },
+});
+
+const closeOnEscape = (e) => {
+    if (open.value && e.key === 'Escape') {
+        open.value = false;
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+
+const open = ref(false);
+</script>
+
+<template>
+    <div class="position-relative">
+        <div @click="open = !open">
+            <slot name="trigger" />
+        </div>
+
+        <div v-show="open" class="dropdown-menu show position-absolute mt-2" :class="align === 'left' ? 'start-0' : 'end-0'" style="display: none" @click="open = false">
+            <div :class="contentClasses">
+                <slot name="content" />
+            </div>
+        </div>
+    </div>
+</template>