<template>
    <div class="relative" v-click-outside="closeDropdown">
        <slot name="button" v-bind:toggle="toggle"></slot>
        <transition
            enter-active-class="transition-all transition-fastest ease-out-quad"
            leave-active-class="transition-all transition-faster ease-in-quad"
            enter-class="opacity-0 scale-70"
            enter-to-class="opacity-100 scale-100"
            leave-class="opacity-100 scale-100"
            leave-to-class="opacity-0 scale-70"
        >
            <div v-if="open" class="absolute origin-top-right w-full right-0" style="min-width: 200px;">
                <div class="bg-white rounded shadow overflow-hidden">
                    <slot name="dropdown"></slot>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                open: false,
            }
        },

        events: {
            closeDropdown(event) {
                this.open = false;
            }
        },

        methods: {
            toggle() {
                this.open = !this.open;
            },

            closeDropdown(event) {
                this.open = false;
            },
        },
    }
</script>