@maas/vue-equipment 1.0.0-beta.73 → 1.0.0-beta.74

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.72",
+  "version": "1.0.0-beta.73",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -295,7 +295,7 @@ export function useDraggableDrag(args) {
     if (!e.isPrimary) {
       return;
     }
-    setDragged({ x: e.screenX, y: e.screenY });
+    setDragged({ x: e.pageX, y: e.pageY });
     if (!distanceThresholdReached.value) {
       checkDistance();
     }
@@ -342,8 +342,8 @@ export function useDraggableDrag(args) {
     intermediateDraggedY.value = draggedY.value;
     lastDraggedX.value = draggedX.value;
     lastDraggedY.value = draggedY.value;
-    originX.value = e.screenX - draggedX.value;
-    originY.value = e.screenY - draggedY.value;
+    originX.value = e.pageX - draggedX.value;
+    originY.value = e.pageY - draggedY.value;
     cancelPointerup = useEventListener(document, "pointerup", onPointerup);
     cancelPointercancel = useEventListener(
       document,

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

@@ -372,7 +372,7 @@ export function useDrawerDrag(args) {
     e.stopImmediatePropagation();
     e.stopPropagation();
     shouldClose.value = false;
-    checkDirection({ x: e.screenX, y: e.screenY });
+    checkDirection({ x: e.clientX, y: e.clientY });
     if (!scrollLock) {
       const scrollLockTarget = lockScroll(e.target);
       if (scrollLockTarget) {
@@ -384,7 +384,7 @@ export function useDrawerDrag(args) {
     if (!canDrag(dragTarget)) {
       return;
     }
-    setDragged({ x: e.screenX, y: e.screenY });
+    setDragged({ x: e.clientX, y: e.clientY });
     checkMomentum();
     checkPosition();
     emitter.emit("drag", {
@@ -450,9 +450,9 @@ export function useDrawerDrag(args) {
     if (!firstTouch) {
       return;
     }
-    checkDirection({ x: firstTouch.screenX, y: firstTouch.screenY });
+    checkDirection({ x: firstTouch.clientX, y: firstTouch.clientY });
     shouldClose.value = false;
-    checkDirection({ x: firstTouch.screenX, y: firstTouch.screenY });
+    checkDirection({ x: firstTouch.clientX, y: firstTouch.clientY });
     if (!scrollLock) {
       const scrollLockTarget = lockScroll(firstTouch.target);
       if (scrollLockTarget) {
@@ -467,7 +467,7 @@ export function useDrawerDrag(args) {
     if (hasDragged.value) {
       e.preventDefault();
     }
-    setDragged({ x: firstTouch.screenX, y: firstTouch.screenY });
+    setDragged({ x: firstTouch.clientX, y: firstTouch.clientY });
     checkMomentum();
     checkPosition();
     emitter.emit("drag", {
@@ -566,8 +566,8 @@ export function useDrawerDrag(args) {
     }) : void 0;
     cancelTouchend = isIOS() || isAndroid() ? useEventListener(document, "touchend", onTouchend) : void 0;
     cancelTouchcancel = isIOS() || isAndroid() ? useEventListener(document, "touchcancel", onTouchend) : void 0;
-    originX.value = e.screenX - draggedX.value;
-    originY.value = e.screenY - draggedY.value;
+    originX.value = e.clientX - draggedX.value;
+    originY.value = e.clientY - draggedY.value;
     dragStart.value = /* @__PURE__ */ new Date();
     onPointermove(e);
   }
@@ -608,8 +608,8 @@ export function useDrawerDrag(args) {
     if (!firstTouch) {
       return;
     }
-    originX.value = firstTouch.screenX - draggedX.value;
-    originY.value = firstTouch.screenY - draggedY.value;
+    originX.value = firstTouch.clientX - draggedX.value;
+    originY.value = firstTouch.clientY - draggedY.value;
     dragStart.value = /* @__PURE__ */ new Date();
     onTouchmove(e);
   }

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

@@ -1,6 +1,6 @@
 export declare function useMagicEmitter(): {
     on: {
-        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "magnet" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler: import("mitt").Handler<({
+        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler: import("mitt").Handler<({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -329,6 +329,7 @@ export declare function useMagicEmitter(): {
             magnet: {
                 id: string;
             } & import("../../../MagicTray/index.js").TraySidePayload;
+            willSnapTo: import("../../../MagicTray/src/types/index.js").TrayWillSnapToPayload;
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>)[Key]>): void;
         (type: "*", handler: import("mitt").WildcardHandler<{
             beforeEnter: string | {
@@ -659,10 +660,11 @@ export declare function useMagicEmitter(): {
             magnet: {
                 id: string;
             } & import("../../../MagicTray/index.js").TraySidePayload;
+            willSnapTo: import("../../../MagicTray/src/types/index.js").TrayWillSnapToPayload;
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>>): void;
     };
     off: {
-        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "magnet" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler?: import("mitt").Handler<({
+        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, handler?: import("mitt").Handler<({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -991,6 +993,7 @@ export declare function useMagicEmitter(): {
             magnet: {
                 id: string;
             } & import("../../../MagicTray/index.js").TraySidePayload;
+            willSnapTo: import("../../../MagicTray/src/types/index.js").TrayWillSnapToPayload;
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>)[Key]> | undefined): void;
         (type: "*", handler: import("mitt").WildcardHandler<{
             beforeEnter: string | {
@@ -1321,10 +1324,11 @@ export declare function useMagicEmitter(): {
             magnet: {
                 id: string;
             } & import("../../../MagicTray/index.js").TraySidePayload;
+            willSnapTo: import("../../../MagicTray/src/types/index.js").TrayWillSnapToPayload;
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>>): void;
     };
     emit: {
-        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "magnet" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, event: ({
+        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: Key, event: ({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -1653,8 +1657,9 @@ export declare function useMagicEmitter(): {
             magnet: {
                 id: string;
             } & import("../../../MagicTray/index.js").TraySidePayload;
+            willSnapTo: import("../../../MagicTray/src/types/index.js").TrayWillSnapToPayload;
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>)[Key]): void;
-        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "magnet" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: undefined extends ({
+        <Key extends "progress" | "acceptAll" | "acceptSelected" | "rejectAll" | "magnet" | "willSnapTo" | "collision" | keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents | keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents | keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>(type: undefined extends ({
             beforeEnter: string | {
                 id: string;
                 viewId: string;
@@ -1983,6 +1988,7 @@ export declare function useMagicEmitter(): {
             magnet: {
                 id: string;
             } & import("../../../MagicTray/index.js").TraySidePayload;
+            willSnapTo: import("../../../MagicTray/src/types/index.js").TrayWillSnapToPayload;
         } & Omit<object, keyof import("../../../MagicTray/src/types/index.js").TrayEvents>, keyof import("../../../MagicToast/src/types/index.js").ToastEvents>, "collision">, keyof import("../../../MagicPlayer/src/types/index.js").PlayerEvents>, keyof import("../../../MagicMenu/src/types/index.js").MenuEvents>, keyof import("../../../MagicModal/src/types/index.js").ModalEvents>, keyof import("../../../MagicDrawer/src/types/index.js").DrawerEvents>, keyof import("../../../MagicDraggable/src/types/index.js").DraggableEvents>, keyof import("../../../MagicCookie/src/types/index.js").CookieEvents>, keyof import("../../../MagicAccordion/src/types/index.js").AccordionEvents>)[Key] ? Key : never): void;
     };
 };

package/dist/plugins/MagicToast/src/composables/private/useToastDrag.mjs

@@ -246,7 +246,7 @@ export function useToastDrag(args) {
     e.stopImmediatePropagation();
     e.stopPropagation();
     shouldClose.value = false;
-    setDragged({ x: e.screenX, y: e.screenY });
+    setDragged({ x: e.clientX, y: e.clientY });
     checkMomentum();
     checkPosition();
     emitter.emit("drag", {
@@ -294,8 +294,8 @@ export function useToastDrag(args) {
         { passive: false }
       );
       cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
-      originX.value = e.screenX - draggedX.value;
-      originY.value = e.screenY - draggedY.value;
+      originX.value = e.clientX - draggedX.value;
+      originY.value = e.clientY - draggedY.value;
       dragStart.value = /* @__PURE__ */ new Date();
       onPointermove(e);
     }

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

@@ -8,4 +8,4 @@ import type { Plugin } from 'vue';
 import type { MagicTrayOptions, TraySide, TraySidePayload, TraySnapMode, TraySnapPoint, TraySnapPointPayload, TrayTransformAxis } from './src/types/index.js';
 declare const MagicTrayPlugin: Plugin;
 export { MagicTrayPlugin, MagicTray, MagicTrayProvider, MagicTrayContent, MagicTrayHandle, MagicTrayTransform, useMagicTray, };
-export type { MagicTrayOptions, TraySide, TraySidePayload, TraySnapMode, TraySnapPoint, TraySnapPointPayload, TrayTransformAxis, };
+export type { MagicTrayOptions, TraySide, TraySidePayload, TraySnapMode, TraySnapPoint, TraySnapPointPayload, TrayWillSnapToPayload, TrayTransformAxis, };

package/dist/plugins/MagicTray/src/components/MagicTrayContent.vue

@@ -24,10 +24,10 @@
         :data-drag-left="draggableSides.includes('left')"
         :style="{ clipPath }"
       >
-        <div class="magic-tray-content__bg" v-if="slots.background">
+        <div v-if="slots.background" class="magic-tray-content__bg">
           <slot name="background" />
         </div>
-        <div class="magic-tray-content__slot" v-if="slots.default">
+        <div v-if="slots.default" class="magic-tray-content__slot">
           <slot />
         </div>
       </component>

package/dist/plugins/MagicTray/src/composables/private/useTrayDrag.mjs

@@ -64,6 +64,7 @@ export function useTrayDrag(args) {
     const points = mappedSnapPoints(side);
     return points.length ? snapPointsMap(side)[points[0]] : void 0;
   }
+  let lastPendingTarget = void 0;
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelPointercancel = void 0;
@@ -191,7 +192,8 @@ export function useTrayDrag(args) {
     if (newInset === state.dragged[side]) {
       return;
     }
-    state.relDirection[side] = newInset < state.dragged[side] ? "below" : "above";
+    const prev = state.dragged[side];
+    state.relDirection[side] = newInset < prev ? "below" : "above";
     state.dragged[side] = newInset;
   }
   function checkPosition(side) {
@@ -202,8 +204,22 @@ export function useTrayDrag(args) {
         value: snapReference(side),
         direction: delta < 0 ? "below" : "above"
       });
+    } else {
+      state.interpolateTo = void 0;
     }
   }
+  function emitWillSnapTo(side) {
+    const target = state.interpolateTo ?? state.snapped[side];
+    if (target === lastPendingTarget) return;
+    lastPendingTarget = target;
+    const snapPoint = snapPointsMap(side)[target];
+    if (!snapPoint && snapPoint !== 0) return;
+    emitter.emit("willSnapTo", {
+      id: toValue(id),
+      side,
+      snapPoint
+    });
+  }
   function checkMomentum(side) {
     const elapsed = Date.now() - state.dragStart.getTime();
     const distance = Math.abs(state.dragged[side] - state.lastDragged[side]);
@@ -248,10 +264,11 @@ export function useTrayDrag(args) {
     }
     e.stopImmediatePropagation();
     e.stopPropagation();
-    const coord = isVertical(side) ? e.screenY : e.screenX;
+    const coord = isVertical(side) ? e.clientY : e.clientX;
     setDragged(side, coord);
     checkMomentum(side);
     checkPosition(side);
+    emitWillSnapTo(side);
     emitter.emit("drag", {
       id: toValue(id),
       side,
@@ -286,10 +303,11 @@ export function useTrayDrag(args) {
     if (hasDragged.value) {
       e.preventDefault();
     }
-    const coord = isVertical(side) ? firstTouch.screenY : firstTouch.screenX;
+    const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
     setDragged(side, coord);
     checkMomentum(side);
     checkPosition(side);
+    emitWillSnapTo(side);
     emitter.emit("drag", {
       id: toValue(id),
       side,
@@ -316,6 +334,7 @@ export function useTrayDrag(args) {
     state.dragged[side] += state.magnetic[side];
     state.magnetic[side] = 0;
     state.lastDragged[side] = state.dragged[side];
+    lastPendingTarget = void 0;
     pointerdownTarget = target;
     switch (side) {
       case "top":
@@ -338,7 +357,7 @@ export function useTrayDrag(args) {
     if (state.dragging || toValue(disabled)) {
       return;
     }
-    const coord = isVertical(side) ? e.screenY : e.screenX;
+    const coord = isVertical(side) ? e.clientY : e.clientX;
     const target = e.target;
     beginDrag(side, coord, target);
     guardedSetPointerCapture({ event: e, element: target });
@@ -371,7 +390,7 @@ export function useTrayDrag(args) {
     }
     e.stopImmediatePropagation();
     e.stopPropagation();
-    const coord = isVertical(side) ? firstTouch.screenY : firstTouch.screenX;
+    const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
     beginDrag(side, coord, e.target);
     cancelTouchmove?.();
     cancelTouchmove = useEventListener(document, "touchmove", onTouchmove, {

package/dist/plugins/MagicTray/src/composables/private/useTrayMagnetism.mjs

@@ -1,5 +1,6 @@
 import {
   computed,
+  reactive,
   watch,
   toValue,
   onScopeDispose
@@ -28,6 +29,13 @@ export function useTrayMagnetism(args) {
   const easing = computed(() => easings[magnetism.value.easing]);
   const disabled = computed(() => state.options.disabled);
   const animation = computed(() => state.options.animation);
+  const isVirtual = computed(() => magnetism.value.virtual);
+  const magneticOffset = reactive({
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  });
   const magneticSides = computed(() => {
     return SIDES.filter((side) => {
       const draggable = (state.options.snapPoints[side]?.length ?? 0) > 0;
@@ -149,7 +157,8 @@ export function useTrayMagnetism(args) {
   }
   function resetSide(side) {
     cancelSettle(side);
-    if (state.magnetic[side] !== 0) {
+    magneticOffset[side] = 0;
+    if (!isVirtual.value && state.magnetic[side] !== 0) {
       state.magnetic[side] = 0;
     }
   }
@@ -162,20 +171,23 @@ export function useTrayMagnetism(args) {
     if (settling[side]) {
       return;
     }
-    if (Math.abs(state.magnetic[side]) <= EPSILON) {
+    if (Math.abs(magneticOffset[side]) <= EPSILON) {
       resetSide(side);
       return;
     }
     const { duration, easing: snapEasing } = animation.value.snap;
     settling[side] = true;
     settleId[side] = interpolate({
-      from: state.magnetic[side],
+      from: magneticOffset[side],
       to: 0,
       duration,
       easing: snapEasing,
       interpolationIdCallback: (newId) => settleId[side] = newId,
       callback: (value) => {
-        state.magnetic[side] = value;
+        magneticOffset[side] = value;
+        if (!isVirtual.value) {
+          state.magnetic[side] = value;
+        }
         if (value === 0) {
           settling[side] = false;
           settleId[side] = void 0;
@@ -334,7 +346,10 @@ export function useTrayMagnetism(args) {
     );
     if (Math.abs(target) > EPSILON) {
       cancelSettle(side);
-      state.magnetic[side] = target;
+      magneticOffset[side] = target;
+      if (!isVirtual.value) {
+        state.magnetic[side] = target;
+      }
     } else {
       settleSide(side);
     }
@@ -375,7 +390,7 @@ export function useTrayMagnetism(args) {
     resetAll();
   }
   watch(
-    () => ({ ...state.magnetic }),
+    () => ({ ...magneticOffset }),
     (magnetic) => {
       for (const side of SIDES) {
         const max = pullPx[side];

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

@@ -24,6 +24,7 @@ export interface TrayMagnetism {
     radius?: TrayMagneticRadius;
     pull?: number;
     easing?: EasingKey;
+    virtual?: boolean;
 }
 export type TraySideRecord<T> = Record<TraySide, T>;
 export type TrayTransformAxis = 'both' | 'x' | 'y';
@@ -81,6 +82,11 @@ export interface TrayState {
     elRect: DOMRect | undefined;
     options: RequiredMagicTrayOptions;
 }
+export interface TrayWillSnapToPayload {
+    id: string;
+    side: TraySide;
+    snapPoint: TraySnapPoint;
+}
 export type TrayEvents = {
     beforeSnap: {
         id: string;
@@ -110,4 +116,5 @@ export type TrayEvents = {
     magnet: {
         id: string;
     } & TraySidePayload;
+    willSnapTo: TrayWillSnapToPayload;
 };

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

@@ -12,7 +12,8 @@ const defaultOptions = {
     sides: false,
     radius: 0,
     pull: 0,
-    easing: "easeInOutQuad"
+    easing: "easeInOutQuad",
+    virtual: false
   },
   threshold: {
     lock: 0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.74",
   "contributors": [
     {
       "name": "Robin Scholz",