<script setup>
import { Dropdown } from "flowbite";
import { onMounted } from "vue";

const triggerEl = Math.random().toString(20).substr(2, 10);
const target = Math.random().toString(20).substr(2, 10);
let dropdown = false;
onMounted(() => {
  dropdown = new Dropdown(
    document.getElementById(target),
    document.getElementById(triggerEl)
  );
});
defineProps({
  trigger: {
    type: String,
    default: "click",
  },
  hideOnClick: {
    type: Boolean,
    default: true,
  },
});
</script>
<template>
  <div
    :id="triggerEl"
    aria-expanded="false"
    class="cursor-pointer"
    :data-dropdown-toggle="target"
    :data-dropdown-trigger="trigger"
  >
    <slot name="trigger" />
  </div>

  <div
    class="z-50 hidden"
    :id="target"
    data-popper-placement="bottom"
    style="
      position: absolute;
      inset: 0px auto auto 0px;
      margin-top: -100px;
      transform: translate(2507px, 61px);
    "
    @click="hideOnClick ? dropdown.hide() : false"
  >
    <slot name="content" />
  </div>
</template>
