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 7fb3a6c6a6233d091d235364d072ffbbc7b7250a.

* 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 <18202329+Geometrically@users.noreply.github.com>

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"],
       },
     },
   });

apps/frontend/src/plugins/tooltip.js

@@ -1,6 +0,0 @@
-import FloatingVue from "floating-vue";
-import "floating-vue/dist/style.css";
-
-export default defineNuxtPlugin(({ vueApp }) => {
-  vueApp.use(FloatingVue);
-});

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);
+    border: 1px solid var(--color-button-bg) !important;
-    padding: var(--gap-sm);
+    padding: var(--gap-sm) !important;
-    width: fit-content;
+    width: fit-content !important;
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md) !important;
-    background-color: var(--color-raised-bg);
+    background-color: var(--color-raised-bg) !important;
-    box-shadow: var(--shadow-floating);
+    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 }">
+    <template #popper="{ hide: hideFunction }">
-      <button class="dummy-button" @focusin="hideAndFocusTrigger(hide)"></button>
+      <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()

pnpm-lock.yaml

@@ -228,8 +228,8 @@ importers:
         specifier: ^3.1.7
         version: 3.1.7
       floating-vue:
-        specifier: 2.0.0-beta.20
+        specifier: ^5.2.2
-        version: 2.0.0-beta.20(vue@3.5.13(typescript@5.5.3))
+        version: 5.2.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.28.1))(vue@3.5.13(typescript@5.5.3))
       fuse.js:
         specifier: ^6.6.2
         version: 6.6.2
@@ -415,8 +415,8 @@ importers:
         specifier: ^1.11.10
         version: 1.11.11
       floating-vue:
-        specifier: 2.0.0-beta.24
+        specifier: ^5.2.2
-        version: 2.0.0-beta.24(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.4))(vue@3.5.13(typescript@5.5.4))
+        version: 5.2.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.4))(vue@3.5.13(typescript@5.5.4))
       highlight.js:
         specifier: ^11.9.0
         version: 11.9.0
@@ -1482,15 +1482,9 @@ packages:
   '@expressive-code/plugin-text-markers@0.35.6':
     resolution: {integrity: sha512-/k9eWVZSCs+uEKHR++22Uu6eIbHWEciVHbIuD8frT8DlqTtHYaaiwHPncO6KFWnGDz5i/gL7oyl6XmOi/E6GVg==}
 
-  '@floating-ui/core@0.3.1':
-    resolution: {integrity: sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==}
-
   '@floating-ui/core@1.6.4':
     resolution: {integrity: sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==}
 
-  '@floating-ui/dom@0.1.10':
-    resolution: {integrity: sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==}
-
   '@floating-ui/dom@1.1.1':
     resolution: {integrity: sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==}
 
@@ -4529,20 +4523,6 @@ packages:
     resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
     engines: {node: '>=8'}
 
-  floating-vue@2.0.0-beta.20:
-    resolution: {integrity: sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==}
-    peerDependencies:
-      vue: ^3.2.0
-
-  floating-vue@2.0.0-beta.24:
-    resolution: {integrity: sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==}
-    peerDependencies:
-      '@nuxt/kit': ^3.2.0
-      vue: ^3.2.0
-    peerDependenciesMeta:
-      '@nuxt/kit':
-        optional: true
-
   floating-vue@5.2.2:
     resolution: {integrity: sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==}
     peerDependencies:
@@ -9261,16 +9241,10 @@ snapshots:
     dependencies:
       '@expressive-code/core': 0.35.6
 
-  '@floating-ui/core@0.3.1': {}
-
   '@floating-ui/core@1.6.4':
     dependencies:
       '@floating-ui/utils': 0.2.4
 
-  '@floating-ui/dom@0.1.10':
-    dependencies:
-      '@floating-ui/core': 0.3.1
-
   '@floating-ui/dom@1.1.1':
     dependencies:
       '@floating-ui/core': 1.6.4
@@ -10135,7 +10109,7 @@ snapshots:
 
   '@nuxtjs/eslint-config-typescript@12.1.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3)':
     dependencies:
-      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))
+      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3)
       '@typescript-eslint/parser': 6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3)
       eslint: 9.13.0(jiti@2.4.1)
@@ -10148,10 +10122,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))':
+  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))':
     dependencies:
       eslint: 9.13.0(jiti@2.4.1)
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-promise@6.4.0(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-n@15.7.0(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-promise@6.4.0(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-n: 15.7.0(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-node: 11.1.0(eslint@9.13.0(jiti@2.4.1))
@@ -12931,10 +12905,10 @@ snapshots:
     dependencies:
       eslint: 9.13.0(jiti@2.4.1)
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-promise@6.4.0(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1)):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-n@15.7.0(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-promise@6.4.0(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1)):
     dependencies:
       eslint: 9.13.0(jiti@2.4.1)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.16.1(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint@9.13.0(jiti@2.4.1))
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-n: 15.7.0(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-promise: 6.4.0(eslint@9.13.0(jiti@2.4.1))
 
@@ -12960,7 +12934,7 @@ snapshots:
       debug: 4.3.5
       enhanced-resolve: 5.17.0
       eslint: 9.13.0(jiti@2.4.1)
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.16.1(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint@9.13.0(jiti@2.4.1))
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
@@ -12972,7 +12946,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1)):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -13563,13 +13537,7 @@ snapshots:
 
   flattie@1.1.1: {}
 
-  floating-vue@2.0.0-beta.20(vue@3.5.13(typescript@5.5.3)):
+  floating-vue@5.2.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.4))(vue@3.5.13(typescript@5.5.4)):
-    dependencies:
-      '@floating-ui/dom': 0.1.10
-      vue: 3.5.13(typescript@5.5.3)
-      vue-resize: 2.0.0-alpha.1(vue@3.5.13(typescript@5.5.3))
-
-  floating-vue@2.0.0-beta.24(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.4))(vue@3.5.13(typescript@5.5.4)):
     dependencies:
       '@floating-ui/dom': 1.1.1
       vue: 3.5.13(typescript@5.5.4)
@@ -13577,6 +13545,14 @@ snapshots:
     optionalDependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.4)
 
+  floating-vue@5.2.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.28.1))(vue@3.5.13(typescript@5.5.3)):
+    dependencies:
+      '@floating-ui/dom': 1.1.1
+      vue: 3.5.13(typescript@5.5.3)
+      vue-resize: 2.0.0-alpha.1(vue@3.5.13(typescript@5.5.3))
+    optionalDependencies:
+      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.28.1)
+
   floating-vue@5.2.2(@nuxt/kit@3.14.1592(magicast@0.3.5))(vue@3.5.13(typescript@5.5.4)):
     dependencies:
       '@floating-ui/dom': 1.1.1