@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.40

package/dist/plugins/MagicPlayer/src/css/magic-player-timeline.css

@@ -8,6 +8,7 @@
   height: var(--magic-player-timeline-track-height);
   display: flex;
   align-items: center;
+  touch-action: none;
 }
 
 .magic-player-timeline__target {
@@ -19,6 +20,10 @@
   cursor: pointer;
 }
 
+[data-dragging='true'] .magic-player-timeline__target {
+  cursor: grabbing;
+}
+
 .magic-player-timeline__track {
   position: relative;
   width: 100%;

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

@@ -1,5 +1,9 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 import type { MagicPlayerOptions } from '../types/index.js';
 declare const MagicPlayerInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicPlayerOptionsKey: InjectionKey<MagicPlayerOptions>;
-export { MagicPlayerInstanceId, MagicPlayerOptionsKey };
+declare const MagicPlayerRef: InjectionKey<Ref<HTMLDivElement | null>>;
+declare const MagicPlayerTrackRef: InjectionKey<Ref<HTMLDivElement | null>>;
+declare const MagicPlayerBarRef: InjectionKey<Ref<HTMLDivElement | null>>;
+declare const MagicPlayerPopoverRef: InjectionKey<Ref<HTMLDivElement | null>>;
+export { MagicPlayerInstanceId, MagicPlayerOptionsKey, MagicPlayerRef, MagicPlayerTrackRef, MagicPlayerBarRef, MagicPlayerPopoverRef, };

package/dist/plugins/MagicPlayer/src/symbols/index.mjs

@@ -1,3 +1,14 @@
 const MagicPlayerInstanceId = Symbol();
 const MagicPlayerOptionsKey = Symbol();
-export { MagicPlayerInstanceId, MagicPlayerOptionsKey };
+const MagicPlayerRef = Symbol();
+const MagicPlayerTrackRef = Symbol();
+const MagicPlayerBarRef = Symbol();
+const MagicPlayerPopoverRef = Symbol();
+export {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerRef,
+  MagicPlayerTrackRef,
+  MagicPlayerBarRef,
+  MagicPlayerPopoverRef
+};

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

@@ -1,22 +1,89 @@
+type PlayerMode = 'audio' | 'video';
 export interface MagicPlayerOptions {
     src: string;
-    mode?: 'audio' | 'video';
+    mode?: PlayerMode;
     srcType?: 'native' | 'hls';
     preload?: 'auto' | 'metadata' | 'none';
     autoplay?: boolean;
+    playback?: ('viewport' | 'window')[] | false;
     loop?: boolean;
+    debug?: boolean;
     transition?: {
+        videoControls?: string;
+        overlay?: string;
+        icons?: string;
+    };
+    threshold?: {
+        idle?: number;
+    };
+}
+export interface RequiredMagicPlayerOptions {
+    src: string;
+    mode: 'audio' | 'video';
+    srcType: 'native' | 'hls';
+    preload: 'auto' | 'metadata' | 'none';
+    autoplay: boolean;
+    loop: boolean;
+    debug: boolean;
+    transition: {
         videoControls: string;
+        overlay: string;
+        icons: string;
+    };
+    threshold: {
+        idle: number;
     };
 }
-type API = 'media' | 'player' | 'controls' | 'runtime' | 'player';
 export type Buffered = [number, number][];
-export type PlayerPrivateEvents = {
-    update: {
-        id: string;
-        api: API;
-        key: string;
-        value: string | number | boolean | Buffered | DOMRect | HTMLElement;
-    };
-};
+export interface PlayerState {
+    id: string;
+    buffered: Buffered;
+    currentTime: number;
+    dragging: boolean;
+    duration: number;
+    ended: boolean;
+    loaded: boolean;
+    muted: boolean;
+    paused: boolean;
+    playing: boolean;
+    rate: number;
+    seeking: boolean;
+    stalled: boolean;
+    started: boolean;
+    touched: boolean;
+    volume: number;
+    waiting: boolean;
+    fullscreen: boolean;
+    fullscreenTarget: HTMLElement | null;
+    mouseEntered: boolean;
+    controlsMouseEntered: boolean;
+    seekedTime: number | null;
+    seekedPercentage: number;
+    scrubbedPercentage: number;
+    thumbPercentage: number;
+    popoverOffsetX: number | null;
+    hasOverlay: boolean;
+    hasControls: boolean;
+    controlsBarRect: DOMRect | undefined;
+    controlsTrackRect: DOMRect | undefined;
+    controlsPopoverRect: DOMRect | undefined;
+}
+export interface PlayerEvents {
+    onDragStart: string;
+    onDragEnd: string;
+    onEnd: string;
+    onFullscreenEnter: string;
+    onFullscreenLeave: string;
+    onLoad: string;
+    onMute: string;
+    onUnmute: string;
+    onPause: string;
+    onPlay: string;
+    onRateChange: string;
+    onStall: string;
+    onStart: string;
+    onTouch: string;
+    onVolumeChange: string;
+    onWait: string;
+}
 export {};

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

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

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

@@ -5,8 +5,14 @@ const defaultOptions = {
   preload: "metadata",
   autoplay: false,
   loop: false,
+  debug: false,
   transition: {
-    videoControls: "magic-player-video-controls"
+    videoControls: "magic-player-video-controls",
+    overlay: "magic-player-overlay",
+    icons: "magic-player-icons"
+  },
+  threshold: {
+    idle: 3e3
   }
 };
 export { defaultOptions };

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

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

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

@@ -0,0 +1,7 @@
+export const audioModePlaybackDefaults = [
+  "viewport"
+];
+export const videoModePlaybackDefaults = [
+  "viewport",
+  "window"
+];

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

@@ -1,2 +1,2 @@
-declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions, import("@nuxt/schema").ModuleOptions, false>;
+declare const _default: import("nuxt/schema").NuxtModule<import("nuxt/schema").ModuleOptions, import("nuxt/schema").ModuleOptions, false>;
 export default _default;

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

@@ -0,0 +1,18 @@
+import type { CollisionOffset } from '../types/index.js';
+interface MagicScrollCollisionProps {
+    id?: string;
+    offset?: CollisionOffset;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,68 +1,67 @@
-<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";
+<template>
+  <div ref="el" :data-id="mappedId" class="magic-scroll-collision">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import {
+  shallowRef,
+  inject,
+  computed,
+  toValue,
+  watch,
+  useId,
+  onMounted,
+  useTemplateRef
+} 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(() => {
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
+const { id, offset } = defineProps({
+  id: { type: String, required: false },
+  offset: { type: Object, required: false }
+});
+const magicError = useMagicError({
+  prefix: "MagicScroll",
+  source: "MagicScrollCollision"
+});
+const scrollReturn = inject(MagicScrollReturn, void 0);
+const scrollTarget = inject(MagicScrollTarget);
+magicError.assert(scrollTarget, {
+  message: "MagicScrollCollision must be used within a MagicScrollProvider",
+  errorCode: "missing_scroll_target"
+});
+const intersecting = shallowRef(false);
+const elRef = useTemplateRef("el");
+const scrollY = computed(() => toValue(scrollReturn?.y) || 0);
+const mappedId = computed(() => id ?? `magic-scroll-collision-${useId()}`);
+const { observe } = useCollisionDetection({
+  id: mappedId.value,
+  child: elRef,
+  parent: scrollTarget,
+  scrollY,
+  offset
+});
+watch(
+  () => scrollY.value,
+  () => {
+    if (intersecting.value) {
       observe();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-collision"
-        },
-        [
-          _renderSlot(_ctx.$slots, "default")
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
+    }
   }
+);
+useIntersectionObserver(
+  elRef,
+  ([{ isIntersecting }]) => {
+    intersecting.value = isIntersecting;
+  },
+  { rootMargin: "150% 0px 150% 0px", immediate: true }
+);
+onMounted(() => {
+  observe();
 });
 </script>

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

@@ -3,30 +3,15 @@ interface MagicScrollCollisionProps {
     id?: string;
     offset?: CollisionOffset;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-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"]>;
+declare const __VLS_base: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 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 & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -0,0 +1,20 @@
+import { type SequenceOptions } from 'motion';
+import { type MagicScrollSequence } from '../types/index.js';
+interface MagicScrollMotionProps {
+    sequence: MagicScrollSequence;
+    sequenceOptions?: SequenceOptions;
+    progress?: number;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,81 +1,66 @@
-<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";
+<template>
+  <div ref="el" class="magic-scroll-motion">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { ref, inject, computed, onMounted, watch, useTemplateRef } from "vue";
 import { unrefElement } from "@vueuse/core";
 import defu from "defu";
 import {
   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 }
+import {} from "../types";
+const { progress, sequence, sequenceOptions } = defineProps({
+  sequence: { type: Array, required: true },
+  sequenceOptions: { type: Object, required: false },
+  progress: { type: Number, required: false }
+});
+const animation = ref(void 0);
+const elRef = useTemplateRef("el");
+const injectedProgress = inject(
+  MagicScrollProgress,
+  computed(() => 0)
+);
+const mappedProgress = computed(() => {
+  return progress || injectedProgress.value || 0;
+});
+const defaultSequenceOptions = {
+  duration: 1,
+  delay: 0
+};
+const mappedSequenceOptions = defu(sequenceOptions, defaultSequenceOptions);
+function createAnimation() {
+  const el = unrefElement(elRef);
+  if (!sequence || !sequence.length || !el) {
+    return;
+  }
+  const mappedSequence = 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(
+  () => sequence,
+  () => {
+    createAnimation();
   },
-  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 */
-      );
-    };
+  {
+    deep: true
   }
+);
+onMounted(() => {
+  createAnimation();
 });
 </script>

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

@@ -5,30 +5,15 @@ interface MagicScrollMotionProps {
     sequenceOptions?: SequenceOptions;
     progress?: number;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-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"]>;
+declare const __VLS_base: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 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 & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -0,0 +1,36 @@
+import { type MaybeElementRef } from '@vueuse/core';
+interface MagicScrollProviderProps {
+    target?: MaybeElementRef<HTMLElement>;
+}
+declare var __VLS_1: {
+    scrollReturn: {
+        x: import("vue").WritableComputedRef<number, number>;
+        y: import("vue").WritableComputedRef<number, number>;
+        isScrolling: import("vue").ShallowRef<boolean, boolean>;
+        arrivedState: {
+            left: boolean;
+            right: boolean;
+            top: boolean;
+            bottom: boolean;
+        };
+        directions: {
+            left: boolean;
+            right: boolean;
+            top: boolean;
+            bottom: boolean;
+        };
+        measure(): void;
+    };
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicScrollProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};