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

package/dist/nuxt/module.json

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

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

@@ -97,7 +97,7 @@ export function useTrayDrag(args) {
     const right = Math.max(0, state.dragged.right + state.magnetic.right);
     const bottom = Math.max(0, state.dragged.bottom + state.magnetic.bottom);
     const left = Math.max(0, state.dragged.left + state.magnetic.left);
-    return `inset(${top}px ${right}px ${bottom}px ${left}px round var(--magic-tray-radius, 0px))`;
+    return `inset(var(--magic-tray-clip-top, ${top}px) var(--magic-tray-clip-right, ${right}px) var(--magic-tray-clip-bottom, ${bottom}px) var(--magic-tray-clip-left, ${left}px) round var(--magic-tray-radius-top-left, var(--magic-tray-radius, 0px)) var(--magic-tray-radius-top-right, var(--magic-tray-radius, 0px)) var(--magic-tray-radius-bottom-right, var(--magic-tray-radius, 0px)) var(--magic-tray-radius-bottom-left, var(--magic-tray-radius, 0px)))`;
   });
   function handleStyle(side) {
     const rest = `${state.dragged[side]}px`;

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

@@ -136,14 +136,9 @@ export function useTrayMagnetism(args) {
     );
     return match ? match.direction : null;
   }
-  function handleHalfThickness(side) {
+  function handleRect(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;
+    return handle ? handle.getBoundingClientRect() : null;
   }
   function cancelSettle(side) {
     if (settleId[side] !== void 0) {
@@ -222,7 +217,9 @@ export function useTrayMagnetism(args) {
       }
       const allowInner = direction === "inner" || direction === "both";
       const allowOuter = direction === "outer" || direction === "both";
-      const anchorHalf = handleHalfThickness(side);
+      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;
@@ -234,30 +231,53 @@ export function useTrayMagnetism(args) {
       }
       let perp = 0;
       let overflow = 0;
+      let center = 0;
       switch (side) {
-        case "top":
-          perp = y - (rect.top + state.snapped.top);
+        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":
-          perp = rect.bottom - state.snapped.bottom - y;
+        }
+        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":
-          perp = x - (rect.left + state.snapped.left);
+        }
+        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":
-          perp = rect.right - state.snapped.right - x;
+        }
+        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 >= anchorHalf):
+          case (allowInner && perp >= innerEdge):
             armedDir[side] = "inner";
             break;
-          case (allowOuter && perp <= -anchorHalf):
+          case (allowOuter && perp <= outerEdge):
             armedDir[side] = "outer";
             break;
         }
@@ -271,11 +291,11 @@ export function useTrayMagnetism(args) {
       let sign = 0;
       switch (dir) {
         case "inner":
-          t = clampValue((anchorHalf - perp) / radius, 0, 1);
+          t = clampValue((innerEdge - perp) / radius, 0, 1);
           sign = 1;
           break;
         case "outer":
-          t = clampValue((anchorHalf + perp) / radius, 0, 1);
+          t = clampValue((perp - outerEdge) / radius, 0, 1);
           sign = -1;
           break;
       }

package/package.json

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