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

package/dist/plugins/MagicMarquee/src/composables/private/useMarqueeState.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 marqueeStateStore = ref([]);
+const getMarqueeStateStore = createStateStore(
+  "MagicMarquee",
+  () => []
+);
 export function useMarqueeState(instanceId) {
+  const marqueeStateStore = getMarqueeStateStore();
+  let scopeCounted = false;
   function createState(id) {
     const state = {
       id,
+      refCount: 0,
       options: { ...defaultOptions },
       playing: true
     };
@@ -16,12 +23,21 @@ export function useMarqueeState(instanceId) {
     marqueeStateStore.value = [...marqueeStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    marqueeStateStore.value = marqueeStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState(options) {
-    let state = marqueeStateStore.value.find((entry) => {
-      return entry.id === toValue(instanceId);
-    });
+    const currentId = toValue(instanceId);
+    let state = marqueeStateStore.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 +45,23 @@ export function useMarqueeState(instanceId) {
     }
     return state;
   }
-  function deleteState() {
-    marqueeStateStore.value = marqueeStateStore.value.filter(
-      (x) => x.id !== toValue(instanceId)
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = marqueeStateStore.value.find(
+      (entry) => entry.id === currentId
     );
-  }
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     marqueeStateStore
   };
 }

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

@@ -4,6 +4,7 @@ export interface MagicMarqueeOptions {
 }
 export interface MarqueeState {
     id: string;
+    refCount: number;
     options: MagicMarqueeOptions;
     playing: boolean;
 }

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, {} & {
-    enter: () => any;
     click: (event: MouseEvent) => any;
+    enter: () => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & 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/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, {} & {
-    enter: () => any;
     click: (event: MouseEvent) => any;
+    enter: () => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & 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/MagicMenu/src/components/MagicMenuProvider.vue

@@ -15,8 +15,7 @@ import {
   shallowRef,
   provide,
   watch,
-  toValue,
-  onBeforeUnmount
+  toValue
 } from "vue";
 import { onClickOutside, onKeyStroke, usePointer } from "@vueuse/core";
 import { VuePrimitive } from "@maas/vue-primitive";
@@ -33,7 +32,7 @@ const { id, options } = defineProps({
 });
 const elRef = useTemplateRef("el");
 const mappedOptions = defu(options, defaultOptions);
-const { initializeState, deleteState } = useMenuState(id);
+const { initializeState } = useMenuState(id);
 const state = initializeState(mappedOptions);
 const lastX = shallowRef(0);
 const lastY = shallowRef(0);
@@ -87,9 +86,6 @@ onClickOutside(
     ]
   }
 );
-onBeforeUnmount(() => {
-  deleteState();
-});
 provide(MagicMenuInstanceId, id);
 </script>
 

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

@@ -1,4 +1,4 @@
-import { ref, shallowRef } from "vue";
+import { onScopeDispose, ref, shallowRef } from "vue";
 import { useEventListener } from "@vueuse/core";
 export function useMenuCursor(view, debug = false) {
   let cancelListener = new AbortController();
@@ -116,6 +116,9 @@ export function useMenuCursor(view, debug = false) {
         break;
       }
     }
+    if (!sidePoints[0] || !sidePoints[1]) {
+      return [];
+    }
     const [a, b, c] = extendTriangle(
       [centerPoint, sidePoints[0], sidePoints[1]],
       16
@@ -124,6 +127,9 @@ export function useMenuCursor(view, debug = false) {
   }
   function triangleOverlap(cursor, fromBounding, toBounding) {
     const [a, b, c] = getTriangle(fromBounding, toBounding);
+    if (!a || !b || !c) {
+      return false;
+    }
     return isPointInTriangle({
       p: cursor,
       a,
@@ -167,6 +173,9 @@ export function useMenuCursor(view, debug = false) {
         from.forEach((trigger) => {
           const fromBounding = trigger.getBoundingClientRect();
           const [a, b, c] = getTriangle(fromBounding, toBounding);
+          if (!a || !b || !c) {
+            return;
+          }
           allCoords.push(a, b, c);
         });
         coords.value = allCoords;
@@ -187,6 +196,9 @@ export function useMenuCursor(view, debug = false) {
     isInsideTriangle.value = false;
     cancelListener.abort();
   }
+  onScopeDispose(() => {
+    destroy();
+  });
   return {
     coords,
     isInsideFrom,

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

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

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

@@ -1,11 +1,15 @@
-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 menuStateStore = ref([]);
+const getMenuStateStore = createStateStore("MagicMenu", () => []);
 export function useMenuState(instanceId) {
+  const menuStateStore = getMenuStateStore();
+  let scopeCounted = false;
   function createState(id) {
     const state = {
       id,
+      refCount: 0,
       options: { ...defaultOptions },
       views: [],
       active: false,
@@ -22,12 +26,21 @@ export function useMenuState(instanceId) {
     menuStateStore.value = [...menuStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    menuStateStore.value = menuStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState(options) {
-    let state = menuStateStore.value.find((entry) => {
-      return entry.id === toValue(instanceId);
-    });
+    const currentId = toValue(instanceId);
+    let state = menuStateStore.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);
@@ -35,14 +48,21 @@ export function useMenuState(instanceId) {
     }
     return state;
   }
-  function deleteState() {
-    menuStateStore.value = menuStateStore.value.filter(
-      (x) => x.id !== toValue(instanceId)
-    );
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = menuStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     menuStateStore
   };
 }

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

@@ -80,7 +80,7 @@ export function useMenuTrigger(args) {
     if (mappedTrigger.value.includes("right-click") && viewId) {
       e.preventDefault();
       e.stopPropagation();
-      if (control.value || shift.value) {
+      if (control?.value || shift?.value) {
         onRightClick(
           new MouseEvent(e.type, {
             ...e,

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

@@ -68,6 +68,7 @@ export interface MenuView {
 }
 export interface MenuState {
     id: string;
+    refCount: number;
     active: boolean;
     views: MenuView[];
     options: CombinedMagicMenuOptions;

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

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+import type { ModalState } from '../../types/index.js';
+export declare function useModalState(id: MaybeRef<string>): {
+    initializeState: () => ModalState;
+    modalStateStore: import("vue").Ref<ModalState[], ModalState[]>;
+};

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

@@ -0,0 +1,58 @@
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getModalStateStore = createStateStore(
+  "MagicModal",
+  () => []
+);
+export function useModalState(id) {
+  const modalStateStore = getModalStateStore();
+  let scopeCounted = false;
+  function createState(id2) {
+    const state = {
+      id: id2,
+      refCount: 0,
+      active: false
+    };
+    return reactive(state);
+  }
+  function addState(id2) {
+    const state = createState(id2);
+    modalStateStore.value = [...modalStateStore.value, state];
+    return state;
+  }
+  function deleteState() {
+    const currentId = toValue(id);
+    modalStateStore.value = modalStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
+  function initializeState() {
+    const currentId = toValue(id);
+    let state = modalStateStore.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 = modalStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
+  return {
+    initializeState,
+    modalStateStore
+  };
+}

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

@@ -1,5 +1 @@
-export declare function useModalStore(): {
-    modalStore: import("vue").Ref<string[], string[]>;
-    addInstance: (id: string) => void;
-    removeInstance: (id: string) => void;
-};
+export { useModalState } from './useModalState.js';

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

@@ -1,15 +1 @@
-import { ref } from "vue";
-const modalStore = ref([]);
-export function useModalStore() {
-  function addInstance(id) {
-    modalStore.value.push(id);
-  }
-  function removeInstance(id) {
-    modalStore.value = modalStore.value.filter((x) => x !== id);
-  }
-  return {
-    modalStore,
-    addInstance,
-    removeInstance
-  };
-}
+export { useModalState } from "./useModalState.mjs";

package/dist/plugins/MagicModal/src/composables/useMagicModal.mjs

@@ -1,13 +1,14 @@
-import { computed, toValue } from "vue";
-import { useModalStore } from "./private/useModalStore.mjs";
+import { computed } from "vue";
+import { useModalState } from "./private/useModalState.mjs";
 export function useMagicModal(id) {
-  const { modalStore, addInstance, removeInstance } = useModalStore();
-  const isActive = computed(() => modalStore.value.includes(toValue(id)));
+  const { initializeState } = useModalState(id);
+  const state = initializeState();
+  const isActive = computed(() => state.active);
   function open() {
-    addInstance(toValue(id));
+    state.active = true;
   }
   function close() {
-    removeInstance(toValue(id));
+    state.active = false;
   }
   return {
     isActive,

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

@@ -26,3 +26,8 @@ export interface ModalEvents {
     leave: string;
     afterLeave: string;
 }
+export interface ModalState {
+    id: string;
+    refCount: number;
+    active: boolean;
+}

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

@@ -8,7 +8,13 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, watch, useTemplateRef } from "vue";
+import {
+  onMounted,
+  onUnmounted,
+  watch,
+  useTemplateRef,
+  onBeforeUnmount
+} from "vue";
 import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useNoiseApi } from "../composables/private/useNoiseApi";
 const { pause = false, options } = defineProps({
@@ -30,7 +36,10 @@ const {
   throttledRotateAndTransfer,
   isReady
 } = noiseApi;
-useResizeObserver(canvasRef, useDebounceFn(initialize, 100));
+const resizeObserver = useResizeObserver(
+  canvasRef,
+  useDebounceFn(initialize, 100)
+);
 watch(
   () => pause,
   (pause2) => {
@@ -47,6 +56,9 @@ onMounted(() => {
   throttledDraw();
   throttledRotateAndTransfer();
 });
+onBeforeUnmount(() => {
+  resizeObserver.stop();
+});
 onUnmounted(() => {
   isReady.value = false;
   transferControls.value?.pause();

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

@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { computed, toRefs, onBeforeUnmount } from "vue";
+import { computed, toRefs } from "vue";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
@@ -30,7 +30,7 @@ const magicError = useMagicError({
   prefix: "MagicPie",
   source: "MagicPie"
 });
-const { initializeState, deleteState } = usePieState(id);
+const { initializeState } = usePieState(id);
 const state = initializeState();
 const { percentage } = toRefs(state);
 function generatePath(points) {
@@ -40,9 +40,18 @@ function generatePath(points) {
       errorCode: "missing_points"
     });
   }
+  if (!points[0]) {
+    magicError.throwError({
+      message: "Points contain invalid coordinates",
+      errorCode: "invalid_points"
+    });
+  }
   let path2 = `M ${points[0][0]} ${points[0][1]}`;
   for (let i = 1; i < points.length; i++) {
-    path2 += ` L ${points[i][0]} ${points[i][1]}`;
+    if (!points[i]) {
+      continue;
+    }
+    path2 += ` L ${points[i]?.[0]} ${points[i]?.[1]}`;
   }
   return path2;
 }
@@ -154,9 +163,6 @@ function generatePie(percentage2, flip) {
 const path = computed(() => {
   return generatePie(percentage.value, options?.flip);
 });
-onBeforeUnmount(() => {
-  deleteState();
-});
 </script>
 
 <style>

package/dist/plugins/MagicPie/src/composables/private/usePieState.d.ts

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

package/dist/plugins/MagicPie/src/composables/private/usePieState.mjs

@@ -1,9 +1,13 @@
-import { ref, reactive, toValue } from "vue";
-const pieStateStore = ref([]);
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getPieStateStore = createStateStore("MagicPie", () => []);
 export function usePieState(id) {
+  const pieStateStore = getPieStateStore();
+  let scopeCounted = false;
   function createState(id2) {
     const state = {
       id: id2,
+      refCount: 0,
       percentage: 0,
       interpolationId: void 0
     };
@@ -14,22 +18,39 @@ export function usePieState(id) {
     pieStateStore.value = [...pieStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(id);
+    pieStateStore.value = pieStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState() {
-    let state = pieStateStore.value.find((entry) => {
-      return entry.id === id;
-    });
+    const currentId = toValue(id);
+    let state = pieStateStore.value.find((entry) => entry.id === currentId);
     if (!state) {
-      state = addState(toValue(id));
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
     }
     return state;
   }
-  function deleteState() {
-    pieStateStore.value = pieStateStore.value.filter(
-      (x) => x.id !== id
-    );
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(id);
+    const state = pieStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState
+    pieStateStore
   };
 }

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

@@ -3,6 +3,7 @@ export interface MagicPieOptions {
 }
 export interface PieState {
     id: string;
+    refCount: number;
     percentage: number;
     interpolationId: number | undefined;
 }

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudio.vue

@@ -9,9 +9,9 @@ import {
   inject,
   watch,
   onMounted,
-  onBeforeUnmount,
   shallowRef,
-  computed
+  computed,
+  onBeforeUnmount
 } from "vue";
 import {
   useElementVisibility,
@@ -38,6 +38,8 @@ const magicError = useMagicError({
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const injectedPlayerRef = inject(MagicPlayerRef, void 0);
+let cancelFocus = void 0;
+let cancelBlur = void 0;
 magicError.assert(injectedInstanceId, {
   message: "MagicPlayerAudio must be used within a MagicPlayerProvider",
   errorCode: "missing_instance_id"
@@ -47,7 +49,7 @@ magicError.assert(injectedOptions, {
   errorCode: "missing_options"
 });
 const elRef = useTemplateRef("el");
-const { initialize, destroy } = usePlayerRuntime({
+const { initialize } = usePlayerRuntime({
   id: injectedInstanceId,
   mediaRef: elRef,
   src: injectedOptions.src,
@@ -84,8 +86,8 @@ function onWindowBlur() {
   pause();
 }
 if (manageWindow.value) {
-  useEventListener(defaultWindow, "focus", onWindowFocus);
-  useEventListener(defaultWindow, "blur", onWindowBlur);
+  cancelFocus = useEventListener(defaultWindow, "focus", onWindowFocus);
+  cancelBlur = useEventListener(defaultWindow, "blur", onWindowBlur);
 }
 if (manageViewport.value) {
   watch(isVisible, (value) => {
@@ -105,7 +107,8 @@ onMounted(() => {
   initialize();
 });
 onBeforeUnmount(() => {
-  destroy();
+  cancelFocus?.();
+  cancelBlur?.();
 });
 </script>
 

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue

@@ -102,13 +102,7 @@ const trackRef = useTemplateRef("track");
 const { play, pause } = usePlayerAudioApi({
   id: mappedInstanceId.value
 });
-const {
-  initialize,
-  destroy,
-  onMouseenter,
-  onMouseleave,
-  onMouseleaveTimeline
-} = usePlayerControlsApi({
+const { initialize, onMouseenter, onMouseleave, onMouseleaveTimeline } = usePlayerControlsApi({
   id: mappedInstanceId.value,
   barRef,
   trackRef
@@ -128,7 +122,9 @@ const {
 const { idle } = useIdle(injectedOptions?.threshold?.idle);
 initialize();
 onBeforeUnmount(() => {
-  destroy();
+  state.controlsBarRect = void 0;
+  state.controlsTrackRect = void 0;
+  state.controlsPopoverRect = void 0;
 });
 provide(MagicPlayerInstanceId, mappedInstanceId.value);
 provide(MagicPlayerTrackRef, trackRef);