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>
This commit is contained in:
Prospector
2024-12-14 20:15:50 -08:00
committed by GitHub
parent 24271a2388
commit 283a915a12
8 changed files with 36 additions and 67 deletions

View File

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

View File

@@ -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",

View File

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

View File

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

View File

@@ -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;
}
}

View File

@@ -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",

View File

@@ -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()

64
pnpm-lock.yaml generated
View File

@@ -228,8 +228,8 @@ importers:
specifier: ^3.1.7
version: 3.1.7
floating-vue:
specifier: 2.0.0-beta.20
version: 2.0.0-beta.20(vue@3.5.13(typescript@5.5.3))
specifier: ^5.2.2
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
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))
specifier: ^5.2.2
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)):
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)):
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': 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