@maas/vue-equipment 1.0.0-beta.13 → 1.0.0-beta.15

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

@@ -1,20 +1,81 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, Transition as _Transition, withCtx as _withCtx } from "vue";
-const _hoisted_1 = ["data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-muted", "data-idle", "data-hover", "data-standalone"];
-const _hoisted_2 = { class: "magic-player-video-controls__bar" };
-const _hoisted_3 = {
-  ref: "bar",
-  class: "magic-player-video-controls__bar--inner"
-};
-const _hoisted_4 = { class: "magic-player-video-controls__item -shrink-0" };
-const _hoisted_5 = { class: "magic-player-video-controls__item -grow" };
-const _hoisted_6 = {
-  ref: "track",
-  class: "magic-player-video-controls__timeline"
-};
-const _hoisted_7 = { class: "magic-player-video-controls__item -shrink-0" };
-const _hoisted_8 = { class: "magic-player-video-controls__item -shrink-0" };
+<template>
+  <div
+    ref="el"
+    class="magic-player-video-controls"
+    :data-fullscreen="isFullscreen"
+    :data-touched="touched"
+    :data-playing="playing"
+    :data-paused="!playing"
+    :data-waiting="waiting"
+    :data-muted="muted"
+    :data-idle="idle"
+    :data-hover="controlsMouseEntered"
+    :data-standalone="standalone"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <transition :name="mappedTransition">
+      <div v-show="!hidden" class="magic-player-video-controls__bar">
+        <div
+          v-if="$slots.popover"
+          v-show="!!seekedTime && touched"
+          ref="popover"
+          class="magic-player-video-controls__popover"
+          :style="{ marginLeft: `${popoverOffsetX}%` }"
+        >
+          <slot name="popover" />
+        </div>
+        <div ref="bar" class="magic-player-video-controls__bar--inner">
+          <div class="magic-player-video-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-video-controls__item -grow">
+            <slot name="timelineBefore" />
+            <div ref="track" class="magic-player-video-controls__timeline">
+              <magic-player-timeline />
+            </div>
+            <slot name="timelineAfter" />
+          </div>
+          <div class="magic-player-video-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-video-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>
 import {
   toRefs,
   computed,
@@ -24,12 +85,6 @@ import {
   onBeforeUnmount
 } from "vue";
 import { useElementVisibility, 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 { usePlayerState } from "../composables/private/usePlayerState";
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
@@ -42,209 +97,83 @@ import {
 } from "../symbols";
 import "@maas/vue-equipment/utils/css/animations/fade-up-in.css";
 import "@maas/vue-equipment/utils/css/animations/fade-up-out.css";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicPlayerVideoControls",
-  props: {
-    id: { type: String, required: false },
-    standalone: { type: Boolean, required: false, default: false },
-    transition: { type: String, required: false }
+const {
+  id,
+  standalone = false,
+  transition
+} = defineProps({
+  id: {
+    type: String,
+    required: false
   },
-  setup(__props) {
-    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedInstanceId = computed(() => __props.id ?? injectedInstanceId);
-    if (!mappedInstanceId.value) {
-      throw new Error(
-        "MagicPlayerVideoControls must be nested inside MagicPlayerProvider or be passed an id as a prop."
-      );
-    }
-    const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
-    const mappedTransition = computed(
-      () => __props.transition ?? injectedOptions?.transition?.videoControls
-    );
-    const barRef = useTemplateRef("bar");
-    const trackRef = useTemplateRef("track");
-    const popoverRef = useTemplateRef("popover");
-    const { initializeState } = usePlayerState(mappedInstanceId.value);
-    const state = initializeState();
-    const {
-      playing,
-      waiting,
-      muted,
-      touched,
-      mouseEntered,
-      controlsMouseEntered,
-      isFullscreen,
-      popoverOffsetX,
-      seekedTime
-    } = toRefs(state);
-    const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } = usePlayerVideoApi({ id: mappedInstanceId.value });
-    const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi({
-      id: mappedInstanceId.value,
-      barRef,
-      trackRef,
-      popoverRef
-    });
-    const elRef = useTemplateRef("el");
-    const isVisible = useElementVisibility(elRef);
-    const { idle } = useIdle(3e3);
-    const hidden = computed(() => {
-      switch (true) {
-        case __props.standalone:
-          return false;
-        case (playing.value && idle.value):
-          return true;
-        case (playing.value && !controlsMouseEntered.value && !mouseEntered.value):
-          return true;
-        case !isVisible.value:
-          return true;
-        case !touched.value:
-          return true;
-        default:
-          return false;
-      }
-    });
-    initialize();
-    onBeforeUnmount(() => {
-      destroy();
-    });
-    provide(MagicPlayerInstanceId, mappedInstanceId.value);
-    provide(MagicPlayerTrackRef, trackRef);
-    provide(MagicPlayerPopoverRef, popoverRef);
-    provide(MagicPlayerBarRef, barRef);
-    return (_ctx, _cache) => {
-      const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");
-      return _openBlock(), _createElementBlock("div", {
-        ref: "el",
-        class: "magic-player-video-controls",
-        "data-fullscreen": _unref(isFullscreen),
-        "data-touched": _unref(touched),
-        "data-playing": _unref(playing),
-        "data-paused": !_unref(playing),
-        "data-waiting": _unref(waiting),
-        "data-muted": _unref(muted),
-        "data-idle": _unref(idle),
-        "data-hover": _unref(controlsMouseEntered),
-        "data-standalone": _ctx.standalone,
-        onMouseenter: _cache[6] || (_cache[6] = //@ts-ignore
-        (...args) => _unref(onMouseenter) && _unref(onMouseenter)(...args)),
-        onMouseleave: _cache[7] || (_cache[7] = //@ts-ignore
-        (...args) => _unref(onMouseleave) && _unref(onMouseleave)(...args))
-      }, [
-        _createVNode(_Transition, {
-          name: mappedTransition.value,
-          persisted: ""
-        }, {
-          default: _withCtx(() => [
-            _withDirectives(_createElementVNode(
-              "div",
-              _hoisted_2,
-              [
-                _ctx.$slots.popover ? _withDirectives((_openBlock(), _createElementBlock(
-                  "div",
-                  {
-                    key: 0,
-                    ref: "popover",
-                    class: "magic-player-video-controls__popover",
-                    style: _normalizeStyle({ marginLeft: `${_unref(popoverOffsetX)}%` })
-                  },
-                  [
-                    _renderSlot(_ctx.$slots, "popover")
-                  ],
-                  4
-                  /* STYLE */
-                )), [
-                  [_vShow, !!_unref(seekedTime) && _unref(touched)]
-                ]) : _createCommentVNode("v-if", true),
-                _createElementVNode(
-                  "div",
-                  _hoisted_3,
-                  [
-                    _createElementVNode("div", _hoisted_4, [
-                      !_unref(playing) ? (_openBlock(), _createElementBlock("button", {
-                        key: 0,
-                        onClick: _cache[0] || (_cache[0] = //@ts-ignore
-                        (...args) => _unref(play) && _unref(play)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "playIcon", {}, () => [
-                          _createVNode(IconPlay)
-                        ])
-                      ])) : (_openBlock(), _createElementBlock("button", {
-                        key: 1,
-                        onClick: _cache[1] || (_cache[1] = //@ts-ignore
-                        (...args) => _unref(pause) && _unref(pause)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "pauseIcon", {}, () => [
-                          _createVNode(IconPause)
-                        ])
-                      ]))
-                    ]),
-                    _createElementVNode("div", _hoisted_5, [
-                      _renderSlot(_ctx.$slots, "timelineBefore"),
-                      _createElementVNode(
-                        "div",
-                        _hoisted_6,
-                        [
-                          _createVNode(_component_magic_player_timeline)
-                        ],
-                        512
-                        /* NEED_PATCH */
-                      ),
-                      _renderSlot(_ctx.$slots, "timelineAfter")
-                    ]),
-                    _createElementVNode("div", _hoisted_7, [
-                      _unref(muted) ? (_openBlock(), _createElementBlock("button", {
-                        key: 0,
-                        onClick: _cache[2] || (_cache[2] = //@ts-ignore
-                        (...args) => _unref(unmute) && _unref(unmute)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "volumeOffIcon", {}, () => [
-                          _createVNode(IconVolumeOff)
-                        ])
-                      ])) : (_openBlock(), _createElementBlock("button", {
-                        key: 1,
-                        onClick: _cache[3] || (_cache[3] = //@ts-ignore
-                        (...args) => _unref(mute) && _unref(mute)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "volumeOnIcon", {}, () => [
-                          _createVNode(IconVolumeOn)
-                        ])
-                      ]))
-                    ]),
-                    _createElementVNode("div", _hoisted_8, [
-                      _unref(isFullscreen) ? (_openBlock(), _createElementBlock("button", {
-                        key: 0,
-                        onClick: _cache[4] || (_cache[4] = //@ts-ignore
-                        (...args) => _unref(exitFullscreen) && _unref(exitFullscreen)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "fullscreenExitIcon", {}, () => [
-                          _createVNode(IconFullscreenExit)
-                        ])
-                      ])) : (_openBlock(), _createElementBlock("button", {
-                        key: 1,
-                        onClick: _cache[5] || (_cache[5] = //@ts-ignore
-                        (...args) => _unref(enterFullscreen) && _unref(enterFullscreen)(...args))
-                      }, [
-                        _renderSlot(_ctx.$slots, "fullscreenEnterIcon", {}, () => [
-                          _createVNode(IconFullscreenEnter)
-                        ])
-                      ]))
-                    ])
-                  ],
-                  512
-                  /* NEED_PATCH */
-                )
-              ],
-              512
-              /* NEED_PATCH */
-            ), [
-              [_vShow, !hidden.value]
-            ])
-          ]),
-          _: 3
-          /* FORWARDED */
-        }, 8, ["name"])
-      ], 40, _hoisted_1);
-    };
+  standalone: {
+    type: Boolean,
+    required: false
+  },
+  transition: {
+    type: String,
+    required: false
   }
 });
+const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+const mappedInstanceId = computed(() => id ?? injectedInstanceId);
+if (!mappedInstanceId.value) {
+  throw new Error(
+    "MagicPlayerVideoControls must be nested inside MagicPlayerProvider or be passed an id as a prop."
+  );
+}
+const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+const mappedTransition = computed(
+  () => transition ?? injectedOptions?.transition?.videoControls
+);
+const barRef = useTemplateRef("bar");
+const trackRef = useTemplateRef("track");
+const popoverRef = useTemplateRef("popover");
+const { initializeState } = usePlayerState(mappedInstanceId.value);
+const state = initializeState();
+const {
+  playing,
+  waiting,
+  muted,
+  touched,
+  mouseEntered,
+  controlsMouseEntered,
+  isFullscreen,
+  popoverOffsetX,
+  seekedTime
+} = toRefs(state);
+const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } = usePlayerVideoApi({ id: mappedInstanceId.value });
+const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi({
+  id: mappedInstanceId.value,
+  barRef,
+  trackRef,
+  popoverRef
+});
+const elRef = useTemplateRef("el");
+const isVisible = useElementVisibility(elRef);
+const { idle } = useIdle(3e3);
+const hidden = computed(() => {
+  switch (true) {
+    case standalone:
+      return false;
+    case (playing.value && idle.value):
+      return true;
+    case (playing.value && !controlsMouseEntered.value && !mouseEntered.value):
+      return true;
+    case !isVisible.value:
+      return true;
+    case !touched.value:
+      return true;
+    default:
+      return false;
+  }
+});
+initialize();
+onBeforeUnmount(() => {
+  destroy();
+});
+provide(MagicPlayerInstanceId, mappedInstanceId.value);
+provide(MagicPlayerTrackRef, trackRef);
+provide(MagicPlayerPopoverRef, popoverRef);
+provide(MagicPlayerBarRef, barRef);
 </script>

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -9,7 +9,7 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
     ended: import("vue").Ref<boolean, boolean>;
     playing: import("vue").Ref<boolean, boolean>;
     stalled: import("vue").Ref<boolean, boolean>;
-    buffered: import("vue").Ref<import("../types").Buffered, import("../types").Buffered>;
+    buffered: import("vue").Ref<import("../types/index.js").Buffered, import("../types/index.js").Buffered>;
     muted: import("vue").Ref<boolean, boolean>;
     touched: import("vue").Ref<boolean, boolean>;
     dragging: import("vue").Ref<boolean, boolean>;

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

@@ -1,10 +1,10 @@
-<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"
-};
+<template>
+  <div ref="el" class="magic-scroll-collision">
+    <slot />
+  </div>
+</template>
+
+<script setup>
 import {
   shallowRef,
   inject,
@@ -18,60 +18,50 @@ import {
 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 }
+const { id, offset } = defineProps({
+  id: {
+    type: String,
+    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(() => {
+  offset: {
+    type: Object,
+    required: false
+  }
+});
+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(() => 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",
-        _hoisted_1,
-        [
-          _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/MagicScrollMotion.vue

@@ -1,10 +1,10 @@
-<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"
-};
+<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";
@@ -12,70 +12,63 @@ 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 }
+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 = 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 */
-      );
-    };
+  {
+    deep: true
   }
+);
+onMounted(() => {
+  createAnimation();
 });
 </script>