<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 { 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 dark:bg-BgDark/85 rounded-3xl pointer text-black dark:text-white text-center' }, title: { class: 'text-black dark:text-BgLight 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>