Use Popper component instead of radix-vue Popover

SlovakNationalGallery · Aug 28, 2024 · ad1ac16 · ad1ac16
1 parent fe9fc11
commit ad1ac16
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'radix-vue'
+import { Menu as VMenu } from 'floating-vue'
 
 import CaretUpIcon from './icons/CaretUp.vue'
 
@@ -13,9 +13,17 @@ const isOpen = ref(false)
 </script>
 
 <template>
-    <PopoverRoot @update:open="($open) => (isOpen = $open)">
+    <VMenu
+        :triggers="['click']"
+        :shown="isOpen"
+        :distance="10"
+        placement="bottom-start"
+        @show="isOpen = true"
+        @hide="isOpen = false"
+        :delay="0"
+    >
         <div class="tw-border" :class="[isOpen ? 'tw-border-gray-800' : 'tw-border-transparent']">
-            <PopoverTrigger
+            <button
                 class="tw-border tw-bg-white tw-py-2.5 tw-px-4 hover:tw-border-gray-800"
                 :class="[isOpen || isActive ? 'tw-border-gray-800' : 'tw-border-gray-300']"
             >
@@ -26,29 +34,14 @@ const isOpen = ref(false)
                         :class="[isOpen ? 'tw-fill-sky-300' : 'tw-rotate-180']"
                     />
                 </div>
-            </PopoverTrigger>
+            </button>
         </div>
-
-        <PopoverPortal>
-            <!-- PopoverPortal teleports outside of .tailwind-rules scope -->
+        <template #popper>
             <div class="tailwind-rules">
-                <Transition
-                    class="tw-origin-[var(--radix-popover-content-transform-origin)]"
-                    enter-from-class="tw-opacity-0"
-                    leave-to-class="tw-opacity-0"
-                    enter-active-class="tw-transition-opacity tw-duration-100"
-                    leave-active-class="tw-transition-opacity tw-duration-100"
-                >
-                    <PopoverContent
-                        side="bottom"
-                        align="start"
-                        :side-offset="10"
-                        class="tw-hidden md:tw-block tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-mr-8 -tw-ml-px"
-                    >
-                        <slot name="content"></slot>
-                    </PopoverContent>
-                </Transition>
+                <div class="tw-hidden md:tw-block tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-mr-8">
+                    <slot name="content"></slot>
+                </div>
             </div>
-        </PopoverPortal>
-    </PopoverRoot>
+        </template>
+    </VMenu>
 </template>
diff --git a/resources/less/components/popper.less 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;
+    }
+  }
+}
diff --git 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";