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

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 = {
+  ref: "parent",
+  class: "magic-marquee"
+};
+const _hoisted_2 = { class: "magic-marquee__track" };
+const _hoisted_3 = {
+  ref: "child",
+  class: "magic-marquee__content"
+};
+import { useTemplateRef, 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 = useTemplateRef("parent");
+    const childRef = useTemplateRef("child");
+    const { duplicates, initialize } = useMarqueeApi({
+      child: childRef,
+      parent: parentRef,
+      instanceId: __props.id
+    });
+    onMounted(() => {
+      initialize();
+    });
+    onBeforeUnmount(() => {
+      deleteState();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(
+        "div",
+        _hoisted_1,
+        [
+          _createElementVNode("div", _hoisted_2, [
+            _createElementVNode(
+              "div",
+              _hoisted_3,
+              [
+                _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>

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

@@ -1,31 +1,24 @@
+import { type MaybeRef } from 'vue';
+import type { MagicMarqueeOptions } from '../types/index.js';
 interface MagicMarqueeProps {
-    direction?: 'reverse' | 'normal';
-    speed?: number;
+    id: MaybeRef<string>;
+    options?: MagicMarqueeOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        parentRef: HTMLDivElement;
-        childRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMarqueeProps, {
-    playing: import("vue").Ref<boolean, boolean>;
-    play: () => void;
-    pause: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMarqueeProps> & Readonly<{}>, {
-    direction: "reverse" | "normal";
-    speed: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const duplicates: import("vue").ShallowRef<number, number>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicMarqueeProps, {
+    duplicates: typeof duplicates;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMarqueeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMarqueeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };