53 lines
1.6 KiB
Vue
53 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownListItem } from "@/types";
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
|
|
|
defineProps<{
|
|
buttonClasses: [string] | [];
|
|
listItems: DropdownListItem[];
|
|
align: "left" | "right";
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "select", data: any): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Menu as="div" class="relative inline-block text-left">
|
|
<div>
|
|
<MenuButton :class="buttonClasses">
|
|
<slot></slot>
|
|
</MenuButton>
|
|
</div>
|
|
|
|
<transition
|
|
enter-active-class="transition duration-100 ease-out"
|
|
enter-from-class="transform scale-95 opacity-0"
|
|
enter-to-class="transform scale-100 opacity-100"
|
|
leave-active-class="transition duration-75 ease-in"
|
|
leave-from-class="transform scale-100 opacity-100"
|
|
leave-to-class="transform scale-95 opacity-0"
|
|
>
|
|
<MenuItems
|
|
class="w-max-full absolute mt-2 w-56 origin-top-right divide-y divide-gray-500 bg-white px-6 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
:class="[align === 'left' ? 'left-0' : 'right-0']"
|
|
>
|
|
<div v-for="item in listItems" :key="item.title" class="px-1 py-1">
|
|
<MenuItem>
|
|
<button
|
|
class="group flex w-full items-center px-0 py-2 text-sm text-black"
|
|
@click="emit('select', item.data)"
|
|
>
|
|
<span class="inline-block pr-2">
|
|
<component :is="item.icon" v-if="item.icon"></component>
|
|
</span>
|
|
{{ item.title }}
|
|
</button>
|
|
</MenuItem>
|
|
</div>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
</template>
|