feat: transition dropdown

refactor: attempt to fix some bugs

components/UserProfile.ce.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
-import { useClipboard } from '@vueuse/core';
+import { OnClickOutside } from '@vueuse/components'
 
 import { useDropdownStore } from '~/store/dropdown';
 import { useServerStore } from '~/store/server';
@@ -24,9 +24,13 @@ const { name, description, lanIp } = storeToRefs(serverStore);
 
 /**
  * Close dropdown when clicking outside
+ * @fix ignore not working
  */
-const dropdownParent = ref(null);
-onClickOutside(dropdownParent, (_e) => dropdownVisible.value && dropdownStore.dropdownHide());
+const clickOutsideTarget = ref();
+const clickOutsideIgnoreTarget = ref();
+const outsideDropdown = () => {
+  if (dropdownVisible.value) return dropdownStore.dropdownToggle();
+};
 
 /**
  * Copy LAN IP on server name click
@@ -95,9 +99,11 @@ onBeforeMount(() => {
 
       <div class="block w-2px h-24px bg-grey-mid"></div>
 
-      <div ref="dropdownParent" class="flex items-center justify-end h-full">
-        <UpcDropdownTrigger />
-        <UpcDropdown ref="dropdownIgnoreClickOutside" />
+      <div class="flex items-center justify-end h-full">
+        <OnClickOutside @trigger="outsideDropdown" :options="{ ignore: [clickOutsideIgnoreTarget] }">
+          <UpcDropdownTrigger ref="clickOutsideIgnoreTarget" />
+          <UpcDropdown ref="clickOutsideTarget" />
+        </OnClickOutside>
       </div>
     </div>
   </div>

components/UserProfile/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
+import { TransitionRoot } from '@headlessui/vue';
 import { storeToRefs } from 'pinia';
 
 import { useDropdownStore } from '~/store/dropdown';
@@ -17,8 +17,19 @@ const showLaunchpad = computed(() => pluginInstalled.value && !registered.value)
 </script>
 
 <template>
-  <UpcDropdownWrapper v-if="dropdownVisible" class="DropdownWrapper_blip text-beta absolute z-30 top-full right-0 transition-all">
-    <UpcDropdownContent v-if="showDefaultContent" />
-    <UpcDropdownLaunchpad v-else />
-  </UpcDropdownWrapper>
+  <TransitionRoot
+    as="template"
+    :show="dropdownVisible"
+    enter="transition-all duration-200"
+    enter-from="opacity-0 translate-y-[16px]"
+    enter-to="opacity-100"
+    leave="transition-all duration-150"
+    leave-from="opacity-100"
+    leave-to="opacity-0 translate-y-[16px]"
+  >
+    <UpcDropdownWrapper class="DropdownWrapper_blip text-beta absolute z-30 top-full right-0 transition-all">
+      <UpcDropdownContent v-if="showDefaultContent" />
+      <UpcDropdownLaunchpad v-else />
+    </UpcDropdownWrapper>
+  </TransitionRoot>
 </template>

components/UserProfile/DropdownTrigger.vue

@@ -36,21 +36,19 @@ const title = computed((): string => {
 </script>
 
 <template>
-  <div class="relative flex items-center justify-end h-full">
-    <button
-      @click.stop="dropdownStore.dropdownToggle()"
-      class="group text-18px hover:text-alpha focus:text-alpha border border-transparent flex flex-row justify-end items-center h-full gap-x-8px outline-none focus:outline-none"
-      :title="title"
-    >
-      <InformationCircleIcon v-if="pluginOutdated" class="text-red fill-current relative w-24px h-24px" />
-      <ExclamationTriangleIcon class="text-red fill-current relative w-24px h-24px" />
+  <button
+    @click="dropdownStore.dropdownToggle()"
+    class="group text-18px hover:text-alpha focus:text-alpha border border-transparent relative flex flex-row justify-end items-center h-full gap-x-8px outline-none focus:outline-none"
+    :title="title"
+  >
+    <InformationCircleIcon v-if="pluginOutdated" class="text-red fill-current relative w-24px h-24px" />
+    <ExclamationTriangleIcon class="text-red fill-current relative w-24px h-24px" />
 
-      <span class="flex flex-row items-center gap-x-8px">
-        <span class="leading-none">{{ text }}</span>
-        <UpcDropdownTriggerMenuIcon :open="dropdownVisible" />
-      </span>
+    <span class="flex flex-row items-center gap-x-8px">
+      <span class="leading-none">{{ text }}</span>
+      <UpcDropdownTriggerMenuIcon :open="dropdownVisible" />
+    </span>
 
-      <BrandAvatar />
-    </button>
-  </div>
+    <BrandAvatar />
+  </button>
 </template>