library_components/src/components/Ml/DropDown/MlDropDown.vue

<template>
  <div v-click-outside="closeDropDown" :class="rootPT">
    <button
      id="dropdownDefaultButton"
      data-dropdown-toggle="dropdown"
      :class="titlePT"
      type="button"
      @click="
        useRipple($event, props.ripple);
        openMenu();
      "
    >
      {{ props.title }}
      <span :class="arrowPT">
        <ml-arrow></ml-arrow>
      </span>
    </button>
    <div v-show="isMenuOpen" :class="dropdownPT" @click="isOpen = false">
      <slot />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { useRipple } from "#imports";
import { twMerge } from "tailwind-merge";
import type { DropDownProps, DropDownPT } from "./types";

const props = withDefaults(defineProps<DropDownProps>(), {
  isOpen: false,
});

const PT = {
  root: {
    class: "relative pointer",
  },
  dropdown: {
    class:
      "z-10 absolute bg-white rounded-3xl pointer text-black text-center",
  },
  title: {
    class:
      "text-black inline-flex items-center rounded-lg font-medium text-center text-base pointer ",
  },
  arrow: {
    class: "px-2",
  },
} as DropDownPT;

const rootPT = computed(() => twMerge(PT.root?.class, props.pt?.root?.class));
const titlePT = computed(() =>
  twMerge(PT.title?.class, props.pt?.title?.class)
);
const dropdownPT = computed(() =>
  twMerge(PT.dropdown?.class, props.pt?.dropdown?.class)
);
const arrowPT = computed(() =>
  twMerge(PT.arrow?.class, props.pt?.arrow?.class)
);

const isOpen = ref(props.isOpen);

function openMenu() {
  isOpen.value = !isOpen.value;
}

function closeDropDown() {
  isOpen.value = false;
}

const isMenuOpen = computed(() => isOpen.value);
</script>