Fix hovering bug

modrinth · Oct 20, 2023 · 01f942a · 01f942a
1 parent e4af972
commit 01f942a
Showing 1 changed file with 47 additions and 67 deletions.
diff --git a/lib/components/base/Hoverable.vue b/lib/components/base/Hoverable.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { ref } from 'vue'
+
 defineProps({
   position: {
     type: String,
@@ -12,14 +14,23 @@ defineProps({
 defineOptions({
   inheritAttrs: false,
 })
+
+const showPopup = ref(false)
 </script>
 
 <template>
-  <div class="popup-container" tabindex="-1">
+  <div
+    class="popup-container"
+    tabindex="-1"
+    @mouseover="showPopup = true"
+    @mouseleave="showPopup = false"
+  >
     <slot></slot>
-    <div class="popup-menu" :class="`position-${position}-${direction}`">
-      <slot name="popup" />
-    </div>
+    <transition name="fade-scale">
+      <div v-show="showPopup" class="popup-menu" :class="`position-${position}-${direction}`">
+        <slot name="popup" />
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -29,109 +40,78 @@ defineOptions({
 
   .popup-menu {
     position: absolute;
-    scale: 0.75;
     box-shadow: var(--shadow-floating);
     z-index: 10;
-    opacity: 0;
-    pointer-events: none;
-    transition: bottom 0.125s ease-in-out, top 0.125s ease-in-out, left 0.125s ease-in-out,
-      right 0.125s ease-in-out, opacity 0.125s ease-in-out, scale 0.125s ease-in-out;
 
     &.position-bottom-left {
       padding-top: var(--gap-sm);
-      top: calc(100% + var(--gap-sm) - 1rem);
-      right: -1rem;
+      top: 100%;
+      right: 0;
     }
 
     &.position-bottom-right {
       padding-top: var(--gap-sm);
-      top: calc(100% + var(--gap-sm) - 1rem);
-      left: -1rem;
+      top: 100%;
+      left: 0;
     }
 
     &.position-top-left {
       padding-bottom: var(--gap-sm);
-      bottom: calc(100% + var(--gap-sm) - 1rem);
-      right: -1rem;
+      bottom: 100%;
+      right: 0;
     }
 
     &.position-top-right {
       padding-bottom: var(--gap-sm);
-      bottom: calc(100% + var(--gap-sm) - 1rem);
-      left: -1rem;
+      bottom: 100%;
+      left: 0;
     }
 
     &.position-left-up {
       padding-right: var(--gap-sm);
-      bottom: -1rem;
-      right: calc(100% + var(--gap-sm) - 1rem);
+      bottom: 0;
+      right: 100%;
     }
 
     &.position-left-down {
       padding-right: var(--gap-sm);
-      top: -1rem;
-      right: calc(100% + var(--gap-sm) - 1rem);
+      top: 0;
+      right: 100%;
     }
 
     &.position-right-up {
       padding-left: var(--gap-sm);
-      bottom: -1rem;
-      left: calc(100% + var(--gap-sm) - 1rem);
+      bottom: 0;
+      left: 100%;
     }
 
     &.position-right-down {
       padding-left: var(--gap-sm);
-      top: -1rem;
-      left: calc(100% + var(--gap-sm) - 1rem);
+      top: 0;
+      left: 100%;
     }
   }
 }
 
-.popup-container:hover .popup-menu,
-.popup-menu:hover {
-  opacity: 1;
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+  transition: bottom 0.125s ease-in-out, top 0.125s ease-in-out, left 0.125s ease-in-out,
+    right 0.125s ease-in-out, opacity 0.125s ease-in-out, scale 0.125s ease-in-out;
+
   scale: 1;
   pointer-events: auto;
-  transition-delay: 0.5s;
-
-  &.position-bottom-left {
-    top: calc(100%);
-    right: 0;
-  }
-
-  &.position-bottom-right {
-    top: calc(100%);
-    left: 0;
-  }
-
-  &.position-top-left {
-    bottom: calc(100%);
-    right: 0;
-  }
-
-  &.position-top-right {
-    bottom: calc(100%);
-    left: 0;
-  }
-
-  &.position-left-up {
-    bottom: 0;
-    right: calc(100%);
-  }
-
-  &.position-left-down {
-    top: 0;
-    right: calc(100%);
-  }
+}
 
-  &.position-right-up {
-    bottom: 0;
-    left: calc(100%);
-  }
+.fade-scale-enter-from,
+.fade-scale-leave-to {
+  opacity: 0;
+  scale: 0.75; // starting scale
+}
 
-  &.position-right-down {
-    top: 0;
-    left: calc(100%);
-  }
+.fade-scale-enter-to,
+.fade-scale-leave-from {
+  transition-delay: 0.5s;
+  opacity: 1;
+  scale: 1; // ending scale
 }
 </style>