32 lines
2.2 KiB
Vue
32 lines
2.2 KiB
Vue
<script setup>
|
|
import { useDropdown } from '~/composables/useDropdown';
|
|
const { dropdownState, closeDropdown } = useDropdown();
|
|
const menuRef = ref(null);
|
|
|
|
const currentItems = computed(() => dropdownState.itemsFactory?.());
|
|
|
|
useClickOutside(menuRef, closeDropdown);
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100"
|
|
leave-active-class="transition-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
|
|
<div v-if="dropdownState.open" ref="menuRef"
|
|
:style="{ top: `${dropdownState.y}px`, left: `${dropdownState.x}px`, width: dropdownState.options?.width || 'auto', minWidth: dropdownState.options?.minWidth || 'auto', maxWidth: dropdownState.options?.maxWidth || 'auto', transform: `translate(${dropdownState.options?.placement === 'right' ? '-100%' : dropdownState.options?.placement === 'center' ? '-50%' : '0'}, ${dropdownState.options?.verticality === 'ascending' ? 'calc(-100% - 0.25rem)' : '0.25rem'})` }"
|
|
class="flex flex-col gap-1 fixed z-[100] bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-lg p-1.5 shadow-xl">
|
|
<!-- Render your items based on activeMenu.content -->
|
|
<button v-for="item in currentItems" @click="item.onClick(); closeDropdown()" :disabled="item.disabled"
|
|
class="disabled:opacity-50 disabled:cursor-not-allowed items-center gap-1 text-left px-3 py-1.5 text-sm hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
:class="{ 'text-red-600 hover:bg-red-600/20': item.danger, 'text-primary bg-[var(--color-hover)]': item.active }">
|
|
<span v-if="item.icon" :class="['w-4 h-4 shrink-0', item.icon]"></span>
|
|
<span class="text-sm whitespace-nowrap text-ellipsis max-w-full overflow-hidden">{{ item.label
|
|
}}</span>
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|