refactor: use floating ui for dropdowns

app/components/Dropdown.vue

@@ -1,30 +1,53 @@
-<script setup>
-import { useDropdown } from '~/composables/useDropdown';
-const { dropdownState, closeDropdown } = useDropdown();
-const menuRef = ref(null);
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useFloating, offset, flip, shift, autoUpdate, type Placement } from '@floating-ui/vue';
 
-const currentItems = computed(() => dropdownState.itemsFactory?.());
+const props = defineProps<{
+    placement?: Placement;
+    dropdownClass?: string;
+}>();
 
-useClickOutside(menuRef, closeDropdown);
+const isOpen = ref(false);
+const triggerRef = ref(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 } = useFloating(triggerRef, dropdownRef, {
+    placement: props.placement ?? 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(6), flip(), shift({ padding: 10 })],
+    transform: false,
+});
+
+const toggle = () => (isOpen.value = !isOpen.value);
+const close = () => (isOpen.value = false);
+
+defineExpose({ close });
+
+onMounted(() => {
+    console.log(triggerRef.value);
+})
 </script>
 
 <template>
+    <slot :setRef="setTriggerRef" :isOpen="isOpen" :toggle="toggle" />
+
     <Teleport to="body">
-        <Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+        <Transition enter-active-class="transition-[opacity,transform] duration-150 ease-out"
             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-active-class="transition-[opacity,transform] duration-100 ease-in"
             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 v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="fixed z-9999" :class="dropdownClass">
+                <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>