@maas/vue-equipment 0.24.4 → 0.24.6

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.24.3"
+  "version": "0.24.5"
 }

package/dist/nuxt/module.mjs

@@ -46,7 +46,7 @@ const functions$1 = [
 	{
 		name: "MagicPlayer",
 		"package": "plugins",
-		lastUpdated: 1709136225000,
+		lastUpdated: 1710321122000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicPlayer/",
 		description: "player"
 	},

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

@@ -12,7 +12,7 @@
         :class="[
           toValue(props.class),
           `-${mappedOptions.position}`,
-          { '-dragging': dragging },
+          { '-dragging': dragging, '-disabled': disabled },
         ]"
         aria-modal="true"
       >
@@ -23,7 +23,7 @@
           <div
             v-show="innerActive"
             class="magic-drawer__backdrop"
-            @click.self="closeIfAllowed"
+            @click.self="guardedClose"
           >
             <slot name="backdrop" />
           </div>
@@ -45,14 +45,14 @@
                 ref="elRef"
                 class="magic-drawer__drag"
                 :style="style"
-                @pointerdown="onPointerdown"
-                @click="onClick"
+                @pointerdown="guardedPointerdown"
+                @click="guardedClick"
               >
                 <component
                   v-if="component"
                   v-bind="props"
                   :is="component"
-                  @close="closeIfAllowed"
+                  @close="guardedClose"
                 />
                 <slot v-else />
                 <div v-if="hasDragged" class="magic-drawer__overlay" />
@@ -209,6 +209,15 @@ const contentTransition = computed(() => {
     : mappedOptions.transitions?.content
 })
 
+// Make sure this is reactive
+const disabled = computed(() => {
+  if (props.options.disabled === undefined) {
+    return defaultOptions.disabled
+  } else {
+    return props.options.disabled
+  }
+})
+
 // Private functions
 function convertToPixels(value: string) {
   const regex = /^(\d*\.?\d+)\s*(rem|px)$/
@@ -246,8 +255,20 @@ function onClose() {
 }
 
 // Public functions
-function closeIfAllowed() {
-  if (canClose) {
+function guardedPointerdown(event: PointerEvent) {
+  if (!disabled.value) {
+    onPointerdown(event)
+  }
+}
+
+function guardedClick(event: PointerEvent) {
+  if (!disabled.value) {
+    onClick(event)
+  }
+}
+
+function guardedClose() {
+  if (canClose && !disabled) {
     close()
   }
 }
@@ -297,5 +318,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-x:hidden;--magic-drawer-content-overflow-y:hidden;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-bottom>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-top>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-right>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer.-left>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer__wrapper{height:var(--magic-drawer-height);pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:var(--magic-drawer-width)}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}dialog.magic-drawer__drag{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-drawer__drag::backdrop{background-color:transparent}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
+:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-x:hidden;--magic-drawer-content-overflow-y:hidden;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-bottom>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-top>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-right>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer.-left>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer__wrapper{height:var(--magic-drawer-height);pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:var(--magic-drawer-width)}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}dialog.magic-drawer__drag{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-drawer__drag::backdrop{background-color:transparent}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-drawer.-disabled .magic-drawer__drag{cursor:auto}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer.-disabled .magic-drawer__backdrop{pointer-events:none}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
 </style>

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

@@ -32,6 +32,7 @@ export interface DrawerOptions {
         initial?: SnapPoint;
     };
     canClose?: boolean;
+    disabled?: boolean;
 }
 export type DrawerEvents = {
     beforeEnter: string;

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

@@ -32,6 +32,7 @@ const defaultOptions = {
     duration: 200,
     initial: 1
   },
-  canClose: true
+  canClose: true,
+  disabled: false
 };
 export { defaultOptions };

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

@@ -1,10 +1,12 @@
 import type { Plugin } from 'vue';
 import MagicPlayer from './src/components/MagicPlayer.vue.js';
 import MagicPlayerControls from './src/components/MagicPlayerControls.vue.js';
+import MagicPlayerDisplayTime from './src/components/MagicPlayerDisplayTime.vue.js';
 import MagicPlayerMuxPopover from './src/components/MagicPlayerMuxPopover.vue.js';
 import MagicPlayerOverlay from './src/components/MagicPlayerOverlay.vue.js';
 import MagicPlayerPoster from './src/components/MagicPlayerPoster.vue.js';
 import MagicPlayerTimeline from './src/components/MagicPlayerTimeline.vue.js';
 import { usePlayerApi } from './src/composables/usePlayerApi.js';
 declare const MagicPlayerPlugin: Plugin;
-export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerMuxPopover, MagicPlayerPoster, MagicPlayerOverlay, MagicPlayerTimeline, usePlayerApi, };
+export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerDisplayTime, MagicPlayerMuxPopover, MagicPlayerPoster, MagicPlayerOverlay, MagicPlayerTimeline, usePlayerApi, };
+export type * from './src/types/index';

package/dist/plugins/MagicPlayer/index.mjs

@@ -1,7 +1,7 @@
 import MagicAudioPlayer from "./src/components/MagicAudioPlayer.vue";
 import MagicPlayer from "./src/components/MagicPlayer.vue";
 import MagicPlayerControls from "./src/components/MagicPlayerControls.vue";
-import MagicPlayerCurrentTime from "./src/components/MagicPlayerCurrentTime.vue";
+import MagicPlayerDisplayTime from "./src/components/MagicPlayerDisplayTime.vue";
 import MagicPlayerMuxPopover from "./src/components/MagicPlayerMuxPopover.vue";
 import MagicPlayerOverlay from "./src/components/MagicPlayerOverlay.vue";
 import MagicPlayerPoster from "./src/components/MagicPlayerPoster.vue";
@@ -12,7 +12,7 @@ const MagicPlayerPlugin = {
     app.component("MagicAudioPlayer", MagicAudioPlayer);
     app.component("MagicPlayer", MagicPlayer);
     app.component("MagicPlayerControls", MagicPlayerControls);
-    app.component("MagicPlayerCurrentTime", MagicPlayerCurrentTime);
+    app.component("MagicPlayerDisplayTime", MagicPlayerDisplayTime);
     app.component("MagicPlayerMuxPopover", MagicPlayerMuxPopover);
     app.component("MagicPlayerOverlay", MagicPlayerOverlay);
     app.component("MagicPlayerPoster", MagicPlayerPoster);
@@ -23,6 +23,7 @@ export {
   MagicPlayerPlugin,
   MagicPlayer,
   MagicPlayerControls,
+  MagicPlayerDisplayTime,
   MagicPlayerMuxPopover,
   MagicPlayerPoster,
   MagicPlayerOverlay,

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

@@ -81,5 +81,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-:root{--magic-audio-player-color:#fff;--magic-audio-player-background:rgba(32,32,32,.8);--magic-audio-player-background-slot:hsla(0,0%,98%,.15);--magic-audio-player-backdrop-filter:blur(80px);--magic-audio-player-border-radius:1.25rem;--magic-audio-player-padding:0.25rem;--magic-audio-player-gap:0.25rem;--magic-audio-player-slot-padding:0.75rem 1rem;--magic-audio-player-slot-radius:calc(var(--magic-audio-player-border-radius) - var(--magic-audio-player-padding));--magic-audio-player-slot-background:rgba(32,32,32,.8)}.magic-audio-player{-webkit-backdrop-filter:var(--magic-audio-player-backdrop-filter);backdrop-filter:var(--magic-audio-player-backdrop-filter);background:var(--magic-audio-player-background);border-radius:var(--magic-audio-player-border-radius);color:var(--magic-audio-player-color);padding:var(--magic-audio-player-padding);position:relative;width:100%}.magic-audio-player.-slot{background:var(--magic-audio-player-background-slot)}.magic-audio-player__container{display:flex;flex-direction:column;gap:var(--magic-audio-player-gap);height:100%;position:relative;width:100%}.magic-audio-player__slot{background-color:var(--magic-audio-player-background);border-radius:var(--magic-audio-player-slot-radius);color:inherit;padding:var(--magic-audio-player-slot-padding)}.magic-audio-player__audio{width:100%}
+:root{--magic-audio-player-color:#fff;--magic-audio-player-background:rgba(32,32,32,.8);--magic-audio-player-background-slot:hsla(0,0%,98%,.15);--magic-audio-player-backdrop-filter:blur(80px);--magic-audio-player-border-radius:1.25rem;--magic-audio-player-padding:0.25rem;--magic-audio-player-gap:0.25rem;--magic-audio-player-slot-padding:0.75rem 1rem;--magic-audio-player-slot-radius:calc(var(--magic-audio-player-border-radius) - var(--magic-audio-player-padding));--magic-audio-player-slot-background:rgba(32,32,32,.8)}.magic-audio-player{-webkit-backdrop-filter:var(--magic-audio-player-backdrop-filter);backdrop-filter:var(--magic-audio-player-backdrop-filter);background:var(--magic-audio-player-background);border-radius:var(--magic-audio-player-border-radius);color:var(--magic-audio-player-color);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)}.magic-audio-player__container{display:flex;flex-direction:column;gap:var(--magic-audio-player-gap);height:100%;position:relative;width:100%}.magic-audio-player__slot{background-color:var(--magic-audio-player-background);border-radius:var(--magic-audio-player-slot-radius);color:inherit;padding:var(--magic-audio-player-slot-padding)}.magic-audio-player__audio{width:100%}
 </style>

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

@@ -15,7 +15,10 @@
   >
     <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">
+        <div
+          class="magic-audio-player-controls__item -shrink-0"
+          data-slot="play-toggle"
+        >
           <button v-if="!playing" @click="play">
             <slot name="playIcon">
               <icon-play />
@@ -27,25 +30,25 @@
             </slot>
           </button>
         </div>
-        <div class="magic-audio-player-controls__item -shrink-0">
-          <magic-player-current-time :id="id" />
+        <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">
+        <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">
-          <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
+          class="magic-audio-player-controls__item -shrink-0"
+          data-slot="display-time-duration"
+        >
+          <magic-player-display-time :id="id" type="duration" />
         </div>
       </div>
     </div>
@@ -55,13 +58,11 @@
 <script setup lang="ts">
 import { ref } 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 { 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 Props {
   id: string
@@ -72,11 +73,11 @@ const props = defineProps<Props>()
 const barRef = ref<HTMLDivElement | undefined>(undefined)
 const trackRef = ref<HTMLDivElement | undefined>(undefined)
 
-const { playing, waiting, muted } = usePlayerMediaApi({
+const { playing, waiting } = usePlayerMediaApi({
   id: props.id,
 })
 
-const { play, pause, mute, unmute, touched, mouseEntered } = usePlayerAudioApi({
+const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
   id: props.id,
 })
 
@@ -90,5 +91,5 @@ const { idle } = useIdle(3000)
 </script>
 
 <style>
-:root{--magic-audio-player-controls-height:3rem;--magic-audio-player-controls-padding:0rem;--magic-audio-player-controls-color:inherit;--magic-audio-player-controls-icon-width:1.25rem;--magic-audio-player-controls-button-width:4rem}.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);display:flex;height:var(--magic-audio-player-controls-height);padding:0 var(--magic-audio-player-controls-padding);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)}.magic-audio-player-controls__item button svg{display:block;height:auto;width:var(--magic-audio-player-controls-icon-width)}.magic-audio-player-controls__timeline{width:100%}
+:root{--magic-audio-player-controls-height:3rem;--magic-audio-player-controls-padding:0rem;--magic-audio-player-controls-color:inherit;--magic-audio-player-controls-icon-width:1.25rem;--magic-audio-player-controls-button-width:4rem}.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);display:flex;height:var(--magic-audio-player-controls-height);padding:0 var(--magic-audio-player-controls-padding);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)}.magic-audio-player-controls__item button svg{display:block;height:auto;width:var(--magic-audio-player-controls-icon-width)}.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

@@ -4,8 +4,6 @@ interface Props {
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;
-    volumeOffIcon?(_: {}): any;
-    volumeOnIcon?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="magic-player-time-display">
+    {{ stringifiedTime }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
+import { formatTime } from '@maas/vue-equipment/utils'
+
+interface Props {
+  id: string
+  type: 'current' | 'remaining' | 'duration'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'current',
+})
+
+const { currentTime, remainingTime, duration } = usePlayerMediaApi({
+  id: props.id,
+})
+
+const stringifiedTime = computed(() => {
+  switch (props.type) {
+    case 'current':
+      return formatTime(currentTime.value, currentTime.value)
+    case 'remaining':
+      return `-${formatTime(remainingTime.value, remainingTime.value)}`
+    case 'duration':
+      return formatTime(duration.value, duration.value)
+    default:
+      return ''
+  }
+})
+</script>
+
+<style>
+:root{--magic-player-time-display-font-size:0.875rem;--magic-player-time-display-color:inherit;--magic-player-time-display-width:4rem;--magic-player-time-display-justify-content:center;--magic-player-time-display-font-variant-numeric:tabular-nums}.magic-player-time-display{align-items:center;color:var(--magic-player-time-display-color);display:flex;font-size:var(--magic-player-time-display-font-size);font-variant-numeric:var(--magic-player-time-display-font-variant-numeric);height:100%;justify-content:var(--magic-player-time-display-justify-content);width:var(--magic-player-time-display-width)}
+</style>

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

@@ -0,0 +1,29 @@
+interface Props {
+    id: string;
+    type: 'current' | 'remaining' | 'duration';
+}
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    type: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    type: string;
+}>>>, {
+    type: "duration" | "current" | "remaining";
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.d.ts

@@ -5,6 +5,7 @@ export type UsePlayerMediaApiArgs = {
 };
 export declare function usePlayerMediaApi(args: UsePlayerMediaApiArgs): {
     currentTime: import("vue").Ref<number>;
+    remainingTime: import("vue").ComputedRef<number>;
     duration: import("vue").Ref<number>;
     seeking: import("vue").Ref<boolean>;
     volume: import("vue").Ref<number>;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.mjs

@@ -1,4 +1,4 @@
-import { ref, watch, unref, toValue } from "vue";
+import { ref, computed, watch, unref, toValue } from "vue";
 import { useEventListener, watchIgnorable } from "@vueuse/core";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 export function usePlayerMediaApi(args) {
@@ -14,6 +14,7 @@ export function usePlayerMediaApi(args) {
   const buffered = ref([]);
   const muted = ref(false);
   const { mediaRef } = args;
+  const remainingTime = computed(() => duration.value - currentTime.value);
   function timeRangeToArray(timeRanges) {
     let ranges = [];
     for (let i = 0; i < timeRanges.length; ++i)
@@ -249,6 +250,7 @@ export function usePlayerMediaApi(args) {
   });
   return {
     currentTime,
+    remainingTime,
     duration,
     seeking,
     volume,

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

@@ -5,6 +5,7 @@ type usePlayerApiArgs = {
 export declare function usePlayerApi(args: usePlayerApiArgs): {
     mediaApi: {
         currentTime: import("vue").Ref<number>;
+        remainingTime: import("vue").ComputedRef<number>;
         duration: import("vue").Ref<number>;
         seeking: import("vue").Ref<boolean>;
         volume: import("vue").Ref<number>;

package/dist/utils/index.d.mts

@@ -1,5 +1,7 @@
 declare function clampValue(value: number, min: number, max: number): number;
 
+declare function formatTime(seconds: number, guide: number): string;
+
 type InterpolateArgs = {
     from: number;
     to: number;
@@ -16,10 +18,6 @@ declare function mapValue(value: number, inMin: number, inMax: number, outMin: n
 
 declare function matchClass(el: Element, regex: RegExp): boolean;
 
-declare function uuid(): string;
-
-declare function uniq<T extends any[]>(a: T): any[];
-
 interface SlugifyOptions {
     separator?: string;
     trim?: boolean;
@@ -29,6 +27,10 @@ interface SlugifyOptions {
 }
 declare function slugify(string: string, options?: SlugifyOptions): string;
 
+declare function uuid(): string;
+
+declare function uniq<T extends any[]>(a: T): any[];
+
 type PickPartial<T, K extends keyof T> = {
     [P in K]: Partial<T[P]>;
 };
@@ -41,4 +43,4 @@ type RequireAllNested<T> = {
     [P in keyof T]-?: RequireAllNested<T[P]>;
 };
 
-export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, interpolate, isIOS, mapValue, matchClass, slugify, uniq, uuid };
+export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, formatTime, interpolate, isIOS, mapValue, matchClass, slugify, uniq, uuid };

package/dist/utils/index.d.ts

@@ -1,5 +1,7 @@
 declare function clampValue(value: number, min: number, max: number): number;
 
+declare function formatTime(seconds: number, guide: number): string;
+
 type InterpolateArgs = {
     from: number;
     to: number;
@@ -16,10 +18,6 @@ declare function mapValue(value: number, inMin: number, inMax: number, outMin: n
 
 declare function matchClass(el: Element, regex: RegExp): boolean;
 
-declare function uuid(): string;
-
-declare function uniq<T extends any[]>(a: T): any[];
-
 interface SlugifyOptions {
     separator?: string;
     trim?: boolean;
@@ -29,6 +27,10 @@ interface SlugifyOptions {
 }
 declare function slugify(string: string, options?: SlugifyOptions): string;
 
+declare function uuid(): string;
+
+declare function uniq<T extends any[]>(a: T): any[];
+
 type PickPartial<T, K extends keyof T> = {
     [P in K]: Partial<T[P]>;
 };
@@ -41,4 +43,4 @@ type RequireAllNested<T> = {
     [P in keyof T]-?: RequireAllNested<T[P]>;
 };
 
-export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, interpolate, isIOS, mapValue, matchClass, slugify, uniq, uuid };
+export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, formatTime, interpolate, isIOS, mapValue, matchClass, slugify, uniq, uuid };

package/dist/utils/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utils_exports = {};
 __export(utils_exports, {
   clampValue: () => clampValue,
+  formatTime: () => formatTime,
   interpolate: () => interpolate,
   isIOS: () => isIOS,
   mapValue: () => mapValue,
@@ -36,6 +37,28 @@ function clampValue(value, min, max) {
   return value <= min ? min : value >= max ? max : value;
 }
 
+// src/functions/toNumber.ts
+function toNumber(value) {
+  return typeof value === "string" ? parseFloat(value) : Number(value);
+}
+
+// src/functions/formatTime.ts
+function formatTime(seconds, guide) {
+  seconds = seconds < 0 ? 0 : seconds;
+  let s = Math.floor(seconds % 60);
+  let m = Math.floor(seconds / 60 % 60);
+  let h = Math.floor(seconds / 3600);
+  const gm = Math.floor(guide / 60 % 60);
+  const gh = Math.floor(guide / 3600);
+  if (isNaN(seconds) || seconds === Infinity) {
+    h = m = s = "-";
+  }
+  h = toNumber(h) > 0 || gh > 0 ? h + ":" : "";
+  m = ((h || gm >= 10) && toNumber(m) < 10 ? "0" + m : m) + ":";
+  s = toNumber(s) < 10 ? "0" + s : s;
+  return h + m + s;
+}
+
 // src/functions/interpolate.ts
 function interpolate(args) {
   const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args;
@@ -71,19 +94,6 @@ function matchClass(el, regex) {
   return Array.from(el.classList).some((className) => regex.test(className));
 }
 
-// src/functions/uuid.ts
-function uuid() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("").reduce(
-    (c, i) => c + (i === "x" ? Math.floor(Math.random() * 15).toString(16) : i === "y" ? Math.floor(Math.random() * 4 + 8).toString(16) : i),
-    ""
-  );
-}
-
-// src/functions/uniq.ts
-function uniq(a) {
-  return Array.from(new Set(a));
-}
-
 // src/functions/slugify.ts
 var defaultOptions = {
   separator: "-",
@@ -120,9 +130,23 @@ function slugify(string, options) {
   }
   return slug;
 }
+
+// src/functions/uuid.ts
+function uuid() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("").reduce(
+    (c, i) => c + (i === "x" ? Math.floor(Math.random() * 15).toString(16) : i === "y" ? Math.floor(Math.random() * 4 + 8).toString(16) : i),
+    ""
+  );
+}
+
+// src/functions/uniq.ts
+function uniq(a) {
+  return Array.from(new Set(a));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   clampValue,
+  formatTime,
   interpolate,
   isIOS,
   mapValue,

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../packages/utils/index.ts","../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/matchClass.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export * from './src/functions/clampValue'\nexport * from './src/functions/interpolate'\nexport * from './src/functions/isIOS'\nexport * from './src/functions/mapValue'\nexport * from './src/functions/matchClass'\nexport * from './src/functions/uuid'\nexport * from './src/functions/uniq'\nexport * from './src/functions/slugify'\n\nexport type * from './src/types'\n","export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n  let startTime: number\n\n  function animate(timestamp: number) {\n    if (!startTime) startTime = timestamp\n\n    const progress = Math.min(1, (timestamp - startTime) / duration)\n    const easedProgress = easing(progress)\n    const value = from + (to - from) * easedProgress\n\n    callback(value)\n\n    if (progress < 1) {\n      requestAnimationFrame(animate)\n    }\n  }\n\n  requestAnimationFrame(animate)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","export function matchClass(el: Element, regex: RegExp) {\n  return Array.from(el.classList).some((className) => regex.test(className))\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM,EAAE,MAAM,IAAI,UAAU,UAAU,SAAS,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI;AAEtE,MAAI;AAEJ,WAAS,QAAQ,WAAmB;AAClC,QAAI,CAAC;AAAW,kBAAY;AAE5B,UAAM,WAAW,KAAK,IAAI,IAAI,YAAY,aAAa,QAAQ;AAC/D,UAAM,gBAAgB,OAAO,QAAQ;AACrC,UAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEnC,aAAS,KAAK;AAEd,QAAI,WAAW,GAAG;AAChB,4BAAsB,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,wBAAsB,OAAO;AAC/B;;;AC7BO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACRO,SAAS,WAAW,IAAa,OAAe;AACrD,SAAO,MAAM,KAAK,GAAG,SAAS,EAAE,KAAK,CAAC,cAAc,MAAM,KAAK,SAAS,CAAC;AAC3E;;;ACEO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../packages/utils/index.ts","../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/toNumber.ts","../../packages/utils/src/functions/formatTime.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/matchClass.ts","../../packages/utils/src/functions/slugify.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts"],"sourcesContent":["export * from './src/functions/clampValue'\nexport * from './src/functions/formatTime'\nexport * from './src/functions/interpolate'\nexport * from './src/functions/isIOS'\nexport * from './src/functions/mapValue'\nexport * from './src/functions/matchClass'\nexport * from './src/functions/slugify'\nexport * from './src/functions/uuid'\nexport * from './src/functions/uniq'\n\nexport type * from './src/types'\n","export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export function toNumber(value: string | number): number {\n  return typeof value === 'string' ? parseFloat(value) : Number(value)\n}\n","import { toNumber } from './toNumber'\n\nexport function formatTime(seconds: number, guide: number) {\n  seconds = seconds < 0 ? 0 : seconds\n  let s: string | number = Math.floor(seconds % 60)\n  let m: string | number = Math.floor((seconds / 60) % 60)\n  let h: string | number = Math.floor(seconds / 3600)\n  const gm = Math.floor((guide / 60) % 60)\n  const gh = Math.floor(guide / 3600)\n\n  // handle invalid times\n  if (isNaN(seconds) || seconds === Infinity) {\n    // '-' is false for all relational operators (e.g. <, >=) so this setting\n    // will add the minimum number of fields specified by the guide\n    h = m = s = '-'\n  }\n\n  // Check if we need to show hours\n  h = toNumber(h) > 0 || gh > 0 ? h + ':' : ''\n\n  // If hours are showing, we may need to add a leading zero.\n  // Always show at least one digit of minutes.\n  m = ((h || gm >= 10) && toNumber(m) < 10 ? '0' + m : m) + ':'\n\n  // Check if leading zero is need for seconds\n  s = toNumber(s) < 10 ? '0' + s : s\n\n  return h + m + s\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n  let startTime: number\n\n  function animate(timestamp: number) {\n    if (!startTime) startTime = timestamp\n\n    const progress = Math.min(1, (timestamp - startTime) / duration)\n    const easedProgress = easing(progress)\n    const value = from + (to - from) * easedProgress\n\n    callback(value)\n\n    if (progress < 1) {\n      requestAnimationFrame(animate)\n    }\n  }\n\n  requestAnimationFrame(animate)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","export function matchClass(el: Element, regex: RegExp) {\n  return Array.from(el.classList).some((className) => regex.test(className))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n"],"mappings":"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","names":[]}

package/dist/utils/index.mjs

@@ -3,6 +3,28 @@ function clampValue(value, min, max) {
   return value <= min ? min : value >= max ? max : value;
 }
 
+// src/functions/toNumber.ts
+function toNumber(value) {
+  return typeof value === "string" ? parseFloat(value) : Number(value);
+}
+
+// src/functions/formatTime.ts
+function formatTime(seconds, guide) {
+  seconds = seconds < 0 ? 0 : seconds;
+  let s = Math.floor(seconds % 60);
+  let m = Math.floor(seconds / 60 % 60);
+  let h = Math.floor(seconds / 3600);
+  const gm = Math.floor(guide / 60 % 60);
+  const gh = Math.floor(guide / 3600);
+  if (isNaN(seconds) || seconds === Infinity) {
+    h = m = s = "-";
+  }
+  h = toNumber(h) > 0 || gh > 0 ? h + ":" : "";
+  m = ((h || gm >= 10) && toNumber(m) < 10 ? "0" + m : m) + ":";
+  s = toNumber(s) < 10 ? "0" + s : s;
+  return h + m + s;
+}
+
 // src/functions/interpolate.ts
 function interpolate(args) {
   const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args;
@@ -38,19 +60,6 @@ function matchClass(el, regex) {
   return Array.from(el.classList).some((className) => regex.test(className));
 }
 
-// src/functions/uuid.ts
-function uuid() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("").reduce(
-    (c, i) => c + (i === "x" ? Math.floor(Math.random() * 15).toString(16) : i === "y" ? Math.floor(Math.random() * 4 + 8).toString(16) : i),
-    ""
-  );
-}
-
-// src/functions/uniq.ts
-function uniq(a) {
-  return Array.from(new Set(a));
-}
-
 // src/functions/slugify.ts
 var defaultOptions = {
   separator: "-",
@@ -87,8 +96,22 @@ function slugify(string, options) {
   }
   return slug;
 }
+
+// src/functions/uuid.ts
+function uuid() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("").reduce(
+    (c, i) => c + (i === "x" ? Math.floor(Math.random() * 15).toString(16) : i === "y" ? Math.floor(Math.random() * 4 + 8).toString(16) : i),
+    ""
+  );
+}
+
+// src/functions/uniq.ts
+function uniq(a) {
+  return Array.from(new Set(a));
+}
 export {
   clampValue,
+  formatTime,
   interpolate,
   isIOS,
   mapValue,

package/dist/utils/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/matchClass.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n  let startTime: number\n\n  function animate(timestamp: number) {\n    if (!startTime) startTime = timestamp\n\n    const progress = Math.min(1, (timestamp - startTime) / duration)\n    const easedProgress = easing(progress)\n    const value = from + (to - from) * easedProgress\n\n    callback(value)\n\n    if (progress < 1) {\n      requestAnimationFrame(animate)\n    }\n  }\n\n  requestAnimationFrame(animate)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","export function matchClass(el: Element, regex: RegExp) {\n  return Array.from(el.classList).some((className) => regex.test(className))\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";AAAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM,EAAE,MAAM,IAAI,UAAU,UAAU,SAAS,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI;AAEtE,MAAI;AAEJ,WAAS,QAAQ,WAAmB;AAClC,QAAI,CAAC;AAAW,kBAAY;AAE5B,UAAM,WAAW,KAAK,IAAI,IAAI,YAAY,aAAa,QAAQ;AAC/D,UAAM,gBAAgB,OAAO,QAAQ;AACrC,UAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEnC,aAAS,KAAK;AAEd,QAAI,WAAW,GAAG;AAChB,4BAAsB,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,wBAAsB,OAAO;AAC/B;;;AC7BO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACRO,SAAS,WAAW,IAAa,OAAe;AACrD,SAAO,MAAM,KAAK,GAAG,SAAS,EAAE,KAAK,CAAC,cAAc,MAAM,KAAK,SAAS,CAAC;AAC3E;;;ACEO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/toNumber.ts","../../packages/utils/src/functions/formatTime.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/matchClass.ts","../../packages/utils/src/functions/slugify.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export function toNumber(value: string | number): number {\n  return typeof value === 'string' ? parseFloat(value) : Number(value)\n}\n","import { toNumber } from './toNumber'\n\nexport function formatTime(seconds: number, guide: number) {\n  seconds = seconds < 0 ? 0 : seconds\n  let s: string | number = Math.floor(seconds % 60)\n  let m: string | number = Math.floor((seconds / 60) % 60)\n  let h: string | number = Math.floor(seconds / 3600)\n  const gm = Math.floor((guide / 60) % 60)\n  const gh = Math.floor(guide / 3600)\n\n  // handle invalid times\n  if (isNaN(seconds) || seconds === Infinity) {\n    // '-' is false for all relational operators (e.g. <, >=) so this setting\n    // will add the minimum number of fields specified by the guide\n    h = m = s = '-'\n  }\n\n  // Check if we need to show hours\n  h = toNumber(h) > 0 || gh > 0 ? h + ':' : ''\n\n  // If hours are showing, we may need to add a leading zero.\n  // Always show at least one digit of minutes.\n  m = ((h || gm >= 10) && toNumber(m) < 10 ? '0' + m : m) + ':'\n\n  // Check if leading zero is need for seconds\n  s = toNumber(s) < 10 ? '0' + s : s\n\n  return h + m + s\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n  let startTime: number\n\n  function animate(timestamp: number) {\n    if (!startTime) startTime = timestamp\n\n    const progress = Math.min(1, (timestamp - startTime) / duration)\n    const easedProgress = easing(progress)\n    const value = from + (to - from) * easedProgress\n\n    callback(value)\n\n    if (progress < 1) {\n      requestAnimationFrame(animate)\n    }\n  }\n\n  requestAnimationFrame(animate)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","export function matchClass(el: Element, regex: RegExp) {\n  return Array.from(el.classList).some((className) => regex.test(className))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.24.4",
+  "version": "0.24.6",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",

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

@@ -1,58 +0,0 @@
-<template>
-  <div class="magic-player-current-time">
-    {{ stringifiedTime }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-
-interface Props {
-  id: string
-}
-
-const props = defineProps<Props>()
-
-const { currentTime } = usePlayerMediaApi({
-  id: props.id,
-})
-
-function toNumber(value: string | number): number {
-  return typeof value === 'string' ? parseFloat(value) : Number(value)
-}
-
-const formatTime = function (seconds: number, guide: number) {
-  seconds = seconds < 0 ? 0 : seconds
-  let s: string | number = Math.floor(seconds % 60)
-  let m: string | number = Math.floor((seconds / 60) % 60)
-  let h: string | number = Math.floor(seconds / 3600)
-  const gm = Math.floor((guide / 60) % 60)
-  const gh = Math.floor(guide / 3600)
-
-  // handle invalid times
-  if (isNaN(seconds) || seconds === Infinity) {
-    // '-' is false for all relational operators (e.g. <, >=) so this setting
-    // will add the minimum number of fields specified by the guide
-    h = m = s = '-'
-  }
-
-  // Check if we need to show hours
-  h = toNumber(h) > 0 || gh > 0 ? h + ':' : ''
-
-  // If hours are showing, we may need to add a leading zero.
-  // Always show at least one digit of minutes.
-  m = ((h || gm >= 10) && toNumber(m) < 10 ? '0' + m : m) + ':'
-
-  // Check if leading zero is need for seconds
-  s = toNumber(s) < 10 ? '0' + s : s
-
-  return h + m + s
-}
-
-const stringifiedTime = computed(() => formatTime(currentTime.value, 60))
-</script>
-
-<style>
-:root{--magic-player-current-time-font-size:0.875rem;--magic-player-current-time-color:inherit;--magic-player-current-time-width:3.25rem;--magic-player-current-time-justify-content:flex-start}.magic-player-current-time{align-items:center;color:var(--magic-player-current-time-color);display:flex;font-size:var(--magic-player-current-time-font-size);height:100%;justify-content:var(--magic-player-current-time-justify-content);width:var(--magic-player-current-time-width)}
-</style>

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

@@ -1,14 +0,0 @@
-interface Props {
-    id: string;
-}
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<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;
-    };
-};