@maas/vue-equipment 0.28.4 → 0.29.1

package/dist/nuxt/module.json

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

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;