diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts index 5b6ae603..c2c58592 100644 --- 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 index ba1a1b64..a1fb8498 100644 --- 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 index 805cf73b..f78a9028 100644 --- 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: {