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

package/dist/composables/useScrollLockPadding/index.js

@@ -47,6 +47,7 @@ function useScrollLockPadding(args) {
       elem.style.scrollbarGutter = "";
       elem.style.overflow = "";
     });
+    positionFixedElements.value = [];
   }
   return { add, remove };
 }

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

@@ -1 +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":[]}
+{"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.42",
+  "version": "1.0.0-beta.43",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -130,7 +130,7 @@ const functions$1 = [
 	{
 		name: "useScrollLockPadding",
 		"package": "composables",
-		lastUpdated: 1763989817000,
+		lastUpdated: 1765919360000,
 		docs: "https://maas.egineering/vue-equipment/composables/useScrollLockPadding/",
 		description: "A small utility to prevent fixed elements from jumping when locking scroll"
 	},

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/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, {} & {
-    enter: () => any;
     click: (event: MouseEvent) => any;
+    enter: () => any;
 }, string, import("vue").PublicProps, Readonly<MagicCommandItemProps> & Readonly<{
-    onEnter?: (() => any) | undefined;
     onClick?: ((event: MouseEvent) => any) | undefined;
+    onEnter?: (() => 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, {} & {
-    enter: () => any;
     click: (event: MouseEvent) => any;
+    enter: () => any;
 }, string, import("vue").PublicProps, Readonly<MagicCommandItemProps> & Readonly<{
-    onEnter?: (() => any) | undefined;
     onClick?: ((event: MouseEvent) => any) | undefined;
+    onEnter?: (() => 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/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/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(
@@ -97,8 +101,10 @@ export function useDraggableDrag(args) {
   const emitter = useMagicEmitter();
   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;
@@ -111,6 +117,7 @@ export function useDraggableDrag(args) {
     distanceThresholdReached.value = false;
     cancelTouchend?.();
     cancelPointerup?.();
+    cancelPointercancel?.();
     cancelPointermove?.();
   }
   function snapToCallback(payload) {
@@ -338,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);
   }
@@ -374,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) {
@@ -388,7 +405,7 @@ export function useDraggableDrag(args) {
       }
     }, 100)();
   });
-  useResizeObserver(elRef, async () => {
+  resizeObserverEl = useResizeObserver(elRef, async () => {
     useThrottleFn(async () => {
       getSizes();
       if (activeSnapPoint.value) {
@@ -404,7 +421,7 @@ export function useDraggableDrag(args) {
       onIdle();
     }
   });
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     destroy();
   });
   return {

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

@@ -1,4 +1,11 @@
-import { ref, toRefs, computed, toValue, nextTick } from "vue";
+import {
+  ref,
+  toRefs,
+  computed,
+  toValue,
+  nextTick,
+  onScopeDispose
+} from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
@@ -203,6 +210,9 @@ export function useDraggableSnap(args) {
     }
     activeSnapPoint.value = snapPoint;
   }
+  onScopeDispose(() => {
+    cancelInterpolation();
+  });
   return {
     mappedActiveSnapPoint,
     mappedSnapPoints,

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

@@ -2,5 +2,5 @@ import { type MaybeRef } from 'vue';
 import type { DraggableState } from '../../types/index.js';
 export declare function useDraggableState(id: MaybeRef<string>): {
     initializeState: () => DraggableState;
-    deleteState: () => void;
+    draggableStateStore: import("vue").Ref<DraggableState[], DraggableState[]>;
 };

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

@@ -1,9 +1,16 @@
-import { ref, reactive, toValue } from "vue";
-const draggableStateStore = ref([]);
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getDraggableStateStore = createStateStore(
+  "MagicDraggable",
+  () => []
+);
 export function useDraggableState(id) {
+  const draggableStateStore = getDraggableStateStore();
+  let scopeCounted = false;
   function createState(id2) {
     const state = {
       id: id2,
+      refCount: 0,
       dragStart: void 0,
       dragging: false,
       interpolateTo: void 0,
@@ -26,20 +33,43 @@ export function useDraggableState(id) {
     draggableStateStore.value = [...draggableStateStore.value, state];
     return state;
   }
-  function initializeState() {
-    let state = draggableStateStore.value.find((entry) => {
-      return entry.id === id;
-    });
-    if (!state) state = addState(toValue(id));
-    return state;
-  }
   function deleteState() {
+    const currentId = toValue(id);
     draggableStateStore.value = draggableStateStore.value.filter(
-      (x) => x.id !== id
+      (x) => x.id !== currentId
+    );
+  }
+  function initializeState() {
+    const currentId = toValue(id);
+    let state = draggableStateStore.value.find(
+      (entry) => entry.id === currentId
     );
+    if (!state) {
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
+    }
+    return state;
   }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(id);
+    const state = draggableStateStore.value.find(
+      (entry) => entry.id === currentId
+    );
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState
+    draggableStateStore
   };
 }

package/dist/plugins/MagicDraggable/src/composables/useMagicDraggable.mjs

@@ -1,8 +1,9 @@
 import { toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useMagicDraggable(id) {
+  const emitter = useMagicEmitter();
   function snapTo(snapPoint, duration) {
-    useMagicEmitter().emit("snapTo", {
+    emitter.emit("snapTo", {
       id: toValue(id),
       snapPoint,
       duration