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

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,57 @@
+// 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 = "";
+    });
+    positionFixedElements.value = [];
+  }
+  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    // Drop nodes for garbage collection\n    positionFixedElements.value = []\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;AAGD,0BAAsB,QAAQ,CAAC;AAAA,EACjC;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.43",
   "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: 1765919360000,
+		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/MagicAccordion/src/components/MagicAccordionProvider.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { onBeforeUnmount, provide } from "vue";
+import { provide } from "vue";
 import { VuePrimitive } from "@maas/vue-primitive";
 import { useAccordionState } from "../composables/private/useAccordionState";
 import { MagicAccordionInstanceId } from "../symbols";
@@ -18,10 +18,7 @@ const { id, asChild, options } = defineProps({
   asChild: { type: Boolean, required: false },
   options: { type: Object, required: false }
 });
-const { deleteState, initializeState } = useAccordionState(id);
+const { initializeState } = useAccordionState(id);
 initializeState(options);
-onBeforeUnmount(() => {
-  deleteState();
-});
 provide(MagicAccordionInstanceId, id);
 </script>

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionState.d.ts

@@ -1,7 +1,6 @@
-import { type Ref, type MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { AccordionState, MagicAccordionOptions } from '../../types/index.js';
 export declare function useAccordionState(instanceId: MaybeRef<string>): {
     initializeState: (options?: MagicAccordionOptions) => AccordionState;
-    deleteState: () => void;
-    accordionStateStore: Ref<AccordionState[], AccordionState[]>;
+    accordionStateStore: import("vue").Ref<AccordionState[], AccordionState[]>;
 };

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionState.mjs

@@ -1,11 +1,18 @@
-import { ref, reactive, toValue } from "vue";
+import { reactive, toValue, onScopeDispose } from "vue";
 import { defu } from "defu";
+import { createStateStore } from "@maas/vue-equipment/utils";
 import { defaultOptions } from "../../utils/defaultOptions.mjs";
-const accordionStateStore = ref([]);
+const getAccordionStateStore = createStateStore(
+  "MagicAccordion",
+  () => []
+);
 export function useAccordionState(instanceId) {
+  const accordionStateStore = getAccordionStateStore();
+  let scopeCounted = false;
   function createState(id) {
     const state = {
       id,
+      refCount: 0,
       options: { ...defaultOptions },
       views: []
     };
@@ -16,12 +23,23 @@ export function useAccordionState(instanceId) {
     accordionStateStore.value = [...accordionStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    accordionStateStore.value = accordionStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState(options) {
-    let state = accordionStateStore.value.find((entry) => {
-      return entry.id === toValue(instanceId);
-    });
+    const currentId = toValue(instanceId);
+    let state = accordionStateStore.value.find(
+      (entry) => entry.id === currentId
+    );
     if (!state) {
-      state = addState(toValue(instanceId));
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
     }
     if (options) {
       const mappedOptions = defu(options, defaultOptions);
@@ -29,14 +47,23 @@ export function useAccordionState(instanceId) {
     }
     return state;
   }
-  function deleteState() {
-    accordionStateStore.value = accordionStateStore.value.filter(
-      (x) => x.id !== toValue(instanceId)
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = accordionStateStore.value.find(
+      (entry) => entry.id === currentId
     );
-  }
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     accordionStateStore
   };
 }

package/dist/plugins/MagicAccordion/src/types/index.d.ts

@@ -14,6 +14,7 @@ export interface AccordionView {
 }
 export interface AccordionState {
     id: string;
+    refCount: number;
     views: AccordionView[];
     options: MagicAccordionOptions;
 }

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

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { shallowRef, provide, watch, onBeforeUnmount } from "vue";
+import { shallowRef, provide, watch } from "vue";
 import { useMagicKeys, usePointer } from "@vueuse/core";
 import { VuePrimitive } from "@maas/vue-primitive";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
@@ -30,7 +30,7 @@ const customDefu = createDefu((obj, key, value) => {
   }
 });
 const mappedOptions = customDefu(options, defaultOptions);
-const { initializeState, deleteState } = useCommandState(id);
+const { initializeState } = useCommandState(id);
 const state = initializeState(mappedOptions);
 const lastX = shallowRef(0);
 const lastY = shallowRef(0);
@@ -86,9 +86,6 @@ if (mappedOptions.keyListener?.close) {
     });
   }
 }
-onBeforeUnmount(() => {
-  deleteState();
-});
 provide(MagicCommandInstanceId, id);
 provide(MagicCommandProviderOptions, mappedOptions);
 </script>

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

@@ -32,6 +32,7 @@ function enterCallback(payload) {
 }
 emitter.on("enter", enterCallback);
 onBeforeUnmount(() => {
+  state.renderer = null;
   emitter.off("enter", enterCallback);
 });
 </script>

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/MagicCommand/src/composables/private/useCommandState.d.ts

@@ -1,7 +1,6 @@
-import { type Ref, type MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { CommandState, MagicCommandOptions } from '../../types/index.js';
 export declare function useCommandState(instanceId: MaybeRef<string>): {
     initializeState: (options?: MagicCommandOptions) => CommandState;
-    deleteState: () => void;
-    commandStateStore: Ref<CommandState[], CommandState[]>;
+    commandStateStore: import("vue").Ref<CommandState[], CommandState[]>;
 };

package/dist/plugins/MagicCommand/src/composables/private/useCommandState.mjs

@@ -1,12 +1,19 @@
-import { ref, reactive, toValue } from "vue";
+import { reactive, toValue, onScopeDispose } from "vue";
 import { defu } from "defu";
+import { createStateStore } from "@maas/vue-equipment/utils";
 import { defaultOptions } from "../../utils/defaultOptions.mjs";
-const commandStateStore = ref([]);
+const getCommandStateStore = createStateStore(
+  "MagicCommand",
+  () => []
+);
 export function useCommandState(instanceId) {
+  const commandStateStore = getCommandStateStore();
+  let scopeCounted = false;
   function createState(id) {
     const view = commandStateStore.value.find((state2) => state2.id === id)?.views.findLast((view2) => view2.active)?.id;
     const state = {
       id,
+      refCount: 0,
       options: { ...defaultOptions },
       views: [],
       renderer: null,
@@ -23,12 +30,21 @@ export function useCommandState(instanceId) {
     commandStateStore.value = [...commandStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    commandStateStore.value = commandStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState(options) {
-    let state = commandStateStore.value.find((entry) => {
-      return entry.id === toValue(instanceId);
-    });
+    const currentId = toValue(instanceId);
+    let state = commandStateStore.value.find((entry) => entry.id === currentId);
     if (!state) {
-      state = addState(toValue(instanceId));
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
     }
     if (options) {
       const mappedOptions = defu(options, defaultOptions);
@@ -36,14 +52,23 @@ export function useCommandState(instanceId) {
     }
     return state;
   }
-  function deleteState() {
-    commandStateStore.value = commandStateStore.value.filter(
-      (x) => x.id !== toValue(instanceId)
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = commandStateStore.value.find(
+      (entry) => entry.id === currentId
     );
-  }
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     commandStateStore
   };
 }

package/dist/plugins/MagicCommand/src/types/index.d.ts

@@ -44,6 +44,7 @@ export interface CommandView {
 }
 export interface CommandState {
     id: string;
+    refCount: number;
     active: boolean;
     views: CommandView[];
     renderer: HTMLElement | null;

package/dist/plugins/MagicCookie/src/composables/private/useCookieState.d.ts

@@ -1,7 +1,6 @@
-import { type Ref, type MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { CookieState, MagicCookieOptions } from '../../types/index.js';
 export declare function useCookieState(instanceId: MaybeRef<string>): {
     initializeState: (options?: MagicCookieOptions) => CookieState;
-    deleteState: () => void;
-    cookieStateStore: Ref<CookieState[], CookieState[]>;
+    cookieStateStore: import("vue").Ref<CookieState[], CookieState[]>;
 };

package/dist/plugins/MagicCookie/src/composables/private/useCookieState.mjs

@@ -1,11 +1,18 @@
-import { ref, reactive, toValue } from "vue";
+import { reactive, toValue, onScopeDispose } from "vue";
 import { defu } from "defu";
+import { createStateStore } from "@maas/vue-equipment/utils";
 import { defaultOptions } from "../../utils/defaultOptions.mjs";
-const cookieStateStore = ref([]);
+const getCookieStateStore = createStateStore(
+  "MagicCookie",
+  () => []
+);
 export function useCookieState(instanceId) {
+  const cookieStateStore = getCookieStateStore();
+  let scopeCounted = false;
   function createState(id) {
     const state = {
       id,
+      refCount: 0,
       items: [],
       options: { ...defaultOptions },
       viewActive: false
@@ -17,12 +24,21 @@ export function useCookieState(instanceId) {
     cookieStateStore.value = [...cookieStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    cookieStateStore.value = cookieStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState(options) {
-    let state = cookieStateStore.value.find((entry) => {
-      return entry.id === toValue(instanceId);
-    });
+    const currentId = toValue(instanceId);
+    let state = cookieStateStore.value.find((entry) => entry.id === currentId);
     if (!state) {
-      state = addState(toValue(instanceId));
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
     }
     if (options) {
       const mappedOptions = defu(options, defaultOptions);
@@ -30,14 +46,21 @@ export function useCookieState(instanceId) {
     }
     return state;
   }
-  function deleteState() {
-    cookieStateStore.value = cookieStateStore.value.filter(
-      (x) => x.id !== toValue(instanceId)
-    );
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = cookieStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     cookieStateStore
   };
 }

package/dist/plugins/MagicCookie/src/composables/useMagicCookie.mjs

@@ -1,4 +1,4 @@
-import { computed, nextTick } from "vue";
+import { computed, nextTick, onScopeDispose } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useCookieState } from "./private/useCookieState.mjs";
 import { useCookieItem } from "./private/useCookieItem.mjs";
@@ -65,6 +65,11 @@ export function useMagicCookie(id) {
   function onReject(callback) {
     emitter.on("rejectAll", callback);
   }
+  onScopeDispose(() => {
+    emitter.off("acceptAll");
+    emitter.off("acceptSelected");
+    emitter.off("rejectAll");
+  });
   return {
     cookies,
     cookiesSet,

package/dist/plugins/MagicCookie/src/types/index.d.ts

@@ -8,6 +8,7 @@ export interface CookieItem {
 }
 export interface CookieState {
     id: string;
+    refCount: number;
     options: MagicCookieOptions;
     items: CookieItem[];
     viewActive: boolean;

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

@@ -4,9 +4,10 @@ import {
   toValue,
   nextTick,
   watch,
-  onBeforeUnmount,
+  onScopeDispose,
+  onMounted,
   toRefs,
-  onMounted
+  markRaw
 } from "vue";
 import {
   useEventListener,
@@ -61,9 +62,12 @@ export function useDraggableDrag(args) {
     wrapperRect,
     activeSnapPoint
   } = toRefs(state);
-  let cancelPointerup = void 0;
-  let cancelPointermove = void 0;
-  let cancelTouchend = void 0;
+  let cancelPointerup = null;
+  let cancelPointermove = null;
+  let cancelPointercancel = null;
+  let cancelTouchend = null;
+  let resizeObserverEl = null;
+  let resizeObserverWrapper = null;
   const momentumThresholdReached = shallowRef(false);
   const distanceThresholdReached = shallowRef(false);
   const style = computed(
@@ -95,15 +99,12 @@ 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();
+    const el = unrefElement(elRef);
+    const wrapper = unrefElement(wrapperRef);
+    elRect.value = el ? markRaw(el.getBoundingClientRect()) : void 0;
+    wrapperRect.value = wrapper ? markRaw(wrapper.getBoundingClientRect()) : void 0;
   }
   function setDragged({ x, y }) {
     draggedX.value = x - originX.value;
@@ -116,6 +117,7 @@ export function useDraggableDrag(args) {
     distanceThresholdReached.value = false;
     cancelTouchend?.();
     cancelPointerup?.();
+    cancelPointercancel?.();
     cancelPointermove?.();
   }
   function snapToCallback(payload) {
@@ -283,10 +285,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 +325,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;
@@ -347,13 +345,18 @@ export function useDraggableDrag(args) {
     originX.value = e.screenX - draggedX.value;
     originY.value = e.screenY - draggedY.value;
     cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+    cancelPointercancel = useEventListener(
+      document,
+      "pointercancel",
+      onPointerup
+    );
     cancelPointermove = useEventListener(
       document,
       "pointermove",
       onPointermove,
       { passive: false }
     );
-    cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
+    cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : null;
     dragStart.value = /* @__PURE__ */ new Date();
     onPointermove(e);
   }
@@ -383,11 +386,16 @@ export function useDraggableDrag(args) {
   }
   function destroy() {
     emitter.off("snapTo", snapToCallback);
+    cancelPointermove?.();
+    cancelPointerup?.();
+    cancelTouchend?.();
+    resizeObserverEl?.stop();
+    resizeObserverWrapper?.stop();
   }
   onMounted(() => {
     initialize();
   });
-  useResizeObserver(wrapperRef, async () => {
+  resizeObserverWrapper = useResizeObserver(wrapperRef, async () => {
     useThrottleFn(async () => {
       getSizes();
       if (activeSnapPoint.value) {
@@ -397,7 +405,7 @@ export function useDraggableDrag(args) {
       }
     }, 100)();
   });
-  useResizeObserver(elRef, async () => {
+  resizeObserverEl = useResizeObserver(elRef, async () => {
     useThrottleFn(async () => {
       getSizes();
       if (activeSnapPoint.value) {
@@ -413,7 +421,7 @@ export function useDraggableDrag(args) {
       onIdle();
     }
   });
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     destroy();
   });
   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;
 };