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

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

@@ -1,10 +1,11 @@
-import { type Options } from 'focus-trap';
-export type DrawerSnapPoint = number | `${string}px`;
+import { type Options as FocusTrapOptions } from 'focus-trap';
+import type { RequireAll } from '@maas/vue-equipment/utils';
+export type DrawerSnapPoint = number | `${number}px`;
 export interface MagicDrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
     backdrop?: boolean;
     tag?: 'dialog' | 'div';
-    focusTrap?: boolean | Options;
+    focusTrap?: boolean | FocusTrapOptions;
     scrollLock?: boolean | {
         padding: boolean;
     };
@@ -41,6 +42,12 @@ export interface MagicDrawerOptions {
     preventDragClose?: boolean;
     disabled?: boolean;
 }
+export type DrawerDefaultOptions = RequireAll<MagicDrawerOptions> & {
+    scrollLock: RequireAll<MagicDrawerOptions['scrollLock']>;
+    threshold: RequireAll<MagicDrawerOptions['threshold']>;
+    animation: RequireAll<MagicDrawerOptions['animation']>;
+    keyListener: RequireAll<MagicDrawerOptions['keyListener']>;
+};
 export interface DrawerState {
     id: string;
     active: boolean;

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.d.ts

@@ -1,11 +1,3 @@
-import type { MagicDrawerOptions } from '../types/index.js';
-import type { RequireAll } from '@maas/vue-equipment/utils';
-type DefaultOptions = RequireAll<MagicDrawerOptions> & {
-    scrollLock: RequireAll<MagicDrawerOptions['scrollLock']>;
-    threshold: RequireAll<MagicDrawerOptions['threshold']>;
-    animation: RequireAll<MagicDrawerOptions['animation']>;
-    initial: RequireAll<MagicDrawerOptions['initial']>;
-    keyListener: RequireAll<MagicDrawerOptions['keyListener']>;
-};
-declare const defaultOptions: DefaultOptions;
-export { defaultOptions, type DefaultOptions };
+import type { DrawerDefaultOptions } from '../types/index.js';
+declare const defaultOptions: DrawerDefaultOptions;
+export { defaultOptions };

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

@@ -28,9 +28,7 @@ const defaultOptions = {
     }
   },
   initial: {
-    open: false,
-    transition: false,
-    snapPoint: 1
+    open: false
   },
   keyListener: {
     close: ["Escape"]

package/dist/plugins/MagicEmitter/src/composables/useMagicEmitter.d.ts

@@ -1,6 +1,6 @@
 export declare function useMagicEmitter(): {
     on: {
-        <Key extends "progress" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents | keyof import("../../../MagicAccordion/src/types").AccordionEvents>(type: Key, handler: import("mitt").Handler<({
+        <Key extends "progress" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types").AccordionEvents>(type: Key, handler: import("mitt").Handler<({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -44,9 +44,33 @@ export declare function useMagicEmitter(): {
                 viewId: string;
             };
         } & Omit<{
-            accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
+            beforeEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            enter: string | {
+                id: string;
+                viewId: string;
+            };
+            afterEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            beforeLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            leave: string | {
+                id: string;
+                viewId: string;
+            };
+            afterLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            acceptAll: import("../../../MagicCookie/src/types").CookieConsent;
+            rejectAll: import("../../../MagicCookie/src/types").CookieConsent;
+            acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
         } & Omit<{
             beforeSnap: {
                 id: string;
@@ -213,10 +237,10 @@ export declare function useMagicEmitter(): {
             };
         } & Omit<{
             collision: {
+                id: string;
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
-                position: import("../../../MagicScroll/src/types").Position;
-                element: HTMLElement;
-                data?: Record<string, unknown>;
+                childEdge: import("../../../MagicScroll/src/types").CollisionEdge;
+                parentEdge: import("../../../MagicScroll/src/types").CollisionEdge;
             };
         } & Omit<{
             beforeEnter: string;
@@ -225,7 +249,7 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>)[Key]>): void;
+        } & Omit<object, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>)[Key]>): void;
         (type: "*", handler: import("mitt").WildcardHandler<{
             beforeEnter: string | {
                 id: string;
@@ -270,9 +294,33 @@ export declare function useMagicEmitter(): {
                 viewId: string;
             };
         } & Omit<{
-            accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
+            beforeEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            enter: string | {
+                id: string;
+                viewId: string;
+            };
+            afterEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            beforeLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            leave: string | {
+                id: string;
+                viewId: string;
+            };
+            afterLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            acceptAll: import("../../../MagicCookie/src/types").CookieConsent;
+            rejectAll: import("../../../MagicCookie/src/types").CookieConsent;
+            acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
         } & Omit<{
             beforeSnap: {
                 id: string;
@@ -439,10 +487,10 @@ export declare function useMagicEmitter(): {
             };
         } & Omit<{
             collision: {
+                id: string;
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
-                position: import("../../../MagicScroll/src/types").Position;
-                element: HTMLElement;
-                data?: Record<string, unknown>;
+                childEdge: import("../../../MagicScroll/src/types").CollisionEdge;
+                parentEdge: import("../../../MagicScroll/src/types").CollisionEdge;
             };
         } & Omit<{
             beforeEnter: string;
@@ -451,10 +499,10 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>>): void;
+        } & Omit<object, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>>): void;
     };
     off: {
-        <Key extends "progress" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents | keyof import("../../../MagicAccordion/src/types").AccordionEvents>(type: Key, handler?: import("mitt").Handler<({
+        <Key extends "progress" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types").AccordionEvents>(type: Key, handler?: import("mitt").Handler<({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -498,9 +546,33 @@ export declare function useMagicEmitter(): {
                 viewId: string;
             };
         } & Omit<{
-            accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
+            beforeEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            enter: string | {
+                id: string;
+                viewId: string;
+            };
+            afterEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            beforeLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            leave: string | {
+                id: string;
+                viewId: string;
+            };
+            afterLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            acceptAll: import("../../../MagicCookie/src/types").CookieConsent;
+            rejectAll: import("../../../MagicCookie/src/types").CookieConsent;
+            acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
         } & Omit<{
             beforeSnap: {
                 id: string;
@@ -667,10 +739,10 @@ export declare function useMagicEmitter(): {
             };
         } & Omit<{
             collision: {
+                id: string;
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
-                position: import("../../../MagicScroll/src/types").Position;
-                element: HTMLElement;
-                data?: Record<string, unknown>;
+                childEdge: import("../../../MagicScroll/src/types").CollisionEdge;
+                parentEdge: import("../../../MagicScroll/src/types").CollisionEdge;
             };
         } & Omit<{
             beforeEnter: string;
@@ -679,7 +751,7 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>)[Key]> | undefined): void;
+        } & Omit<object, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>)[Key]> | undefined): void;
         (type: "*", handler: import("mitt").WildcardHandler<{
             beforeEnter: string | {
                 id: string;
@@ -724,9 +796,33 @@ export declare function useMagicEmitter(): {
                 viewId: string;
             };
         } & Omit<{
-            accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
+            beforeEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            enter: string | {
+                id: string;
+                viewId: string;
+            };
+            afterEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            beforeLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            leave: string | {
+                id: string;
+                viewId: string;
+            };
+            afterLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            acceptAll: import("../../../MagicCookie/src/types").CookieConsent;
+            rejectAll: import("../../../MagicCookie/src/types").CookieConsent;
+            acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
         } & Omit<{
             beforeSnap: {
                 id: string;
@@ -893,10 +989,10 @@ export declare function useMagicEmitter(): {
             };
         } & Omit<{
             collision: {
+                id: string;
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
-                position: import("../../../MagicScroll/src/types").Position;
-                element: HTMLElement;
-                data?: Record<string, unknown>;
+                childEdge: import("../../../MagicScroll/src/types").CollisionEdge;
+                parentEdge: import("../../../MagicScroll/src/types").CollisionEdge;
             };
         } & Omit<{
             beforeEnter: string;
@@ -905,10 +1001,10 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>>): void;
+        } & Omit<object, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>>): void;
     };
     emit: {
-        <Key extends "progress" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents | keyof import("../../../MagicAccordion/src/types").AccordionEvents>(type: Key, event: ({
+        <Key extends "progress" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types").AccordionEvents>(type: Key, event: ({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -952,9 +1048,33 @@ export declare function useMagicEmitter(): {
                 viewId: string;
             };
         } & Omit<{
-            accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
+            beforeEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            enter: string | {
+                id: string;
+                viewId: string;
+            };
+            afterEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            beforeLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            leave: string | {
+                id: string;
+                viewId: string;
+            };
+            afterLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            acceptAll: import("../../../MagicCookie/src/types").CookieConsent;
+            rejectAll: import("../../../MagicCookie/src/types").CookieConsent;
+            acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
         } & Omit<{
             beforeSnap: {
                 id: string;
@@ -1121,10 +1241,10 @@ export declare function useMagicEmitter(): {
             };
         } & Omit<{
             collision: {
+                id: string;
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
-                position: import("../../../MagicScroll/src/types").Position;
-                element: HTMLElement;
-                data?: Record<string, unknown>;
+                childEdge: import("../../../MagicScroll/src/types").CollisionEdge;
+                parentEdge: import("../../../MagicScroll/src/types").CollisionEdge;
             };
         } & Omit<{
             beforeEnter: string;
@@ -1133,8 +1253,8 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>)[Key]): void;
-        <Key extends "progress" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | keyof import("../../../MagicCookie/src/types").CookieEvents | keyof import("../../../MagicAccordion/src/types").AccordionEvents>(type: undefined extends ({
+        } & Omit<object, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>)[Key]): void;
+        <Key extends "progress" | "collision" | keyof import("../../../MagicDraggable/src/types").DraggableEvents | "acceptAll" | "rejectAll" | "acceptSelected" | keyof import("../../../MagicAccordion/src/types").AccordionEvents>(type: undefined extends ({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -1178,9 +1298,33 @@ export declare function useMagicEmitter(): {
                 viewId: string;
             };
         } & Omit<{
-            accept: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            reject: import("../../../MagicCookie/src/types").MagicCookieConsent;
-            acceptSelected: import("../../../MagicCookie/src/types").MagicCookieConsent;
+            beforeEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            enter: string | {
+                id: string;
+                viewId: string;
+            };
+            afterEnter: string | {
+                id: string;
+                viewId: string;
+            };
+            beforeLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            leave: string | {
+                id: string;
+                viewId: string;
+            };
+            afterLeave: string | {
+                id: string;
+                viewId: string;
+            };
+            acceptAll: import("../../../MagicCookie/src/types").CookieConsent;
+            rejectAll: import("../../../MagicCookie/src/types").CookieConsent;
+            acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
         } & Omit<{
             beforeSnap: {
                 id: string;
@@ -1347,10 +1491,10 @@ export declare function useMagicEmitter(): {
             };
         } & Omit<{
             collision: {
+                id: string;
                 direction: import("../../../MagicScroll/src/types").ScrollDirection;
-                position: import("../../../MagicScroll/src/types").Position;
-                element: HTMLElement;
-                data?: Record<string, unknown>;
+                childEdge: import("../../../MagicScroll/src/types").CollisionEdge;
+                parentEdge: import("../../../MagicScroll/src/types").CollisionEdge;
             };
         } & Omit<{
             beforeEnter: string;
@@ -1359,6 +1503,6 @@ export declare function useMagicEmitter(): {
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & Omit<{}, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>)[Key] ? Key : never): void;
+        } & Omit<object, keyof import("../../../MagicToast/src/types").ToastEvents>, "collision">, keyof import("../../../MagicMenu/src/types").MenuEvents>, keyof import("../../../MagicModal/src/types").ModalEvents>, keyof import("../../../MagicDrawer/src/types").DrawerEvents>, keyof import("../../../MagicDraggable/src/types").DraggableEvents>, keyof import("../../../MagicCookie/src/types").CookieEvents>, keyof import("../../../MagicAccordion/src/types").AccordionEvents>)[Key] ? Key : never): void;
     };
 };

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

@@ -9,7 +9,7 @@ import type { ToastEvents } from '../../../MagicToast/src/types/index.js';
 type MergeTypes<T, U> = {
     [K in keyof T]: K extends keyof U ? T[K] | U[K] : T[K];
 } & Omit<U, keyof T>;
-type Merge<T extends unknown[]> = T extends [infer First, ...infer Rest] ? MergeTypes<First, Merge<Rest>> : {};
+type Merge<T extends unknown[]> = T extends [infer First, ...infer Rest] ? MergeTypes<First, Merge<Rest>> : object;
 export type MagicEmitterEvents = Merge<[
     AccordionEvents,
     CookieEvents,

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

@@ -1,4 +1,6 @@
 import type { Plugin } from 'vue';
-import MagicMarquee from './src/components/MagicMarquee.vue.js';
+import { useMagicMarquee } from './src/composables/useMagicMarquee.js';
+import type { MagicMarqueeOptions } from './src/types/index.js';
 declare const MagicMarqueePlugin: Plugin;
-export { MagicMarqueePlugin, MagicMarquee };
+export { MagicMarqueePlugin, useMagicMarquee };
+export type { MagicMarqueeOptions };

package/dist/plugins/MagicMarquee/index.mjs

@@ -1,7 +1,8 @@
 import MagicMarquee from "./src/components/MagicMarquee.vue";
+import { useMagicMarquee } from "./src/composables/useMagicMarquee.mjs";
 const MagicMarqueePlugin = {
   install: (app) => {
     app.component("MagicMarquee", MagicMarquee);
   }
 };
-export { MagicMarqueePlugin, MagicMarquee };
+export { MagicMarqueePlugin, useMagicMarquee };

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

@@ -1,57 +1,128 @@
-<template>
-  <div class="magic-marquee" ref="parentRef">
-    <div class="magic-marquee__track">
-      <div class="magic-marquee__content" ref="childRef">
-        <slot />
-      </div>
-      <div
-        v-for="_duplicate in duplicates"
-        class="magic-marquee__content"
-        :aria-hidden="true"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { useMarqueeApi } from '../composables/private/useMarqueeApi'
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "magic-marquee__track" };
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useMarqueeApi } from "../composables/private/useMarqueeApi";
+import { useMarqueeState } from "../composables/private/useMarqueeState";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicMarquee",
+  props: {
+    id: { type: null, required: true },
+    options: { type: Object, required: false }
+  },
+  setup(__props) {
+    const { deleteState, initializeState } = useMarqueeState(__props.id);
+    initializeState(__props.options);
+    const parentRef = ref(void 0);
+    const childRef = ref(void 0);
+    const { duplicates, initialize } = useMarqueeApi({
+      child: childRef,
+      parent: parentRef,
+      instanceId: __props.id
+    });
+    onMounted(() => {
+      initialize();
+    });
+    onBeforeUnmount(() => {
+      deleteState();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(
+        "div",
+        {
+          ref_key: "parentRef",
+          ref: parentRef,
+          class: "magic-marquee"
+        },
+        [
+          _createElementVNode("div", _hoisted_1, [
+            _createElementVNode(
+              "div",
+              {
+                ref_key: "childRef",
+                ref: childRef,
+                class: "magic-marquee__content"
+              },
+              [
+                _renderSlot(_ctx.$slots, "default")
+              ],
+              512
+              /* NEED_PATCH */
+            ),
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_unref(duplicates), (duplicate) => {
+                return _openBlock(), _createElementBlock("div", {
+                  key: duplicate,
+                  class: "magic-marquee__content",
+                  "aria-hidden": true
+                }, [
+                  _renderSlot(_ctx.$slots, "default")
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+</script>
 
-interface MagicMarqueeProps {
-  direction?: 'reverse' | 'normal'
-  speed?: number
+<style>
+@keyframes mm-scroll-x {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
 }
 
-const props = withDefaults(defineProps<MagicMarqueeProps>(), {
-  direction: 'normal',
-  speed: 1,
-})
-
-const parentRef = ref<HTMLElement | undefined>(undefined)
-const childRef = ref<HTMLElement | undefined>(undefined)
-
-const { duplicates, playing, play, pause, initialize } = useMarqueeApi({
-  child: childRef,
-  parent: parentRef,
-  options: {
-    speed: computed(() => props.speed),
-    direction: computed(() => props.direction),
-  },
-})
+@keyframes mm-scroll-y {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, -100%, 0);
+  }
+}
 
-onMounted(() => {
-  initialize()
-})
+.magic-marquee {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
+}
 
-defineExpose({
-  playing,
-  play,
-  pause,
-})
-</script>
+.magic-marquee__track {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: var(--magic-marquee-justify-content, flex-start);
+  align-items: var(--magic-marquee-align-items, baseline);
+}
 
-<style>
-@keyframes magicMarqueeScrollX{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes magicMarqueeScrollY{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}.magic-marquee{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.magic-marquee__track{align-items:var(--magic-marquee-align-items,baseline);display:flex;justify-content:var(--magic-marquee-jusrify-content,flex-start);position:relative;width:100%}.magic-marquee__content{animation-direction:var(--magic-marquee-animation-direction,normal);animation-duration:var(--magic-marquee-animation-duration);animation-iteration-count:infinite;animation-name:var(--magic-marquee-animation-name);animation-play-state:var(--magic-marquee-animation-play-state,running);animation-timing-function:linear;backface-visibility:hidden;display:flex;flex-grow:0;flex-shrink:0;gap:var(--magic-marquee-gap,1rem);padding-right:var(--magic-marquee-gap,1rem);white-space:nowrap;width:var(--magic-marquee-content-width,unset)}
+.magic-marquee__content {
+  white-space: nowrap;
+  backface-visibility: hidden;
+  padding-right: var(--magic-marquee-gap, 1rem);
+  width: var(--magic-marquee-content-width, unset);
+  animation-name: var(--mm-animation-name, 'mm-scroll-x');
+  animation-duration: var(--mm-animation-duration);
+  animation-play-state: var(--mm-animation-play-state, running);
+  animation-direction: var(--mm-animation-direction, normal);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  display: flex;
+  gap: var(--magic-marquee-gap, 1rem);
+  flex-shrink: 0;
+  flex-grow: 0;
+}
 </style>