From ad1ac16ae759964b5c4c4fa78a5d3d0c00c95dc5 Mon Sep 17 00:00:00 2001 From: Rastislav Chynoransky Date: Wed, 28 Aug 2024 14:37:08 +0200 Subject: [PATCH] Use Popper component instead of radix-vue Popover --- package-lock.json | 44 +++++++++++++++---- package.json | 2 +- resources/js/app.js | 5 ++- .../js/components/catalog-new/Popover.vue | 43 ++++++++---------- resources/less/components/popper.less | 13 ++++++ resources/less/style.less | 1 + 6 files changed, 72 insertions(+), 36 deletions(-) create mode 100644 resources/less/components/popper.less diff --git a/package-lock.json b/package-lock.json index 37676ca32..d636c2b71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,6 @@ "packages": { "": { "dependencies": { - "@popperjs/core": "^2.11.7", "axios": "^1.6.0", "bootstrap": "^3.4.1", "clipboard": "^2.0.6", @@ -15,6 +14,7 @@ "debounce": "1.2.0", "flickity": "^2.2.1", "flickity-imagesloaded": "^2.0.0", + "floating-vue": "^5.2.2", "imagesloaded": "^4.1.4", "infinite-scroll": "^3.0.6", "isotope-layout": "^3.0.6", @@ -718,14 +718,6 @@ "node": ">=14" } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@prettier/plugin-php": { "version": "0.22.2", "resolved": "https://registry.npmjs.org/@prettier/plugin-php/-/plugin-php-0.22.2.tgz", @@ -2073,6 +2065,32 @@ "imagesloaded": "^4.1.0" } }, + "node_modules/floating-vue": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-5.2.2.tgz", + "integrity": "sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==", + "dependencies": { + "@floating-ui/dom": "~1.1.1", + "vue-resize": "^2.0.0-alpha.1" + }, + "peerDependencies": { + "@nuxt/kit": "^3.2.0", + "vue": "^3.2.0" + }, + "peerDependenciesMeta": { + "@nuxt/kit": { + "optional": true + } + } + }, + "node_modules/floating-vue/node_modules/@floating-ui/dom": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz", + "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==", + "dependencies": { + "@floating-ui/core": "^1.1.0" + } + }, "node_modules/follow-redirects": { "version": "1.15.6", "funding": [ @@ -4255,6 +4273,14 @@ } } }, + "node_modules/vue-resize": { + "version": "2.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz", + "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==", + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vue-select": { "version": "4.0.0-beta.6", "license": "MIT", diff --git a/package.json b/package.json index f4919f50f..392ecf891 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "vue": "^3.2.47" }, "dependencies": { - "@popperjs/core": "^2.11.7", "axios": "^1.6.0", "bootstrap": "^3.4.1", "clipboard": "^2.0.6", @@ -34,6 +33,7 @@ "debounce": "1.2.0", "flickity": "^2.2.1", "flickity-imagesloaded": "^2.0.0", + "floating-vue": "^5.2.2", "imagesloaded": "^4.1.4", "infinite-scroll": "^3.0.6", "isotope-layout": "^3.0.6", diff --git a/resources/js/app.js b/resources/js/app.js index a149614b4..11af5216b 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -67,6 +67,9 @@ import CopyToClipboardLink from './components/CopyToClipboardLink.vue' import BottomModal from './components/BottomModal.vue' import NewsletterSignupFormController from './components/newsletter-signup/FormController.vue' import NewsletterSignupBottomModalController from './components/newsletter-signup/BottomModalController.vue' +import { Menu } from 'floating-vue' + +import 'floating-vue/dist/style.css' createApp({ compilerOptions: { @@ -81,7 +84,7 @@ createApp({ }, }) .use(ZiggyVue) - + .component('VMenu', Menu) .component('featured-piece-click-tracker', FeaturedPieceClickTracker) .component('filter-sort-by', FilterSortBy) .component('filter-checkbox', FilterCheckbox) diff --git a/resources/js/components/catalog-new/Popover.vue b/resources/js/components/catalog-new/Popover.vue index 5cd3491b8..40a1e50b5 100644 --- a/resources/js/components/catalog-new/Popover.vue +++ b/resources/js/components/catalog-new/Popover.vue @@ -1,6 +1,6 @@ diff --git a/resources/less/components/popper.less b/resources/less/components/popper.less new file mode 100644 index 000000000..428629496 --- /dev/null +++ b/resources/less/components/popper.less @@ -0,0 +1,13 @@ +.v-popper__popper { + &.v-popper--theme-dropdown { + .v-popper__arrow-container { + display: none; + } + .v-popper__inner { + background: transparent; + box-shadow: none; + border: 0; + border-radius: 0; + } + } +} \ No newline at end of file diff --git a/resources/less/style.less b/resources/less/style.less index 5f238d427..197b010da 100644 --- a/resources/less/style.less +++ b/resources/less/style.less @@ -30,6 +30,7 @@ @import "components/year-slider.less"; @import "components/inline-input.less"; @import "components/ukraine-glow.less"; +@import "components/popper.less"; @import "content.less";