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

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.41",
+  "version": "1.0.0-beta.43",
   "contributors": [
     {
       "name": "Robin Scholz",
@@ -60,7 +60,7 @@
     "@floating-ui/vue": "^1",
     "@maas/magic-timer": "^1",
     "@maas/vue-autosize": "^1",
-    "@maas/vue-primitive": "^1",
+    "@maas/vue-primitive": "^1.4",
     "@nuxt/kit": ">=3",
     "@vueuse/core": ">=12",
     "@vueuse/integrations": ">=12",