@maas/vue-equipment 1.1.0 → 1.3.0

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

@@ -0,0 +1,426 @@
+import { computed, onScopeDispose, readonly, ref, toValue, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
+import {
+  cancelEdgeNavigation,
+  guardedReleasePointerCapture,
+  guardedSetPointerCapture,
+  isAndroid,
+  isIOS,
+  isWithinRange,
+  lockSelection,
+  snapCommit,
+  snapRelease
+} from "@maas/vue-equipment/utils";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useTraySnap } from "./useTraySnap.mjs";
+import { SIDES, useTrayUtils } from "./useTrayUtils.mjs";
+export function useTrayGesture(args) {
+  const { id, state, selectionLock = "press", preventEdgeNavigation } = args;
+  const { clampWithOvershoot, isVertical, isDraggableSide } = useTrayUtils();
+  const emitter = useMagicEmitter();
+  const {
+    maxInset,
+    mappedSnapPoints,
+    mappedRanges,
+    rangeAt,
+    snapPointAt,
+    restingInset,
+    findSnapTarget,
+    interpolateDragged
+  } = useTraySnap({ id, state });
+  let lastPendingTarget = void 0;
+  let heldRangeSnap = false;
+  let flicked = false;
+  let cancelPointerup = void 0;
+  let cancelPointermove = void 0;
+  let cancelPointercancel = void 0;
+  let cancelTouchmove = void 0;
+  let cancelTouchend = void 0;
+  let cancelTouchcancel = void 0;
+  let pointerdownTarget = null;
+  let releaseSelection = void 0;
+  const threshold = computed(() => state.options.threshold);
+  const disabled = computed(() => state.options.disabled);
+  const snapMode = computed(() => state.options.snap.mode);
+  const dragMode = computed(() => state.options.drag.mode);
+  const active = ref(false);
+  const hasDragged = computed(() => {
+    const sides = state.draggingSide ? [state.draggingSide] : SIDES;
+    return sides.some(
+      (side) => !isWithinRange({
+        input: state.dragged[side],
+        base: state.lastDragged[side],
+        threshold: toValue(threshold).lock
+      })
+    );
+  });
+  function lockSelectionOnce() {
+    releaseSelection ??= lockSelection();
+  }
+  function canBegin(side) {
+    return !state.dragging && !toValue(disabled) && state.elRect !== void 0 && isDraggableSide({ snapPoints: state.options.snapPoints, side });
+  }
+  function dragBounds(side) {
+    const points = mappedSnapPoints(side);
+    const geometricMax = maxInset(side);
+    if (!points.length) {
+      return { min: 0, max: geometricMax };
+    }
+    return {
+      min: Math.max(0, points[0]),
+      max: Math.min(points[points.length - 1], geometricMax)
+    };
+  }
+  function snapDrag(side) {
+    return {
+      points: mappedSnapPoints(side),
+      ranges: mappedRanges(side),
+      mode: snapMode.value,
+      rest: state.snapped[side],
+      start: state.lastDragged[side],
+      position: state.dragged[side]
+    };
+  }
+  function settleTarget(side) {
+    const target = snapRelease({
+      ...snapDrag(side),
+      committed: state.interpolateTo,
+      flicked,
+      tapped: !hasDragged.value
+    });
+    return restingInset(side, target);
+  }
+  function isSnapDrag(side) {
+    return typeof dragMode.value === "string" ? dragMode.value === "snap" : (dragMode.value?.[side] ?? "free") === "snap";
+  }
+  function computeInset(side, coord) {
+    let newInset = 0;
+    switch (side) {
+      case "top":
+        newInset = coord - state.origin;
+        break;
+      case "bottom":
+        newInset = state.origin - coord;
+        break;
+      case "left":
+        newInset = coord - state.origin;
+        break;
+      case "right":
+        newInset = state.origin - coord;
+        break;
+    }
+    const { min, max } = dragBounds(side);
+    return clampWithOvershoot(
+      newInset,
+      min,
+      max,
+      state.overshoot.outer[side],
+      state.overshoot.inner
+    );
+  }
+  function setDragged(side, coord) {
+    const newInset = computeInset(side, coord);
+    if (newInset === state.dragged[side]) {
+      return;
+    }
+    const prev = state.dragged[side];
+    state.relDirection[side] = newInset < prev ? "below" : "above";
+    state.dragged[side] = newInset;
+  }
+  function snapDragged(side, coord) {
+    const inset = computeInset(side, coord);
+    const target = findSnapTarget(side, inset);
+    if (target === void 0 || target === state.snapped[side]) {
+      return;
+    }
+    state.dragged[side] = target;
+    state.snapped[side] = target;
+    state.activeSnapPoint[side] = snapPointAt(side, target);
+    heldRangeSnap = !mappedSnapPoints(side).includes(target);
+    if (!heldRangeSnap) {
+      emitSnap(side);
+    }
+  }
+  function releaseSnapDrag(side) {
+    if (heldRangeSnap) {
+      emitSnap(side);
+    }
+    heldRangeSnap = false;
+  }
+  function emitSnap(side) {
+    const point = state.activeSnapPoint[side];
+    if (point === void 0) {
+      return;
+    }
+    emitter.emit("beforeSnap", {
+      id: toValue(id),
+      snapPoint: { side, point }
+    });
+    emitter.emit("afterSnap", {
+      id: toValue(id),
+      snapPoint: { side, point }
+    });
+  }
+  function checkPosition(side) {
+    const direction = state.relDirection[side];
+    state.interpolateTo = snapCommit({
+      ...snapDrag(side),
+      distance: toValue(threshold).distance,
+      flicked,
+      flickDirection: direction === "absolute" ? void 0 : direction
+    });
+  }
+  function emitWillSnapTo(side) {
+    const target = settleTarget(side);
+    const isPoint = mappedSnapPoints(side).includes(target);
+    const pending = !isPoint && rangeAt(side, target)?.range || target;
+    if (pending === lastPendingTarget) {
+      return;
+    }
+    lastPendingTarget = pending;
+    const snapPoint = snapPointAt(side, target);
+    if (snapPoint === void 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]);
+    const velocity = elapsed && distance ? distance / elapsed : 0;
+    flicked = velocity > toValue(threshold).momentum;
+  }
+  function resetListeners() {
+    cancelTouchmove?.();
+    cancelTouchend?.();
+    cancelTouchcancel?.();
+    cancelPointerup?.();
+    cancelPointermove?.();
+    cancelPointercancel?.();
+  }
+  function resetDragState() {
+    const side = state.draggingSide;
+    if (side) {
+      state.lastDragged[side] = state.snapped[side];
+    }
+    releaseSelection?.();
+    releaseSelection = void 0;
+    active.value = false;
+    state.dragging = false;
+    state.draggingSide = void 0;
+    state.interpolateTo = void 0;
+  }
+  function settle(side) {
+    const target = settleTarget(side);
+    if (target !== state.snapped[side] || state.interpolateTo !== void 0) {
+      state.snapped[side] = target;
+      state.activeSnapPoint[side] = snapPointAt(side, target);
+    }
+    interpolateDragged({ side, to: target });
+  }
+  function onPointermove(e) {
+    if (e.isTrusted && !e.isPrimary) {
+      return;
+    }
+    const side = state.draggingSide;
+    if (!side) {
+      return;
+    }
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    const coord = isVertical(side) ? e.clientY : e.clientX;
+    if (isSnapDrag(side)) {
+      snapDragged(side, coord);
+    } else {
+      setDragged(side, coord);
+      checkMomentum(side);
+      checkPosition(side);
+      emitWillSnapTo(side);
+    }
+    if (hasDragged.value) {
+      lockSelectionOnce();
+    }
+    emitter.emit("drag", {
+      id: toValue(id),
+      side,
+      value: state.dragged[side]
+    });
+  }
+  function onPointerup(e) {
+    const side = state.draggingSide;
+    if (side) {
+      if (isSnapDrag(side)) {
+        releaseSnapDrag(side);
+      } else {
+        settle(side);
+      }
+      emitter.emit("afterDrag", {
+        id: toValue(id),
+        side,
+        value: state.dragged[side]
+      });
+    }
+    resetDragState();
+    resetListeners();
+    guardedReleasePointerCapture({ event: e, element: pointerdownTarget });
+  }
+  function onTouchmove(e) {
+    const side = state.draggingSide;
+    if (!side) {
+      return;
+    }
+    const firstTouch = e.touches[0];
+    if (!firstTouch) {
+      return;
+    }
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    if (hasDragged.value) {
+      e.preventDefault();
+    }
+    const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
+    if (isSnapDrag(side)) {
+      snapDragged(side, coord);
+    } else {
+      setDragged(side, coord);
+      checkMomentum(side);
+      checkPosition(side);
+      emitWillSnapTo(side);
+    }
+    if (hasDragged.value) {
+      lockSelectionOnce();
+    }
+    emitter.emit("drag", {
+      id: toValue(id),
+      side,
+      value: state.dragged[side]
+    });
+  }
+  function onTouchend() {
+    const side = state.draggingSide;
+    if (side) {
+      if (isSnapDrag(side)) {
+        releaseSnapDrag(side);
+      } else {
+        settle(side);
+      }
+      emitter.emit("afterDrag", {
+        id: toValue(id),
+        side,
+        value: state.dragged[side]
+      });
+    }
+    resetDragState();
+    resetListeners();
+  }
+  function beginDrag(side, coord, target) {
+    active.value = true;
+    state.dragging = true;
+    state.draggingSide = side;
+    state.interpolateTo = void 0;
+    state.dragged[side] += state.magnetic[side];
+    state.magnetic[side] = 0;
+    state.lastDragged[side] = state.dragged[side];
+    lastPendingTarget = void 0;
+    heldRangeSnap = false;
+    flicked = false;
+    pointerdownTarget = target;
+    if (selectionLock === "press") {
+      lockSelectionOnce();
+    }
+    switch (side) {
+      case "top":
+      case "left":
+        state.origin = coord - state.dragged[side];
+        break;
+      case "bottom":
+      case "right":
+        state.origin = coord + state.dragged[side];
+        break;
+    }
+    state.dragStart = /* @__PURE__ */ new Date();
+    emitter.emit("beforeDrag", {
+      id: toValue(id),
+      side,
+      value: state.dragged[side]
+    });
+  }
+  function onCancel() {
+    const side = state.draggingSide;
+    if (active.value && side) {
+      interpolateDragged({ side, to: state.snapped[side] });
+      resetDragState();
+    }
+    resetListeners();
+  }
+  function onPointerdown(side, e) {
+    if (!canBegin(side)) {
+      return;
+    }
+    const coord = isVertical(side) ? e.clientY : e.clientX;
+    const target = e.target instanceof Element ? e.target : null;
+    beginDrag(side, coord, target);
+    guardedSetPointerCapture({ event: e, element: target });
+    resetListeners();
+    cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+    cancelPointercancel = useEventListener(
+      document,
+      "pointercancel",
+      onPointerup
+    );
+    cancelPointermove = useEventListener(
+      document,
+      "pointermove",
+      onPointermove,
+      {
+        passive: false
+      }
+    );
+    cancelTouchend = isIOS() || isAndroid() ? useEventListener(document, "touchend", onTouchend) : void 0;
+    cancelTouchcancel = isIOS() || isAndroid() ? useEventListener(document, "touchcancel", onTouchend) : void 0;
+    onPointermove(e);
+  }
+  function onTouchstart(side, e) {
+    if (toValue(preventEdgeNavigation)) {
+      cancelEdgeNavigation({ event: e });
+    }
+    if (!isAndroid() || !canBegin(side)) {
+      return;
+    }
+    const firstTouch = e.touches[0];
+    if (!firstTouch) {
+      return;
+    }
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
+    beginDrag(side, coord, e.target instanceof Element ? e.target : null);
+    cancelTouchmove?.();
+    cancelTouchmove = useEventListener(document, "touchmove", onTouchmove, {
+      passive: false
+    });
+    cancelTouchend?.();
+    cancelTouchend = useEventListener(document, "touchend", onTouchend, {
+      passive: false
+    });
+    cancelTouchcancel?.();
+    cancelTouchcancel = useEventListener(document, "touchcancel", onTouchend);
+    onTouchmove(e);
+  }
+  watch(disabled, (value) => {
+    if (value) {
+      onCancel();
+    }
+  });
+  onScopeDispose(onCancel, true);
+  return {
+    active: readonly(active),
+    hasDragged,
+    onPointerdown,
+    onTouchstart
+  };
+}

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

@@ -5,19 +5,14 @@ import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useEasings } from "@maas/vue-equipment/composables/useEasings";
 import { useTraySnap } from "./useTraySnap.mjs";
-import { useTrayUtils } from "./useTrayUtils.mjs";
-const SIDES = ["top", "right", "bottom", "left"];
-const EPSILON = 0.5;
+import { SIDES, useTrayUtils } from "./useTrayUtils.mjs";
 export function useTrayMagnetism(args) {
   const { id, elRef, handleRefs, state } = args;
   const { throwError } = useMagicError({
     prefix: "MagicTray",
     source: "useTrayMagnetism"
   });
-  const { mapSnapPoint, mappedSnapPoints, maxInset } = useTraySnap({
-    id,
-    state
-  });
+  const { maxInset } = useTraySnap({ id, state });
   const { flattenSnapPoints } = useTrayUtils();
   const emitter = useMagicEmitter();
   const easings = useEasings();
@@ -42,29 +37,6 @@ export function useTrayMagnetism(args) {
   const enabled = computed(
     () => magneticSides.value.length > 0 && !disabled.value
   );
-  const magneticPoints = computed(
-    () => {
-      const result = {
-        top: [],
-        right: [],
-        bottom: [],
-        left: []
-      };
-      for (const side of magneticSides.value) {
-        const config = sideConfig(side);
-        if (!config || !mappedSnapPoints(side).length) {
-          continue;
-        }
-        result[side] = Object.entries(config).map(([key, direction]) => ({
-          inset: mapSnapPoint(side, coercePoint(key)),
-          direction
-        })).filter(
-          (point) => point.inset === 0 || !!point.inset && !Number.isNaN(point.inset)
-        );
-      }
-      return result;
-    }
-  );
   const progress = {
     top: 0,
     right: 0,
@@ -136,11 +108,11 @@ export function useTrayMagnetism(args) {
     }
   }
   function restDirection(side) {
-    const rest = state.snapped[side];
-    const match = magneticPoints.value[side].find(
-      (point) => Math.abs(point.inset - rest) < EPSILON
-    );
-    return match ? match.direction : null;
+    const point = state.activeSnapPoint[side];
+    if (point === void 0) {
+      return null;
+    }
+    return sideConfig(side)?.[point] ?? null;
   }
   function handleRect(side) {
     const handle = unrefElement(handleRefs[side].value?.[0]);
@@ -169,7 +141,7 @@ export function useTrayMagnetism(args) {
     if (settling[side]) {
       return;
     }
-    if (Math.abs(magneticOffset[side]) <= EPSILON) {
+    if (Math.round(magneticOffset[side]) === 0) {
       resetSide(side);
       return;
     }
@@ -346,7 +318,7 @@ export function useTrayMagnetism(args) {
       -state.dragged[side],
       maxInset(side) - state.dragged[side]
     );
-    if (Math.abs(target) > EPSILON) {
+    if (Math.round(target) !== 0) {
       cancelSettle(side);
       magneticOffset[side] = target;
       if (!isVirtual.value) {

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

@@ -2,7 +2,7 @@ import { toValue, watch } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { clampValue } from "@maas/vue-equipment/utils";
 import { useTraySnap } from "./useTraySnap.mjs";
-const SIDES = ["top", "right", "bottom", "left"];
+import { SIDES } from "./useTrayUtils.mjs";
 export function useTrayProgress(args) {
   const { id, state } = args;
   const emitter = useMagicEmitter();

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

@@ -7,7 +7,6 @@ import {
 } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useTrayUtils } from "./useTrayUtils.mjs";
-const SNAP_TOLERANCE = 0.01;
 function isMapped(value) {
   return value !== void 0 && !Number.isNaN(value);
 }
@@ -118,9 +117,7 @@ export function useTraySnap(args) {
     if (mapped === void 0) {
       return false;
     }
-    return !!rangeAt(side, mapped) || mappedSnapPoints(side).some(
-      (point) => Math.abs(point - mapped) < SNAP_TOLERANCE
-    );
+    return !!rangeAt(side, mapped) || mappedSnapPoints(side).includes(mapped);
   }
   function findSnapTarget(side, inset) {
     const target = snapTargetAt({
@@ -186,6 +183,7 @@ export function useTraySnap(args) {
     }
     const closest = findSnapTarget(side, mapped) ?? mapped;
     state.snapped[side] = closest;
+    state.lastDragged[side] = closest;
     state.activeSnapPoint[side] = snapPointAt(side, closest) ?? snapPoint;
     if (shouldInterpolate) {
       interpolateDragged({ side, to: closest, duration });

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

@@ -1,8 +1,15 @@
-import type { MagicTraySide, MagicTraySnapEntry, MagicTraySnapRange } from '../../types/index.js';
+import type { MagicTraySide, MagicTraySnapEntry, MagicTraySnapRange, TraySnapPoints } from '../../types/index.js';
+export declare const SIDES: Array<MagicTraySide>;
+type IsDraggableSideArgs = {
+    snapPoints: TraySnapPoints;
+    side: MagicTraySide;
+};
 export declare function useTrayUtils(): {
     clampWithOvershoot: (value: number, min: number, max: number, outer: number, inner: number) => any;
     isVertical: (side: MagicTraySide) => side is "top" | "bottom";
     oppositeSide: (side: MagicTraySide) => MagicTraySide;
     isSnapRange: (entry: MagicTraySnapEntry) => entry is MagicTraySnapRange;
     flattenSnapPoints: (entries: Array<MagicTraySnapEntry>) => import("../../types/index.js").MagicTraySnapPoint[];
+    isDraggableSide: (args: IsDraggableSideArgs) => boolean;
 };
+export {};

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

@@ -1,4 +1,5 @@
 import { rubberband } from "@maas/vue-equipment/utils";
+export const SIDES = ["top", "right", "bottom", "left"];
 export function useTrayUtils() {
   function clampWithOvershoot(value, min, max, outer, inner) {
     if (value < min) {
@@ -32,11 +33,16 @@ export function useTrayUtils() {
       (entry) => isSnapRange(entry) ? [entry.min, entry.max] : [entry]
     );
   }
+  function isDraggableSide(args) {
+    const { snapPoints, side } = args;
+    return (snapPoints[side]?.length ?? 0) > 0;
+  }
   return {
     clampWithOvershoot,
     isVertical,
     oppositeSide,
     isSnapRange,
-    flattenSnapPoints
+    flattenSnapPoints,
+    isDraggableSide
   };
 }

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

@@ -19,7 +19,7 @@ const defaultOptions = {
     virtual: false
   },
   threshold: {
-    lock: 0,
+    lock: 8,
     distance: 128,
     momentum: 1
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "contributors": [
     {
       "name": "Robin Scholz",
@@ -78,7 +78,7 @@
     "@floating-ui/vue": "^1 || ^2",
     "@maas/magic-timer": "^1",
     "@maas/vue-autosize": "^1",
-    "@maas/vue-primitive": "^1.4",
+    "@maas/vue-primitive": "^1.5",
     "@nuxt/kit": ">=3",
     "@vueuse/core": ">=12",
     "@vueuse/integrations": ">=12",
@@ -134,8 +134,7 @@
   "scripts": {
     "dev": "turbo run dev --parallel",
     "dev:docs": "turbo run dev --filter=docs",
-    "dev:nuxt": "turbo run dev --filter=nuxt",
-    "build": "turbo run build --filter=!playground",
+    "build": "turbo run build",
     "build:types": "turbo run build:types",
     "build:docs": "pnpm exec playwright install chromium --with-deps && turbo run build --filter=docs",
     "tokens": "mirror tokens && mirror css",