@maas/vue-equipment 0.21.2 → 0.21.4

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.21.1"
+  "version": "0.21.3"
 }

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

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
 import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
@@ -54,7 +54,7 @@ const { playing, muted } = usePlayerMediaApi({
   mediaRef: videoRef,
 })
 
-usePlayerRuntime({
+const { initialize, destroy } = usePlayerRuntime({
   id: props.id,
   mediaRef: videoRef,
   src: props.src,
@@ -100,10 +100,15 @@ const computedStyle = computed(() => {
 })
 
 onMounted(() => {
+  initialize()
   if (props.autoplay) {
     muted.value = true
   }
 })
+
+onBeforeUnmount(() => {
+  destroy()
+})
 </script>
 
 <style>

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

@@ -15,10 +15,10 @@ export function usePlayerControlsApi(args) {
   const popoverRect = ref(void 0);
   const { trackRef, barRef, popoverRef } = args;
   const { buffered, duration, playing, currentTime } = usePlayerMediaApi({
-    id: toValue(args.id)
+    id: args.id
   });
   const { play, pause, seek } = usePlayerVideoApi({
-    id: toValue(args.id)
+    id: args.id
   });
   const dragging = ref(false);
   const mouseEntered = ref(false);

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

@@ -8,5 +8,7 @@ export type UsePlayerRuntimeArgs = {
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
     loaded: import("vue").Ref<boolean>;
+    initialize: () => void;
+    destroy: () => void;
 };
 export type UsePlayerRuntimeReturn = ReturnType<typeof usePlayerRuntime>;

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

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, onUnmounted, toValue } from "vue";
+import { ref, watch, toValue } from "vue";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 export function usePlayerRuntime(args) {
   let hls;
@@ -34,16 +34,16 @@ export function usePlayerRuntime(args) {
       });
     }
   };
-  onMounted(() => {
+  function initialize() {
     if (srcType === "native") {
       useNative();
     } else if (srcType === "hls") {
       useHlsJS();
     }
-  });
-  onUnmounted(() => {
+  }
+  function destroy() {
     hls?.destroy();
-  });
+  }
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
     if (payload.id !== toValue(args.id))
@@ -65,6 +65,8 @@ export function usePlayerRuntime(args) {
     });
   });
   return {
-    loaded
+    loaded,
+    initialize,
+    destroy
   };
 }

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

@@ -1,13 +1,13 @@
-import { type MaybeRef, type Ref } from 'vue';
+import { type MaybeRef } from 'vue';
 export type UsePlayerVideoApiArgs = {
     id: MaybeRef<string>;
     playerRef?: MaybeRef<HTMLElement | undefined>;
     videoRef?: MaybeRef<HTMLVideoElement | undefined>;
 };
 export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
-    mouseEntered: Ref<boolean>;
-    isFullscreen: Ref<boolean>;
-    touched: Ref<boolean>;
+    mouseEntered: import("vue").Ref<boolean>;
+    isFullscreen: import("vue").Ref<boolean>;
+    touched: import("vue").Ref<boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;

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

@@ -6,7 +6,7 @@ import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 export function usePlayerVideoApi(args) {
   const fullscreenTarget = ref(void 0);
   const { playing, currentTime, muted } = usePlayerMediaApi({
-    id: toValue(args.id)
+    id: args.id
   });
   const { playerRef, videoRef } = args;
   const touched = ref(false);

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

@@ -59,6 +59,9 @@ export declare function usePlayerApi(args: usePlayerApiArgs): {
     };
     playerRuntime: {
         loaded: import("vue").Ref<boolean>;
+        initialize: () => void;
+        destroy: () => void;
     };
 };
+export type UsePlayerApiApiReturn = ReturnType<typeof usePlayerApi>;
 export {};

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

@@ -7,32 +7,40 @@
 <script setup lang="ts">
 import { ref, inject, computed, onMounted, watch } from 'vue'
 import { unrefElement } from '@vueuse/core'
-import { animate, type Easing } from 'motion'
+import {
+  animate,
+  type MotionKeyframesDefinition,
+  type AnimationControls,
+  type Easing,
+} from 'motion'
 import { ScrollProgressKey } from '../symbols'
 
 interface Props {
-  keyframes: Record<string, any> | null | undefined
+  keyframes: MotionKeyframesDefinition
   offset?: number[] | undefined
   easing?: Easing
+  progress?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  keyframes: undefined,
-  offset: undefined,
   easing: 'linear',
 })
 
-const animation = ref()
-const elRef = ref()
+const animation = ref<AnimationControls | undefined>(undefined)
+const elRef = ref<HTMLElement | undefined>(undefined)
 
 const progress = inject(
   ScrollProgressKey,
   computed(() => 0)
 )
 
+const mappedProgress = computed(() => {
+  return props.progress || progress.value
+})
+
 function createAnimation(currentTime: number = 0) {
   if (!props.keyframes) return
-  animation.value = animate(unrefElement(elRef), props.keyframes, {
+  animation.value = animate(unrefElement(elRef)!, props.keyframes, {
     duration: 1,
     easing: props.easing || 'linear',
     offset: props.offset,
@@ -45,16 +53,16 @@ onMounted(() => {
   createAnimation()
 })
 
-watch(progress, (value) => {
-  if (!value || !animation.value || !props.keyframes) return
+watch(mappedProgress, (value) => {
+  if ((!value && value !== 0) || !animation.value || !props.keyframes) return
   animation.value.currentTime = value
 })
 
 watch(
   () => props.keyframes,
   () => {
-    if (progress.value) {
-      createAnimation(progress.value)
+    if (mappedProgress.value) {
+      createAnimation(mappedProgress.value)
     } else {
       createAnimation()
     }

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

@@ -1,20 +1,15 @@
-import { type Easing } from 'motion';
+import { type MotionKeyframesDefinition, type Easing } from 'motion';
 interface Props {
-    keyframes: Record<string, any> | null | undefined;
+    keyframes: MotionKeyframesDefinition;
     offset?: number[] | undefined;
     easing?: Easing;
+    progress?: number;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    keyframes: undefined;
-    offset: undefined;
     easing: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    keyframes: undefined;
-    offset: undefined;
     easing: string;
 }>>>, {
-    keyframes: Record<string, any> | null | undefined;
-    offset: number[];
     easing: Easing;
 }, {}>, {
     default?(_: {}): any;

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

@@ -1,13 +1,12 @@
 <template>
   <div ref="elRef" class="magic-scroll-scene">
-    <slot :map-value="mapValue" :progress="progress" />
+    <slot :progress="progress" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, provide, inject, onMounted, watch, nextTick, readonly } from 'vue'
-import { unrefElement, useIntersectionObserver } from '@vueuse/core'
-import { mapValue } from '@maas/vue-equipment/utils'
+import { useIntersectionObserver } from '@vueuse/core'
 import { useScrollApi } from '../composables/useScrollApi'
 import {
   ScrollPositionKey,
@@ -71,6 +70,5 @@ useIntersectionObserver(
   { rootMargin: '150% 0px 150% 0px', threshold: 0.01 }
 )
 
-provide('mapValue', mapValue)
 provide(ScrollProgressKey, readonly(progress))
 </script>

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

@@ -1,4 +1,3 @@
-import { mapValue } from '@maas/vue-equipment/utils';
 import type { FromTo } from '../types';
 interface Props {
     from?: FromTo;
@@ -16,7 +15,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     from: FromTo;
 }, {}>, {
     default?(_: {
-        mapValue: typeof mapValue;
         progress: number;
     }): any;
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.21.2",
+  "version": "0.21.4",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",