@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -1,192 +1,292 @@
-<template>
-  <teleport
-    v-if="wrapperActive"
-    :to="mappedOptions.teleport?.target"
-    :disabled="mappedOptions.teleport?.disabled"
-  >
-    <div
-      ref="modalRef"
-      class="magic-modal"
-      :id="toValue(id)"
-      v-bind="$attrs"
-      @click.self="close"
-      aria-modal="true"
-    >
-      <transition
-        v-if="mappedOptions.backdrop || !!$slots.backdrop"
-        :name="mappedOptions.transition?.backdrop"
-      >
-        <div
-          v-show="innerActive"
-          class="magic-modal__backdrop"
-          @click.self="close"
-        >
-          <slot name="backdrop" />
-        </div>
-      </transition>
-      <transition
-        :name="mappedOptions.transition?.content"
-        @before-leave="onBeforeLeave"
-        @leave="onLeave"
-        @after-leave="onAfterLeave"
-        @before-enter="onBeforeEnter"
-        @enter="onEnter"
-        @after-enter="onAfterEnter"
-      >
-        <component
-          :is="mappedOptions.tag"
-          v-show="innerActive"
-          class="magic-modal__content"
-          @click.self="close"
-        >
-          <component
-            v-if="component"
-            v-bind="props"
-            :is="component"
-            @close="close"
-          />
-          <slot v-else />
-        </component>
-      </transition>
-    </div>
-  </teleport>
-</template>
-
-<script setup lang="ts">
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModifiers, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, createVNode as _createVNode, mergeProps as _mergeProps, Teleport as _Teleport } from "vue";
+const _hoisted_1 = ["data-id"];
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   watch,
   nextTick,
   toValue,
   onBeforeUnmount,
-  onUnmounted,
-  type Component,
-  type MaybeRef,
-} from 'vue'
-import { createDefu } from 'defu'
-import { onKeyStroke } from '@vueuse/core'
-import { defaultOptions } from './../utils/defaultOptions'
-import { useModalDOM } from '../composables/private/useModalDOM'
-import { useModalCallback } from '../composables/private/useModalCallback'
-import { useMagicModal } from '../composables/useMagicModal'
-
-import type { MagicModalOptions } from './../types/index'
-
-import '@maas/vue-equipment/utils/css/animations/fade-in.css'
-import '@maas/vue-equipment/utils/css/animations/fade-out.css'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-// Prevent keyListener array from being merged with default
-const customDefu = createDefu((obj, key, value) => {
-  if (key === 'close') {
-    obj[key] = value
-    return true
+  onUnmounted
+} from "vue";
+import { createDefu } from "defu";
+import { onKeyStroke } from "@vueuse/core";
+import { defaultOptions } from "./../utils/defaultOptions";
+import { useModalDOM } from "../composables/private/useModalDOM";
+import { useModalCallback } from "../composables/private/useModalCallback";
+import { useMagicModal } from "../composables/useMagicModal";
+import "@maas/vue-equipment/utils/css/animations/fade-in.css";
+import "@maas/vue-equipment/utils/css/animations/fade-out.css";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicModal",
+  props: {
+    id: { type: null, required: true },
+    props: { type: Object, required: false },
+    options: { type: Object, required: false, default: () => ({}) }
+  },
+  setup(__props) {
+    const customDefu = createDefu((obj, key, value) => {
+      if (key === "close") {
+        obj[key] = value;
+        return true;
+      }
+    });
+    const mappedOptions = customDefu(__props.options, defaultOptions);
+    const modalRef = useTemplateRef("modal");
+    const {
+      trapFocus,
+      releaseFocus,
+      lockScroll,
+      unlockScroll,
+      addScrollLockPadding,
+      removeScrollLockPadding
+    } = useModalDOM({
+      focusTarget: modalRef,
+      focusTrap: mappedOptions.focusTrap
+    });
+    const { isActive, close } = useMagicModal(__props.id);
+    const innerActive = shallowRef(false);
+    const wrapperActive = shallowRef(false);
+    const {
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave
+    } = useModalCallback({
+      id: __props.id,
+      mappedOptions,
+      addScrollLockPadding,
+      removeScrollLockPadding,
+      lockScroll,
+      unlockScroll,
+      trapFocus,
+      releaseFocus,
+      wrapperActive
+    });
+    async function onOpen() {
+      wrapperActive.value = true;
+      await nextTick();
+      innerActive.value = true;
+    }
+    function onClose() {
+      innerActive.value = false;
+    }
+    if (mappedOptions.keyListener?.close) {
+      for (const key of mappedOptions.keyListener.close) {
+        onKeyStroke(key, (e) => {
+          close();
+          e.preventDefault();
+        });
+      }
+    }
+    watch(isActive, async (value) => {
+      if (value) {
+        await onOpen();
+      } else {
+        onClose();
+      }
+    });
+    onBeforeUnmount(() => {
+      close();
+    });
+    onUnmounted(() => {
+      if (mappedOptions.scrollLock) {
+        unlockScroll();
+        if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
+          removeScrollLockPadding();
+        }
+      }
+      if (mappedOptions.focusTrap) {
+        releaseFocus();
+      }
+    });
+    return (_ctx, _cache) => {
+      return wrapperActive.value ? (_openBlock(), _createBlock(_Teleport, {
+        key: 0,
+        to: _unref(mappedOptions).teleport?.target,
+        disabled: _unref(mappedOptions).teleport?.disabled
+      }, [
+        _createElementVNode("div", _mergeProps({
+          ref: "modal",
+          class: "magic-modal",
+          "data-id": toValue(_ctx.id)
+        }, _ctx.$attrs, {
+          "aria-modal": "true",
+          onClick: _cache[1] || (_cache[1] = _withModifiers(
+            //@ts-ignore
+            (...args) => _unref(close) && _unref(close)(...args),
+            ["self"]
+          ))
+        }), [
+          _unref(mappedOptions).backdrop || !!_ctx.$slots.backdrop ? (_openBlock(), _createBlock(_Transition, {
+            key: 0,
+            name: _unref(mappedOptions).transition?.backdrop,
+            persisted: ""
+          }, {
+            default: _withCtx(() => [
+              _withDirectives(_createElementVNode(
+                "div",
+                {
+                  class: "magic-modal__backdrop",
+                  onClick: _cache[0] || (_cache[0] = _withModifiers(
+                    //@ts-ignore
+                    (...args) => _unref(close) && _unref(close)(...args),
+                    ["self"]
+                  ))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "backdrop")
+                ],
+                512
+                /* NEED_PATCH */
+              ), [
+                [_vShow, innerActive.value]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name"])) : _createCommentVNode("v-if", true),
+          _createVNode(_Transition, {
+            name: _unref(mappedOptions).transition?.content,
+            onBeforeLeave: _unref(onBeforeLeave),
+            onLeave: _unref(onLeave),
+            onAfterLeave: _unref(onAfterLeave),
+            onBeforeEnter: _unref(onBeforeEnter),
+            onEnter: _unref(onEnter),
+            onAfterEnter: _unref(onAfterEnter),
+            persisted: ""
+          }, {
+            default: _withCtx(() => [
+              _withDirectives((_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
+                class: "magic-modal__content",
+                onClick: _withModifiers(_unref(close), ["self"])
+              }, {
+                default: _withCtx(() => [
+                  _renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["onClick"])), [
+                [_vShow, innerActive.value]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name", "onBeforeLeave", "onLeave", "onAfterLeave", "onBeforeEnter", "onEnter", "onAfterEnter"])
+        ], 16, _hoisted_1)
+      ], 8, ["to", "disabled"])) : _createCommentVNode("v-if", true);
+    };
   }
-})
+});
+</script>
 
-interface MagicModalProps {
-  id: MaybeRef<string>
-  component?: Component
-  props?: Record<string, unknown>
-  options?: MagicModalOptions
+<style>
+@keyframes mm-content-enter {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 2rem, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
 }
 
-const props = withDefaults(defineProps<MagicModalProps>(), {
-  options: () => defaultOptions,
-})
+@keyframes mm-content-leave {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.02);
+  }
+}
 
-const mappedOptions = customDefu(props.options, defaultOptions)
-const modalRef = ref<HTMLElement | undefined>(undefined)
-const {
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-} = useModalDOM({
-  focusTarget: modalRef,
-  focusTrap: mappedOptions.focusTrap,
-})
+.magic-modal {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--magic-modal-z-index, 999);
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border: none;
+}
 
-const { isActive, close } = useMagicModal(props.id)
+.magic-modal__content {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  max-height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: var(--magic-modal-content-align-items, center);
+  justify-content: var(--magic-modal-content-justify-content, center);
+  overflow-y: var(--magic-modal-content-overflow-y, auto);
+}
 
-// Split isActive into two values to animate modal smoothly
-const innerActive = ref(false)
-const wrapperActive = ref(false)
+/* Reset default dialog styles */
+dialog.magic-modal__content {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  outline: 0;
+}
 
-const {
-  onBeforeEnter,
-  onEnter,
-  onAfterEnter,
-  onBeforeLeave,
-  onLeave,
-  onAfterLeave,
-} = useModalCallback({
-  id: props.id,
-  mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
-  trapFocus,
-  releaseFocus,
-  wrapperActive,
-})
+dialog.magic-modal__content::backdrop {
+  background-color: transparent;
+}
 
-// Handle state
-async function onOpen() {
-  wrapperActive.value = true
-  await nextTick()
-  innerActive.value = true
+.magic-modal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--magic-modal-backdrop-color, rgba(0, 0, 0, 0.5));
+  backdrop-filter: var(--magic-modal-backdrop-filter, unset);
+  z-index: -1;
 }
 
-function onClose() {
-  innerActive.value = false
+/* Content */
+.magic-modal-content-enter-active {
+  animation: mm-content-enter 175ms ease;
 }
 
-if (mappedOptions.keyListener?.close) {
-  for (const key of mappedOptions.keyListener.close) {
-    onKeyStroke(key, (e) => {
-      close()
-      e.preventDefault()
-    })
-  }
+.magic-modal-content-leave-active {
+  animation: mm-content-leave 175ms ease;
 }
 
-watch(isActive, async (value) => {
-  if (value) {
-    await onOpen()
-  } else {
-    onClose()
+@media (prefers-reduced-motion) {
+  .magic-modal-content-enter-active {
+    animation: fade-in 175ms ease;
   }
-})
-
-// Reset state on unmount
-onBeforeUnmount(() => {
-  close()
-})
 
-onUnmounted(() => {
-  if (mappedOptions.scrollLock) {
-    unlockScroll()
-    if (
-      typeof mappedOptions.scrollLock === 'object' &&
-      mappedOptions.scrollLock.padding
-    ) {
-      removeScrollLockPadding()
-    }
+  .magic-modal-content-leave-active {
+    animation: fade-out 175ms ease;
   }
+}
 
-  if (mappedOptions.focusTrap) {
-    releaseFocus()
-  }
-})
-</script>
+/* Backdrop */
+.magic-modal-backdrop-enter-active {
+  animation: fade-in 175ms ease;
+}
 
-<style>
-@keyframes magic-modal-content-enter{0%{opacity:0;transform:translate3d(0,2rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes magic-modal-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-modal{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-modal-z-index,999)}.magic-modal__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-modal-content-align-items,center);display:flex;justify-content:var(--magic-modal-content-justify-content,center);max-height:100%;overflow-y:var(--magic-modal-content-overflow-y,auto);scroll-behavior:smooth;width:100%}dialog.magic-modal__content{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-modal__content::backdrop{background-color:transparent}.magic-modal__backdrop{-webkit-backdrop-filter:var(--magic-modal-backdrop-filter,unset);backdrop-filter:var(--magic-modal-backdrop-filter,unset);background-color:var(--magic-modal-backdrop-color,rgba(0,0,0,.5));bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-modal--content-enter-active{animation:magic-modal-content-enter .3s ease}.magic-modal--content-leave-active{animation:magic-modal-content-leave .3s ease}@media (prefers-reduced-motion){.magic-modal--content-enter-active{animation:fade-in .3s ease}.magic-modal--content-leave-active{animation:fade-out .3s ease}}.magic-modal--backdrop-enter-active{animation:fade-in .3s ease}.magic-modal--backdrop-leave-active{animation:fade-out .3s ease}
+.magic-modal-backdrop-leave-active {
+  animation: fade-out 175ms ease;
+}
 </style>

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

@@ -1,31 +1,59 @@
-import { type Component, type MaybeRef } from 'vue';
-import type { MagicModalOptions } from './../types/index';
+import { toValue, type MaybeRef } from 'vue';
+import type { MagicModalOptions } from './../types/index.js';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 interface MagicModalProps {
     id: MaybeRef<string>;
-    component?: Component;
     props?: Record<string, unknown>;
     options?: MagicModalOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        backdrop?(_: {}): any;
-        default?(_: {}): any;
+declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> & Omit<import("../../../../utils").RequireAll<MagicModalOptions>, keyof MagicModalOptions> & {
+    transition: {
+        content?: string;
+        backdrop?: string;
     };
-    refs: {
-        modalRef: HTMLDivElement;
+    backdrop: boolean;
+    tag: "div" | "dialog";
+    focusTrap: boolean | import("focus-trap").Options;
+    scrollLock: boolean | {
+        padding: boolean;
+    };
+    teleport: {
+        target?: string;
+        disabled?: boolean;
+    };
+    keyListener: {
+        close?: string[] | false;
     };
-    rootEl: any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {
-    options: MagicModalOptions;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const close: () => void;
+declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
+declare const wrapperActive: import("vue").ShallowRef<boolean, boolean>;
+declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {}, __VLS_32: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    backdrop?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicModalProps, {
+    toValue: typeof toValue;
+    mappedOptions: typeof mappedOptions;
+    close: typeof close;
+    innerActive: typeof innerActive;
+    wrapperActive: typeof wrapperActive;
+    onBeforeEnter: typeof onBeforeEnter;
+    onEnter: typeof onEnter;
+    onAfterEnter: typeof onAfterEnter;
+    onBeforeLeave: typeof onBeforeLeave;
+    onLeave: typeof onLeave;
+    onAfterLeave: typeof onAfterLeave;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -12,11 +12,11 @@ type UseModalCallbackArgs = {
     wrapperActive: Ref<boolean>;
 };
 export declare function useModalCallback(args: UseModalCallbackArgs): {
-    onBeforeEnter: (_el?: Element) => void;
-    onEnter: (_el?: Element) => void;
-    onAfterEnter: (_el?: Element) => Promise<void>;
-    onBeforeLeave: (_el?: Element) => void;
-    onLeave: (_el?: Element) => void;
-    onAfterLeave: (_el?: Element) => void;
+    onBeforeEnter: () => void;
+    onEnter: () => void;
+    onAfterEnter: () => Promise<void>;
+    onBeforeLeave: () => void;
+    onLeave: () => void;
+    onAfterLeave: () => void;
 };
 export {};

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

@@ -13,7 +13,7 @@ export function useModalCallback(args) {
     wrapperActive
   } = args;
   const emitter = useMagicEmitter();
-  function onBeforeEnter(_el) {
+  function onBeforeEnter() {
     emitter.emit("beforeEnter", toValue(id));
     if (mappedOptions.scrollLock) {
       if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
@@ -22,23 +22,23 @@ export function useModalCallback(args) {
       lockScroll();
     }
   }
-  function onEnter(_el) {
+  function onEnter() {
     emitter.emit("enter", toValue(id));
   }
-  async function onAfterEnter(_el) {
+  async function onAfterEnter() {
     emitter.emit("afterEnter", toValue(id));
     if (mappedOptions.focusTrap) {
       await nextTick();
       trapFocus();
     }
   }
-  function onBeforeLeave(_el) {
+  function onBeforeLeave() {
     emitter.emit("beforeLeave", toValue(id));
   }
-  function onLeave(_el) {
+  function onLeave() {
     emitter.emit("leave", toValue(id));
   }
-  function onAfterLeave(_el) {
+  function onAfterLeave() {
     emitter.emit("afterLeave", toValue(id));
     if (mappedOptions.scrollLock) {
       unlockScroll();

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

@@ -1,14 +1,18 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
   scrollLock: true
 };
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useModalDOM(args) {
   const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
@@ -36,24 +40,40 @@ export function useModalDOM(args) {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-modal(__backdrop)?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (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.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     trapFocus,

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

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-let modalStore = ref([]);
+const modalStore = ref([]);
 export function useModalStore() {
   function addInstance(id) {
     modalStore.value.push(id);