@maas/vue-equipment 0.39.2 → 1.0.0-beta.1

package/dist/plugins/MagicPlayer/src/components/MagicAudioPlayerControls.vue.d.ts

@@ -1,24 +0,0 @@
-interface MagicAudioPlayerControlsProps {
-    id: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        playIcon?(_: {}): any;
-        pauseIcon?(_: {}): any;
-    };
-    refs: {
-        barRef: HTMLDivElement;
-        trackRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,125 +0,0 @@
-<template>
-  <div
-    ref="playerRef"
-    @mouseenter="onMouseenter"
-    @mouseleave="onMouseleave"
-    :class="[
-      'magic-player',
-      {
-        '-fullscreen': isFullscreen,
-        '-touched': touched,
-        '-untouched': !touched,
-        '-playing': playing,
-        '-paused': !playing,
-        '-waiting': waiting,
-        '-loaded': loaded,
-        '-muted': muted,
-      },
-    ]"
-  >
-    <video
-      ref="videoRef"
-      class="magic-player__video"
-      playsinline
-      disablePictureInPicture
-      :preload="preload"
-      :loop="loop"
-      :muted="muted"
-    />
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import {
-  useElementVisibility,
-  useEventListener,
-  defaultWindow,
-} from '@vueuse/core'
-import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
-
-import type { MagicPlayerSourceType } from './../types'
-
-interface MagicPlayerProps {
-  id: string
-  srcType?: MagicPlayerSourceType
-  src: string
-  autoplay?: boolean
-  preload?: 'auto' | 'metadata' | 'none'
-  loop?: boolean
-}
-
-const props = withDefaults(defineProps<MagicPlayerProps>(), {
-  srcType: 'native',
-  src: '',
-  autoplay: false,
-  preload: 'metadata',
-  loop: false,
-})
-
-const playerRef = ref<HTMLDivElement | undefined>(undefined)
-const videoRef = ref<HTMLVideoElement | undefined>(undefined)
-
-const isVisible = useElementVisibility(playerRef)
-
-const { playing, waiting, muted } = usePlayerMediaApi({
-  id: props.id,
-  mediaRef: videoRef,
-})
-
-const { initialize, loaded, destroy } = usePlayerRuntime({
-  id: props.id,
-  mediaRef: videoRef,
-  src: props.src,
-  srcType: props.srcType,
-})
-
-const { onMouseenter, onMouseleave, isFullscreen, touched, play, pause } =
-  usePlayerVideoApi({
-    id: props.id,
-    videoRef: videoRef,
-    playerRef: playerRef,
-  })
-
-function onWindowFocus() {
-  if (isVisible.value && !playing.value && props.autoplay) {
-    play()
-  }
-}
-
-// Auto play when window is focused
-useEventListener(defaultWindow, 'focus', onWindowFocus)
-
-// Auto play when element is visible
-watch(
-  isVisible,
-  (value) => {
-    if (value && !playing.value && props.autoplay) {
-      play()
-    } else if (!value && playing.value) {
-      pause()
-    }
-  },
-  {
-    immediate: true,
-  }
-)
-
-onMounted(() => {
-  initialize()
-  if (props.autoplay) {
-    muted.value = true
-  }
-})
-
-onBeforeUnmount(() => {
-  destroy()
-})
-</script>
-
-<style>
-.magic-player{aspect-ratio:var(--magic-player-aspect-ratio,16/9);background:var(--magic-player-background,#000);height:var(--magic-player-height,auto);overflow:hidden;position:relative;width:100%}.magic-player.-loaded{--magic-player-background:transparent}.magic-player__video{height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}
-</style>

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

@@ -1,35 +0,0 @@
-import type { MagicPlayerSourceType } from './../types';
-interface MagicPlayerProps {
-    id: string;
-    srcType?: MagicPlayerSourceType;
-    src: string;
-    autoplay?: boolean;
-    preload?: 'auto' | 'metadata' | 'none';
-    loop?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        playerRef: HTMLDivElement;
-        videoRef: HTMLVideoElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicPlayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerProps> & Readonly<{}>, {
-    loop: boolean;
-    src: string;
-    srcType: MagicPlayerSourceType;
-    autoplay: boolean;
-    preload: "auto" | "metadata" | "none";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/plugins/MagicPlayer/src/components/MagicPlayerControls.vue

@@ -1,152 +0,0 @@
-<template>
-  <div
-    class="magic-player-controls"
-    :class="{
-      '-fullscreen': isFullscreen,
-      '-touched': touched,
-      '-untouched': !touched,
-      '-playing': playing,
-      '-paused': !playing,
-      '-waiting': waiting,
-      '-idle': idle,
-      '-not-idle': !idle,
-      '-hover': mouseEntered,
-      '-not-hover': !mouseEntered,
-      '-standalone': standalone,
-    }"
-  >
-    <transition :name="transition">
-      <div class="magic-player-controls__bar" v-show="!hidden">
-        <div
-          v-if="$slots.seekPopover"
-          v-show="!!seekedTime && touched"
-          ref="popoverRef"
-          class="magic-player-controls__popover"
-          :style="{ marginLeft: `${popoverOffsetX}%` }"
-        >
-          <slot name="seekPopover" />
-        </div>
-        <div class="magic-player-controls__bar--inner" ref="barRef">
-          <div class="magic-player-controls__item -shrink-0">
-            <button v-if="!playing" @click="play">
-              <slot name="playIcon">
-                <icon-play />
-              </slot>
-            </button>
-            <button v-else @click="pause">
-              <slot name="pauseIcon">
-                <icon-pause />
-              </slot>
-            </button>
-          </div>
-          <div class="magic-player-controls__item -grow">
-            <slot name="timelineBefore" />
-            <div class="magic-player-controls__timeline" ref="trackRef">
-              <magic-player-timeline :id="id" />
-            </div>
-            <slot name="timelineAfter" />
-          </div>
-          <div class="magic-player-controls__item -shrink-0">
-            <button v-if="muted" @click="unmute">
-              <slot name="volumeOffIcon">
-                <icon-volume-off />
-              </slot>
-            </button>
-            <button v-else @click="mute">
-              <slot name="volumeOnIcon">
-                <icon-volume-on />
-              </slot>
-            </button>
-          </div>
-          <div class="magic-player-controls__item -shrink-0">
-            <button v-if="isFullscreen" @click="exitFullscreen">
-              <slot name="fullscreenExitIcon">
-                <icon-fullscreen-exit />
-              </slot>
-            </button>
-            <button v-else @click="enterFullscreen">
-              <slot name="fullscreenEnterIcon">
-                <icon-fullscreen-enter />
-              </slot>
-            </button>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useIdle } from '@vueuse/core'
-import IconPlay from './icons/Play.vue'
-import IconPause from './icons/Pause.vue'
-import IconVolumeOn from './icons/VolumeOn.vue'
-import IconVolumeOff from './icons/VolumeOff.vue'
-import IconFullscreenEnter from './icons/FullscreenEnter.vue'
-import IconFullscreenExit from './icons/FullscreenExit.vue'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
-import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
-
-import '@maas/vue-equipment/utils/css/animations/fade-up-in.css'
-import '@maas/vue-equipment/utils/css/animations/fade-up-out.css'
-
-interface MagicPlayerControlsProps {
-  id: string
-  standalone?: boolean
-  transition?: string
-}
-
-const props = withDefaults(defineProps<MagicPlayerControlsProps>(), {
-  transition: 'magic-player-controls',
-})
-
-const barRef = ref<HTMLDivElement | undefined>(undefined)
-const trackRef = ref<HTMLDivElement | undefined>(undefined)
-const popoverRef = ref<HTMLDivElement | undefined>(undefined)
-
-const { playing, waiting, muted } = usePlayerMediaApi({
-  id: props.id,
-})
-
-const {
-  touched,
-  mouseEntered,
-  isFullscreen,
-  play,
-  pause,
-  mute,
-  unmute,
-  enterFullscreen,
-  exitFullscreen,
-} = usePlayerVideoApi({ id: props.id })
-
-const { popoverOffsetX, seekedTime } = usePlayerControlsApi({
-  id: props.id,
-  barRef: barRef,
-  trackRef: trackRef,
-  popoverRef: popoverRef,
-})
-
-const { idle } = useIdle(3000)
-
-const hidden = computed(() => {
-  switch (true) {
-    case props.standalone:
-      return false
-    case playing.value && idle.value:
-      return true
-    case playing.value && !mouseEntered.value:
-      return true
-    case !touched.value:
-      return true
-    default:
-      return false
-  }
-})
-</script>
-
-<style>
-:root{--magic-player-controls-height:3rem;--magic-player-controls-padding:0.75rem;--magic-player-controls-bottom:1.5rem;--magic-player-controls-left:1.5rem;--magic-player-controls-width:calc(100% - var(--magic-player-controls-left)*2);--magic-player-controls-gap:1rem;--magic-player-controls-border-radius:50rem;--magic-player-controls-background:rgba(32,32,32,.8);--magic-player-controls-backdrop-filter:blur(80px);--magic-player-controls-color:#fff;--magic-player-controls-button-width:3rem;--magic-player-controls-icon-width:1.25rem}@media (max-width:640px){:root{--magic-player-controls-height:2.5rem;--magic-player-controls-bottom:0.75rem;--magic-player-controls-padding:0.5rem}}.magic-player-controls{inset:0;pointer-events:none;position:absolute;width:100%}.magic-player-controls-enter-active{animation:fade-up-in .15s ease}.magic-player-controls-leave-active{animation:fade-up-out .15s ease}.magic-player-controls__bar{align-items:flex-start;bottom:var(--magic-player-controls-bottom);display:flex;flex-direction:column;gap:var(--magic-player-controls-gap);left:var(--magic-player-controls-left);margin:0 auto;pointer-events:auto;position:absolute;width:var(--magic-player-controls-width)}.magic-player-controls__bar--inner{align-items:center;-webkit-backdrop-filter:var(--magic-player-controls-backdrop-filter);backdrop-filter:var(--magic-player-controls-backdrop-filter);background-color:var(--magic-player-controls-background);border-radius:var(--magic-player-controls-border-radius);box-sizing:border-box;color:var(--magic-player-controls-color);display:flex;height:var(--magic-player-controls-height);padding:0 var(--magic-player-controls-padding);width:100%}.magic-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-player-controls__item.-shrink-0{flex-shrink:0}.magic-player-controls__item.-grow{flex-grow:1}.magic-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-player-controls-button-width)}.magic-player-controls__item button svg{display:block;height:auto;width:var(--magic-player-controls-icon-width)}.magic-player-controls__timeline{width:100%}.magic-player-controls.-standalone{inset:unset;position:relative;--magic-player-controls-width:100%;--magic-player-controls-bottom:0;--magic-player-controls-left:0;--magic-player-controls-padding:0;--magic-player-controls-background:unset;--magic-player-controls-border-radius:unset;--magic-player-controls-background:transparent;--magic-player-controls-backdrop-filter:none}.magic-player-controls.-standalone .magic-player-controls__bar{position:relative}
-</style>

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

@@ -1,42 +0,0 @@
-<template>
-  <component :is="as" :style="computedStyle" v-bind="$attrs">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface MagicScrollTransformProps {
-  as?: string
-  scale?: number
-  scaleX?: number
-  scaleY?: number
-  skewX?: number
-  skewY?: number
-  translateX?: number
-  translateY?: number
-}
-
-const props = withDefaults(defineProps<MagicScrollTransformProps>(), {
-  as: 'div',
-  scale: 1,
-  scaleX: 1,
-  scaleY: 1,
-  skewX: 0,
-  skewY: 0,
-  translateX: 0,
-  translateY: 0,
-})
-
-const computedStyle = computed(() => {
-  return {
-    willChange: 'transform',
-    transform: `matrix(${props.scale || props.scaleX}, ${props.skewY}, ${
-      props.skewX
-    },  ${props.scale || props.scaleY}, ${props.translateX}, ${
-      props.translateY
-    })`,
-  }
-})
-</script>

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

@@ -1,36 +0,0 @@
-interface MagicScrollTransformProps {
-    as?: string;
-    scale?: number;
-    scaleX?: number;
-    scaleY?: number;
-    skewX?: number;
-    skewY?: number;
-    translateX?: number;
-    translateY?: number;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollTransformProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollTransformProps> & Readonly<{}>, {
-    as: string;
-    scale: number;
-    scaleX: number;
-    scaleY: number;
-    skewX: number;
-    skewY: number;
-    translateX: number;
-    translateY: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetect.d.ts

@@ -1,56 +0,0 @@
-import { type MaybeRef } from 'vue';
-import type { MagicScrollCollisionEntry, Offset } from '../../types/index.js';
-type AlertPositions = {
-    top: boolean;
-    bottom: boolean;
-};
-type UseCollisionDetectArgs = {
-    scrollY: MaybeRef<number>;
-    entries: MagicScrollCollisionEntry[];
-    parent: HTMLElement | undefined;
-};
-interface MappedEntry extends Omit<MagicScrollCollisionEntry, 'element'> {
-    element: HTMLElement;
-    alerted: {
-        up: AlertPositions;
-        down: AlertPositions;
-    };
-}
-export declare function useCollisionDetect(args: UseCollisionDetectArgs): {
-    mappedEntries: import("vue").Ref<{
-        element: HTMLElement;
-        alerted: {
-            up: {
-                top: boolean;
-                bottom: boolean;
-            };
-            down: {
-                top: boolean;
-                bottom: boolean;
-            };
-        };
-        data: Record<string, unknown>;
-        offset?: {
-            top: Offset;
-            bottom: Offset;
-        } | undefined;
-    }[], MappedEntry[] | {
-        element: HTMLElement;
-        alerted: {
-            up: {
-                top: boolean;
-                bottom: boolean;
-            };
-            down: {
-                top: boolean;
-                bottom: boolean;
-            };
-        };
-        data: Record<string, unknown>;
-        offset?: {
-            top: Offset;
-            bottom: Offset;
-        } | undefined;
-    }[]>;
-};
-export {};

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetect.mjs

@@ -1,140 +0,0 @@
-import { ref, watch, computed, toValue } from "vue";
-import { useIntersectionObserver, useWindowSize } from "@vueuse/core";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
-export function useCollisionDetect(args) {
-  const { scrollY, entries, parent } = args;
-  const lastScrollY = ref(0);
-  const intersecting = ref();
-  const scrollDirection = ref();
-  const mappedEntries = ref([]);
-  const oppositeScrollDirection = computed(
-    () => scrollDirection.value === "up" ? "down" : "up"
-  );
-  const windowDimensions = useWindowSize();
-  function getOffset(payload) {
-    return typeof payload === "function" ? payload({
-      vh: toValue(windowDimensions.height),
-      vw: toValue(windowDimensions.width)
-    }) : payload ?? 0;
-  }
-  function initialize() {
-    if (!parent) return;
-    mappedEntries.value = entries.map((entry) => {
-      const alerted = {
-        up: {
-          top: false,
-          bottom: false
-        },
-        down: {
-          top: false,
-          bottom: false
-        }
-      };
-      const offset = { top: 0, bottom: 0, ...entry.offset };
-      const element = entry.element ? parent?.querySelector(entry.element) : parent;
-      if (!element) {
-        return void 0;
-      } else {
-        return { ...entry, offset, element, alerted };
-      }
-    }).filter((element) => !!element);
-    useIntersectionObserver(
-      parent.querySelector("*"),
-      ([{ isIntersecting }]) => {
-        intersecting.value = isIntersecting;
-      },
-      { rootMargin: "50% 0px 50% 0px", threshold: 0.01 }
-    );
-    observeAll();
-  }
-  function observeAll() {
-    if (!lastScrollY.value) {
-      lastScrollY.value = toValue(scrollY);
-      resetAll();
-      return;
-    }
-    scrollDirection.value = lastScrollY.value <= toValue(scrollY) ? "down" : "up";
-    lastScrollY.value = toValue(scrollY);
-    let i = mappedEntries.value.length;
-    while (i--) {
-      const entry = mappedEntries.value[i];
-      if (!entry.element) return;
-      const boundingRect = entry.element.getBoundingClientRect();
-      if (scrollDirection.value) {
-        observeEntry({
-          position: "top",
-          direction: scrollDirection.value,
-          boundingRect,
-          entry
-        });
-        observeEntry({
-          position: "bottom",
-          direction: scrollDirection.value,
-          boundingRect,
-          entry
-        });
-        resetEntry({
-          position: "top",
-          direction: oppositeScrollDirection.value,
-          boundingRect,
-          entry
-        });
-        resetEntry({
-          position: "bottom",
-          direction: oppositeScrollDirection.value,
-          boundingRect,
-          entry
-        });
-      }
-    }
-  }
-  function resetAll() {
-    mappedEntries.value = mappedEntries.value.map((entry) => {
-      const alerted = {
-        up: {
-          top: false,
-          bottom: false
-        },
-        down: {
-          top: false,
-          bottom: false
-        }
-      };
-      return { ...entry, alerted };
-    });
-  }
-  function observeEntry(args2) {
-    const { position, direction, boundingRect, entry } = args2;
-    const offset = getOffset(entry.offset[position] ?? 0);
-    if (entry.alerted[direction][position]) return;
-    if (direction === "down" && boundingRect[position] <= offset || direction === "up" && boundingRect[position] >= offset) {
-      entry.alerted[direction][position] = true;
-      useMagicEmitter().emit("collision", {
-        direction,
-        position,
-        element: entry.element,
-        data: entry.data
-      });
-    }
-  }
-  function resetEntry(args2) {
-    const { position, direction, boundingRect, entry } = args2;
-    const offset = getOffset(entry.offset[position] ?? 0);
-    if (!entry.alerted[direction][position]) return;
-    if (direction === "down" && boundingRect[position] >= offset || direction === "up" && boundingRect[position] <= offset) {
-      entry.alerted[direction][position] = false;
-    }
-  }
-  initialize();
-  watch(
-    () => toValue(scrollY),
-    () => {
-      if (intersecting.value) {
-        observeAll();
-      }
-    }
-  );
-  return {
-    mappedEntries
-  };
-}