@maas/vue-equipment 0.30.3 → 0.30.4

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue.d.ts

@@ -3,12 +3,14 @@ interface MagicMenuTriggerProps {
     disabled?: boolean;
     trigger?: Interaction[];
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuTriggerProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {
         isActive: boolean | undefined;
         isDisabled: boolean;
     }): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuTriggerProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -3,9 +3,11 @@ interface MagicMenuViewProps {
     id?: string;
     placement?: Placement;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuViewProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuViewProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/plugins/MagicMenu/src/composables/private/useMenuChannel.mjs

@@ -1,10 +1,7 @@
 import { reactive } from "vue";
 import { useMenuView } from "./useMenuView.mjs";
-import { useMenuState } from "./useMenuState.mjs";
 export function useMenuChannel(args) {
   const { instanceId, viewId } = args;
-  const { initializeState } = useMenuState(instanceId);
-  const state = initializeState();
   const { getView } = useMenuView(instanceId);
   const view = getView(viewId);
   function createChannel(args2) {
@@ -35,8 +32,7 @@ export function useMenuChannel(args) {
     return instance;
   }
   function deleteChannel(id) {
-    if (!view?.channels)
-      return;
+    if (!view?.channels) return;
     view.channels = view.channels.filter((x) => x.id !== id);
   }
   function getChannel(id) {
@@ -49,9 +45,6 @@ export function useMenuChannel(args) {
     if (instance) {
       instance.active = true;
       unselectSiblings(id);
-      if (view) {
-        state.input.view = view.id;
-      }
     }
   }
   function unselectChannel(id) {

package/dist/plugins/MagicMenu/src/composables/private/useMenuCursor.d.ts

@@ -1,5 +1,5 @@
 import type { MenuView } from '../../types.js';
-export declare function useMenuCursor(view: MenuView): {
+export declare function useMenuCursor(view: MenuView, debug?: boolean): {
     coords: import("vue").Ref<{
         x: number;
         y: number;

package/dist/plugins/MagicMenu/src/composables/private/useMenuCursor.mjs

@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import { useEventListener } from "@vueuse/core";
-export function useMenuCursor(view) {
+export function useMenuCursor(view, debug = false) {
   let cancelListener = new AbortController();
   const coords = ref([
     { x: 0, y: 0 },
@@ -56,7 +56,6 @@ export function useMenuCursor(view) {
         }
         break;
     }
-    coords.value = [a, b, c];
     return [a, b, c];
   }
   function isPointInTriangle(args) {
@@ -78,9 +77,9 @@ export function useMenuCursor(view) {
     const { p, top, left, bottom, right } = args;
     return p.x >= left && p.x <= right && p.y >= top && p.y <= bottom;
   }
-  function triangleOverlap(cursor, fromBounding, toBounding) {
+  function getTriangle(fromBounding, toBounding) {
     const { top, left, bottom, right } = toBounding;
-    const centerPoint = view.click ? view.click : {
+    const centerPoint = view.state.clicked ? view.state.clicked : {
       x: (fromBounding.left + fromBounding.right) / 2,
       y: (fromBounding.top + fromBounding.bottom) / 2
     };
@@ -115,6 +114,10 @@ export function useMenuCursor(view) {
       [centerPoint, sidePoints[0], sidePoints[1]],
       16
     );
+    return [a, b, c];
+  }
+  function triangleOverlap(cursor, fromBounding, toBounding) {
+    const [a, b, c] = getTriangle(fromBounding, toBounding);
     return isPointInTriangle({
       p: cursor,
       a,
@@ -133,19 +136,35 @@ export function useMenuCursor(view) {
     });
   }
   function onMousemove(e) {
-    const from = document.querySelector(
-      `[data-id="${view?.id}-trigger"]`
+    const from = Array.from(
+      document.querySelectorAll(`[data-id="${view?.id}-trigger"]`)
     );
     const to = document.querySelector(
       `[data-id="${view?.id}-content"] .magic-menu-content__inner`
     );
-    if (from && to) {
+    if (from.length && to) {
       const cursor = { x: e.clientX, y: e.clientY };
-      const fromBounding = from.getBoundingClientRect();
       const toBounding = to.getBoundingClientRect();
-      isInsideFrom.value = elementOverlap(cursor, fromBounding);
       isInsideTo.value = elementOverlap(cursor, toBounding);
-      isInsideTriangle.value = triangleOverlap(cursor, fromBounding, toBounding);
+      isInsideFrom.value = from.some((trigger) => {
+        const fromBounding = trigger.getBoundingClientRect();
+        const overlap = elementOverlap(cursor, fromBounding);
+        return overlap;
+      });
+      isInsideTriangle.value = from.some((trigger) => {
+        const fromBounding = trigger.getBoundingClientRect();
+        const overlap = triangleOverlap(cursor, fromBounding, toBounding);
+        return overlap;
+      });
+      if (debug) {
+        const allCoords = [];
+        from.forEach((trigger) => {
+          const fromBounding = trigger.getBoundingClientRect();
+          const [a, b, c] = getTriangle(fromBounding, toBounding);
+          allCoords.push(a, b, c);
+        });
+        coords.value = allCoords;
+      }
     }
   }
   function initialize() {

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.mjs

@@ -11,8 +11,7 @@ export function useMenuDOM() {
     scrollLock.value = false;
   }
   function addScrollLockPadding() {
-    if (typeof window === "undefined")
-      return;
+    if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-menu?/);
     const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
     document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);

package/dist/plugins/MagicMenu/src/composables/private/useMenuItem.mjs

@@ -39,8 +39,7 @@ export function useMenuItem(args) {
     return instance;
   }
   function deleteItem(id) {
-    if (!view?.items)
-      return;
+    if (!view?.items) return;
     view.items = view.items.filter((x) => x.id !== id);
   }
   function getItem(id) {

package/dist/plugins/MagicMenu/src/composables/private/useMenuKeyListener.mjs

@@ -94,8 +94,7 @@ export function useMenuKeyListener(instanceId) {
     }
     const viewId = state.input.view;
     const inputView = getView(viewId);
-    if (!inputView)
-      return;
+    if (!inputView) return;
     const enabledItems = getEnabledItems(inputView);
     const prevIndex = enabledItems.findIndex((item) => item.active) - 1;
     if (prevIndex >= 0) {
@@ -118,8 +117,7 @@ export function useMenuKeyListener(instanceId) {
     }
     const viewId = state.input.view;
     const inputView = getView(viewId);
-    if (!inputView)
-      return;
+    if (!inputView) return;
     const enabledItems = getEnabledItems(inputView);
     const nextIndex = enabledItems.findIndex((item) => item.active) + 1;
     if (nextIndex >= 0) {

package/dist/plugins/MagicMenu/src/composables/private/useMenuTrigger.mjs

@@ -15,7 +15,7 @@ export function useMenuTrigger(args) {
         selectView(viewId);
         state.active = true;
         if (view) {
-          view.click = { x: e.clientX, y: e.clientY };
+          view.state.clicked = { x: e.clientX, y: e.clientY };
         }
         if (!itemId) {
           state.input.view = viewId;
@@ -38,11 +38,17 @@ export function useMenuTrigger(args) {
   }
   function onMouseenter() {
     if (mappedTrigger.value.includes("mouseenter") && !mappedDisabled.value && viewId && view) {
-      if (mappedTrigger.value[0].includes("mouseenter")) {
+      if (mappedTrigger.value[0] === "mouseenter") {
         state.active = true;
       }
+      let delay = 0;
+      switch (state.options.mode) {
+        case "navigation":
+          delay = 200;
+          break;
+      }
       if (state.active) {
-        selectView(viewId);
+        selectView(viewId, delay);
         if (!itemId) {
           state.input.view = viewId;
         }
@@ -51,10 +57,16 @@ export function useMenuTrigger(args) {
   }
   function onClick(e) {
     if (mappedTrigger.value.includes("click") && !mappedDisabled.value && e.button === 0 && viewId) {
+      let delay = 0;
+      switch (state.options.mode) {
+        case "navigation":
+          delay = 200;
+          break;
+      }
       switch (true) {
         case !state.active:
           state.active = true;
-          selectView(viewId);
+          selectView(viewId, delay);
           if (!itemId) {
             state.input.view = viewId;
           }

package/dist/plugins/MagicMenu/src/composables/private/useMenuView.d.ts

@@ -12,8 +12,8 @@ export declare function useMenuView(instanceId: MaybeRef<string>): {
     getTopLevelView: () => MenuView | undefined;
     getNestedView: (itemId: string) => MenuView | undefined;
     getParentView: (id: string) => MenuView | undefined;
-    selectView: (id: string) => void;
-    unselectView: (id: string) => void;
+    selectView: (id: string, delayMs?: number) => Promise<void>;
+    unselectView: (id: string, delayMs?: number) => Promise<void>;
     unselectUnrelatedViews: (id: string) => void;
     unselectDescendingViews: (id: string) => void;
     unselectAllViews: () => void;

package/dist/plugins/MagicMenu/src/composables/private/useMenuView.mjs

@@ -1,8 +1,4 @@
-import {
-  reactive,
-  computed,
-  toValue
-} from "vue";
+import { reactive, computed, toValue } from "vue";
 import { useMenuState } from "./useMenuState.mjs";
 export function useMenuView(instanceId) {
   const { initializeState } = useMenuState(instanceId);
@@ -23,7 +19,11 @@ export function useMenuView(instanceId) {
       active: false,
       items: [],
       channels: [],
-      placement
+      placement,
+      state: {
+        selectAbortController: new AbortController(),
+        unselectAbortController: new AbortController()
+      }
     };
     return reactive(view);
   }
@@ -32,11 +32,19 @@ export function useMenuView(instanceId) {
     state.views = [...state.views, view];
     return view;
   }
+  function delay(ms, signal) {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(resolve, ms);
+      signal.addEventListener("abort", () => {
+        clearTimeout(timer);
+        reject(new DOMException("Aborted", "AbortError"));
+      });
+    });
+  }
   function initializeView(args) {
     const { id } = args;
     let instance = getView(id);
-    if (!instance)
-      instance = addView(args);
+    if (!instance) instance = addView(args);
     return instance;
   }
   function deleteView(id) {
@@ -81,17 +89,49 @@ export function useMenuView(instanceId) {
       (view) => view.id !== id && !argView?.parent.views.includes(view.id)
     );
   }
-  function selectView(id) {
+  async function selectView(id, delayMs = 0) {
     const instance = getView(id);
     if (instance) {
-      instance.active = true;
-      unselectUnrelatedViews(id);
+      if (instance.state.unselectAbortController) {
+        instance.state.unselectAbortController.abort();
+      }
+      const abortController = new AbortController();
+      instance.state.selectAbortController = abortController;
+      try {
+        await delay(delayMs, abortController.signal);
+        instance.active = true;
+        unselectUnrelatedViews(id);
+      } catch (err) {
+        if (err.name === "AbortError") {
+          console.log(
+            `selectView() was interrupted by a call to unselectView()`
+          );
+        } else {
+          throw err;
+        }
+      }
     }
   }
-  function unselectView(id) {
+  async function unselectView(id, delayMs = 0) {
     const instance = getView(id);
     if (instance) {
-      instance.active = false;
+      if (instance.state.selectAbortController) {
+        instance.state.selectAbortController.abort();
+      }
+      const abortController = new AbortController();
+      instance.state.unselectAbortController = abortController;
+      try {
+        await delay(delayMs, abortController.signal);
+        instance.active = false;
+      } catch (err) {
+        if (err.name === "AbortError") {
+          console.log(
+            `unselectView() was interrupted by a call to selectView()`
+          );
+        } else {
+          throw err;
+        }
+      }
     }
   }
   function unselectUnrelatedViews(id) {

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.d.ts

@@ -4,8 +4,8 @@ interface UseMagicMenuArgs {
     viewId: string;
 }
 export declare function useMagicMenu(args: UseMagicMenuArgs): {
-    selectView: (id: string) => void;
-    unselectView: (id: string) => void;
+    selectView: (id: string, delayMs?: number) => Promise<void>;
+    unselectView: (id: string, delayMs?: number) => Promise<void>;
     selectChannel: (id: string) => void;
     unselectChannel: (id: string) => void;
 };

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

@@ -3,10 +3,13 @@ import type { RequireAllNested } from '@maas/vue-equipment/utils';
 type MenuMode = 'dropdown' | 'menubar' | 'context' | 'navigation';
 export interface MagicMenuOptions {
     mode?: MenuMode;
+    debug?: boolean;
     transition?: {
-        initial?: string;
-        final?: string;
-        nested?: string;
+        content?: {
+            default?: string;
+            nested?: string;
+        };
+        channel: string;
     };
 }
 export type Interaction = 'click' | 'mouseenter' | 'right-click';
@@ -33,7 +36,11 @@ export interface MenuView {
         views: string[];
     };
     placement: Placement;
-    click?: Coordinates;
+    state: {
+        selectAbortController: AbortController;
+        unselectAbortController: AbortController;
+        clicked?: Coordinates;
+    };
 }
 export interface MenuState {
     id: string;

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

@@ -1,9 +1,12 @@
 const defaultOptions = {
   mode: "menubar",
+  debug: false,
   transition: {
-    initial: "magic-menu-content--initial",
-    final: "magic-menu-content--final",
-    nested: "magic-menu-content--nested"
+    content: {
+      default: "",
+      nested: "magic-menu-content--fade"
+    },
+    channel: "magic-menu-channel"
   }
 };
 export { defaultOptions };

package/dist/plugins/MagicMenu/src/utils/modeTransitions.d.ts

@@ -0,0 +1,6 @@
+export declare enum ModeTransitions {
+    menubar = "magic-menu-content--default",
+    dropdown = "magic-menu-content--default",
+    context = "magic-menu-content--default",
+    navigation = "magic-menu-content--fade"
+}

package/dist/plugins/MagicMenu/src/utils/modeTransitions.mjs

@@ -0,0 +1,7 @@
+export var ModeTransitions = /* @__PURE__ */ ((ModeTransitions2) => {
+  ModeTransitions2["menubar"] = "magic-menu-content--default";
+  ModeTransitions2["dropdown"] = "magic-menu-content--default";
+  ModeTransitions2["context"] = "magic-menu-content--default";
+  ModeTransitions2["navigation"] = "magic-menu-content--fade";
+  return ModeTransitions2;
+})(ModeTransitions || {});

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

@@ -8,16 +8,18 @@ interface MagicModalProps {
     props?: Record<string, unknown>;
     options?: MagicModalOptions;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicModalProps>, {
+declare function __VLS_template(): {
+    backdrop?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicModalProps>, {
     options: () => MagicModalOptions;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicModalProps>, {
     options: () => MagicModalOptions;
 }>>>, {
     options: MagicModalOptions;
-}, {}>, {
-    backdrop?(_: {}): any;
-    default?(_: {}): any;
-}>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.mjs

@@ -34,8 +34,7 @@ export function useModalDOM(args) {
     }
   }
   function addScrollLockPadding() {
-    if (typeof window === "undefined")
-      return;
+    if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-modal(__backdrop)?/);
     const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
     document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.mjs

@@ -75,8 +75,7 @@ export function useNoiseApi({
   function calculate() {
     const offCanvasHeight = offCanvasRef.value?.height;
     const offCanvasWidth = offCanvasRef.value?.width;
-    if (!offCanvasHeight || !offCanvasWidth)
-      return;
+    if (!offCanvasHeight || !offCanvasWidth) return;
     pixels.value = calculatePixels({
       width: offCanvasWidth,
       height: offCanvasHeight,
@@ -94,8 +93,7 @@ export function useNoiseApi({
   }
   function initialize() {
     resetContexts();
-    if (!canvasRef.value || !offCanvasRef.value)
-      return;
+    if (!canvasRef.value || !offCanvasRef.value) return;
     const maxCanvasDim = Math.max(width.value, height.value) * pixelRatio.value;
     const maxOffCanvasDim = maxCanvasDim / Math.sqrt(mappedOptions.tiles);
     const adjustedOffCanvasDim = findBiggerNumber(
@@ -142,8 +140,7 @@ export function useNoiseApi({
     transferControls.value = useRafFn(throttled);
   }
   function draw() {
-    if (!offContext.value || !offCanvasRef.value)
-      return;
+    if (!offContext.value || !offCanvasRef.value) return;
     offContext.value.clearRect(
       0,
       0,

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

@@ -3,7 +3,10 @@ interface MagicAudioPlayerProps {
     src: string;
     loop?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAudioPlayerProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAudioPlayerProps>, {
     src: string;
     loop: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAudioPlayerProps>, {
@@ -12,9 +15,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     src: string;
     loop: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -1,10 +1,12 @@
 interface MagicAudioPlayerControlsProps {
     id: string;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -7,7 +7,10 @@ interface MagicPlayerProps {
     preload?: 'auto' | 'metadata' | 'none';
     loop?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerProps>, {
     srcType: string;
     src: string;
     autoplay: boolean;
@@ -24,10 +27,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loop: boolean;
     srcType: MagicPlayerSourceType;
     autoplay: boolean;
-    preload: "metadata" | "none" | "auto";
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    preload: "auto" | "metadata" | "none";
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -5,13 +5,7 @@ interface MagicPlayerControlsProps {
     standalone?: boolean;
     transition?: string;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerControlsProps>, {
-    transition: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerControlsProps>, {
-    transition: string;
-}>>>, {
-    transition: string;
-}, {}>, {
+declare function __VLS_template(): {
     seekPopover?(_: {}): any;
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;
@@ -19,7 +13,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     volumeOnIcon?(_: {}): any;
     fullscreenExitIcon?(_: {}): any;
     fullscreenEnterIcon?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerControlsProps>, {
+    transition: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerControlsProps>, {
+    transition: string;
+}>>>, {
+    transition: string;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerDisplayTimeProps>, {
     type: string;
 }>>>, {
-    type: "current" | "duration" | "remaining";
+    type: "current" | "remaining" | "duration";
 }, {}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

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

@@ -1,12 +1,14 @@
 interface MagicPlayerOverlayProps {
     id: string;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicPlayerOverlayProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerOverlayProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {}): any;
     waitingIcon?(_: {}): any;
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicPlayerOverlayProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerOverlayProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -1,9 +1,11 @@
 export type MagicPlayerPosterProps = {
     id: string;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicPlayerPosterProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerPosterProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicPlayerPosterProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerPosterProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -38,8 +38,7 @@ export function usePlayerAudioApi(args) {
   });
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id))
-      return;
+    if (payload.id !== toValue(args.id)) return;
     if (payload.api === "player") {
       switch (payload.key) {
         case "mouseEntered":