@maas/vue-equipment 1.0.0-beta.72 → 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.71",
+  "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,10 +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);
-  function sideConfig(side) {
-    const { sides } = magnetism.value;
-    return sides ? sides[side] : void 0;
-  }
+  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;
@@ -109,6 +113,10 @@ export function useTrayMagnetism(args) {
   let lastX = 0;
   let lastY = 0;
   let cancelPointermove = void 0;
+  function sideConfig(side) {
+    const { sides } = magnetism.value;
+    return sides ? sides[side] : void 0;
+  }
   function coercePoint(key) {
     return key.endsWith("px") ? key : Number(key);
   }
@@ -149,28 +157,37 @@ 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;
     }
   }
+  function disarm(side) {
+    armedDir[side] = null;
+    latched[side] = false;
+    resetSide(side);
+  }
   function settleSide(side) {
     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;
@@ -180,9 +197,7 @@ export function useTrayMagnetism(args) {
   }
   function resetAll() {
     for (const side of SIDES) {
-      armedDir[side] = null;
-      latched[side] = false;
-      resetSide(side);
+      disarm(side);
     }
   }
   function axisOverflow(value, min, max) {
@@ -195,6 +210,150 @@ export function useTrayMagnetism(args) {
         return 0;
     }
   }
+  function normalizeRadius(radius) {
+    if (typeof radius === "number") {
+      return radius > 0 ? { start: radius, stop: 0, configured: true } : { start: void 0, stop: void 0, configured: false };
+    }
+    const { start, stop } = radius;
+    return { start, stop, configured: start !== void 0 || stop !== void 0 };
+  }
+  function measureAxis(side, x, y, rect, hRect) {
+    let perp = 0;
+    let overflow = 0;
+    let center = 0;
+    switch (side) {
+      case "top": {
+        const edge = rect.top + state.snapped.top;
+        perp = y - edge;
+        overflow = axisOverflow(x, rect.left, rect.right);
+        if (hRect) {
+          center = hRect.top + hRect.height / 2 - edge - state.magnetic.top;
+        }
+        break;
+      }
+      case "bottom": {
+        const edge = rect.bottom - state.snapped.bottom;
+        perp = edge - y;
+        overflow = axisOverflow(x, rect.left, rect.right);
+        if (hRect) {
+          center = edge - (hRect.top + hRect.height / 2) - state.magnetic.bottom;
+        }
+        break;
+      }
+      case "left": {
+        const edge = rect.left + state.snapped.left;
+        perp = x - edge;
+        overflow = axisOverflow(y, rect.top, rect.bottom);
+        if (hRect) {
+          center = hRect.left + hRect.width / 2 - edge - state.magnetic.left;
+        }
+        break;
+      }
+      case "right": {
+        const edge = rect.right - state.snapped.right;
+        perp = edge - x;
+        overflow = axisOverflow(y, rect.top, rect.bottom);
+        if (hRect) {
+          center = edge - (hRect.left + hRect.width / 2) - state.magnetic.right;
+        }
+        break;
+      }
+    }
+    return { perp, overflow, center };
+  }
+  function resolveBand(band, geo) {
+    const { pull, thickness, center } = geo;
+    if (band.configured) {
+      const stop = band.stop ?? pull;
+      const start = band.start ?? stop + (thickness || pull);
+      return { innerEdge: start, outerEdge: -start, span: start - stop };
+    }
+    const anchorHalf = thickness / 2;
+    return {
+      innerEdge: center + anchorHalf,
+      outerEdge: center - anchorHalf,
+      span: anchorHalf / 2
+    };
+  }
+  function updateSide(side, x, y, rect, band) {
+    const direction = restDirection(side);
+    if (!direction) {
+      disarm(side);
+      return;
+    }
+    const allowInner = direction === "inner" || direction === "both";
+    const allowOuter = direction === "outer" || direction === "both";
+    const hRect = handleRect(side);
+    const thickness = hRect ? side === "top" || side === "bottom" ? hRect.height : hRect.width : 0;
+    const pull = magnetism.value.pull > 0 ? magnetism.value.pull : thickness / 4;
+    pullPx[side] = pull;
+    if (pull <= 0) {
+      disarm(side);
+      return;
+    }
+    const { perp, overflow, center } = measureAxis(side, x, y, rect, hRect);
+    const { innerEdge, outerEdge, span } = resolveBand(band, {
+      pull,
+      thickness,
+      center
+    });
+    if (span <= 0) {
+      disarm(side);
+      return;
+    }
+    if (overflow === 0) {
+      switch (true) {
+        case (allowInner && perp >= innerEdge):
+          armedDir[side] = "inner";
+          break;
+        case (allowOuter && perp <= outerEdge):
+          armedDir[side] = "outer";
+          break;
+      }
+    }
+    const dir = armedDir[side];
+    if (!dir) {
+      resetSide(side);
+      return;
+    }
+    let t = 0;
+    let sign = 0;
+    switch (dir) {
+      case "inner":
+        t = clampValue((innerEdge - perp) / span, 0, 1);
+        sign = 1;
+        break;
+      case "outer":
+        t = clampValue((perp - outerEdge) / span, 0, 1);
+        sign = -1;
+        break;
+    }
+    switch (true) {
+      case overflow === 0:
+        latched[side] = t >= 1;
+        break;
+      case !latched[side]:
+        armedDir[side] = null;
+        resetSide(side);
+        return;
+    }
+    const magnitude = overflow === 0 ? easing.value(t) : 1;
+    const offset = sign * pull * magnitude;
+    const target = clampValue(
+      offset,
+      -state.dragged[side],
+      maxInset(side) - state.dragged[side]
+    );
+    if (Math.abs(target) > EPSILON) {
+      cancelSettle(side);
+      magneticOffset[side] = target;
+      if (!isVirtual.value) {
+        state.magnetic[side] = target;
+      }
+    } else {
+      settleSide(side);
+    }
+  }
   function update(x, y) {
     if (state.dragging || disabled.value) {
       resetAll();
@@ -205,124 +364,10 @@ export function useTrayMagnetism(args) {
       resetAll();
       return;
     }
-    const { pull: configuredPull, radius: configuredRadius } = magnetism.value;
+    const band = normalizeRadius(magnetism.value.radius);
     const rect = el.getBoundingClientRect();
     for (const side of magneticSides.value) {
-      const direction = restDirection(side);
-      if (!direction) {
-        armedDir[side] = null;
-        latched[side] = false;
-        resetSide(side);
-        continue;
-      }
-      const allowInner = direction === "inner" || direction === "both";
-      const allowOuter = direction === "outer" || direction === "both";
-      const hRect = handleRect(side);
-      const thickness = hRect ? side === "top" || side === "bottom" ? hRect.height : hRect.width : 0;
-      const anchorHalf = thickness / 2;
-      const radius = configuredRadius > 0 ? configuredRadius : anchorHalf / 2;
-      const pull = configuredPull > 0 ? configuredPull : anchorHalf / 2;
-      pullPx[side] = pull;
-      if (radius <= 0) {
-        armedDir[side] = null;
-        latched[side] = false;
-        resetSide(side);
-        continue;
-      }
-      let perp = 0;
-      let overflow = 0;
-      let center = 0;
-      switch (side) {
-        case "top": {
-          const edge = rect.top + state.snapped.top;
-          perp = y - edge;
-          overflow = axisOverflow(x, rect.left, rect.right);
-          if (hRect) {
-            center = hRect.top + hRect.height / 2 - edge - state.magnetic.top;
-          }
-          break;
-        }
-        case "bottom": {
-          const edge = rect.bottom - state.snapped.bottom;
-          perp = edge - y;
-          overflow = axisOverflow(x, rect.left, rect.right);
-          if (hRect) {
-            center = edge - (hRect.top + hRect.height / 2) - state.magnetic.bottom;
-          }
-          break;
-        }
-        case "left": {
-          const edge = rect.left + state.snapped.left;
-          perp = x - edge;
-          overflow = axisOverflow(y, rect.top, rect.bottom);
-          if (hRect) {
-            center = hRect.left + hRect.width / 2 - edge - state.magnetic.left;
-          }
-          break;
-        }
-        case "right": {
-          const edge = rect.right - state.snapped.right;
-          perp = edge - x;
-          overflow = axisOverflow(y, rect.top, rect.bottom);
-          if (hRect) {
-            center = edge - (hRect.left + hRect.width / 2) - state.magnetic.right;
-          }
-          break;
-        }
-      }
-      const innerEdge = center + anchorHalf;
-      const outerEdge = center - anchorHalf;
-      if (overflow === 0) {
-        switch (true) {
-          case (allowInner && perp >= innerEdge):
-            armedDir[side] = "inner";
-            break;
-          case (allowOuter && perp <= outerEdge):
-            armedDir[side] = "outer";
-            break;
-        }
-      }
-      const dir = armedDir[side];
-      if (!dir) {
-        resetSide(side);
-        continue;
-      }
-      let t = 0;
-      let sign = 0;
-      switch (dir) {
-        case "inner":
-          t = clampValue((innerEdge - perp) / radius, 0, 1);
-          sign = 1;
-          break;
-        case "outer":
-          t = clampValue((perp - outerEdge) / radius, 0, 1);
-          sign = -1;
-          break;
-      }
-      switch (true) {
-        case overflow === 0:
-          latched[side] = t >= 1;
-          break;
-        case !latched[side]:
-          armedDir[side] = null;
-          resetSide(side);
-          continue;
-      }
-      const magnitude = overflow === 0 ? easing.value(t) : 1;
-      const offset = sign * pull * magnitude;
-      const target = clampValue(
-        offset,
-        -state.dragged[side],
-        maxInset(side) - state.dragged[side]
-      );
-      switch (true) {
-        case Math.abs(target) > EPSILON:
-          cancelSettle(side);
-          state.magnetic[side] = target;
-          break;
-        default:
-          settleSide(side);
-      }
+      updateSide(side, x, y, rect, band);
     }
   }
   function onPointermove(e) {
@@ -345,7 +390,7 @@ export function useTrayMagnetism(args) {
     resetAll();
   }
   watch(
-    () => ({ ...state.magnetic }),
+    () => ({ ...magneticOffset }),
     (magnetic) => {
       for (const side of SIDES) {
         const max = pullPx[side];
@@ -362,6 +407,18 @@ export function useTrayMagnetism(args) {
     },
     { deep: true }
   );
+  watch(
+    () => ({ ...state.snapped }),
+    (next, prev) => {
+      for (const side of SIDES) {
+        if (next[side] !== prev[side]) {
+          armedDir[side] = null;
+          latched[side] = false;
+          settleSide(side);
+        }
+      }
+    }
+  );
   watch(
     () => [enabled.value, magnetism.value.sides, state.options.snapPoints],
     () => {

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

@@ -15,11 +15,16 @@ export type TraySnapPoints = Partial<Record<TraySide, TraySnapPoint[]>>;
 export type TrayMagneticDirection = 'inner' | 'outer' | 'both';
 export type TrayMagneticSide = Partial<Record<TraySnapPoint, TrayMagneticDirection>>;
 export type TrayMagneticSides = false | Partial<Record<TraySide, TrayMagneticSide>>;
+export type TrayMagneticRadius = number | {
+    start?: number;
+    stop?: number;
+};
 export interface TrayMagnetism {
     sides?: TrayMagneticSides;
-    radius?: number;
+    radius?: TrayMagneticRadius;
     pull?: number;
     easing?: EasingKey;
+    virtual?: boolean;
 }
 export type TraySideRecord<T> = Record<TraySide, T>;
 export type TrayTransformAxis = 'both' | 'x' | 'y';
@@ -77,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;
@@ -106,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.72",
+  "version": "1.0.0-beta.74",
   "contributors": [
     {
       "name": "Robin Scholz",