@maas/vue-equipment 0.21.3 → 0.21.4

package/dist/nuxt/module.json

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

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.3",
+  "version": "0.21.4",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",