add config to disable adding popper classes to body

Akryum · Jan 26, 2024 · e348bce · e348bce
1 parent 62014c3
commit e348bce
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts
@@ -207,6 +207,11 @@ const createPopper = () => defineComponent({
       default: defaultPropFactory('computeTransformOrigin'),
     },
 
+    addPopperClassesToBody: {
+      type: Boolean,
+      default: defaultPropFactory('addPopperClassesToBody'),
+    },
+
     /**
      * @deprecated
      */
@@ -773,10 +778,15 @@ const createPopper = () => defineComponent({
       }
 
       shownPoppers.push(this)
-      document.body.classList.add('v-popper--some-open')
+      if (this.addPopperClassesToBody) {
+        document.body.classList.add('v-popper--some-open')
+      }
+
       for (const theme of getAllParentThemes(this.theme)) {
         getShownPoppersByTheme(theme).push(this)
-        document.body.classList.add(`v-popper--some-open--${theme}`)
+        if (this.addPopperClassesToBody) {
+          document.body.classList.add(`v-popper--some-open--${theme}`)
+        }
       }
 
       this.$emit('apply-show')
@@ -807,13 +817,13 @@ const createPopper = () => defineComponent({
 
       this.skipTransition = skipTransition
       removeFromArray(shownPoppers, this)
-      if (shownPoppers.length === 0) {
+      if (shownPoppers.length === 0 && this.addPopperClassesToBody) {
         document.body.classList.remove('v-popper--some-open')
       }
       for (const theme of getAllParentThemes(this.theme)) {
         const list = getShownPoppersByTheme(theme)
         removeFromArray(list, this)
-        if (list.length === 0) {
+        if (list.length === 0 && this.addPopperClassesToBody) {
           document.body.classList.remove(`v-popper--some-open--${theme}`)
         }
       }

diff --git a/packages/floating-vue/src/components/PopperWrapper.vue b/packages/floating-vue/src/components/PopperWrapper.vue
@@ -219,6 +219,12 @@ export default defineComponent({
       default: undefined,
     },
 
+    addPopperClassesToBody: {
+      type: Boolean,
+      default: true,
+    },
+
+
     /**
      * @deprecated
      */

diff --git a/packages/floating-vue/src/config.ts b/packages/floating-vue/src/config.ts
@@ -31,6 +31,8 @@ export const config: FloatingVueConfig = {
   arrowPadding: 0,
   // Compute arrow overflow (useful to hide it)
   arrowOverflow: true,
+  // Add popper classes to body, allowing more customization but may affect performance
+  addPopperClassesToBody: true,
   // Themes
   themes: {
     tooltip: {