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

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

@@ -1,89 +0,0 @@
-<template>
-  <div
-    ref="playerRef"
-    class="magic-audio-player"
-    :class="{ '-slot': $slots.default }"
-  >
-    <div class="magic-audio-player__container">
-      <div v-if="$slots.default" class="magic-audio-player__slot">
-        <slot />
-      </div>
-      <magic-audio-player-controls :id="id" />
-    </div>
-    <audio ref="audioRef" class="magic-audio-player__audio" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import MagicAudioPlayerControls from './MagicAudioPlayerControls.vue'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useIntersectionObserver } from '@vueuse/core'
-import { usePlayerAudioApi } from '../composables/private/usePlayerAudioApi'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
-
-interface MagicAudioPlayerProps {
-  id: string
-  src: string
-  loop?: boolean
-}
-
-const props = withDefaults(defineProps<MagicAudioPlayerProps>(), {
-  src: '',
-  loop: false,
-})
-
-const playerRef = ref<HTMLDivElement | undefined>(undefined)
-const audioRef = ref<HTMLVideoElement | undefined>(undefined)
-
-const pausedByIntersection = ref(false)
-
-const { playing } = usePlayerMediaApi({
-  id: props.id,
-  mediaRef: audioRef,
-})
-
-const { initialize, destroy } = usePlayerRuntime({
-  id: props.id,
-  mediaRef: audioRef,
-  src: props.src,
-  srcType: 'native',
-})
-
-const { play, pause } = usePlayerAudioApi({
-  id: props.id,
-})
-
-useIntersectionObserver(
-  playerRef,
-  ([{ isIntersecting }]) => {
-    if (!isIntersecting && playing.value) {
-      pause()
-      pausedByIntersection.value = true
-    } else if (isIntersecting && !playing.value && pausedByIntersection.value) {
-      pausedByIntersection.value = false
-
-      play()
-    }
-  },
-  {
-    immediate: true,
-  }
-)
-
-onMounted(() => {
-  initialize()
-})
-
-onBeforeUnmount(() => {
-  destroy()
-})
-</script>
-
-<style>
-:root{--magic-audio-player-border-radius:1.25rem;--magic-audio-player-padding:0.25rem;--magic-audio-player-slot-radius:calc(var(--magic-audio-player-border-radius) - var(--magic-audio-player-padding))}.magic-audio-player{-webkit-backdrop-filter:var(--magic-audio-player-backdrop-filter,blur(80px));backdrop-filter:var(--magic-audio-player-backdrop-filter,blur(80px));background:var(--magic-audio-player-background,rgba(32,32,32,.8));border-radius:var(--magic-audio-player-border-radius);color:var(--magic-audio-player-color,#fff);container-type:inline-size;padding:var(--magic-audio-player-padding);position:relative;width:100%}.magic-audio-player.-slot{background:var(
-    --magic-audio-player-background-slot,hsla(0,0%,98%,.15)
-  )}.magic-audio-player__container{display:flex;flex-direction:column;gap:var(--magic-audio-player-gap,.25rem);height:100%;position:relative;width:100%}.magic-audio-player__slot{background-color:var(
-    --magic-audio-player-slot-background,rgba(32,32,32,.8)
-  );border-radius:var(--magic-audio-player-slot-radius);color:inherit;padding:var(--magic-audio-player-slot-padding,.75rem 1rem)}.magic-audio-player__audio{width:100%}
-</style>

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

@@ -1,28 +0,0 @@
-interface MagicAudioPlayerProps {
-    id: string;
-    src: string;
-    loop?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        playerRef: HTMLDivElement;
-        audioRef: HTMLAudioElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicAudioPlayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerProps> & Readonly<{}>, {
-    loop: boolean;
-    src: string;
-}, {}, {}, {}, 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/MagicAudioPlayerControls.vue

@@ -1,95 +0,0 @@
-<template>
-  <div
-    class="magic-audio-player-controls"
-    :class="{
-      '-touched': touched,
-      '-untouched': !touched,
-      '-playing': playing,
-      '-paused': !playing,
-      '-waiting': waiting,
-      '-idle': idle,
-      '-not-idle': !idle,
-      '-hover': mouseEntered,
-      '-not-hover': !mouseEntered,
-    }"
-  >
-    <div class="magic-audio-player-controls__bar">
-      <div class="magic-audio-player-controls__bar--inner" ref="barRef">
-        <div
-          class="magic-audio-player-controls__item -shrink-0"
-          data-slot="play-toggle"
-        >
-          <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-audio-player-controls__item -shrink-0"
-          data-slot="display-time-current"
-        >
-          <magic-player-display-time :id="id" type="current" />
-        </div>
-        <div
-          class="magic-audio-player-controls__item -grow"
-          data-slot="timeline"
-        >
-          <div class="magic-audio-player-controls__timeline" ref="trackRef">
-            <magic-player-timeline :id="id" />
-          </div>
-        </div>
-        <div
-          class="magic-audio-player-controls__item -shrink-0"
-          data-slot="display-time-duration"
-        >
-          <magic-player-display-time :id="id" type="duration" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useIdle } from '@vueuse/core'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { usePlayerAudioApi } from '../composables/private/usePlayerAudioApi'
-import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
-import IconPlay from './icons/Play.vue'
-import IconPause from './icons/Pause.vue'
-
-interface MagicAudioPlayerControlsProps {
-  id: string
-}
-
-const props = defineProps<MagicAudioPlayerControlsProps>()
-
-const barRef = ref<HTMLDivElement | undefined>(undefined)
-const trackRef = ref<HTMLDivElement | undefined>(undefined)
-
-const { playing, waiting } = usePlayerMediaApi({
-  id: props.id,
-})
-
-const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-  id: props.id,
-})
-
-usePlayerControlsApi({
-  id: props.id,
-  barRef: barRef,
-  trackRef: trackRef,
-})
-
-const { idle } = useIdle(3000)
-</script>
-
-<style>
-:root{--magic-audio-player-controls-height:3rem}.magic-audio-player-controls{pointer-events:none;width:100%}.magic-audio-player-controls__bar{align-items:flex-start;display:flex;flex-direction:column;margin:0 auto;pointer-events:auto;width:100%}.magic-audio-player-controls__bar--inner{align-items:center;box-sizing:border-box;color:var(--magic-audio-player-controls-color,inherit);display:flex;height:var(--magic-audio-player-controls-height);padding:0 var(--magic-audio-player-controls-padding-x,0);width:100%}.magic-audio-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-audio-player-controls__item.-shrink-0{flex-shrink:0}.magic-audio-player-controls__item.-grow{flex-grow:1}.magic-audio-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-audio-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-audio-player-controls-button-width,4rem)}.magic-audio-player-controls__item button svg{display:block;height:auto;width:var(--magic-audio-player-controls-icon-width,1.25rem)}.magic-audio-player-controls__timeline{width:100%}@container (max-width: 480px){.magic-audio-player-controls__item[data-slot=display-time-current]{display:none}}@container (max-width: 320px ){.magic-audio-player-controls__item[data-slot=display-time-duration]{display:none}.magic-audio-player-controls__item[data-slot=timeline]{padding-right:1rem}}@container (max-width: 240px){.magic-audio-player-controls__item[data-slot=timeline]{display:none}.magic-audio-player-controls__bar--inner{justify-content:center}}
-</style>

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/MagicPlayer/src/components/MagicPlayerControls.vue.d.ts

@@ -1,38 +0,0 @@
-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;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        seekPopover?(_: {}): any;
-        playIcon?(_: {}): any;
-        pauseIcon?(_: {}): any;
-        timelineBefore?(_: {}): any;
-        timelineAfter?(_: {}): any;
-        volumeOffIcon?(_: {}): any;
-        volumeOnIcon?(_: {}): any;
-        fullscreenExitIcon?(_: {}): any;
-        fullscreenEnterIcon?(_: {}): any;
-    };
-    refs: {
-        popoverRef: HTMLDivElement;
-        barRef: HTMLDivElement;
-        trackRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerControlsProps> & Readonly<{}>, {
-    transition: string;
-}, {}, {}, {}, 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/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;
-    };
-};