@maas/vue-equipment 0.40.0 → 1.0.0-beta.2

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

@@ -1,4 +1,14 @@
-export type MagicPlayerSourceType = 'native' | 'hls';
+export interface MagicPlayerOptions {
+    src: string;
+    mode?: 'audio' | 'video';
+    srcType?: 'native' | 'hls';
+    preload?: 'auto' | 'metadata' | 'none';
+    autoplay?: boolean;
+    loop?: boolean;
+    transition?: {
+        videoControls: string;
+    };
+}
 type API = 'media' | 'player' | 'controls' | 'runtime' | 'player';
 export type Buffered = [number, number][];
 export type PlayerPrivateEvents = {

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

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

package/dist/plugins/MagicPlayer/src/utils/defaultOptions.mjs

@@ -0,0 +1,12 @@
+const defaultOptions = {
+  mode: "video",
+  src: "",
+  srcType: "native",
+  preload: "metadata",
+  autoplay: false,
+  loop: false,
+  transition: {
+    videoControls: "magic-player-video-controls"
+  }
+};
+export { defaultOptions };

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

@@ -1,12 +1,6 @@
-import MagicScrollProvider from './src/components/MagicScrollProvider.vue.js';
-import MagicScrollScene from './src/components/MagicScrollScene.vue.js';
-import MagicScrollTransform from './src/components/MagicScrollTransform.vue.js';
-import MagicScrollMotion from './src/components/MagicScrollMotion.vue.js';
-import MagicScrollCollision from './src/components/MagicScrollCollision.vue.js';
-import { useCollisionDetect } from './src/composables/private/useCollisionDetect.js';
-import { MagicScrollParent, MagicScrollProgress, MagicScrollReturn } from './src/symbols/index.js';
-import type { MagicScrollCollisionEntry } from './src/types/index.js';
+import { MagicScrollTarget, MagicScrollProgress, MagicScrollReturn } from './src/symbols/index.js';
 import type { Plugin } from 'vue';
+import type { MagicScrollSequence } from './src/types/index.js';
 declare const MagicScrollPlugin: Plugin;
-export { MagicScrollPlugin, MagicScrollProvider, MagicScrollScene, MagicScrollTransform, MagicScrollMotion, MagicScrollCollision, useCollisionDetect, MagicScrollParent, MagicScrollProgress, MagicScrollReturn, };
-export type { MagicScrollCollisionEntry };
+export { MagicScrollPlugin, MagicScrollTarget, MagicScrollProgress, MagicScrollReturn, };
+export type { MagicScrollSequence };

package/dist/plugins/MagicScroll/index.mjs

@@ -1,11 +1,9 @@
 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 { useCollisionDetect } from "./src/composables/private/useCollisionDetect.mjs";
 import {
-  MagicScrollParent,
+  MagicScrollTarget,
   MagicScrollProgress,
   MagicScrollReturn
 } from "./src/symbols/index.mjs";
@@ -13,20 +11,13 @@ const MagicScrollPlugin = {
   install: (app) => {
     app.component("MagicScrollProvider", MagicScrollProvider);
     app.component("MagicScrollScene", MagicScrollScene);
-    app.component("MagicScrollTransform", MagicScrollTransform);
     app.component("MagicScrollMotion", MagicScrollMotion);
     app.component("MagicScrollCollision", MagicScrollCollision);
   }
 };
 export {
   MagicScrollPlugin,
-  MagicScrollProvider,
-  MagicScrollScene,
-  MagicScrollTransform,
-  MagicScrollMotion,
-  MagicScrollCollision,
-  useCollisionDetect,
-  MagicScrollParent,
+  MagicScrollTarget,
   MagicScrollProgress,
   MagicScrollReturn
 };

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

@@ -1,32 +1,68 @@
-<template>
-  <div ref="elRef" :style="{ display: 'contents' }">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, inject, computed, onMounted } from 'vue'
-import { toValue } from '@vueuse/core'
-import { useCollisionDetect } from '../composables/private/useCollisionDetect'
-import { MagicScrollReturn } from '../symbols'
-
-import type { MagicScrollCollisionEntry } from '../types'
-
-interface Props {
-  entries: MagicScrollCollisionEntry[]
-}
-
-const props = defineProps<Props>()
-const elRef = ref<HTMLElement | undefined>(undefined)
-
-const scrollReturn = inject(MagicScrollReturn, undefined)
-const scrollY = computed(() => toValue(scrollReturn?.y) || 0)
-
-onMounted(() => {
-  useCollisionDetect({
-    scrollY,
-    entries: props.entries,
-    parent: toValue(elRef),
-  })
-})
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { ref, inject, computed, toValue, watch, useId, onMounted } from "vue";
+import { useCollisionDetection } from "../composables/private/useCollisionDetection";
+import { MagicScrollReturn, MagicScrollTarget } from "../symbols";
+import { useIntersectionObserver } from "@vueuse/core";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicScrollCollision",
+  props: {
+    id: { type: String, required: false },
+    offset: { type: Object, required: false }
+  },
+  setup(__props) {
+    const scrollReturn = inject(MagicScrollReturn, void 0);
+    const scrollTarget = inject(MagicScrollTarget);
+    if (!scrollTarget) {
+      console.error(
+        "MagicScrollCollision must be used within a MagicScrollProvider"
+      );
+    }
+    const intersecting = ref(false);
+    const elRef = ref(void 0);
+    const scrollY = computed(() => toValue(scrollReturn?.y) || 0);
+    const mappedId = computed(() => __props.id ?? `magic-scroll-collision-${useId()}`);
+    const { observe } = useCollisionDetection({
+      id: mappedId.value,
+      child: elRef,
+      parent: scrollTarget,
+      scrollY,
+      offset: __props.offset
+    });
+    watch(
+      () => scrollY.value,
+      () => {
+        if (intersecting.value) {
+          observe();
+        }
+      }
+    );
+    useIntersectionObserver(
+      elRef,
+      ([{ isIntersecting }]) => {
+        intersecting.value = isIntersecting;
+      },
+      { rootMargin: "150% 0px 150% 0px", immediate: true }
+    );
+    onMounted(() => {
+      observe();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(
+        "div",
+        {
+          ref_key: "elRef",
+          ref: elRef,
+          class: "magic-scroll-collision"
+        },
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
 </script>

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

@@ -1,6 +1,7 @@
-import type { MagicScrollCollisionEntry } from '../types';
-interface Props {
-    entries: MagicScrollCollisionEntry[];
+import type { CollisionOffset } from '../types/index.js';
+interface MagicScrollCollisionProps {
+    id?: string;
+    offset?: CollisionOffset;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -13,9 +14,18 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollCollisionProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollCollisionProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,67 +1,81 @@
-<template>
-  <div ref="elRef" class="magic-scroll-motion">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, inject, computed, onMounted, watch } from 'vue'
-import { unrefElement } from '@vueuse/core'
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { ref, inject, computed, onMounted, watch } from "vue";
+import { unrefElement } from "@vueuse/core";
+import defu from "defu";
 import {
-  animate,
-  type MotionKeyframesDefinition,
-  type AnimationControls,
-  type Easing,
-} from 'motion'
-import { MagicScrollProgress } from '../symbols'
-
-interface MagicScrollMotionProps {
-  keyframes?: MotionKeyframesDefinition
-  offset?: number[]
-  easing?: Easing
-  progress?: number
-}
-
-const props = withDefaults(defineProps<MagicScrollMotionProps>(), {
-  easing: 'linear',
-})
-
-const animation = ref<AnimationControls | undefined>(undefined)
-const elRef = ref<HTMLElement | undefined>(undefined)
-
-const progress = inject(
-  MagicScrollProgress,
-  computed(() => 0)
-)
-
-const mappedProgress = computed(() => {
-  return props.progress || progress.value || 0
-})
-
-function createAnimation() {
-  if (!props.keyframes) return
-  animation.value = animate(unrefElement(elRef)!, props.keyframes, {
-    duration: 1,
-    easing: props.easing || 'linear',
-    offset: props.offset,
-  })
-  animation.value.stop()
-  animation.value.currentTime = mappedProgress.value
-}
-
-onMounted(() => {
-  createAnimation()
-})
-
-watch(mappedProgress, (value) => {
-  if ((!value && value !== 0) || !animation.value || !props.keyframes) return
-  animation.value.currentTime = value
-})
-
-watch(
-  () => props.keyframes,
-  () => {
-    createAnimation()
+  animate
+} from "motion";
+import { MagicScrollProgress } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicScrollMotion",
+  props: {
+    sequence: { type: Array, required: true },
+    sequenceOptions: { type: Object, required: false },
+    progress: { type: Number, required: false }
+  },
+  setup(__props) {
+    const animation = ref(void 0);
+    const elRef = ref(void 0);
+    const injectedProgress = inject(
+      MagicScrollProgress,
+      computed(() => 0)
+    );
+    const mappedProgress = computed(() => {
+      return __props.progress || injectedProgress.value || 0;
+    });
+    const defaultSequenceOptions = {
+      duration: 1,
+      delay: 0
+    };
+    const mappedSequenceOptions = defu(__props.sequenceOptions, defaultSequenceOptions);
+    function createAnimation() {
+      const el = unrefElement(elRef);
+      if (!__props.sequence || !__props.sequence.length || !el) {
+        return;
+      }
+      const mappedSequence = __props.sequence.map((item) => {
+        const [animation2 = [], options = {}] = item;
+        return [el, animation2, options];
+      });
+      animation.value = animate(mappedSequence, mappedSequenceOptions);
+      animation.value.pause();
+      animation.value.time = mappedProgress.value;
+    }
+    watch(mappedProgress, (value) => {
+      if (!value && value !== 0 || !animation.value) {
+        return;
+      }
+      animation.value.time = value;
+    });
+    watch(
+      () => __props.sequence,
+      () => {
+        createAnimation();
+      },
+      {
+        deep: true
+      }
+    );
+    onMounted(() => {
+      createAnimation();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(
+        "div",
+        {
+          ref_key: "elRef",
+          ref: elRef,
+          class: "magic-scroll-motion"
+        },
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
   }
-)
+});
 </script>

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

@@ -1,8 +1,8 @@
-import { type MotionKeyframesDefinition, type Easing } from 'motion';
+import { type SequenceOptions } from 'motion';
+import { type MagicScrollSequence } from '../types/index.js';
 interface MagicScrollMotionProps {
-    keyframes?: MotionKeyframesDefinition;
-    offset?: number[];
-    easing?: Easing;
+    sequence: MagicScrollSequence;
+    sequenceOptions?: SequenceOptions;
     progress?: number;
 }
 declare function __VLS_template(): {
@@ -16,11 +16,18 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {
-    easing: Easing;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollMotionProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollMotionProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,40 +1,40 @@
-<template>
-  <div class="magic-scroll-provider">
-    <slot :scroll-return="scrollReturn" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { provide, computed } from 'vue'
-import {
-  useScroll,
-  unrefElement,
-  type MaybeComputedElementRef,
-} from '@vueuse/core'
-import { MagicScrollReturn, MagicScrollParent } from '../symbols'
-
-interface MagicScrollProviderProps {
-  active?: Boolean
-  el?: MaybeComputedElementRef<HTMLElement>
-}
-const props = withDefaults(defineProps<MagicScrollProviderProps>(), {
-  active: () => true,
-})
-
-// computed is used to avoid reactivity issues
-const mappedEl = computed(() => {
-  if (props.el) return unrefElement(props.el)
-  if (typeof window === 'undefined') return undefined
-  return window
-})
-
-const mappedParent = computed(() => {
-  if (props.el) return unrefElement(props.el)
-  return undefined
-})
-
-const scrollReturn = useScroll(mappedEl)
-
-provide(MagicScrollReturn, scrollReturn)
-provide(MagicScrollParent, mappedParent)
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "magic-scroll-provider" };
+import { provide, computed } from "vue";
+import { useScroll, unrefElement } from "@vueuse/core";
+import { MagicScrollReturn, MagicScrollTarget } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicScrollProvider",
+  props: {
+    target: { type: null, required: false }
+  },
+  setup(__props) {
+    const mappedTarget = computed(() => {
+      switch (true) {
+        case !!__props.target:
+          return unrefElement(__props.target);
+        case typeof window !== "undefined":
+          return window;
+        default:
+          return void 0;
+      }
+    });
+    const providedTarget = computed(() => {
+      if (__props.target) {
+        return unrefElement(__props.target);
+      }
+      return void 0;
+    });
+    const scrollReturn = useScroll(mappedTarget);
+    provide(MagicScrollReturn, scrollReturn);
+    provide(MagicScrollTarget, providedTarget);
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", _hoisted_1, [
+        _renderSlot(_ctx.$slots, "default", { scrollReturn: _unref(scrollReturn) })
+      ]);
+    };
+  }
+});
 </script>

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

@@ -1,16 +1,15 @@
-import { type MaybeComputedElementRef } from '@vueuse/core';
+import { type MaybeElementRef } from '@vueuse/core';
 interface MagicScrollProviderProps {
-    active?: Boolean;
-    el?: MaybeComputedElementRef<HTMLElement>;
+    target?: MaybeElementRef<HTMLElement>;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {
             scrollReturn: {
-                x: import("vue").WritableComputedRef<number>;
-                y: import("vue").WritableComputedRef<number>;
-                isScrolling: import("vue").Ref<boolean>;
+                x: import("vue").WritableComputedRef<number, number>;
+                y: import("vue").WritableComputedRef<number, number>;
+                isScrolling: import("vue").Ref<boolean, boolean>;
                 arrivedState: {
                     left: boolean;
                     right: boolean;
@@ -31,11 +30,18 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {
-    active: Boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollProviderProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicScrollProviderProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;