@maas/vue-equipment 1.0.0-beta.42 → 1.0.0-beta.43

package/dist/composables/useScrollLockPadding/index.d.ts

@@ -0,0 +1,9 @@
+type UseScrollLockPaddingArgs = {
+    exclude: RegExp;
+};
+declare function useScrollLockPadding(args?: UseScrollLockPaddingArgs): {
+    add: () => void;
+    remove: () => void;
+};
+
+export { type UseScrollLockPaddingArgs, useScrollLockPadding };

package/dist/composables/useScrollLockPadding/index.js

@@ -0,0 +1,56 @@
+// useScrollLockPadding/index.ts
+import { ref } from "vue";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
+function useScrollLockPadding(args) {
+  const exclude = args?.exclude || "";
+  const positionFixedElements = ref([]);
+  function add() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const excludeRegEx = new RegExp(exclude);
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
+    positionFixedElements.value = [
+      ...document.body.getElementsByTagName("*")
+    ].filter(
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, excludeRegEx)
+    );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
+  }
+  function remove() {
+    document.documentElement.style.scrollbarGutter = "";
+    document.body.style.removeProperty("--scrollbar-width");
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
+  }
+  return { add, remove };
+}
+export {
+  useScrollLockPadding
+};
+//# sourceMappingURL=index.js.map

package/dist/composables/useScrollLockPadding/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../packages/composables/useScrollLockPadding/index.ts"],"sourcesContent":["import { ref } from 'vue'\nimport {\n  matchClass,\n  scrollbarGutterSupport,\n  scrollbarWidth,\n} from '@maas/vue-equipment/utils'\n\nexport type UseScrollLockPaddingArgs = {\n  exclude: RegExp\n}\n\nexport function useScrollLockPadding(args?: UseScrollLockPaddingArgs) {\n  const exclude = args?.exclude || ''\n  const positionFixedElements = ref<HTMLElement[]>([])\n\n  function add() {\n    if (typeof window === 'undefined') {\n      return\n    }\n\n    const excludeRegEx = new RegExp(exclude)\n\n    document.body.style.setProperty(\n      '--scrollbar-width',\n      `${scrollbarWidth()}px`\n    )\n\n    positionFixedElements.value = [\n      ...document.body.getElementsByTagName('*'),\n    ].filter(\n      (x) =>\n        getComputedStyle(x, null).getPropertyValue('position') === 'fixed' &&\n        getComputedStyle(x, null).getPropertyValue('right') === '0px' &&\n        !matchClass(x, excludeRegEx)\n    ) as HTMLElement[]\n\n    switch (scrollbarGutterSupport()) {\n      case true:\n        document.documentElement.style.scrollbarGutter = 'stable'\n        positionFixedElements.value.forEach((elem) => {\n          elem.style.scrollbarGutter = 'stable'\n          elem.style.overflow = 'auto'\n        })\n        break\n      case false:\n        document.body.style.paddingRight = 'var(--scrollbar-width)'\n        positionFixedElements.value.forEach(\n          (elem) => (elem.style.paddingRight = 'var(--scrollbar-width)')\n        )\n        break\n    }\n  }\n\n  function remove() {\n    document.documentElement.style.scrollbarGutter = ''\n    document.body.style.removeProperty('--scrollbar-width')\n    document.body.style.paddingRight = ''\n    positionFixedElements.value.forEach((elem) => {\n      elem.style.paddingRight = ''\n      elem.style.scrollbarGutter = ''\n      elem.style.overflow = ''\n    })\n  }\n\n  return { add, remove }\n}\n"],"mappings":";AAAA,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,SAAS,qBAAqB,MAAiC;AACpE,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,wBAAwB,IAAmB,CAAC,CAAC;AAEnD,WAAS,MAAM;AACb,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AAEA,UAAM,eAAe,IAAI,OAAO,OAAO;AAEvC,aAAS,KAAK,MAAM;AAAA,MAClB;AAAA,MACA,GAAG,eAAe,CAAC;AAAA,IACrB;AAEA,0BAAsB,QAAQ;AAAA,MAC5B,GAAG,SAAS,KAAK,qBAAqB,GAAG;AAAA,IAC3C,EAAE;AAAA,MACA,CAAC,MACC,iBAAiB,GAAG,IAAI,EAAE,iBAAiB,UAAU,MAAM,WAC3D,iBAAiB,GAAG,IAAI,EAAE,iBAAiB,OAAO,MAAM,SACxD,CAAC,WAAW,GAAG,YAAY;AAAA,IAC/B;AAEA,YAAQ,uBAAuB,GAAG;AAAA,MAChC,KAAK;AACH,iBAAS,gBAAgB,MAAM,kBAAkB;AACjD,8BAAsB,MAAM,QAAQ,CAAC,SAAS;AAC5C,eAAK,MAAM,kBAAkB;AAC7B,eAAK,MAAM,WAAW;AAAA,QACxB,CAAC;AACD;AAAA,MACF,KAAK;AACH,iBAAS,KAAK,MAAM,eAAe;AACnC,8BAAsB,MAAM;AAAA,UAC1B,CAAC,SAAU,KAAK,MAAM,eAAe;AAAA,QACvC;AACA;AAAA,IACJ;AAAA,EACF;AAEA,WAAS,SAAS;AAChB,aAAS,gBAAgB,MAAM,kBAAkB;AACjD,aAAS,KAAK,MAAM,eAAe,mBAAmB;AACtD,aAAS,KAAK,MAAM,eAAe;AACnC,0BAAsB,MAAM,QAAQ,CAAC,SAAS;AAC5C,WAAK,MAAM,eAAe;AAC1B,WAAK,MAAM,kBAAkB;AAC7B,WAAK,MAAM,WAAW;AAAA,IACxB,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,KAAK,OAAO;AACvB;","names":[]}

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.41",
+  "version": "1.0.0-beta.42",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -127,6 +127,13 @@ const functions$1 = [
 		docs: "https://maas.egineering/vue-equipment/composables/useMetaViewport/",
 		description: "Set and reset the meta viewport tag programatically"
 	},
+	{
+		name: "useScrollLockPadding",
+		"package": "composables",
+		lastUpdated: 1763989817000,
+		docs: "https://maas.egineering/vue-equipment/composables/useScrollLockPadding/",
+		description: "A small utility to prevent fixed elements from jumping when locking scroll"
+	},
 	{
 		name: "useScrollTo",
 		"package": "composables",

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.d.vue.ts

@@ -11,11 +11,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicCommandItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
     enter: () => any;
+    click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicCommandItemProps> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onEnter?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue.d.ts

@@ -11,11 +11,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicCommandItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
     enter: () => any;
+    click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicCommandItemProps> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onEnter?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-id="mappedId" class="magic-menu-view">
+  <div :data-id="mappedId" class="magic-command-view">
     <slot :view-active="view.active" />
   </div>
 </template>

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.mjs

@@ -95,12 +95,7 @@ export function useDraggableDrag(args) {
     snapPoints
   });
   const emitter = useMagicEmitter();
-  const {
-    lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
-  } = useDraggableScrollLock();
+  const { lockScroll, unlockScroll } = useDraggableScrollLock();
   function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
     wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
@@ -283,10 +278,9 @@ export function useDraggableDrag(args) {
     resetStateAndListeners();
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      unlockScroll();
-      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
-        removeScrollLockPadding();
-      }
+      unlockScroll(
+        typeof scrollLockValue === "object" && scrollLockValue.padding
+      );
     }
     guardedReleasePointerCapture({ event: e, element: elRef.value });
   }
@@ -324,10 +318,7 @@ export function useDraggableDrag(args) {
     }
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+      lockScroll(typeof scrollLockValue === "object" && scrollLockValue.padding);
     }
     if (dragging.value) {
       return;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableScrollLock.d.ts

@@ -1,6 +1,4 @@
 export declare function useDraggableScrollLock(): {
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableScrollLock.mjs

@@ -1,63 +1,23 @@
-import { shallowRef, ref } from "vue";
+import { shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import {
-  matchClass,
-  scrollbarWidth,
-  scrollbarGutterSupport
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding({ exclude: /magic-draggable/ });
 export function useDraggableScrollLock() {
-  const positionFixedElements = ref([]);
-  function lockScroll() {
+  function lockScroll(padding) {
+    if (padding) {
+      add();
+    }
     scrollLock.value = true;
   }
-  function unlockScroll() {
+  function unlockScroll(padding) {
     scrollLock.value = false;
-  }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
+    if (padding) {
+      remove();
     }
-    const exclude = new RegExp(/magic-draggable/);
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
   }
   return {
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue

@@ -110,14 +110,7 @@ const mappedId = toValue(id);
 const elRef = useTemplateRef("el");
 const drawerRef = useTemplateRef("drawer");
 const wrapperRef = useTemplateRef("wrapper");
-const {
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
-} = useDrawerDOM({
+const { trapFocus, releaseFocus, unlockScroll } = useDrawerDOM({
   focusTarget: drawerRef,
   focusTrap: mappedOptions.focusTrap
 });
@@ -177,10 +170,6 @@ const {
 } = useDrawerCallback({
   id,
   mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
   trapFocus,
   releaseFocus,
   wrapperActive,
@@ -283,10 +272,9 @@ onBeforeUnmount(() => {
 });
 onUnmounted(() => {
   if (mappedOptions.scrollLock) {
-    unlockScroll();
-    if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-      removeScrollLockPadding();
-    }
+    unlockScroll(
+      typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+    );
   }
   if (mappedOptions.focusTrap) {
     releaseFocus();

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerCallback.d.ts

@@ -3,10 +3,6 @@ import type { MagicDrawerOptions } from '../../types/index.js';
 type UseDrawerCallbackArgs = {
     id: MaybeRef<string>;
     mappedOptions: MagicDrawerOptions;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
-    lockScroll: () => void;
-    unlockScroll: () => void;
     trapFocus: () => void;
     releaseFocus: () => void;
     wrapperActive: Ref<boolean>;

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerCallback.mjs

@@ -1,28 +1,25 @@
 import { toValue, nextTick } from "vue";
 import { useMetaViewport } from "@maas/vue-equipment/composables/useMetaViewport";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useDrawerDOM } from "./useDrawerDOM.mjs";
 export function useDrawerCallback(args) {
   const {
     id,
     mappedOptions,
-    addScrollLockPadding,
-    removeScrollLockPadding,
-    lockScroll,
-    unlockScroll,
     trapFocus,
     releaseFocus,
     wrapperActive,
     wasActive
   } = args;
+  const { lockScroll, unlockScroll } = useDrawerDOM();
   const { setMetaViewport, resetMetaViewport } = useMetaViewport();
   const emitter = useMagicEmitter();
   function onBeforeEnter() {
     emitter.emit("beforeEnter", toValue(id));
     if (mappedOptions.scrollLock) {
-      if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+      lockScroll(
+        typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+      );
     }
     if (mappedOptions.preventZoom) {
       setMetaViewport();
@@ -48,10 +45,9 @@ export function useDrawerCallback(args) {
   function onAfterLeave() {
     emitter.emit("afterLeave", toValue(id));
     if (mappedOptions.scrollLock) {
-      unlockScroll();
-      if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-        removeScrollLockPadding();
-      }
+      unlockScroll(
+        typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+      );
     }
     if (mappedOptions.focusTrap) {
       releaseFocus();

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDOM.d.ts

@@ -6,8 +6,6 @@ export type UseDrawerDOMArgs = Pick<MagicDrawerOptions, 'scrollLock' | 'focusTra
 export declare function useDrawerDOM(args?: UseDrawerDOMArgs): {
     trapFocus: () => void;
     releaseFocus: () => void;
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDOM.mjs

@@ -1,20 +1,17 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import {
-  matchClass,
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const defaultOptions = {
   focusTrap: false,
-  focusTarget: void 0,
-  scrollLock: true
+  focusTarget: void 0
 };
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding({
+  exclude: /magic-drawer(__backdrop)?/
+});
 export function useDrawerDOM(args) {
-  const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
   function trapFocus() {
@@ -27,62 +24,22 @@ export function useDrawerDOM(args) {
       focusTrap.deactivate();
     }
   }
-  function lockScroll() {
-    if (mappedOptions.scrollLock) {
-      scrollLock.value = true;
+  function lockScroll(padding) {
+    if (padding) {
+      add();
     }
+    scrollLock.value = true;
   }
-  function unlockScroll() {
-    if (mappedOptions.scrollLock) {
-      scrollLock.value = false;
+  function unlockScroll(padding) {
+    scrollLock.value = false;
+    if (padding) {
+      remove();
     }
   }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const exclude = new RegExp(/magic-drawer(__backdrop)?/);
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
-  }
   return {
     trapFocus,
     releaseFocus,
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue

@@ -68,7 +68,6 @@ import {
 import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuCallback } from "../composables/private/useMenuCallback";
-import { useMenuDOM } from "../composables/private/useMenuDOM";
 import { useMenuCursor } from "../composables/private/useMenuCursor";
 import {
   useMagicError
@@ -78,7 +77,8 @@ import { ModeDelayMouseleave } from "../utils/modeDelayDefaults";
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
-  MagicMenuContentId
+  MagicMenuContentId,
+  MagicMenuParentTree
 } from "../symbols";
 import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
 import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
@@ -95,6 +95,7 @@ const magicError = useMagicError({
   prefix: "MagicMenu",
   source: "MagicMenu"
 });
+const parentTree = inject(MagicMenuParentTree, []);
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);
 magicError.assert(instanceId, {
@@ -124,12 +125,6 @@ const mappedTransition = computed(() => {
 });
 const innerActive = shallowRef(false);
 const wrapperActive = shallowRef(false);
-const {
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
-} = useMenuDOM();
 const {
   onBeforeEnter,
   onEnter,
@@ -143,10 +138,7 @@ const {
   viewId,
   innerActive,
   wrapperActive,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
+  parentTree
 });
 async function onOpen() {
   wrapperActive.value = true;

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.d.vue.ts

@@ -10,11 +10,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
     enter: () => any;
+    click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onEnter?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue.d.ts

@@ -10,11 +10,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
     enter: () => any;
+    click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onEnter?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.d.ts

@@ -6,10 +6,7 @@ type UseMenuCallbackArgs = {
     viewId: string;
     innerActive: Ref<boolean>;
     wrapperActive: Ref<boolean>;
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    parentTree: string[];
 };
 export declare function useMenuCallback(args: UseMenuCallbackArgs): {
     onBeforeEnter: () => void;

package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.mjs

@@ -1,19 +1,11 @@
 import { toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMenuDOM } from "./useMenuDOM.mjs";
 import { ModeScrollLock } from "../../utils/modeScrollLockDefaults.mjs";
 export function useMenuCallback(args) {
-  const {
-    state,
-    instanceId,
-    viewId,
-    innerActive,
-    wrapperActive,
-    lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
-  } = args;
+  const { state, instanceId, viewId, innerActive, wrapperActive, parentTree } = args;
   const emitter = useMagicEmitter();
+  const { lockScroll, unlockScroll } = useMenuDOM();
   function onBeforeEnter() {
     emitter.emit("beforeEnter", { id: toValue(instanceId), viewId });
   }
@@ -23,11 +15,8 @@ export function useMenuCallback(args) {
   function onAfterEnter() {
     emitter.emit("afterEnter", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
-    if (scrollLock) {
-      if (typeof scrollLock === "object" && scrollLock.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+    if (scrollLock && parentTree.length === 2) {
+      lockScroll(typeof scrollLock === "object" && scrollLock.padding);
     }
   }
   function onBeforeLeave() {
@@ -39,11 +28,8 @@ export function useMenuCallback(args) {
   function onAfterLeave() {
     emitter.emit("afterLeave", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
-    if (scrollLock) {
-      unlockScroll();
-      if (typeof scrollLock === "object" && scrollLock.padding) {
-        removeScrollLockPadding();
-      }
+    if (scrollLock && parentTree.length === 2) {
+      unlockScroll(typeof scrollLock === "object" && scrollLock.padding);
     }
     if (!innerActive.value) {
       wrapperActive.value = false;

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.d.ts

@@ -1,6 +1,4 @@
 export declare function useMenuDOM(): {
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.mjs

@@ -1,63 +1,25 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import {
-  matchClass,
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding({
+  exclude: /magic-menu/
+});
 export function useMenuDOM() {
-  const positionFixedElements = ref([]);
-  function lockScroll() {
+  function lockScroll(padding) {
+    if (padding) {
+      add();
+    }
     scrollLock.value = true;
   }
-  function unlockScroll() {
+  function unlockScroll(padding) {
     scrollLock.value = false;
-  }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
+    if (padding) {
+      remove();
     }
-    const exclude = new RegExp(/magic-menu/);
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
   }
   return {
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

package/dist/plugins/MagicModal/src/components/MagicModal.vue

@@ -81,14 +81,7 @@ const { id, options = {} } = defineProps({
 const mappedOptions = customDefu(options, defaultOptions);
 const mappedId = toValue(id);
 const modalRef = useTemplateRef("modal");
-const {
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
-} = useModalDOM({
+const { trapFocus, releaseFocus, unlockScroll } = useModalDOM({
   focusTarget: modalRef,
   focusTrap: mappedOptions.focusTrap
 });
@@ -105,10 +98,6 @@ const {
 } = useModalCallback({
   id,
   mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
   trapFocus,
   releaseFocus,
   wrapperActive
@@ -139,10 +128,9 @@ onBeforeUnmount(() => {
 });
 onUnmounted(() => {
   if (mappedOptions.scrollLock) {
-    unlockScroll();
-    if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-      removeScrollLockPadding();
-    }
+    unlockScroll(
+      typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+    );
   }
   if (mappedOptions.focusTrap) {
     releaseFocus();

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.d.ts

@@ -3,10 +3,6 @@ import type { MagicModalOptions } from '../../types/index.js';
 type UseModalCallbackArgs = {
     id: MaybeRef<string>;
     mappedOptions: MagicModalOptions;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
-    lockScroll: () => void;
-    unlockScroll: () => void;
     trapFocus: () => void;
     releaseFocus: () => void;
     wrapperActive: Ref<boolean>;

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.mjs

@@ -1,25 +1,16 @@
 import { toValue, nextTick } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useModalDOM } from "./useModalDOM.mjs";
 export function useModalCallback(args) {
-  const {
-    id,
-    mappedOptions,
-    addScrollLockPadding,
-    removeScrollLockPadding,
-    lockScroll,
-    unlockScroll,
-    trapFocus,
-    releaseFocus,
-    wrapperActive
-  } = args;
+  const { id, mappedOptions, trapFocus, releaseFocus, wrapperActive } = args;
   const emitter = useMagicEmitter();
+  const { lockScroll, unlockScroll } = useModalDOM();
   function onBeforeEnter() {
     emitter.emit("beforeEnter", toValue(id));
     if (mappedOptions.scrollLock) {
-      if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+      lockScroll(
+        typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+      );
     }
   }
   function onEnter() {
@@ -41,10 +32,9 @@ export function useModalCallback(args) {
   function onAfterLeave() {
     emitter.emit("afterLeave", toValue(id));
     if (mappedOptions.scrollLock) {
-      unlockScroll();
-      if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-        removeScrollLockPadding();
-      }
+      unlockScroll(
+        typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+      );
     }
     if (mappedOptions.focusTrap) {
       releaseFocus();

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.d.ts

@@ -6,8 +6,6 @@ export type useModalDOMArgs = Pick<MagicModalOptions, 'scrollLock' | 'focusTrap'
 export declare function useModalDOM(args?: useModalDOMArgs): {
     trapFocus: () => void;
     releaseFocus: () => void;
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.mjs

@@ -1,20 +1,17 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import {
-  matchClass,
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const defaultOptions = {
   focusTrap: false,
-  focusTarget: void 0,
-  scrollLock: true
+  focusTarget: void 0
 };
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding({
+  exclude: /magic-modal(__backdrop)?/
+});
 export function useModalDOM(args) {
-  const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
   function trapFocus() {
@@ -27,62 +24,22 @@ export function useModalDOM(args) {
       focusTrap.deactivate();
     }
   }
-  function lockScroll() {
-    if (mappedOptions.scrollLock) {
-      scrollLock.value = true;
+  function lockScroll(padding) {
+    if (padding) {
+      add();
     }
+    scrollLock.value = true;
   }
-  function unlockScroll() {
-    if (mappedOptions.scrollLock) {
-      scrollLock.value = false;
+  function unlockScroll(padding) {
+    scrollLock.value = false;
+    if (padding) {
+      remove();
     }
   }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const exclude = new RegExp(/magic-modal(__backdrop)?/);
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
-  }
   return {
     trapFocus,
     releaseFocus,
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

package/dist/plugins/MagicToast/src/composables/private/useToastDrag.mjs

@@ -51,12 +51,7 @@ export function useToastDrag(args) {
     () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
   );
   const emitter = useMagicEmitter();
-  const {
-    lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
-  } = useToastScrollLock();
+  const { lockScroll, unlockScroll } = useToastScrollLock();
   function interpolateDragged(args2) {
     const {
       to,
@@ -228,10 +223,9 @@ export function useToastDrag(args) {
     resetStateAndListeners();
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      unlockScroll();
-      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
-        removeScrollLockPadding();
-      }
+      unlockScroll(
+        typeof scrollLockValue === "object" && scrollLockValue.padding
+      );
     }
     if (hasDragged.value) {
       e.preventDefault();
@@ -257,10 +251,7 @@ export function useToastDrag(args) {
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+      lockScroll(typeof scrollLockValue === "object" && scrollLockValue.padding);
     }
     if (dragging.value) {
       return;

package/dist/plugins/MagicToast/src/composables/private/useToastScrollLock.d.ts

@@ -1,6 +1,4 @@
 export declare function useToastScrollLock(): {
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

package/dist/plugins/MagicToast/src/composables/private/useToastScrollLock.mjs

@@ -1,61 +1,23 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import {
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding();
 export function useToastScrollLock() {
-  const positionFixedElements = ref([]);
-  function lockScroll() {
+  function lockScroll(padding) {
+    if (padding) {
+      add();
+    }
     scrollLock.value = true;
   }
-  function unlockScroll() {
+  function unlockScroll(padding) {
     scrollLock.value = false;
-  }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
+    if (padding) {
+      remove();
     }
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px"
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
   }
   return {
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.42",
+  "version": "1.0.0-beta.43",
   "contributors": [
     {
       "name": "Robin Scholz",