perf: disable toggling <body> CSS class by default

holistics · Jul 29, 2024 · b77c27b · b77c27b
1 parent 99e1452
commit b77c27b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## v5.2.2-holistics.1
+
+### 🚀 Performance Improvements
+
+  - Disable toggle `<body>` CSS class by default to avoid performance overhead. Can be re-enabled via `toggleBodyClass` prop. ([PR #1019](https://github.com/Akryum/floating-vue/pull/1019))
+
+### ❤️  Contributors
+
+- Cuong Vuong ([@cuong-vuong-holistics](https://github.com/cuong-vuong-holistics))
+
 ## v5.2.2
 
 

diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 ## About the fork
 
-This fork has the `@holistics/floating-vue` package that tries to fix some issues of the original package.
+This fork has the `@holistics/floating-vue` package that tries to fix the following issues:
+
+- **[Performance]** Disable toggling CSS class of `<body>`: this makes the entire page reflow whenever some floating elements are shown/all are hidden ([PR #1019](https://github.com/Akryum/floating-vue/pull/1019)). Can be re-enabled via `toggleBodyClass` prop.
 
 ### 📦️ Versioning and syncing
 

diff --git a/packages/floating-vue/README.md b/packages/floating-vue/README.md
@@ -2,7 +2,9 @@
 
 ## About the fork
 
-This fork has the `@holistics/floating-vue` package that tries to fix some issues of the original package.
+This fork has the `@holistics/floating-vue` package that tries to fix the following issues:
+
+- **[Performance]** Disable toggling CSS class of `<body>`: this makes the entire page reflow whenever some floating elements are shown/all are hidden ([PR #1019](https://github.com/Akryum/floating-vue/pull/1019)). Can be re-enabled via `toggleBodyClass` prop.
 
 ### 📦️ Versioning and syncing
 

diff --git a/packages/floating-vue/package.json b/packages/floating-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holistics/floating-vue",
-  "version": "5.2.2-holistics.0",
+  "version": "5.2.2-holistics.1",
   "description": "Holistics fork of Floating Vue - Easy Vue tooltips, dropdowns, menus & popovers using floating-ui",
   "contributors": [
     "Guillaume Chau <guillaume.b.chau@gmail.com>",

diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts
@@ -277,6 +277,11 @@ const createPopper = () => defineComponent({
       type: Number,
       default: defaultPropFactory('disposeTimeout'),
     },
+
+    toggleBodyClass: {
+      type: Boolean,
+      default: undefined,
+    },
   },
 
   emits: {
@@ -773,10 +778,12 @@ const createPopper = () => defineComponent({
       }
 
       shownPoppers.push(this)
-      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.toggleBodyClass) {
+        this.toggleBodyClass && 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}`)
+        }
       }
 
       this.$emit('apply-show')
@@ -807,14 +814,16 @@ const createPopper = () => defineComponent({
 
       this.skipTransition = skipTransition
       removeFromArray(shownPoppers, this)
-      if (shownPoppers.length === 0) {
-        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) {
-          document.body.classList.remove(`v-popper--some-open--${theme}`)
+      if (this.toggleBodyClass) {
+        if (shownPoppers.length === 0) {
+          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) {
+            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
@@ -289,6 +289,11 @@ export default defineComponent({
       type: Number,
       default: undefined,
     },
+
+    toggleBodyClass: {
+      type: Boolean,
+      default: undefined,
+    },
   },
 
   emits: {