@maas/vue-equipment 1.0.0-beta.69 → 1.0.0-beta.70

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -109,7 +109,7 @@ const functions$1 = [
 	{
 		name: "MagicTray",
 		"package": "plugins",
-		lastUpdated: 1781787163000,
+		lastUpdated: 1781870441000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicTray/",
 		description: "MagicTray is a flexible"
 	},

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="magic-tray-content"
-    :data-id="mappedId"
+    :data-id="instanceId"
     :data-dragging="state.dragging"
     :data-dragging-side="state.draggingSide"
     :data-dragged="hasDragged"
@@ -35,6 +35,7 @@
         <magic-tray-handle
           v-for="side in visibleHandles"
           :key="side"
+          :ref="`${side}Handle`"
           :side="side"
           :style="handleStyle(side)"
           @pointerdown="guardedPointerdown(side, $event)"
@@ -56,7 +57,12 @@
 </template>
 
 <script setup>
-import { useTemplateRef, useSlots, computed, inject } from "vue";
+import {
+  useTemplateRef,
+  useSlots,
+  computed,
+  inject
+} from "vue";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
@@ -78,10 +84,19 @@ magicError.assert(instanceId, {
   message: "MagicTrayContent must be nested inside MagicTrayProvider",
   errorCode: "missing_instance_id"
 });
-const mappedId = instanceId ?? "";
-const { initializeState } = useTrayState(mappedId);
+const { initializeState } = useTrayState(instanceId);
 const state = initializeState();
 const elRef = useTemplateRef("el");
+const topHandleRef = useTemplateRef("topHandle");
+const rightHandleRef = useTemplateRef("rightHandle");
+const bottomHandleRef = useTemplateRef("bottomHandle");
+const leftHandleRef = useTemplateRef("leftHandle");
+const handleRefs = {
+  top: topHandleRef,
+  right: rightHandleRef,
+  bottom: bottomHandleRef,
+  left: leftHandleRef
+};
 const disabled = computed(() => state.options.disabled);
 const inset = computed(() => state.options.inset);
 const slots = useSlots();
@@ -93,11 +108,11 @@ const {
   onHandlePointerdown,
   onHandleTouchstart
 } = useTrayDrag({
-  id: mappedId,
+  id: instanceId,
   elRef
 });
-useTrayMagnetism({ id: mappedId, elRef, state });
-useTrayProgress({ id: mappedId, state });
+useTrayMagnetism({ id: instanceId, elRef, handleRefs, state });
+useTrayProgress({ id: instanceId, state });
 const visibleHandles = computed(() => {
   const { handles } = state.options;
   if (handles === false) {
@@ -174,7 +189,6 @@ function guardedTouchstart(side, event) {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  will-change: clip-path;
 }
 
 .magic-tray-content__bg {
@@ -229,4 +243,8 @@ dialog.magic-tray-content__inner {
 .magic-tray-content[data-disabled='true'] .magic-tray-content__handles {
   display: none;
 }
+
+.magic-tray-content[data-dragging='true'] .magic-tray-handle {
+  cursor: var(--magic-tray-handle-cursor-dragging, grabbing);
+}
 </style>

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

@@ -29,6 +29,7 @@ const orientation = computed(
   pointer-events: auto;
   touch-action: none;
   user-select: none;
+  cursor: var(--magic-tray-handle-cursor, grab);
 }
 
 .magic-tray-handle[data-side='top'],
@@ -52,10 +53,12 @@ const orientation = computed(
     --magic-tray-handle-height-top,
     var(--magic-tray-handle-height-x, 4rem)
   );
-  cursor: var(--magic-tray-handle-cursor-top, row-resize);
   transform: translate(
     var(--magic-tray-handle-offset-x-top, 0%),
-    var(--magic-tray-handle-offset-y-top, -50%)
+    calc(
+      var(--magic-tray-handle-offset-y-top, -50%) +
+        var(--magic-tray-handle-magnetic, 0px)
+    )
   );
 }
 
@@ -68,10 +71,12 @@ const orientation = computed(
     --magic-tray-handle-height-bottom,
     var(--magic-tray-handle-height-x, 4rem)
   );
-  cursor: var(--magic-tray-handle-cursor-bottom, row-resize);
   transform: translate(
     var(--magic-tray-handle-offset-x-bottom, 0%),
-    var(--magic-tray-handle-offset-y-bottom, 50%)
+    calc(
+      var(--magic-tray-handle-offset-y-bottom, 50%) -
+        var(--magic-tray-handle-magnetic, 0px)
+    )
   );
 }
 
@@ -84,9 +89,11 @@ const orientation = computed(
     --magic-tray-handle-height-left,
     var(--magic-tray-handle-height-y, 100%)
   );
-  cursor: var(--magic-tray-handle-cursor-left, col-resize);
   transform: translate(
-    var(--magic-tray-handle-offset-x-left, -50%),
+    calc(
+      var(--magic-tray-handle-offset-x-left, -50%) +
+        var(--magic-tray-handle-magnetic, 0px)
+    ),
     var(--magic-tray-handle-offset-y-left, 0%)
   );
 }
@@ -100,9 +107,11 @@ const orientation = computed(
     --magic-tray-handle-height-right,
     var(--magic-tray-handle-height-y, 100%)
   );
-  cursor: var(--magic-tray-handle-cursor-right, col-resize);
   transform: translate(
-    var(--magic-tray-handle-offset-x-right, 50%),
+    calc(
+      var(--magic-tray-handle-offset-x-right, 50%) -
+        var(--magic-tray-handle-magnetic, 0px)
+    ),
     var(--magic-tray-handle-offset-y-right, 0%)
   );
 }

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

@@ -44,9 +44,3 @@ const transform = computed(() => {
   return `translate3d(${x}px, ${y}px, 0)`;
 });
 </script>
-
-<style>
-.magic-tray-transform {
-  will-change: transform;
-}
-</style>

package/dist/plugins/MagicTray/src/composables/private/useTrayDrag.d.ts

@@ -11,21 +11,25 @@ export declare function useTrayDrag(args: UseTrayDragArgs): {
         top: string;
         left: string;
         right: string;
+        '--magic-tray-handle-magnetic': string;
         bottom?: undefined;
     } | {
         bottom: string;
         left: string;
         right: string;
+        '--magic-tray-handle-magnetic': string;
         top?: undefined;
     } | {
         left: string;
         top: string;
         bottom: string;
+        '--magic-tray-handle-magnetic': string;
         right?: undefined;
     } | {
         right: string;
         top: string;
         bottom: string;
+        '--magic-tray-handle-magnetic': string;
         left?: undefined;
     };
     hasDragged: import("vue").ComputedRef<boolean>;

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

@@ -100,16 +100,37 @@ export function useTrayDrag(args) {
     return `inset(${top}px ${right}px ${bottom}px ${left}px round var(--magic-tray-radius, 0px))`;
   });
   function handleStyle(side) {
-    const offset = `${state.dragged[side] + state.magnetic[side]}px`;
+    const rest = `${state.dragged[side]}px`;
+    const magnetic = `${state.magnetic[side]}px`;
     switch (side) {
       case "top":
-        return { top: offset, left: "0px", right: "0px" };
+        return {
+          top: rest,
+          left: "0px",
+          right: "0px",
+          "--magic-tray-handle-magnetic": magnetic
+        };
       case "bottom":
-        return { bottom: offset, left: "0px", right: "0px" };
+        return {
+          bottom: rest,
+          left: "0px",
+          right: "0px",
+          "--magic-tray-handle-magnetic": magnetic
+        };
       case "left":
-        return { left: offset, top: "0px", bottom: "0px" };
+        return {
+          left: rest,
+          top: "0px",
+          bottom: "0px",
+          "--magic-tray-handle-magnetic": magnetic
+        };
       case "right":
-        return { right: offset, top: "0px", bottom: "0px" };
+        return {
+          right: rest,
+          top: "0px",
+          bottom: "0px",
+          "--magic-tray-handle-magnetic": magnetic
+        };
     }
   }
   async function getSizes() {

package/dist/plugins/MagicTray/src/composables/private/useTrayMagnetism.d.ts

@@ -1,8 +1,9 @@
-import { type Ref, type MaybeRef } from 'vue';
-import type { TrayState } from '../../types/index.js';
+import { type Ref, type ShallowRef, type MaybeRef, type ComponentPublicInstance } from 'vue';
+import type { TrayState, TraySide } from '../../types/index.js';
 type UseTrayMagnetismArgs = {
     id: MaybeRef<string>;
     elRef: Ref<HTMLElement | null>;
+    handleRefs: Record<TraySide, Readonly<ShallowRef<ComponentPublicInstance[] | null>>>;
     state: TrayState;
 };
 export declare function useTrayMagnetism(args: UseTrayMagnetismArgs): {};

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

@@ -5,7 +5,7 @@ import {
   onScopeDispose
 } from "vue";
 import { unrefElement, useEventListener, useRafFn } from "@vueuse/core";
-import { clampValue } from "@maas/vue-equipment/utils";
+import { clampValue, interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useEasings } from "@maas/vue-equipment/composables/useEasings";
@@ -13,7 +13,7 @@ import { useTraySnap } from "./useTraySnap.mjs";
 const SIDES = ["top", "right", "bottom", "left"];
 const EPSILON = 0.5;
 export function useTrayMagnetism(args) {
-  const { id, elRef, state } = args;
+  const { id, elRef, handleRefs, state } = args;
   const { throwError } = useMagicError({
     prefix: "MagicTray",
     source: "useTrayMagnetism"
@@ -27,6 +27,7 @@ export function useTrayMagnetism(args) {
   const magnetism = computed(() => state.options.magnetism);
   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;
@@ -62,11 +63,17 @@ export function useTrayMagnetism(args) {
     }
     return result;
   });
-  const engaged = {
-    top: false,
-    right: false,
-    bottom: false,
-    left: false
+  const progress = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+  const pullPx = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
   };
   const armedDir = {
     top: null,
@@ -74,11 +81,23 @@ export function useTrayMagnetism(args) {
     bottom: null,
     left: null
   };
-  const progress = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
+  const latched = {
+    top: false,
+    right: false,
+    bottom: false,
+    left: false
+  };
+  const settleId = {
+    top: void 0,
+    right: void 0,
+    bottom: void 0,
+    left: void 0
+  };
+  const settling = {
+    top: false,
+    right: false,
+    bottom: false,
+    left: false
   };
   const { resume, pause } = useRafFn(
     () => {
@@ -117,24 +136,69 @@ export function useTrayMagnetism(args) {
     );
     return match ? match.direction : null;
   }
+  function handleHalfThickness(side) {
+    const handle = unrefElement(handleRefs[side].value?.[0]);
+    if (!handle) {
+      return 0;
+    }
+    const rect = handle.getBoundingClientRect();
+    const size = side === "top" || side === "bottom" ? rect.height : rect.width;
+    return size / 2;
+  }
+  function cancelSettle(side) {
+    if (settleId[side] !== void 0) {
+      cancelAnimationFrame(settleId[side]);
+      settleId[side] = void 0;
+    }
+    settling[side] = false;
+  }
   function resetSide(side) {
+    cancelSettle(side);
     if (state.magnetic[side] !== 0) {
       state.magnetic[side] = 0;
     }
   }
+  function settleSide(side) {
+    if (settling[side]) {
+      return;
+    }
+    if (Math.abs(state.magnetic[side]) <= EPSILON) {
+      resetSide(side);
+      return;
+    }
+    const { duration, easing: snapEasing } = animation.value.snap;
+    settling[side] = true;
+    settleId[side] = interpolate({
+      from: state.magnetic[side],
+      to: 0,
+      duration,
+      easing: snapEasing,
+      interpolationIdCallback: (newId) => settleId[side] = newId,
+      callback: (value) => {
+        state.magnetic[side] = value;
+        if (value === 0) {
+          settling[side] = false;
+          settleId[side] = void 0;
+        }
+      }
+    });
+  }
   function resetAll() {
     for (const side of SIDES) {
+      armedDir[side] = null;
+      latched[side] = false;
       resetSide(side);
     }
   }
   function axisOverflow(value, min, max) {
-    if (value < min) {
-      return min - value;
+    switch (true) {
+      case value < min:
+        return min - value;
+      case value > max:
+        return value - max;
+      default:
+        return 0;
     }
-    if (value > max) {
-      return value - max;
-    }
-    return 0;
   }
   function update(x, y) {
     if (state.dragging || disabled.value) {
@@ -146,22 +210,28 @@ export function useTrayMagnetism(args) {
       resetAll();
       return;
     }
-    const { radius, pull } = magnetism.value;
-    if (radius <= 0) {
-      resetAll();
-      return;
-    }
+    const { pull: configuredPull, radius: configuredRadius } = magnetism.value;
     const rect = el.getBoundingClientRect();
     for (const side of magneticSides.value) {
       const direction = restDirection(side);
       if (!direction) {
         armedDir[side] = null;
-        engaged[side] = false;
+        latched[side] = false;
         resetSide(side);
         continue;
       }
       const allowInner = direction === "inner" || direction === "both";
       const allowOuter = direction === "outer" || direction === "both";
+      const anchorHalf = handleHalfThickness(side);
+      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;
       switch (side) {
@@ -182,40 +252,57 @@ export function useTrayMagnetism(args) {
           overflow = axisOverflow(y, rect.top, rect.bottom);
           break;
       }
-      if (perp > radius) {
-        armedDir[side] = allowInner ? "inner" : null;
-        engaged[side] = false;
-        resetSide(side);
-        continue;
+      if (overflow === 0) {
+        switch (true) {
+          case (allowInner && perp >= anchorHalf):
+            armedDir[side] = "inner";
+            break;
+          case (allowOuter && perp <= -anchorHalf):
+            armedDir[side] = "outer";
+            break;
+        }
       }
-      if (perp < -radius) {
-        armedDir[side] = allowOuter ? "outer" : null;
-        engaged[side] = false;
+      const dir = armedDir[side];
+      if (!dir) {
         resetSide(side);
         continue;
       }
-      const gap = Math.hypot(perp, overflow);
-      if (gap > radius) {
-        if (engaged[side]) {
-          armedDir[side] = null;
-          engaged[side] = false;
-        }
-        resetSide(side);
-        continue;
+      let t = 0;
+      let sign = 0;
+      switch (dir) {
+        case "inner":
+          t = clampValue((anchorHalf - perp) / radius, 0, 1);
+          sign = 1;
+          break;
+        case "outer":
+          t = clampValue((anchorHalf + perp) / radius, 0, 1);
+          sign = -1;
+          break;
       }
-      if (!armedDir[side]) {
-        resetSide(side);
-        continue;
+      switch (true) {
+        case overflow === 0:
+          latched[side] = t >= 1;
+          break;
+        case !latched[side]:
+          armedDir[side] = null;
+          resetSide(side);
+          continue;
       }
-      const eased = easing.value((radius - gap) / radius);
-      const magnitude = pull * eased;
-      const offset = armedDir[side] === "outer" ? -magnitude : magnitude;
-      state.magnetic[side] = clampValue(
+      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]
       );
-      engaged[side] = true;
+      switch (true) {
+        case Math.abs(target) > EPSILON:
+          cancelSettle(side);
+          state.magnetic[side] = target;
+          break;
+        default:
+          settleSide(side);
+      }
     }
   }
   function onPointermove(e) {
@@ -237,21 +324,12 @@ export function useTrayMagnetism(args) {
     pause();
     resetAll();
   }
-  watch(
-    () => state.draggingSide,
-    (side) => {
-      if (side && enabled.value) {
-        armedDir[side] = null;
-        engaged[side] = false;
-      }
-    }
-  );
   watch(
     () => ({ ...state.magnetic }),
     (magnetic) => {
-      const { pull } = magnetism.value;
       for (const side of SIDES) {
-        const value = pull > 0 ? clampValue(magnetic[side] / pull, -1, 1) : 0;
+        const max = pullPx[side];
+        const value = max > 0 ? clampValue(magnetic[side] / max, -1, 1) : 0;
         if (value !== progress[side]) {
           progress[side] = value;
           emitter.emit("magnet", {

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

@@ -10,8 +10,8 @@ const defaultOptions = {
   handles: true,
   magnetism: {
     sides: false,
-    radius: 80,
-    pull: 24,
+    radius: 0,
+    pull: 0,
     easing: "easeInOutQuad"
   },
   threshold: {

package/package.json

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