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

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.mjs

@@ -1,4 +1,9 @@
-import { shallowRef, toRefs, toValue } from "vue";
+import {
+  onScopeDispose,
+  shallowRef,
+  toRefs,
+  toValue
+} from "vue";
 import { useEventListener } from "@vueuse/core";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerState } from "./usePlayerState.mjs";
@@ -13,6 +18,9 @@ export function usePlayerRuntime(args) {
   const { initializeState } = usePlayerState(toValue(id));
   const state = initializeState();
   const { loaded } = toRefs(state);
+  let cancelLoaded = void 0;
+  let cancelPlay = void 0;
+  let cancelPause = void 0;
   function handleHlsRuntimeError(args2) {
     const { data, hls: hls2 } = args2;
     const error = new Error(data.details || "HLS error");
@@ -63,13 +71,18 @@ export function usePlayerRuntime(args) {
     }
   }
   function useNative() {
+    if (!mediaRef) {
+      return;
+    }
     const el = toValue(mediaRef);
     if (!el || !src) {
       return;
     }
     try {
       el.src = src;
-      el.addEventListener(
+      cancelLoaded?.();
+      cancelLoaded = useEventListener(
+        mediaRef,
         "loadeddata",
         () => {
           loaded.value = true;
@@ -114,10 +127,12 @@ export function usePlayerRuntime(args) {
       hls.on(Hls.Events.ERROR, (_event, data) => {
         handleHlsRuntimeError({ data, hls });
       });
-      useEventListener(mediaRef, "pause", () => {
+      cancelPause?.();
+      cancelPause = useEventListener(mediaRef, "pause", () => {
         hls?.stopLoad();
       });
-      useEventListener(mediaRef, "play", () => {
+      cancelPlay?.();
+      cancelPlay = useEventListener(mediaRef, "play", () => {
         hls?.startLoad();
       });
       hls.loadSource(src);
@@ -130,14 +145,10 @@ export function usePlayerRuntime(args) {
       });
     }
   }
-  function initialize(autoplay = false) {
-    if (srcType === "native") {
-      useNative();
-    } else if (srcType === "hls") {
-      useHlsJS(autoplay);
-    }
-  }
   function destroy() {
+    cancelLoaded?.();
+    cancelPlay?.();
+    cancelPause?.();
     try {
       hls?.destroy();
     } finally {
@@ -145,8 +156,17 @@ export function usePlayerRuntime(args) {
       deferredLoading.value = false;
     }
   }
+  function initialize(autoplay = false) {
+    if (srcType === "native") {
+      useNative();
+    } else if (srcType === "hls") {
+      useHlsJS(autoplay);
+    }
+  }
+  onScopeDispose(() => {
+    destroy();
+  });
   return {
-    initialize,
-    destroy
+    initialize
   };
 }

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerState.d.ts

@@ -1,7 +1,6 @@
-import { type Ref, type MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { PlayerState } from '../../types/index.js';
 export declare function usePlayerState(id: MaybeRef<string>): {
     initializeState: () => PlayerState;
-    deleteState: () => void;
-    playerStateStore: Ref<PlayerState[], PlayerState[]>;
+    playerStateStore: import("vue").Ref<PlayerState[], PlayerState[]>;
 };

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerState.mjs

@@ -1,9 +1,16 @@
-import { ref, reactive, toValue } from "vue";
-const playerStateStore = ref([]);
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getPlayerStateStore = createStateStore(
+  "MagicPlayer",
+  () => []
+);
 export function usePlayerState(id) {
+  const playerStateStore = getPlayerStateStore();
+  let scopeCounted = false;
   function createState(id2) {
     const state = {
       id: id2,
+      refCount: 0,
       buffered: [],
       currentTime: 0,
       dragging: false,
@@ -42,21 +49,39 @@ export function usePlayerState(id) {
     playerStateStore.value = [...playerStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(id);
+    playerStateStore.value = playerStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState() {
-    let state = playerStateStore.value.find((entry) => {
-      return entry.id === id;
-    });
+    const currentId = toValue(id);
+    let state = playerStateStore.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() {
-    playerStateStore.value = playerStateStore.value.filter((x) => x.id !== id);
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(id);
+    const state = playerStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     playerStateStore
   };
 }

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -43,7 +43,6 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
     };
     controlsApi: {
         initialize: () => void;
-        destroy: () => void;
         bufferedPercentage: import("vue").ComputedRef<number>;
         onMouseenter: () => void;
         onMouseleave: () => void;
@@ -53,7 +52,6 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
     };
     playerRuntime: {
         initialize: (autoplay?: boolean) => void;
-        destroy: () => void;
     };
 };
 export type UseMagicPlayerReturn = ReturnType<typeof useMagicPlayer>;

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

@@ -37,6 +37,7 @@ export interface RequiredMagicPlayerOptions {
 export type Buffered = [number, number][];
 export interface PlayerState {
     id: string;
+    refCount: number;
     buffered: Buffered;
     currentTime: number;
     dragging: boolean;

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue

@@ -56,8 +56,8 @@ watch(
 );
 useIntersectionObserver(
   elRef,
-  ([{ isIntersecting }]) => {
-    intersecting.value = isIntersecting;
+  ([entry]) => {
+    intersecting.value = entry?.isIntersecting ?? intersecting.value;
   },
   { rootMargin: "150% 0px 150% 0px", immediate: true }
 );

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue

@@ -5,7 +5,15 @@
 </template>
 
 <script setup>
-import { ref, inject, computed, onMounted, watch, useTemplateRef } from "vue";
+import {
+  ref,
+  inject,
+  computed,
+  onMounted,
+  watch,
+  useTemplateRef,
+  onUnmounted
+} from "vue";
 import { unrefElement } from "@vueuse/core";
 import defu from "defu";
 import {
@@ -63,4 +71,8 @@ watch(
 onMounted(() => {
   createAnimation();
 });
+onUnmounted(() => {
+  animation.value?.cancel();
+  animation.value = void 0;
+});
 </script>

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue

@@ -12,7 +12,8 @@ import {
   watch,
   nextTick,
   readonly,
-  useTemplateRef
+  useTemplateRef,
+  onBeforeUnmount
 } from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
 import {
@@ -67,15 +68,18 @@ watch(
   },
   { once: true }
 );
-useIntersectionObserver(
+const intersectionObserver = useIntersectionObserver(
   elRef,
-  ([{ isIntersecting }]) => {
-    intersecting.value = isIntersecting;
-    if (isIntersecting) {
+  ([entry]) => {
+    intersecting.value = entry?.isIntersecting ?? intersecting.value;
+    if (entry?.isIntersecting) {
       calculate();
     }
   },
   { rootMargin: "150% 0px 150% 0px", immediate: true }
 );
+onBeforeUnmount(() => {
+  intersectionObserver.stop();
+});
 provide(MagicScrollProgress, readonly(progress));
 </script>

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.mjs

@@ -3,6 +3,7 @@ import { useElementBounding, useWindowSize } from "@vueuse/core";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useCollisionDetection(args) {
   const { id, scrollY, child, parent, offset } = args;
+  const magicEmitter = useMagicEmitter();
   const alerted = reactive({
     up: {
       top: {
@@ -114,7 +115,7 @@ export function useCollisionDetection(args) {
     const mappedParentEdge = toValue(mappedParentBoundingRect[parentEdge]) + offset2;
     if (direction === "down" && mappedChildEdge <= mappedParentEdge || direction === "up" && mappedChildEdge >= mappedParentEdge) {
       alerted[direction][childEdge][parentEdge] = true;
-      useMagicEmitter().emit("collision", {
+      magicEmitter.emit("collision", {
         id,
         direction,
         parentEdge,

package/dist/plugins/MagicToast/src/components/MagicToastProvider.vue

@@ -42,13 +42,7 @@
 </template>
 
 <script setup>
-import {
-  toValue,
-  useTemplateRef,
-  provide,
-  watch,
-  onBeforeUnmount
-} from "vue";
+import { toValue, useTemplateRef, provide, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastView } from "../composables/private/useToastView";
@@ -71,7 +65,7 @@ defineOptions({
   inheritAttrs: false
 });
 const { deleteView } = useToastView(id);
-const { deleteState, initializeState } = useToastState(id);
+const { initializeState } = useToastState(id);
 const state = initializeState(options);
 const listRef = useTemplateRef("list");
 const {
@@ -93,9 +87,6 @@ watch(
     deep: true
   }
 );
-onBeforeUnmount(() => {
-  deleteState();
-});
 provide(MagicToastInstanceId, id);
 </script>
 

package/dist/plugins/MagicToast/src/components/MagicToastView.vue

@@ -116,6 +116,7 @@ const { style, onPointerdown, onClick } = useToastDrag({
 
 .magic-toast-view__drag {
   display: block;
+  touch-action: none;
 }
 
 .magic-toast-view[data-dragging='true'] {

package/dist/plugins/MagicToast/src/composables/private/useToastDrag.mjs

@@ -1,4 +1,4 @@
-import { computed, toRefs, toValue } from "vue";
+import { computed, onScopeDispose, toRefs, toValue } from "vue";
 import { useEventListener } from "@vueuse/core";
 import {
   guardedReleasePointerCapture,
@@ -34,6 +34,7 @@ export function useToastDrag(args) {
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;
+  let cancelTouchcancel = void 0;
   const hasDragged = computed(() => {
     const hasDraggedX = !isWithinRange({
       input: draggedX.value,
@@ -187,6 +188,7 @@ export function useToastDrag(args) {
     cancelTouchend?.();
     cancelPointerup?.();
     cancelPointermove?.();
+    cancelTouchcancel?.();
   }
   function onPointerup(e) {
     if (shouldClose.value) {
@@ -248,6 +250,12 @@ export function useToastDrag(args) {
       y: draggedY.value
     });
   }
+  function destroy() {
+    cancelPointermove?.();
+    cancelPointerup?.();
+    cancelTouchend?.();
+    cancelTouchcancel?.();
+  }
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
@@ -270,6 +278,7 @@ export function useToastDrag(args) {
       lastDraggedX.value = draggedX.value;
       lastDraggedY.value = draggedY.value;
       cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+      cancelTouchcancel = useEventListener(document, "touchcancel", onPointerup);
       cancelPointermove = useEventListener(
         document,
         "pointermove",
@@ -295,6 +304,9 @@ export function useToastDrag(args) {
       state.expanded = true;
     }
   }
+  onScopeDispose(() => {
+    destroy();
+  });
   return {
     onPointerdown,
     onClick,

package/dist/plugins/MagicToast/src/composables/private/useToastState.d.ts

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

package/dist/plugins/MagicToast/src/composables/private/useToastState.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 toastStateStore = ref([]);
+const getToastStateStore = createStateStore(
+  "MagicToast",
+  () => []
+);
 export function useToastState(instanceId) {
+  const toastStateStore = getToastStateStore();
+  let scopeCounted = false;
   function createState(id) {
     const state = {
       id,
+      refCount: 0,
       options: { ...defaultOptions },
       views: [],
       expanded: false,
@@ -18,12 +25,21 @@ export function useToastState(instanceId) {
     toastStateStore.value = [...toastStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    toastStateStore.value = toastStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState(options) {
-    let state = toastStateStore.value.find((entry) => {
-      return entry.id === toValue(instanceId);
-    });
+    const currentId = toValue(instanceId);
+    let state = toastStateStore.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);
@@ -32,14 +48,21 @@ export function useToastState(instanceId) {
     }
     return state;
   }
-  function deleteState() {
-    toastStateStore.value = toastStateStore.value.filter(
-      (x) => x.id !== toValue(instanceId)
-    );
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = toastStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     toastStateStore
   };
 }

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

@@ -27,6 +27,7 @@ export interface ToastView {
 }
 export interface ToastState {
     id: string;
+    refCount: number;
     views: ToastView[];
     options: ToastDefaultOptions;
     expanded: boolean;

package/dist/utils/index.d.ts

@@ -1,5 +1,10 @@
+import { Ref } from 'vue';
+
 declare function clampValue(value: number, min: number, max: number): number;
 
+type CreateStore<T> = () => Ref<T>;
+declare function createStateStore<T>(key: string, setInitialValue: () => T): CreateStore<T>;
+
 declare function linear(t: number): number;
 declare function easeInQuad(t: number): number;
 declare function easeOutQuad(t: number): number;
@@ -27,6 +32,8 @@ type InterpolateArgs = {
 };
 declare function interpolate(args: InterpolateArgs): number;
 
+declare function isAndroid(): boolean;
+
 declare function isIOS(): boolean;
 
 interface isWithinRangeArgs {
@@ -81,4 +88,4 @@ type RequireAllNested<T> = {
 
 type ValueOf<T> = T[keyof T];
 
-export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, type ValueOf, clampValue, easeInCubic, easeInOutCubic, easeInOutQuad, easeInOutQuart, easeInOutQuint, easeInQuad, easeInQuart, easeInQuint, easeOutBack, easeOutCubic, easeOutQuad, easeOutQuart, easeOutQuint, formatTime, guardedReleasePointerCapture, guardedSetPointerCapture, interpolate, isIOS, isWithinRange, linear, mapValue, matchClass, scrollbarGutterSupport, scrollbarWidth, slugify, uniq };
+export { type CreateStore, type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, type ValueOf, clampValue, createStateStore, easeInCubic, easeInOutCubic, easeInOutQuad, easeInOutQuart, easeInOutQuint, easeInQuad, easeInQuart, easeInQuint, easeOutBack, easeOutCubic, easeOutQuad, easeOutQuart, easeOutQuint, formatTime, guardedReleasePointerCapture, guardedSetPointerCapture, interpolate, isAndroid, isIOS, isWithinRange, linear, mapValue, matchClass, scrollbarGutterSupport, scrollbarWidth, slugify, uniq };