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

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

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import { toValue, type MaybeRef } from 'vue';
 import type { MagicDrawerOptions } from '../types/index.js';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
@@ -14,33 +14,174 @@ interface MagicDrawerProps {
     id: MaybeRef<string>;
     options?: MagicDrawerOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        backdrop?(_: {}): any;
-        default?(_: {}): any;
+declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions> & Omit<import("../types/index").DrawerDefaultOptions, keyof MagicDrawerOptions> & {
+    threshold: ({
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    } & import("../../../../utils").RequireAll<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    }>) | (Omit<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    }, "lock" | "distance" | "momentum"> & Omit<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    } & import("../../../../utils").RequireAll<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+    }>, "lock" | "distance" | "momentum"> & {
+        lock: number;
+        distance: number;
+        momentum: number;
+    });
+    transition: {
+        content?: string;
+        backdrop?: string;
     };
-    refs: {
-        drawerRef: HTMLDivElement;
-        wrapperRef: HTMLDivElement;
-        elRef: unknown;
+    disabled: boolean;
+    animation: ({
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    } & import("../../../../utils").RequireAll<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }>) | (Omit<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }, "snap"> & Omit<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    } & import("../../../../utils").RequireAll<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }>, "snap"> & {
+        snap: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    });
+    backdrop: boolean;
+    tag: "div" | "dialog";
+    focusTrap: boolean | import("focus-trap").Options;
+    scrollLock: {
+        padding: boolean;
+    } | ((boolean | {
+        padding: boolean;
+    }) & import("../../../../utils").RequireAll<boolean | {
+        padding: boolean;
+    } | undefined>) | (Omit<{
+        padding: boolean;
+    }, "padding"> & Omit<false & import("../../../../utils").RequireAll<{
+        padding: boolean;
+    }>, "padding"> & {
+        padding: boolean;
+    }) | (Omit<{
+        padding: boolean;
+    }, "padding"> & Omit<true & import("../../../../utils").RequireAll<{
+        padding: boolean;
+    }>, "padding"> & {
+        padding: boolean;
+    }) | (Omit<{
+        padding: boolean;
+    }, "padding"> & Omit<{
+        padding: boolean;
+    } & false, "padding"> & {
+        padding: boolean;
+    }) | (Omit<{
+        padding: boolean;
+    }, "padding"> & Omit<{
+        padding: boolean;
+    } & true, "padding"> & {
+        padding: boolean;
+    });
+    teleport: {
+        target?: string;
+        disabled?: boolean;
     };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicDrawerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicDrawerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
+    keyListener: ({
+        close?: string[] | false;
+    } & import("../../../../utils").RequireAll<{
+        close?: string[] | false;
+    }>) | (Omit<{
+        close?: string[] | false;
+    }, "close"> & Omit<{
+        close?: string[] | false;
+    } & import("../../../../utils").RequireAll<{
+        close?: string[] | false;
+    }>, "close"> & {
+        close: (false | string[] | undefined) & (false | string[]);
+    });
+    position: "right" | "left" | "top" | "bottom";
+    snapPoints: import("../types/index").DrawerSnapPoint[];
+    initial: {
+        open?: boolean;
+        transition?: boolean;
+        snapPoint?: import("../types/index").DrawerSnapPoint;
     };
+    enableMousewheel: boolean;
+    preventZoom: boolean;
+    preventDragClose: boolean;
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+declare const disabled: import("vue").ComputedRef<boolean>;
+declare const style: import("vue").ComputedRef<string>, hasDragged: import("vue").ComputedRef<boolean>;
+declare const dragging: import("vue").Ref<boolean, boolean>, wheeling: import("vue").Ref<boolean, boolean>;
+declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
+declare const wrapperActive: import("vue").ShallowRef<boolean, boolean>;
+declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
+declare const backdropTransition: import("vue").ComputedRef<string | undefined>;
+declare const contentTransition: import("vue").ComputedRef<string | undefined>;
+declare function guardedPointerdown(event: PointerEvent): void;
+declare function guardedClick(event: PointerEvent): void;
+declare function guardedClose(): void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {}, __VLS_35: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    backdrop?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_35) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicDrawerProps, {
+    toValue: typeof toValue;
+    mappedOptions: typeof mappedOptions;
+    disabled: typeof disabled;
+    style: typeof style;
+    hasDragged: typeof hasDragged;
+    dragging: typeof dragging;
+    wheeling: typeof wheeling;
+    innerActive: typeof innerActive;
+    wrapperActive: typeof wrapperActive;
+    onBeforeEnter: typeof onBeforeEnter;
+    onEnter: typeof onEnter;
+    onAfterEnter: typeof onAfterEnter;
+    onBeforeLeave: typeof onBeforeLeave;
+    onLeave: typeof onLeave;
+    onAfterLeave: typeof onAfterLeave;
+    backdropTransition: typeof backdropTransition;
+    contentTransition: typeof contentTransition;
+    guardedPointerdown: typeof guardedPointerdown;
+    guardedClick: typeof guardedClick;
+    guardedClose: typeof guardedClose;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDOM.mjs

@@ -1,14 +1,18 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
   scrollLock: true
 };
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useDrawerDOM(args) {
   const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
@@ -36,24 +40,40 @@ export function useDrawerDOM(args) {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-drawer(__backdrop)?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     trapFocus,

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.d.ts

@@ -2,8 +2,8 @@ import { type Ref, type MaybeRef } from 'vue';
 import type { DrawerDefaultOptions } from '../../types/index.js';
 type UseDrawerDragArgs = {
     id: MaybeRef<string>;
-    elRef: Ref<HTMLElement | undefined>;
-    wrapperRef: Ref<HTMLDivElement | undefined>;
+    elRef: Ref<HTMLElement | null>;
+    wrapperRef: Ref<HTMLDivElement | null>;
     position: MaybeRef<DrawerDefaultOptions['position']>;
     snapPoints: MaybeRef<DrawerDefaultOptions['snapPoints']>;
     threshold: MaybeRef<DrawerDefaultOptions['threshold']>;

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs

@@ -383,9 +383,9 @@ export function useDrawerDrag(args) {
     shouldClose.value = false;
     checkDirection({ x: e.screenX, y: e.screenY });
     if (!scrollLock) {
-      const target = lockScroll(e.target);
-      if (target) {
-        scrollLock = useScrollLock(target);
+      const scrollLockTarget = lockScroll(e.target);
+      if (scrollLockTarget) {
+        scrollLock = useScrollLock(scrollLockTarget);
         scrollLock.value = true;
       }
     }

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerGuards.d.ts

@@ -1,7 +1,7 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { DrawerSnapPoint, DrawerDefaultOptions } from '../../types/index.js';
 interface UseDrawerGuardsArgs {
-    elRef: Ref<HTMLElement | undefined>;
+    elRef: Ref<HTMLElement | null>;
     absDirectionX: MaybeRef<'with' | 'against' | undefined>;
     absDirectionY: MaybeRef<'with' | 'against' | undefined>;
     position: MaybeRef<DrawerDefaultOptions['position']>;

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerGuards.mjs

@@ -8,6 +8,20 @@ export function useDrawerGuards(args) {
   const canSnap = computed(() => {
     return toValue(activeSnapPoint) !== 1 && !!toValue(activeSnapPoint);
   });
+  function canScrollY(element) {
+    const style = window.getComputedStyle(element);
+    const overflowY = style.overflowY;
+    const canScroll = ["auto", "scroll"].includes(overflowY);
+    const hasOverflow = Math.round(element.scrollHeight) > Math.round(element.clientHeight);
+    return canScroll && hasOverflow;
+  }
+  function canScrollX(element) {
+    const style = window.getComputedStyle(element);
+    const overflowX = style.overflowX;
+    const canScroll = ["auto", "scroll"].includes(overflowX);
+    const hasOverflow = Math.round(element.scrollWidth) > Math.round(element.clientWidth);
+    return canScroll && hasOverflow;
+  }
   function canDrag(el) {
     let element = el;
     if (hasCursor.value) {
@@ -22,7 +36,7 @@ export function useDrawerGuards(args) {
       }
       switch (position) {
         case "bottom":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             if (element.scrollTop > 0) {
               return false;
             }
@@ -35,7 +49,7 @@ export function useDrawerGuards(args) {
           }
           break;
         case "top":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             const maxScroll = element.scrollHeight - element.clientHeight;
             if (element.scrollTop < maxScroll) {
               return false;
@@ -49,7 +63,7 @@ export function useDrawerGuards(args) {
           }
           break;
         case "right":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             if (element.scrollLeft > 0) {
               return false;
             }
@@ -62,7 +76,7 @@ export function useDrawerGuards(args) {
           }
           break;
         case "left":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             const maxScroll = element.scrollWidth - element.clientWidth;
             if (element.scrollLeft < maxScroll) {
               return false;
@@ -89,13 +103,13 @@ export function useDrawerGuards(args) {
       switch (position) {
         case "bottom":
         case "top":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             return false;
           }
           break;
         case "left":
         case "right":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             return false;
           }
           break;
@@ -117,41 +131,45 @@ export function useDrawerGuards(args) {
       }
       switch (position) {
         case "bottom":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             if (element.scrollTop === 0 || canSnap.value) {
               if (toValue(absDirectionY) === "against") {
                 return element;
               }
             }
+            return void 0;
           }
           break;
         case "top":
-          if (element.scrollHeight > element.clientHeight) {
+          if (canScrollY(element)) {
             const maxScroll = element.scrollHeight - element.clientHeight;
             if (element.scrollTop === maxScroll || canSnap.value) {
               if (toValue(absDirectionY) === "against") {
                 return element;
               }
             }
+            return void 0;
           }
           break;
         case "right":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             if (element.scrollLeft === 0 || canSnap.value) {
               if (toValue(absDirectionX) === "against") {
                 return element;
               }
             }
+            return void 0;
           }
           break;
         case "left":
-          if (element.scrollWidth > element.clientWidth) {
+          if (canScrollX(element)) {
             const maxScroll = element.scrollWidth - element.clientWidth;
             if (element.scrollLeft === maxScroll || canSnap.value) {
               if (toValue(absDirectionX) === "against") {
                 return element;
               }
             }
+            return void 0;
           }
           break;
       }

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerProgress.d.ts

@@ -2,8 +2,8 @@ import { type Ref, type MaybeRef } from 'vue';
 import type { DrawerDefaultOptions } from '../../types/index.js';
 interface UseDrawerProgressArgs {
     id: MaybeRef<string>;
-    elRef: Ref<HTMLElement | undefined>;
-    drawerRef: Ref<HTMLDivElement | undefined>;
+    elRef: Ref<HTMLElement | null>;
+    drawerRef: Ref<HTMLDivElement | null>;
     position: MaybeRef<DrawerDefaultOptions['position']>;
     overshoot: MaybeRef<number>;
 }

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerSnap.d.ts

@@ -27,9 +27,9 @@ type InterpolateDraggedArgs = {
     easing?: (t: number) => number;
 };
 export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
-    snappedY: Ref<number, number>;
-    snappedX: Ref<number, number>;
-    activeSnapPoint: Ref<DrawerSnapPoint | undefined, DrawerSnapPoint | undefined>;
+    snappedY: import("vue").ShallowRef<number, number>;
+    snappedX: import("vue").ShallowRef<number, number>;
+    activeSnapPoint: import("vue").ShallowRef<DrawerSnapPoint | undefined, DrawerSnapPoint | undefined>;
     snapTo: (args: SnapToArgs) => Promise<void>;
     findClosestSnapPoint: (args: FindClosestSnapPointArgs) => number | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerSnap.mjs

@@ -1,4 +1,9 @@
-import { ref, computed, toValue, nextTick } from "vue";
+import {
+  shallowRef,
+  computed,
+  toValue,
+  nextTick
+} from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { mapValue, interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
@@ -31,22 +36,19 @@ export function useDrawerSnap(args) {
     () => toValue(snapPoints),
     () => {
       const extended = toValue(preventDragClose) ? toValue(snapPoints) : [...toValue(snapPoints), 0];
-      const mapped = extended.reduce(
-        (acc, current) => {
-          const key = mapSnapPoint(current);
-          if (key || key === 0) {
-            acc[key] = current;
-          }
-          return acc;
-        },
-        {}
-      );
+      const mapped = extended.reduce((acc, current) => {
+        const key = mapSnapPoint(current);
+        if (key || key === 0) {
+          acc[key] = current;
+        }
+        return acc;
+      }, {});
       return mapped;
     }
   );
-  const snappedY = ref(0);
-  const snappedX = ref(0);
-  const activeSnapPoint = ref(void 0);
+  const snappedY = shallowRef(0);
+  const snappedX = shallowRef(0);
+  const activeSnapPoint = shallowRef(void 0);
   const drawerHeight = computed(() => {
     const rect = toValue(wrapperRect);
     if (rect === void 0) {

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerWheel.d.ts

@@ -2,7 +2,7 @@ import { type Ref, type MaybeRef, type ComputedRef } from 'vue';
 import type { DrawerDefaultOptions } from '../../types/index.js';
 type UseDrawerWheelArgs = {
     id: MaybeRef<string>;
-    elRef: Ref<HTMLElement | undefined>;
+    elRef: Ref<HTMLElement | null>;
     position: MaybeRef<DrawerDefaultOptions['position']>;
     disabled: ComputedRef<boolean>;
 };

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

@@ -1,8 +1,16 @@
 <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";
+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({
@@ -14,8 +22,8 @@ export default /* @__PURE__ */ _defineComponent({
   setup(__props) {
     const { deleteState, initializeState } = useMarqueeState(__props.id);
     initializeState(__props.options);
-    const parentRef = ref(void 0);
-    const childRef = ref(void 0);
+    const parentRef = useTemplateRef("parent");
+    const childRef = useTemplateRef("child");
     const { duplicates, initialize } = useMarqueeApi({
       child: childRef,
       parent: parentRef,
@@ -30,20 +38,12 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "div",
-        {
-          ref_key: "parentRef",
-          ref: parentRef,
-          class: "magic-marquee"
-        },
+        _hoisted_1,
         [
-          _createElementVNode("div", _hoisted_1, [
+          _createElementVNode("div", _hoisted_2, [
             _createElementVNode(
               "div",
-              {
-                ref_key: "childRef",
-                ref: childRef,
-                class: "magic-marquee__content"
-              },
+              _hoisted_3,
               [
                 _renderSlot(_ctx.$slots, "default")
               ],

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

@@ -4,32 +4,21 @@ interface MagicMarqueeProps {
     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<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMarqueeProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMarqueeProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-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_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/plugins/MagicMarquee/src/composables/private/useMarqueeApi.d.ts

@@ -5,7 +5,7 @@ export type UseMarqueeApiParams = {
     instanceId: MaybeRef<string>;
 };
 export declare function useMarqueeApi({ child, parent, instanceId, }: UseMarqueeApiParams): {
-    duplicates: import("vue").Ref<number, number>;
+    duplicates: import("vue").ShallowRef<number, number>;
     play: () => void;
     pause: () => void;
     initialize: () => Promise<void>;

package/dist/plugins/MagicMarquee/src/composables/private/useMarqueeApi.mjs

@@ -1,4 +1,10 @@
-import { ref, computed, nextTick, watch, toValue } from "vue";
+import {
+  shallowRef,
+  computed,
+  nextTick,
+  watch,
+  toValue
+} from "vue";
 import { useElementBounding, useElementSize, useThrottleFn } from "@vueuse/core";
 import { useMarqueeState } from "./useMarqueeState.mjs";
 export function useMarqueeApi({
@@ -8,7 +14,7 @@ export function useMarqueeApi({
 }) {
   const { initializeState } = useMarqueeState(instanceId);
   const state = initializeState();
-  const duplicates = ref(1);
+  const duplicates = shallowRef(1);
   const childRect = useElementBounding(child);
   const parentRect = useElementBounding(parent);
   const { width } = useElementSize(parent);