@maas/vue-equipment 0.5.0 → 0.6.1

package/dist/plugins/MagicMarquee/src/composables/{useMarquee.d.ts → useMarqueeApi.d.ts}

@@ -1,5 +1,5 @@
 import { type MaybeRef } from '@vueuse/core';
-export type UseMarqueeParams = {
+export type UseMarqueeApiParams = {
     child: MaybeRef<HTMLElement | null | undefined>;
     parent: MaybeRef<HTMLElement | null | undefined>;
     options?: {
@@ -7,7 +7,7 @@ export type UseMarqueeParams = {
         direction?: MaybeRef<'reverse' | 'normal'>;
     };
 };
-export declare function useMarquee({ child, parent, options }: UseMarqueeParams): {
+export declare function useMarqueeApi({ child, parent, options }: UseMarqueeApiParams): {
     duplicates: import("vue").Ref<number>;
     playing: import("vue").Ref<boolean>;
     play: () => void;

package/dist/plugins/MagicMarquee/src/composables/{useMarquee.mjs → useMarqueeApi.mjs}

@@ -4,7 +4,7 @@ import {
   useResizeObserver,
   toValue
 } from "@vueuse/core";
-export function useMarquee({ child, parent, options }) {
+export function useMarqueeApi({ child, parent, options }) {
   const duplicates = ref(1);
   const childRect = useElementBounding(child);
   const parentRect = useElementBounding(parent);

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

@@ -25,8 +25,10 @@
         <transition
           :name="mappedOptions.transitions?.content"
           @before-leave="onBeforeLeave"
+          @leave="onLeave"
           @after-leave="onAfterLeave"
           @before-enter="onBeforeEnter"
+          @enter="onEnter"
           @after-enter="onAfterEnter"
         >
           <div
@@ -36,7 +38,7 @@
           >
             <component
               v-if="component"
-              v-bind="componentProps"
+              v-bind="props"
               :is="component"
               @close="close"
             />
@@ -49,20 +51,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
-import { useModalApi } from './../composables/useModalApi'
-import { onKeyStroke, toValue } from '@vueuse/core'
+import {
+  ref,
+  watch,
+  nextTick,
+  toValue,
+  type Component,
+  type MaybeRef,
+} from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import { defu } from 'defu'
 import { defaultOptions } from './../utils/defaultOptions'
-import { useModalEmitter } from './../composables/useModalEmitter'
+import { useModalApi } from './../composables/useModalApi'
+import { useModalCallback } from '../composables/private/useModalCallback'
 
-import type { MaybeRef } from '@vueuse/core'
-import type { DefaultOptions } from './../types/index'
+import type { Options } from './../types/index'
 
 interface MagicModalProps {
   id: MaybeRef<string>
-  component?: any
-  componentProps?: Record<string, unknown>
-  options?: DefaultOptions
+  component?: Component
+  props?: Record<string, unknown>
+  options?: Options
 }
 
 const props = withDefaults(defineProps<MagicModalProps>(), {
@@ -71,13 +80,7 @@ const props = withDefaults(defineProps<MagicModalProps>(), {
 
 const modal = ref<HTMLElement | undefined>(undefined)
 const modalApi = useModalApi(props.id, { focusTarget: modal })
-
-const mappedOptions = {
-  ...defaultOptions,
-  ...props.options,
-  teleport: { ...defaultOptions.teleport, ...props.options.teleport },
-  transitions: { ...defaultOptions.transitions, ...props.options.transitions },
-}
+const mappedOptions = defu(props.options, defaultOptions)
 
 const {
   isActive,
@@ -94,6 +97,25 @@ const {
 const innerActive = ref(false)
 const wrapperActive = ref(false)
 
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave,
+} = useModalCallback({
+  id: props.id,
+  mappedOptions,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+  lockScroll,
+  unlockScroll,
+  trapFocus,
+  releaseFocus,
+  wrapperActive,
+})
+
 // Handle state
 async function onOpen() {
   wrapperActive.value = true
@@ -105,48 +127,6 @@ function onClose() {
   innerActive.value = false
 }
 
-// Transition Callbacks
-function onBeforeEnter() {
-  useModalEmitter().emit('beforeEnter', toValue(props.id))
-}
-
-async function onAfterEnter() {
-  if (mappedOptions.scrollLock) {
-    if (mappedOptions.scrollLockPadding) {
-      addScrollLockPadding()
-    }
-
-    lockScroll()
-  }
-
-  if (mappedOptions.focusTrap) {
-    await nextTick()
-    trapFocus()
-  }
-
-  useModalEmitter().emit('afterEnter', toValue(props.id))
-}
-
-function onBeforeLeave() {
-  useModalEmitter().emit('beforeLeave', toValue(props.id))
-}
-
-function onAfterLeave() {
-  if (mappedOptions.scrollLock) {
-    unlockScroll()
-    if (mappedOptions.scrollLockPadding) {
-      removeScrollLockPadding()
-    }
-  }
-
-  if (mappedOptions.focusTrap) {
-    releaseFocus()
-  }
-
-  wrapperActive.value = false
-  useModalEmitter().emit('afterLeave', toValue(props.id))
-}
-
 onKeyStroke('Escape', (e) => {
   e.preventDefault()
   close()

package/dist/plugins/MagicModal/src/components/MagicModal.vue.d.ts

@@ -1,37 +1,37 @@
-import type { MaybeRef } from '@vueuse/core';
-import type { DefaultOptions } from './../types/index';
+import { type Component, type MaybeRef } from 'vue';
+import type { Options } from './../types/index';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    props: {
+        type: import("vue").PropType<Record<string, unknown>>;
+    };
     id: {
         type: import("vue").PropType<MaybeRef<string>>;
         required: true;
     };
     component: {
-        type: import("vue").PropType<any>;
-    };
-    componentProps: {
-        type: import("vue").PropType<Record<string, unknown>>;
+        type: import("vue").PropType<Component>;
     };
     options: {
-        type: import("vue").PropType<DefaultOptions>;
-        default: () => DefaultOptions;
+        type: import("vue").PropType<Options>;
+        default: () => Options;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    props: {
+        type: import("vue").PropType<Record<string, unknown>>;
+    };
     id: {
         type: import("vue").PropType<MaybeRef<string>>;
         required: true;
     };
     component: {
-        type: import("vue").PropType<any>;
-    };
-    componentProps: {
-        type: import("vue").PropType<Record<string, unknown>>;
+        type: import("vue").PropType<Component>;
     };
     options: {
-        type: import("vue").PropType<DefaultOptions>;
-        default: () => DefaultOptions;
+        type: import("vue").PropType<Options>;
+        default: () => Options;
     };
 }>>, {
-    options: DefaultOptions;
+    options: Options;
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -0,0 +1,22 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { Options } from '../../types.js';
+type Args = {
+    id: MaybeRef<string>;
+    mappedOptions: Options;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    wrapperActive: Ref<boolean>;
+};
+export declare function useModalCallback({ id, mappedOptions, addScrollLockPadding, removeScrollLockPadding, lockScroll, unlockScroll, trapFocus, releaseFocus, wrapperActive, }: Args): {
+    onBeforeEnter: (_el: Element) => void;
+    onEnter: (_el: Element) => void;
+    onAfterEnter: (el: Element) => Promise<void>;
+    onBeforeLeave: (_el: Element) => void;
+    onLeave: (el: Element) => void;
+    onAfterLeave: (_el: Element) => void;
+};
+export {};

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

@@ -0,0 +1,60 @@
+import { toValue, nextTick } from "vue";
+import { useModalEmitter } from "./../useModalEmitter.mjs";
+export function useModalCallback({
+  id,
+  mappedOptions,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+  lockScroll,
+  unlockScroll,
+  trapFocus,
+  releaseFocus,
+  wrapperActive
+}) {
+  function onBeforeEnter(_el) {
+    useModalEmitter().emit("beforeEnter", toValue(id));
+  }
+  function onEnter(_el) {
+    useModalEmitter().emit("enter", toValue(id));
+  }
+  async function onAfterEnter(el) {
+    useModalEmitter().emit("afterEnter", toValue(id));
+    if (mappedOptions.scrollLock) {
+      if (mappedOptions.scrollLockPadding) {
+        addScrollLockPadding();
+      }
+      lockScroll();
+    }
+    if (mappedOptions.focusTrap) {
+      await nextTick();
+      trapFocus();
+    }
+  }
+  function onBeforeLeave(_el) {
+    useModalEmitter().emit("beforeLeave", toValue(id));
+  }
+  function onLeave(el) {
+    useModalEmitter().emit("leave", toValue(id));
+  }
+  function onAfterLeave(_el) {
+    useModalEmitter().emit("afterLeave", toValue(id));
+    if (mappedOptions.scrollLock) {
+      unlockScroll();
+      if (mappedOptions.scrollLockPadding) {
+        removeScrollLockPadding();
+      }
+    }
+    if (mappedOptions.focusTrap) {
+      releaseFocus();
+    }
+    wrapperActive.value = false;
+  }
+  return {
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave
+  };
+}

package/dist/plugins/MagicModal/src/composables/useModalApi.d.ts

@@ -1,6 +1,7 @@
-import type { DefaultOptions } from '../types/index.js';
-import type { MaybeElementRef, MaybeRef } from '@vueuse/core';
-export type useModalApiOptions = Pick<DefaultOptions, 'scrollLock'> & {
+import { type MaybeRef } from 'vue';
+import type { Options } from '../types/index.js';
+import type { MaybeElementRef } from '@vueuse/core';
+export type useModalApiOptions = Pick<Options, 'scrollLock'> & {
     focusTarget: MaybeElementRef;
 };
 export declare function useModalApi(id?: MaybeRef<string>, options?: useModalApiOptions): {

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

@@ -1,8 +1,9 @@
-import { ref, computed } from "vue";
+import { ref, computed, toValue } from "vue";
+import { defu } from "defu";
 import { v4 as uuidv4 } from "uuid";
-import { toValue, useScrollLock } from "@vueuse/core";
+import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { useModalStore } from "./useModalStore.mjs";
+import { useModalStore } from "./private/useModalStore.mjs";
 const defaultOptions = {
   focusTarget: void 0,
   scrollLock: true
@@ -10,7 +11,7 @@ const defaultOptions = {
 export function useModalApi(id, options) {
   const positionFixedElements = ref([]);
   const mappedId = computed(() => toValue(id) || uuidv4());
-  const mappedOptions = { ...defaultOptions, ...options };
+  const mappedOptions = defu(options, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
   const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
   const { modalStore, addIdToStore, removeIdFromStore } = useModalStore();

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

@@ -1,10 +1,10 @@
-type DefaultOptions = {
+type Options = {
     backdrop?: boolean;
     focusTrap?: boolean;
     scrollLock?: boolean;
     scrollLockPadding?: boolean;
     teleport?: {
-        target: string;
+        target?: string;
         disabled?: boolean;
     };
     transitions?: {
@@ -13,9 +13,11 @@ type DefaultOptions = {
     };
 };
 type ModalEvents = {
-    afterEnter: string;
-    afterLeave: string;
     beforeEnter: string;
+    enter: string;
+    afterEnter: string;
     beforeLeave: string;
+    leave: string;
+    afterLeave: string;
 };
-export type { DefaultOptions, ModalEvents };
+export type { Options, ModalEvents };

package/dist/plugins/MagicModal/src/utils/defaultOptions.d.ts

@@ -1,3 +1,3 @@
-import type { DefaultOptions } from '../types/index.js';
-declare const defaultOptions: DefaultOptions;
+import type { Options } from '../types/index.js';
+declare const defaultOptions: Options;
 export { defaultOptions };

package/dist/plugins/MagicPlayer/src/composables/useControlsApi.mjs

@@ -1,6 +1,5 @@
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, toValue } from "vue";
 import {
-  toValue,
   useResizeObserver,
   useEventListener,
   defaultWindow

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

@@ -1,4 +1,4 @@
-import type { MaybeRef } from '@vueuse/core';
+import { type MaybeRef } from 'vue';
 export declare function useMediaApi(target: MaybeRef<HTMLMediaElement | null | undefined>): {
     currentTime: import("vue").Ref<number>;
     duration: import("vue").Ref<number>;

package/dist/plugins/MagicPlayer/src/composables/useMediaApi.mjs

@@ -1,5 +1,5 @@
-import { ref, watch, unref } from "vue";
-import { useEventListener, toValue, watchIgnorable } from "@vueuse/core";
+import { ref, watch, unref, toValue } from "vue";
+import { useEventListener, watchIgnorable } from "@vueuse/core";
 export function useMediaApi(target) {
   const currentTime = ref(0);
   const duration = ref(0);

package/dist/plugins/MagicPlayer/src/composables/useRuntimeSourceProvider.mjs

@@ -1,5 +1,4 @@
-import { toValue } from "@vueuse/core";
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, toValue } from "vue";
 export function useRuntimeSourceProvider(args) {
   let hls;
   const loaded = ref(false);

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

@@ -1,4 +1,4 @@
-import type { MaybeRef } from '@vueuse/core';
+import { type MaybeRef } from 'vue';
 type SourceType = 'native' | 'hls';
 type UseControlsArgs = {
     barRef?: MaybeRef<HTMLDivElement | undefined>;

package/dist/plugins/MagicScroll/index.d.ts

@@ -1,7 +1,7 @@
 import { useCollisionEmitter } from './src/composables/useCollisionEmitter.js';
-import { useProgress } from './src/composables/useProgress.js';
+import { useScrollApi } from './src/composables/useScrollApi.js';
 import { useCollisionDetect } from './src/composables/useCollisionDetect.js';
 import type { Plugin } from 'vue';
 export type * from './src/types';
 declare const MagicScroll: Plugin;
-export { MagicScroll, useCollisionEmitter, useProgress, useCollisionDetect };
+export { MagicScroll, useCollisionEmitter, useScrollApi, useCollisionDetect };

package/dist/plugins/MagicScroll/index.mjs

@@ -1,10 +1,11 @@
 import MagicScrollProvider from "./src/components/MagicScrollProvider.vue";
 import MagicScrollScene from "./src/components/MagicScrollScene.vue";
 import MagicScrollTransform from "./src/components/MagicScrollTransform.vue";
+import MagicScrollMotion from "./src/components/MagicScrollMotion.vue";
 import MagicScrollCollision from "./src/components/MagicScrollCollision.vue";
 import { magicScrollStore } from "./src/store/index.mjs";
 import { useCollisionEmitter } from "./src/composables/useCollisionEmitter.mjs";
-import { useProgress } from "./src/composables/useProgress.mjs";
+import { useScrollApi } from "./src/composables/useScrollApi.mjs";
 import { useCollisionDetect } from "./src/composables/useCollisionDetect.mjs";
 import { StoreKey } from "./src/types/index.mjs";
 const MagicScroll = {
@@ -12,8 +13,9 @@ const MagicScroll = {
     app.component("MagicScrollProvider", MagicScrollProvider);
     app.component("MagicScrollScene", MagicScrollScene);
     app.component("MagicScrollTransform", MagicScrollTransform);
+    app.component("MagicScrollMotion", MagicScrollMotion);
     app.component("MagicScrollCollision", MagicScrollCollision);
     app.provide(StoreKey, magicScrollStore);
   }
 };
-export { MagicScroll, useCollisionEmitter, useProgress, useCollisionDetect };
+export { MagicScroll, useCollisionEmitter, useScrollApi, useCollisionDetect };

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

@@ -0,0 +1,58 @@
+<template>
+  <div ref="el" class="m-scroll-motion">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, computed, onMounted, toRaw, watch } from 'vue'
+import { animate, type Easing } from 'motion'
+import { ScrollProgressKey } from '../types'
+
+interface Props {
+  keyframes: Record<string, any> | null | undefined
+  offset?: number[] | undefined
+  easing?: Easing
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  keyframes: undefined,
+  offset: undefined,
+  easing: 'linear',
+})
+
+const animation = ref()
+const el = ref()
+
+const progress = inject(
+  ScrollProgressKey,
+  computed(() => 0),
+)
+
+function createAnimation(currentTime: number = 0) {
+  if (!props.keyframes) return
+  animation.value = animate(toRaw(el.value), props.keyframes, {
+    duration: 1,
+    easing: props.easing || 'linear',
+    offset: props.offset,
+  })
+  animation.value.stop()
+  animation.value.currentTime = currentTime
+}
+
+onMounted(() => {
+  createAnimation()
+})
+
+watch(progress, (value) => {
+  if (!animation.value || !props.keyframes) return
+  animation.value.currentTime = value
+})
+
+watch(
+  () => props.keyframes,
+  () => {
+    createAnimation(progress.value)
+  },
+)
+</script>

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

@@ -0,0 +1,42 @@
+import { type Easing } from 'motion';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    offset: {
+        type: import("vue").PropType<number[]>;
+        default: undefined;
+    };
+    keyframes: {
+        type: import("vue").PropType<Record<string, any> | null | undefined>;
+        required: true;
+        default: undefined;
+    };
+    easing: {
+        type: import("vue").PropType<Easing>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    offset: {
+        type: import("vue").PropType<number[]>;
+        default: undefined;
+    };
+    keyframes: {
+        type: import("vue").PropType<Record<string, any> | null | undefined>;
+        required: true;
+        default: undefined;
+    };
+    easing: {
+        type: import("vue").PropType<Easing>;
+        default: string;
+    };
+}>>, {
+    offset: number[];
+    keyframes: Record<string, any> | null | undefined;
+    easing: Easing;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -17,7 +17,7 @@ import {
 } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { mapValue } from '../utils'
-import { useProgress } from '../composables/useProgress'
+import { useScrollApi } from '../composables/useScrollApi'
 import { ScrollPositionKey, ScrollParentKey, ScrollProgressKey } from '../types'
 
 import type { FromTo } from '../types'
@@ -38,7 +38,7 @@ const scrollParent = inject(ScrollParentKey)
 const sceneRef = ref<HTMLElement | undefined>(undefined)
 const progress = ref(0)
 
-const { getCalculations, getProgress } = useProgress({
+const { getCalculations, getProgress } = useScrollApi({
   child: sceneRef,
   parent: scrollParent,
   from: props.from,

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

@@ -3,10 +3,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
-    as: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     scaleX: {
         type: import("vue").PropType<number>;
         default: number;
@@ -23,6 +19,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
+    as: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     translateX: {
         type: import("vue").PropType<number>;
         default: number;
@@ -36,10 +36,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
-    as: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     scaleX: {
         type: import("vue").PropType<number>;
         default: number;
@@ -56,6 +52,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
+    as: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     translateX: {
         type: import("vue").PropType<number>;
         default: number;
@@ -66,11 +66,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     scale: number;
-    as: string;
     scaleX: number;
     scaleY: number;
     skewX: number;
     skewY: number;
+    as: string;
     translateX: number;
     translateY: number;
 }, {}>, {

package/dist/plugins/MagicScroll/src/composables/{useProgress.d.ts → useScrollApi.d.ts}

@@ -1,14 +1,14 @@
-import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/core';
+import { type MaybeRef, type MaybeRefOrGetter } from 'vue';
 import type { FromTo } from '../types.js';
-type UseProgressParams = {
+type UseScrollApiParams = {
     child: MaybeRef<HTMLElement | null | undefined>;
     parent: MaybeRefOrGetter<HTMLElement | null | undefined>;
     from: FromTo;
     to: FromTo;
 };
-export declare function useProgress(params: UseProgressParams): {
+export declare function useScrollApi(params: UseScrollApiParams): {
     getCalculations: () => void;
     getProgress: () => number;
 };
-export type UseProgressReturn = ReturnType<typeof useProgress>;
+export type UseScrollApiReturn = ReturnType<typeof useScrollApi>;
 export {};

package/dist/plugins/MagicScroll/src/composables/{useProgress.mjs → useScrollApi.mjs}

@@ -1,9 +1,8 @@
-import { ref, inject } from "vue";
+import { ref, inject, toValue } from "vue";
 import { useElementBounding, useWindowSize } from "@vueuse/core";
-import { toValue } from "@vueuse/core";
 import { ScrollPositionKey } from "../types/index.mjs";
 import { clampValue } from "../utils/index.mjs";
-export function useProgress(params) {
+export function useScrollApi(params) {
   const { child, parent, from, to } = params;
   const scrollPosition = inject(ScrollPositionKey, void 0);
   const childRect = ref();