@maas/vue-equipment 0.28.3 → 0.29.0

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -18,7 +18,7 @@ const functions$1 = [
 	{
 		name: "MagicDraggable",
 		"package": "plugins",
-		lastUpdated: 1715012147000,
+		lastUpdated: 1716453773000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicDraggable/",
 		description: "draggable"
 	},

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

@@ -1,6 +1,6 @@
 import type { Plugin } from 'vue';
 import MagicDraggable from './src/components/MagicDraggable.vue.js';
-import type { DraggableOptions } from './src/types.js';
+import type { DraggableOptions, DraggableEvents } from './src/types.js';
 declare const MagicDraggablePlugin: Plugin;
 export { MagicDraggablePlugin, MagicDraggable };
-export type { DraggableOptions };
+export type { DraggableOptions, DraggableEvents };

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

@@ -62,8 +62,8 @@ const mappedOptions = defu(props.options, defaultOptions)
 const elRef = ref<HTMLElement | undefined>(undefined)
 const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
 
-const { findState } = useDraggableState(props.id)
-const { dragging } = findState()
+const { initializeState } = useDraggableState(props.id)
+const { dragging } = initializeState()
 
 // Make sure this is reactive
 const disabled = computed(() => {

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.mjs

@@ -13,12 +13,13 @@ import {
   useIdle
 } from "@vueuse/core";
 import { isIOS, isWithinRange } from "@maas/vue-equipment/utils";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { useDraggableSnap } from "./useDraggableSnap.mjs";
 import { useDraggableState } from "./useDraggableState.mjs";
 import { useDraggableScrollLock } from "./useDraggableScrollLock.mjs";
 export function useDraggableDrag(args) {
   const { id, elRef, wrapperRef, threshold, snapPoints, initial, animation } = args;
-  const { findState } = useDraggableState(toValue(id));
+  const { initializeState } = useDraggableState(toValue(id));
   const {
     dragStart,
     dragging,
@@ -33,7 +34,7 @@ export function useDraggableDrag(args) {
     draggedY,
     elRect,
     wrapperRect
-  } = findState();
+  } = initializeState();
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;
@@ -63,6 +64,7 @@ export function useDraggableDrag(args) {
     snapPointsMap,
     interpolateDragged
   } = useDraggableSnap({
+    id,
     elRect,
     wrapperRect,
     animation,
@@ -70,6 +72,7 @@ export function useDraggableDrag(args) {
     draggedY,
     draggedX
   });
+  const emitter = useMagicEmitter();
   const {
     lockScroll,
     unlockScroll,
@@ -236,6 +239,19 @@ export function useDraggableDrag(args) {
       const key = `x${interpolateTo.value.x}y${interpolateTo.value.y}`;
       activeSnapPoint.value = snapPointsMap.value[key];
     }
+    if (intermediateDraggedX.value === draggedX.value && intermediateDraggedY.value === draggedY.value) {
+      emitter.emit("dragCanceled", {
+        id: toValue(id),
+        x: draggedX.value,
+        y: draggedY.value
+      });
+    } else {
+      emitter.emit("afterDrag", {
+        id: toValue(id),
+        x: draggedX.value,
+        y: draggedY.value
+      });
+    }
     resetStateAndListeners();
     unlockScroll();
     removeScrollLockPadding();
@@ -260,6 +276,11 @@ export function useDraggableDrag(args) {
     if (toValue(snapPoints).length) {
       findSnapPointByVector();
     }
+    emitter.emit("drag", {
+      id: toValue(id),
+      x: draggedX.value,
+      y: draggedY.value
+    });
   }
   function onIdle() {
     interpolateTo.value = findClosestSnapPoint();
@@ -277,6 +298,11 @@ export function useDraggableDrag(args) {
       return;
     } else {
       dragging.value = true;
+      emitter.emit("beforeDrag", {
+        id: toValue(id),
+        x: draggedX.value,
+        y: draggedY.value
+      });
     }
     intermediateDraggedX.value = draggedX.value;
     intermediateDraggedY.value = draggedY.value;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.d.ts

@@ -1,7 +1,8 @@
 import { type MaybeRef, type Ref } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
-import type { SnapPoint, Coordinates } from '../../types.js';
+import type { DraggableSnapPoint, Coordinates } from '../../types.js';
 type UseDraggableSnapArgs = {
+    id: MaybeRef<string>;
     elRect: Ref<DOMRect | undefined>;
     wrapperRect: Ref<DOMRect | undefined>;
     draggedY: Ref<number>;
@@ -16,7 +17,7 @@ type InterpolateDraggedArgs = {
     easing?: (t: number) => number;
 };
 type SnapToArgs = {
-    snapPoint: SnapPoint;
+    snapPoint: DraggableSnapPoint;
     interpolate?: boolean;
     duration?: number;
 };
@@ -26,8 +27,8 @@ export declare function useDraggableSnap(args: UseDraggableSnapArgs): {
         x?: number | undefined;
         y?: number | undefined;
     } | undefined] | undefined>;
-    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<string, SnapPoint>>;
-    mapSnapPoint: (snapPoint: SnapPoint) => Coordinates | undefined;
+    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<string, DraggableSnapPoint>>;
+    mapSnapPoint: (snapPoint: DraggableSnapPoint) => Coordinates | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;
     snapTo: (args: SnapToArgs) => Promise<void>;
 };

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.mjs

@@ -1,9 +1,10 @@
 import { ref, toValue, nextTick } from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { interpolate } from "@maas/vue-equipment/utils";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { defu } from "defu";
 export function useDraggableSnap(args) {
-  const { draggedY, draggedX, elRect, wrapperRect, animation, snapPoints } = args;
+  const { id, draggedY, draggedX, elRect, wrapperRect, animation, snapPoints } = args;
   const activeSnapPoint = ref(void 0);
   const mappedSnapPoints = computedWithControl(
     () => toValue(wrapperRect),
@@ -28,6 +29,7 @@ export function useDraggableSnap(args) {
       return mapped;
     }
   );
+  const emitter = useMagicEmitter();
   function mapSnapPoint(snapPoint) {
     if (!wrapperRect.value) {
       console.warn("Wrapper rect is not defined");
@@ -95,6 +97,8 @@ export function useDraggableSnap(args) {
       duration = toValue(animation).snap?.duration,
       easing = toValue(animation).snap?.easing
     } = args2;
+    const snapPoint = snapPointsMap.value[`x${x}y${y}`];
+    emitter.emit("beforeSnap", { id: toValue(id), snapPoint });
     interpolate({
       from: draggedY.value,
       to: y,
@@ -102,6 +106,9 @@ export function useDraggableSnap(args) {
       easing,
       callback: (value) => {
         draggedY.value = value;
+        if (y > x && draggedY.value === y) {
+          emitter.emit("afterSnap", { id: toValue(id), snapPoint });
+        }
       }
     });
     interpolate({
@@ -111,6 +118,9 @@ export function useDraggableSnap(args) {
       easing,
       callback: (value) => {
         draggedX.value = value;
+        if (x >= y && draggedX.value === x) {
+          emitter.emit("afterSnap", { id: toValue(id), snapPoint });
+        }
       }
     });
   }

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.d.ts

@@ -1,108 +1,6 @@
 import { type MaybeRef } from 'vue';
 import type { DraggableState } from '../../types/index.js';
 export declare function useDraggableState(id: MaybeRef<string>): {
-    addState: (id: string) => {
-        id: string;
-        dragStart: {
-            toString: () => string;
-            toDateString: () => string;
-            toTimeString: () => string;
-            toLocaleString: {
-                (): string;
-                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
-                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
-            };
-            toLocaleDateString: {
-                (): string;
-                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
-                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
-            };
-            toLocaleTimeString: {
-                (): string;
-                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
-                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
-            };
-            valueOf: () => number;
-            getTime: () => number;
-            getFullYear: () => number;
-            getUTCFullYear: () => number;
-            getMonth: () => number;
-            getUTCMonth: () => number;
-            getDate: () => number;
-            getUTCDate: () => number;
-            getDay: () => number;
-            getUTCDay: () => number;
-            getHours: () => number;
-            getUTCHours: () => number;
-            getMinutes: () => number;
-            getUTCMinutes: () => number;
-            getSeconds: () => number;
-            getUTCSeconds: () => number;
-            getMilliseconds: () => number;
-            getUTCMilliseconds: () => number;
-            getTimezoneOffset: () => number;
-            setTime: (time: number) => number;
-            setMilliseconds: (ms: number) => number;
-            setUTCMilliseconds: (ms: number) => number;
-            setSeconds: (sec: number, ms?: number | undefined) => number;
-            setUTCSeconds: (sec: number, ms?: number | undefined) => number;
-            setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
-            setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
-            setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
-            setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
-            setDate: (date: number) => number;
-            setUTCDate: (date: number) => number;
-            setMonth: (month: number, date?: number | undefined) => number;
-            setUTCMonth: (month: number, date?: number | undefined) => number;
-            setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
-            setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
-            toUTCString: () => string;
-            toISOString: () => string;
-            toJSON: (key?: any) => string;
-            getVarDate: () => VarDate;
-            [Symbol.toPrimitive]: {
-                (hint: "default"): string;
-                (hint: "string"): string;
-                (hint: "number"): number;
-                (hint: string): string | number;
-            };
-        } | undefined;
-        dragging: boolean;
-        interpolateTo: {
-            x: number;
-            y: number;
-        } | undefined;
-        originX: number;
-        originY: number;
-        lastDraggedX: number;
-        lastDraggedY: number;
-        intermediateDraggedX: number;
-        intermediateDraggedY: number;
-        draggedX: number;
-        draggedY: number;
-        elRect: {
-            height: number;
-            width: number;
-            x: number;
-            y: number;
-            readonly bottom: number;
-            readonly left: number;
-            readonly right: number;
-            readonly top: number;
-            toJSON: () => any;
-        } | undefined;
-        wrapperRect: {
-            height: number;
-            width: number;
-            x: number;
-            y: number;
-            readonly bottom: number;
-            readonly left: number;
-            readonly right: number;
-            readonly top: number;
-            toJSON: () => any;
-        } | undefined;
-    };
-    findState: () => import("vue").ToRefs<DraggableState>;
+    initializeState: () => import("vue").ToRefs<DraggableState>;
     deleteState: () => void;
 };

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.mjs

@@ -25,7 +25,7 @@ export function useDraggableState(id) {
     drawerStateStore.value = [...drawerStateStore.value, instance];
     return instance;
   }
-  function findState() {
+  function initializeState() {
     let instance = drawerStateStore.value.find((instance2) => {
       return instance2.id === id;
     });
@@ -39,8 +39,7 @@ export function useDraggableState(id) {
     );
   }
   return {
-    addState,
-    findState,
+    initializeState,
     deleteState
   };
 }

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

@@ -3,7 +3,7 @@ export type Coordinates = {
     x: number;
     y: number;
 };
-export type SnapPoint = [
+export type DraggableSnapPoint = [
     Position,
     offset?: {
         x?: number;
@@ -25,9 +25,9 @@ export interface DraggableOptions {
         };
     };
     initial?: {
-        snapPoint?: SnapPoint;
+        snapPoint?: DraggableSnapPoint;
     };
-    snapPoints?: SnapPoint[];
+    snapPoints?: DraggableSnapPoint[];
     disabled?: boolean;
 }
 export interface DraggableState {
@@ -46,4 +46,39 @@ export interface DraggableState {
     elRect: DOMRect | undefined;
     wrapperRect: DOMRect | undefined;
 }
+export type DraggableEvents = {
+    beforeSnap: {
+        id: string;
+        snapPoint: DraggableSnapPoint;
+    };
+    snapTo: {
+        id: string;
+        snapPoint: DraggableSnapPoint;
+        duration?: number;
+    };
+    afterSnap: {
+        id: string;
+        snapPoint: DraggableSnapPoint;
+    };
+    beforeDrag: {
+        id: string;
+        x: number;
+        y: number;
+    };
+    drag: {
+        id: string;
+        x: number;
+        y: number;
+    };
+    afterDrag: {
+        id: string;
+        x: number;
+        y: number;
+    };
+    dragCanceled: {
+        id: string;
+        x: number;
+        y: number;
+    };
+};
 export {};

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

@@ -192,8 +192,8 @@ const { initializeWheelListener, destroyWheelListener } = useDrawerWheel({
   disabled,
 })
 
-const { findState } = useDrawerState(props.id)
-const { dragging, wheeling } = findState()
+const { initializeState } = useDrawerState(props.id)
+const { dragging, wheeling } = initializeState()
 
 // Split isActive into two values to animate drawer smoothly
 const innerActive = ref(false)

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

@@ -35,7 +35,7 @@ export function useDrawerDrag(args) {
     disabled,
     close
   } = args;
-  const { findState } = useDrawerState(toValue(id));
+  const { initializeState } = useDrawerState(toValue(id));
   const {
     dragStart,
     dragging,
@@ -54,7 +54,7 @@ export function useDrawerDrag(args) {
     absDirectionY,
     elRect,
     wrapperRect
-  } = findState();
+  } = initializeState();
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;

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

@@ -1,12 +1,12 @@
 import { type Ref, type MaybeRef } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
-import { type SnapPoint } from '../../types.js';
+import { type DrawerSnapPoint } from '../../types.js';
 interface UseDrawerGuardsArgs {
     elRef: Ref<HTMLElement | undefined>;
     absDirectionX: MaybeRef<'with' | 'against' | undefined>;
     absDirectionY: MaybeRef<'with' | 'against' | undefined>;
     position: MaybeRef<DefaultOptions['position']>;
-    activeSnapPoint: MaybeRef<SnapPoint | undefined>;
+    activeSnapPoint: MaybeRef<DrawerSnapPoint | undefined>;
 }
 export declare function useDrawerGuards(args: UseDrawerGuardsArgs): {
     canDrag: (el: EventTarget) => boolean;

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

@@ -12,7 +12,7 @@ import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerProgress(args) {
   const { id, drawerRef, elRef, position, overshoot } = args;
-  const { findState } = useDrawerState(id);
+  const { initializeState } = useDrawerState(id);
   const drawerRect = useElementBounding(drawerRef);
   const elRect = useElementBounding(elRef);
   const maxX = computed(
@@ -21,7 +21,7 @@ export function useDrawerProgress(args) {
   const maxY = computed(
     () => drawerRect.height.value - elRect.height.value + toValue(overshoot)
   );
-  const { progress } = findState();
+  const { progress } = initializeState();
   function rafCallback() {
     drawerRect.update();
     elRect.update();

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

@@ -1,6 +1,6 @@
 import { type MaybeRef, type Ref } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
-import { type SnapPoint } from '../../types.js';
+import { type DrawerSnapPoint } from '../../types.js';
 type UseDrawerSnapArgs = {
     id: MaybeRef<string>;
     wrapperRect: Ref<DOMRect | undefined>;
@@ -18,7 +18,7 @@ type FindClosestSnapPointArgs = {
     direction?: 'below' | 'above' | 'absolute';
 };
 type SnapToArgs = {
-    snapPoint: SnapPoint;
+    snapPoint: DrawerSnapPoint;
     interpolate: boolean;
     duration?: number;
 };
@@ -30,11 +30,11 @@ type InterpolateDraggedArgs = {
 export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
     snappedY: Ref<number>;
     snappedX: Ref<number>;
-    activeSnapPoint: Ref<SnapPoint | undefined>;
+    activeSnapPoint: Ref<DrawerSnapPoint | undefined>;
     snapTo: (args: SnapToArgs) => Promise<void>;
     findClosestSnapPoint: (args: FindClosestSnapPointArgs) => number | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;
-    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<number, SnapPoint>>;
+    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<number, DrawerSnapPoint>>;
     drawerHeight: import("vue").ComputedRef<number>;
     drawerWidth: import("vue").ComputedRef<number>;
 };

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

@@ -108,6 +108,6 @@ export declare function useDrawerState(id: MaybeRef<string>): {
             toJSON: () => any;
         } | undefined;
     };
-    findState: () => import("vue").ToRefs<DrawerState>;
+    initializeState: () => import("vue").ToRefs<DrawerState>;
     deleteState: () => void;
 };

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

@@ -33,7 +33,7 @@ export function useDrawerState(id) {
     drawerStateStore.value = [...drawerStateStore.value, instance];
     return instance;
   }
-  function findState() {
+  function initializeState() {
     let instance = drawerStateStore.value.find((instance2) => {
       return instance2.id === id;
     });
@@ -48,7 +48,7 @@ export function useDrawerState(id) {
   }
   return {
     addState,
-    findState,
+    initializeState,
     deleteState
   };
 }

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

@@ -7,8 +7,8 @@ import WheelGestures from "wheel-gestures";
 import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerWheel(args) {
   const { id, elRef, position, disabled } = args;
-  const { findState } = useDrawerState(toValue(id));
-  const { dragging, wheeling } = findState();
+  const { initializeState } = useDrawerState(toValue(id));
+  const { dragging, wheeling } = initializeState();
   let startEvent;
   const axis = computed(() => {
     switch (toValue(position)) {

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.d.ts

@@ -1,5 +1,5 @@
 import { type MaybeRef } from 'vue';
-import type { SnapPoint } from '../types/index.js';
+import type { DrawerSnapPoint } from '../types/index.js';
 export declare function useMagicDrawer(id: MaybeRef<string>): {
     isActive: import("vue").ComputedRef<boolean>;
     progress: import("vue").Ref<{
@@ -8,6 +8,6 @@ export declare function useMagicDrawer(id: MaybeRef<string>): {
     }>;
     open: () => void;
     close: () => void;
-    snapTo: (snapPoint: SnapPoint, duration?: number) => void;
+    snapTo: (snapPoint: DrawerSnapPoint, duration?: number) => void;
 };
 export type UseMagicDrawerReturn = ReturnType<typeof useMagicDrawer>;

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.mjs

@@ -4,8 +4,8 @@ import { useDrawerStore } from "./private/useDrawerStore.mjs";
 import { useDrawerState } from "./private/useDrawerState.mjs";
 export function useMagicDrawer(id) {
   const { drawerStore, addInstance, removeInstance } = useDrawerStore();
-  const { deleteState, findState } = useDrawerState(toValue(id));
-  const { progress } = findState();
+  const { deleteState, initializeState } = useDrawerState(toValue(id));
+  const { progress } = initializeState();
   const isActive = computed(() => drawerStore.value.includes(toValue(id)));
   function open() {
     addInstance(toValue(id));

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

@@ -1,5 +1,5 @@
 import { type Options } from 'focus-trap';
-export type SnapPoint = number | `${string}px`;
+export type DrawerSnapPoint = number | `${string}px`;
 export interface DrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
     backdrop?: boolean;
@@ -8,7 +8,7 @@ export interface DrawerOptions {
     scrollLock?: boolean | {
         padding: boolean;
     };
-    snapPoints?: SnapPoint[];
+    snapPoints?: DrawerSnapPoint[];
     teleport?: {
         target?: string;
         disabled?: boolean;
@@ -31,7 +31,7 @@ export interface DrawerOptions {
     initial?: {
         open?: boolean;
         transition?: boolean;
-        snapPoint?: SnapPoint;
+        snapPoint?: DrawerSnapPoint;
     };
     keyListener?: {
         close?: string[] | false;
@@ -74,16 +74,16 @@ export type DrawerEvents = {
     afterLeave: string;
     beforeSnap: {
         id: string;
-        snapPoint: SnapPoint;
+        snapPoint: DrawerSnapPoint;
     };
     snapTo: {
         id: string;
-        snapPoint: SnapPoint;
+        snapPoint: DrawerSnapPoint;
         duration?: number;
     };
     afterSnap: {
         id: string;
-        snapPoint: SnapPoint;
+        snapPoint: DrawerSnapPoint;
     };
     beforeDrag: {
         id: string;

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

@@ -1,78 +1,82 @@
 export declare function useMagicEmitter(): {
     on: {
-        <Key extends "progress" | "snapTo" | "accept" | "acceptSelected" | "reject" | "collision" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "beforeSnap" | "afterSnap" | "beforeDrag" | "drag" | "afterDrag">(type: Key, handler: import("mitt").Handler<({
+        <Key extends "progress" | "snapTo" | "collision" | "beforeSnap" | "afterSnap" | "beforeDrag" | "drag" | "afterDrag" | "dragCanceled" | keyof import("../../..").CookieEvents | keyof import("../../..").CommandEvents>(type: Key, handler: import("mitt").Handler<{
             collision: {
                 dir: "up" | "down";
                 pos: "top" | "bottom";
                 el: HTMLElement;
                 data?: Record<string, unknown> | undefined;
             };
-        } & {
             beforeEnter: string;
             enter: string;
             afterEnter: string;
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & {
             accept: import("../../../MagicCookie/src/types").CookieConsent;
             reject: import("../../../MagicCookie/src/types").CookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                duration?: number | undefined;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number | undefined;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             drag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             afterDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
+            };
+            dragCanceled: {
+                id: string;
+                x: number;
+                y: number;
             };
             progress: {
                 id: string;
                 x: number;
                 y: number;
             };
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        })[Key]>): void;
+        }[Key]>): void;
         (type: "*", handler: import("mitt").WildcardHandler<{
             collision: {
                 dir: "up" | "down";
@@ -80,147 +84,155 @@ export declare function useMagicEmitter(): {
                 el: HTMLElement;
                 data?: Record<string, unknown> | undefined;
             };
-        } & {
             beforeEnter: string;
             enter: string;
             afterEnter: string;
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & {
             accept: import("../../../MagicCookie/src/types").CookieConsent;
             reject: import("../../../MagicCookie/src/types").CookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                duration?: number | undefined;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number | undefined;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             drag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             afterDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
+            };
+            dragCanceled: {
+                id: string;
+                x: number;
+                y: number;
             };
             progress: {
                 id: string;
                 x: number;
                 y: number;
             };
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
         }>): void;
     };
     off: {
-        <Key_1 extends "progress" | "snapTo" | "accept" | "acceptSelected" | "reject" | "collision" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "beforeSnap" | "afterSnap" | "beforeDrag" | "drag" | "afterDrag">(type: Key_1, handler?: import("mitt").Handler<({
+        <Key_1 extends "progress" | "snapTo" | "collision" | "beforeSnap" | "afterSnap" | "beforeDrag" | "drag" | "afterDrag" | "dragCanceled" | keyof import("../../..").CookieEvents | keyof import("../../..").CommandEvents>(type: Key_1, handler?: import("mitt").Handler<{
             collision: {
                 dir: "up" | "down";
                 pos: "top" | "bottom";
                 el: HTMLElement;
                 data?: Record<string, unknown> | undefined;
             };
-        } & {
             beforeEnter: string;
             enter: string;
             afterEnter: string;
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & {
             accept: import("../../../MagicCookie/src/types").CookieConsent;
             reject: import("../../../MagicCookie/src/types").CookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                duration?: number | undefined;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number | undefined;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             drag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             afterDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
+            };
+            dragCanceled: {
+                id: string;
+                x: number;
+                y: number;
             };
             progress: {
                 id: string;
                 x: number;
                 y: number;
             };
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        })[Key_1]> | undefined): void;
+        }[Key_1]> | undefined): void;
         (type: "*", handler: import("mitt").WildcardHandler<{
             collision: {
                 dir: "up" | "down";
@@ -228,219 +240,231 @@ export declare function useMagicEmitter(): {
                 el: HTMLElement;
                 data?: Record<string, unknown> | undefined;
             };
-        } & {
             beforeEnter: string;
             enter: string;
             afterEnter: string;
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & {
             accept: import("../../../MagicCookie/src/types").CookieConsent;
             reject: import("../../../MagicCookie/src/types").CookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                duration?: number | undefined;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number | undefined;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             drag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             afterDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
+            };
+            dragCanceled: {
+                id: string;
+                x: number;
+                y: number;
             };
             progress: {
                 id: string;
                 x: number;
                 y: number;
             };
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
         }>): void;
     };
     emit: {
-        <Key_2 extends "progress" | "snapTo" | "accept" | "acceptSelected" | "reject" | "collision" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "beforeSnap" | "afterSnap" | "beforeDrag" | "drag" | "afterDrag">(type: Key_2, event: ({
+        <Key_2 extends "progress" | "snapTo" | "collision" | "beforeSnap" | "afterSnap" | "beforeDrag" | "drag" | "afterDrag" | "dragCanceled" | keyof import("../../..").CookieEvents | keyof import("../../..").CommandEvents>(type: Key_2, event: {
             collision: {
                 dir: "up" | "down";
                 pos: "top" | "bottom";
                 el: HTMLElement;
                 data?: Record<string, unknown> | undefined;
             };
-        } & {
             beforeEnter: string;
             enter: string;
             afterEnter: string;
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & {
             accept: import("../../../MagicCookie/src/types").CookieConsent;
             reject: import("../../../MagicCookie/src/types").CookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                duration?: number | undefined;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number | undefined;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             drag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             afterDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
+            };
+            dragCanceled: {
+                id: string;
+                x: number;
+                y: number;
             };
             progress: {
                 id: string;
                 x: number;
                 y: number;
             };
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        })[Key_2]): void;
-        <Key_3 extends "progress" | "snapTo" | "accept" | "acceptSelected" | "reject" | "collision" | "beforeEnter" | "enter" | "afterEnter" | "beforeLeave" | "leave" | "afterLeave" | "beforeSnap" | "afterSnap" | "beforeDrag" | "drag" | "afterDrag">(type: undefined extends ({
+        }[Key_2]): void;
+        <Key_3 extends "progress" | "snapTo" | "collision" | "beforeSnap" | "afterSnap" | "beforeDrag" | "drag" | "afterDrag" | "dragCanceled" | keyof import("../../..").CookieEvents | keyof import("../../..").CommandEvents>(type: undefined extends {
             collision: {
                 dir: "up" | "down";
                 pos: "top" | "bottom";
                 el: HTMLElement;
                 data?: Record<string, unknown> | undefined;
             };
-        } & {
             beforeEnter: string;
             enter: string;
             afterEnter: string;
             beforeLeave: string;
             leave: string;
             afterLeave: string;
-        } & {
             accept: import("../../../MagicCookie/src/types").CookieConsent;
             reject: import("../../../MagicCookie/src/types").CookieConsent;
             acceptSelected: import("../../../MagicCookie/src/types").CookieConsent;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                duration?: number | undefined;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number | undefined;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").SnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+            } | {
+                id: string;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             drag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
             };
             afterDrag: {
                 id: string;
                 x: number;
                 y: number;
+            } | {
+                id: string;
+                x: number;
+                y: number;
+            };
+            dragCanceled: {
+                id: string;
+                x: number;
+                y: number;
             };
             progress: {
                 id: string;
                 x: number;
                 y: number;
             };
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        } & {
-            beforeEnter: string;
-            enter: string;
-            afterEnter: string;
-            beforeLeave: string;
-            leave: string;
-            afterLeave: string;
-        })[Key_3] ? Key_3 : never): void;
+        }[Key_3] ? Key_3 : never): void;
     };
 };

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

@@ -1,17 +1,19 @@
 import type { CollisionEvents } from '../../../MagicScroll.js';
 import type { CommandEvents } from '../../../MagicCommand.js';
 import type { CookieEvents } from '../../../MagicCookie.js';
+import type { DraggableEvents } from '../../../MagicDraggable.js';
 import type { DrawerEvents } from '../../../MagicDrawer.js';
 import type { ModalEvents } from '../../../MagicModal.js';
 import type { ToastEvents } from '../../../MagicToast.js';
-type Merge<T extends any[]> = T extends [infer First, ...infer Rest] ? MergeTypes<First, Merge<Rest>> : {};
 type MergeTypes<T, U> = {
-    [K in keyof T]: K extends keyof U ? U[K] : T[K];
-} & U;
+    [K in keyof (T & U)]: K extends keyof T ? K extends keyof U ? T[K] | U[K] : T[K] : K extends keyof U ? U[K] : never;
+};
+type Merge<T extends any[]> = T extends [infer First, ...infer Rest] ? MergeTypes<First, Merge<Rest>> : {};
 export type MagicEmitterEvents = Merge<[
     CollisionEvents,
     CommandEvents,
     CookieEvents,
+    DraggableEvents,
     DrawerEvents,
     ModalEvents,
     ToastEvents

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue

@@ -47,10 +47,6 @@ async function calculate() {
   progress.value = getProgress()
 }
 
-onMounted(() => {
-  calculate()
-})
-
 watch(
   () => scrollReturn?.y.value,
   () => {
@@ -60,6 +56,14 @@ watch(
   }
 )
 
+watch(
+  () => scrollReturn?.y.value,
+  () => {
+    calculate()
+  },
+  { once: true }
+)
+
 useIntersectionObserver(
   elRef,
   ([{ isIntersecting }]) => {

package/package.json

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