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

package/dist/plugins/MagicPlayer/src/css/magic-player-display-time.css

@@ -0,0 +1,10 @@
+.magic-player-display-time {
+  height: 100%;
+  width: 4rem;
+  font-size: 0.875rem;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+}

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

@@ -0,0 +1,89 @@
+:root {
+  --magic-player-timeline-track-height: 0.25rem;
+}
+
+.magic-player-timeline {
+  position: relative;
+  width: 100%;
+  height: var(--magic-player-timeline-track-height);
+  display: flex;
+  align-items: center;
+}
+
+.magic-player-timeline__target {
+  position: relative;
+  width: 100%;
+  height: 3.5rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.magic-player-timeline__track {
+  position: relative;
+  width: 100%;
+  height: var(--magic-player-timeline-track-height);
+  background: rgba(250, 250, 250, 0.15);
+  border-radius: 50rem;
+}
+
+.magic-player-timeline__inner-track {
+  position: relative;
+  border-radius: 50rem;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.magic-player-timeline__thumb {
+  position: absolute;
+  width: var(--magic-player-timeline-track-height);
+  height: var(--magic-player-timeline-track-height);
+  z-index: 10;
+}
+
+.magic-player-timeline__thumb-handle {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 300ms ease;
+  z-index: 10;
+  background-color: rgba(250, 250, 250, 1);
+  border-radius: 50rem;
+}
+
+.magic-player-timeline__scrubbed,
+.magic-player-timeline__seeked,
+.magic-player-timeline__buffered {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-left: calc(-100% + var(--magic-player-timeline-track-height));
+  background: currentColor;
+  border-radius: 50rem;
+}
+
+.magic-player-timeline__scrubbed {
+  z-index: 1;
+  min-width: var(--magic-player-timeline-track-height);
+  display: flex;
+}
+
+.magic-player-timeline__seeked {
+  opacity: 0.25;
+}
+
+.magic-player-timeline__buffered {
+  opacity: 0.15;
+}
+
+.magic-player-timeline:hover .magic-player-timeline__thumb-handle {
+  transform: translate3d(-50%, -50%, 0) scale(1);
+}

package/dist/plugins/MagicPlayer/src/css/magic-player-video-controls.css

@@ -0,0 +1,115 @@
+@import './magic-player-timeline.css';
+@import './magic-player-display-time.css';
+
+:root {
+  --magic-player-video-controls-left: 1.5rem;
+  --magic-player-video-controls-height: 3rem;
+}
+
+@media (max-width: 640px) {
+  :root {
+    --magic-player-video-controls-height: 2.5rem;
+    --magic-player-video-controls-left: 0.75rem;
+  }
+}
+
+.magic-player-video-controls {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  pointer-events: none;
+}
+
+.magic-player-video-controls-enter-active {
+  animation: fade-up-in 150ms ease;
+}
+
+.magic-player-video-controls-leave-active {
+  animation: fade-up-out 150ms ease;
+}
+
+.magic-player-video-controls__bar {
+  position: absolute;
+  width: calc(100% - (var(--magic-player-video-controls-left) * 2));
+  bottom: 1.5rem;
+  left: var(--magic-player-video-controls-left);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  pointer-events: auto;
+}
+
+.magic-player-video-controls__bar--inner {
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--magic-player-video-controls-height);
+  padding: 0 0.75rem;
+  background-color: rgba(32, 32, 32, 0.8);
+  backdrop-filter: blur(80px);
+  color: rgba(255, 255, 255, 1);
+  border-radius: 50rem;
+  display: flex;
+  align-items: center;
+}
+
+.magic-player-video-controls__item {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+
+.magic-player-video-controls__item.-shrink-0 {
+  flex-shrink: 0;
+}
+
+.magic-player-video-controls__item.-grow {
+  flex-grow: 1;
+}
+
+.magic-player-video-controls__item button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  outline: none;
+  appearance: none;
+  padding: 0;
+  border-radius: 0;
+  cursor: pointer;
+  width: 3rem;
+  height: var(--magic-player-video-controls-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.magic-player-video-controls__item button svg {
+  display: block;
+  width: 1.25rem;
+  height: auto;
+}
+
+.magic-player-video-controls__timeline {
+  width: 100%;
+}
+
+.magic-player-video-controls[data-standalone='true'] {
+  position: relative;
+  inset: unset;
+  width: 100%;
+  --magic-player-video-controls-left: 0;
+  & .magic-player-video-controls__bar--inner {
+    background-color: transparent;
+    backdrop-filter: none;
+  }
+
+  & .magic-player-video-controls__bar {
+    position: relative;
+    bottom: 0;
+    padding: 0;
+    background-color: transparent;
+    border-radius: unset;
+    backdrop-filter: none;
+  }
+}

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

@@ -0,0 +1,5 @@
+import type { InjectionKey, MaybeRef } from 'vue';
+import type { MagicPlayerOptions } from '../types/index.js';
+declare const MagicPlayerInstanceId: InjectionKey<MaybeRef<string>>;
+declare const MagicPlayerOptionsKey: InjectionKey<MagicPlayerOptions>;
+export { MagicPlayerInstanceId, MagicPlayerOptionsKey };

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

@@ -0,0 +1,3 @@
+const MagicPlayerInstanceId = Symbol();
+const MagicPlayerOptionsKey = Symbol();
+export { MagicPlayerInstanceId, MagicPlayerOptionsKey };

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,77 @@
-<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";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-scroll-collision"
+};
+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 = shallowRef(false);
+    const elRef = useTemplateRef("el");
+    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",
+        _hoisted_1,
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
 </script>

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

@@ -1,22 +1,18 @@
-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<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: HTMLDivElement;
-    };
-    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 _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: 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_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<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";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-scroll-motion"
+};
+import { ref, inject, computed, onMounted, watch, useTemplateRef } 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 = useTemplateRef("el");
+    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",
+        _hoisted_1,
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
   }
-)
+});
 </script>

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

@@ -1,27 +1,20 @@
-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(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: HTMLDivElement;
-    };
-    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 _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: 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_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };