Fix popouts not working (#3028)

* Attempt at fixing popouts? no idea if will work

* Try with no theme?

* Revert "Try with no theme?"

This reverts commit 7fb3a6c.

* Try to remove triggers from theme

* Remove duplicate plugin

* Fix version issue

* Try to remove theme and use default theme

* Add back theme for later fixing

* Lint

---------

Co-authored-by: Geometrically <[email protected]>

apps/app-frontend/src/main.js

@@ -44,7 +44,6 @@ app.use(FloatingVue, {
       placement: 'bottom-end',
       instantMove: true,
       distance: 8,
-      triggers: ['click'],
     },
   },
 })

apps/frontend/package.json

@@ -46,7 +46,7 @@
     "ansi-to-html": "^0.7.2",
     "dayjs": "^1.11.7",
     "dompurify": "^3.1.7",
-    "floating-vue": "2.0.0-beta.20",
+    "floating-vue": "^5.2.2",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.7.0",
     "iso-3166-1": "^2.1.1",

apps/frontend/src/plugins/floating-vue.js

@@ -1,4 +1,5 @@
 import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css";
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(FloatingVue, {
@@ -8,7 +9,6 @@ export default defineNuxtPlugin((nuxtApp) => {
         placement: "bottom-end",
         instantMove: true,
         distance: 8,
-        triggers: ["click"],
       },
     },
   });

packages/assets/styles/classes.scss

@@ -1205,22 +1205,23 @@ select {
   border-top-right-radius: var(--radius-md) !important;
 }
 
+.v-popper--theme-dropdown,
 .v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
   .v-popper__inner {
-    border: 1px solid var(--color-button-bg);
-    padding: var(--gap-sm);
-    width: fit-content;
-    border-radius: var(--radius-md);
-    background-color: var(--color-raised-bg);
-    box-shadow: var(--shadow-floating);
+    border: 1px solid var(--color-button-bg) !important;
+    padding: var(--gap-sm) !important;
+    width: fit-content !important;
+    border-radius: var(--radius-md) !important;
+    background-color: var(--color-raised-bg) !important;
+    box-shadow: var(--shadow-floating) !important;
   }
 
   .v-popper__arrow-outer {
-    border-color: var(--color-button-bg);
+    border-color: var(--color-button-bg) !important;
   }
 
   .v-popper__arrow-inner {
-    border-color: var(--color-raised-bg);
+    border-color: var(--color-raised-bg) !important;
   }
 }
 

packages/ui/package.json

@@ -31,7 +31,7 @@
     "@types/markdown-it": "^14.1.1",
     "apexcharts": "^3.44.0",
     "dayjs": "^1.11.10",
-    "floating-vue": "2.0.0-beta.24",
+    "floating-vue": "^5.2.2",
     "highlight.js": "^11.9.0",
     "markdown-it": "^13.0.2",
     "qrcode.vue": "^3.4.1",

packages/ui/src/components/base/PopoutMenu.vue

@@ -1,7 +1,6 @@
 <template>
   <Dropdown
     ref="dropdown"
-    theme="ribbit-popout"
     no-auto-focus
     :aria-id="dropdownId || null"
     @hide="focusTrigger"
@@ -10,19 +9,19 @@
     <button ref="trigger" v-bind="$attrs" v-tooltip="tooltip">
       <slot></slot>
     </button>
-    <template #popper="{ hide }">
-      <button class="dummy-button" @focusin="hideAndFocusTrigger(hide)"></button>
+    <template #popper="{ hide: hideFunction }">
+      <button class="dummy-button" @focusin="hideAndFocusTrigger(hideFunction)"></button>
       <div ref="menu" class="contents">
         <slot name="menu"> </slot>
       </div>
-      <button class="dummy-button" @focusin="hideAndFocusTrigger(hide)"></button>
+      <button class="dummy-button" @focusin="hideAndFocusTrigger(hideFunction)"></button>
     </template>
   </Dropdown>
 </template>
 
 <script setup>
 import { Dropdown } from 'floating-vue'
-import { ref, defineOptions } from 'vue'
+import { ref } from 'vue'
 
 const trigger = ref()
 const menu = ref()