72 lines
2.5 KiB
Vue
72 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useFloating, offset, flip, shift, autoUpdate, type Placement, hide } from '@floating-ui/vue';
|
|
|
|
const props = defineProps<{
|
|
placement?: Placement;
|
|
dropdownClass?: string;
|
|
}>();
|
|
|
|
const isOpen = ref(false);
|
|
const triggerRef = ref<HTMLElement | null>(null);
|
|
const dropdownRef = ref(null);
|
|
|
|
const setTriggerRef = (el: any) => {
|
|
if (el) {
|
|
// If it's a Vue component, get the DOM element via $el
|
|
triggerRef.value = el.$el ?? el;
|
|
}
|
|
};
|
|
|
|
const { floatingStyles, placement, middlewareData } = useFloating(triggerRef, dropdownRef, {
|
|
placement: props.placement ?? 'bottom-start',
|
|
whileElementsMounted: autoUpdate,
|
|
middleware: [offset(6), flip(), shift({ padding: 10 }), hide()],
|
|
transform: false,
|
|
});
|
|
|
|
const transformOrigin = computed(() => {
|
|
switch (placement.value.split('-')[0]) {
|
|
case 'top':
|
|
return 'transform-origin-bottom-center';
|
|
case 'bottom':
|
|
return 'transform-origin-top-center';
|
|
case 'left':
|
|
return 'transform-origin-right-center';
|
|
case 'right':
|
|
return 'transform-origin-left-center';
|
|
default:
|
|
return 'transform-origin-bottom-center';
|
|
}
|
|
});
|
|
|
|
const toggle = () => (isOpen.value = !isOpen.value);
|
|
const close = () => (isOpen.value = false);
|
|
|
|
defineExpose({ close });
|
|
</script>
|
|
|
|
<template>
|
|
<slot :setRef="setTriggerRef" :isOpen="isOpen" :toggle="toggle" />
|
|
|
|
<Teleport to="body">
|
|
<Transition
|
|
enter-active-class="transition-[opacity,transform] 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-[opacity,transform] 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="isOpen" ref="dropdownRef" :style="{
|
|
...floatingStyles,
|
|
visibility: middlewareData.hide?.referenceHidden
|
|
? 'hidden'
|
|
: 'visible',
|
|
}" class="fixed z-9999" :class="[dropdownClass, transformOrigin]">
|
|
<div v-click-outside="close"
|
|
class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1">
|
|
<slot name="dropdown" :close="close" />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|