54 lines
1.7 KiB
Vue
54 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
|
|
|
const props = defineProps<{
|
|
buttonClasses: [string];
|
|
listItems: [[object]];
|
|
align: "left" | "right";
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "select", data: object): 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="absolute mt-2 px-6 w-56 w-max-full origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
:class="[align === 'left' ? 'left-0' : 'right-0']"
|
|
>
|
|
<div v-for="section in listItems" :key="section" class="">
|
|
<div v-for="item in section" :key="item" class="px-1 py-1">
|
|
<MenuItem>
|
|
<button
|
|
class="text-black group flex w-full items-center px-0 py-2 text-sm"
|
|
@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>
|
|
</div>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
</template>
|