<script setup>
import { onClickOutside, useVModel } from "@vueuse/core";
import { ref } from "vue";
const props = defineProps({
  modelValue: { type: Boolean, required: false },
  direction: { type: String, required: false, default: "start" }
});
const emit = defineEmits([]);
const enabled = useVModel(props, "modelValue", emit, { passive: true });
const el = ref();
onClickOutside(el, () => {
  enabled.value = false;
});
</script>

<template>
  <div ref="el" class="relative">
    <slot name="trigger" :enabled="enabled" :click="() => enabled = !enabled">
      <NButton @click="enabled = !enabled">
        Dropdown
      </NButton>
    </slot>

    <div
      class="absolute z-10 border n-border-base rounded n-bg-base shadow n-transition"
      :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1', direction === 'end' ? 'right-0' : 'left-0']"
    >
      <slot />
    </div>
  </div>
</template>
