<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>
