@maas/vue-equipment 1.0.1 → 1.1.0

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -45,7 +45,7 @@ const functions$1 = [
 	{
 		name: "MagicDrawer",
 		"package": "plugins",
-		lastUpdated: 1784033815000,
+		lastUpdated: 1792678394000,
 		docs: "https://vue.equipment/plugins/MagicDrawer",
 		description: "MagicDrawer is a flexible"
 	},
@@ -122,7 +122,7 @@ const functions$1 = [
 	{
 		name: "MagicTray",
 		"package": "plugins",
-		lastUpdated: 1787844782000,
+		lastUpdated: 1792675743000,
 		docs: "https://vue.equipment/plugins/MagicTray",
 		description: "MagicTray is a flexible"
 	},

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

@@ -6,7 +6,7 @@ import MagicDrawerContent from './src/components/MagicDrawerContent.vue.js';
 import MagicDrawerTrigger from './src/components/MagicDrawerTrigger.vue.js';
 import { useMagicDrawer } from './src/composables/useMagicDrawer.js';
 import type { Plugin } from 'vue';
-import type { MagicDrawerOptions, MagicDrawerSnapPoint, MagicDrawerWillSnapToPayload } from './src/types/index.js';
+import type { MagicDrawerOptions, MagicDrawerSnapPoint, MagicDrawerSnapRange, MagicDrawerSnapEntry, MagicDrawerWillSnapToPayload } from './src/types/index.js';
 declare const MagicDrawerPlugin: Plugin;
 export { MagicDrawerPlugin, MagicDrawer, MagicDrawerProvider, MagicDrawerTeleport, MagicDrawerBackdrop, MagicDrawerContent, MagicDrawerTrigger, useMagicDrawer, };
-export type { MagicDrawerOptions, MagicDrawerSnapPoint, MagicDrawerWillSnapToPayload, };
+export type { MagicDrawerOptions, MagicDrawerSnapPoint, MagicDrawerSnapRange, MagicDrawerSnapEntry, MagicDrawerWillSnapToPayload, };

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

@@ -21,7 +21,9 @@ import {
   guardedSetPointerCapture,
   isAndroid,
   isIOS,
-  isWithinRange
+  isWithinRange,
+  snapCommit,
+  snapRelease
 } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
@@ -69,10 +71,12 @@ export function useDrawerDrag(args) {
     absDirectionX,
     absDirectionY,
     elRect,
-    wrapperRect
+    wrapperRect,
+    activeSnapPoint
   } = toRefs(state);
   const { isActive, close } = useMagicDrawer(id);
   let lastPendingTarget = void 0;
+  let flicked = false;
   let pointerdownTarget = void 0;
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
@@ -99,22 +103,23 @@ export function useDrawerDrag(args) {
     () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
   );
   const snapMode = computed(() => toValue(snap).mode);
-  const draggedRefX = computed(
-    () => snapMode.value === "step" ? lastDraggedX.value : draggedX.value
-  );
-  const draggedRefY = computed(
-    () => snapMode.value === "step" ? lastDraggedY.value : draggedY.value
-  );
+  const isVertical = computed(() => {
+    const side = toValue(position);
+    return side === "top" || side === "bottom";
+  });
   const {
     snappedY,
     snappedX,
-    activeSnapPoint,
-    snapTo,
-    snapPointsMap,
-    interpolateDragged,
-    findClosestSnapPoint,
     drawerHeight,
-    drawerWidth
+    drawerWidth,
+    mappedSnapPoints,
+    mappedRanges,
+    rangeAt,
+    snapPointAt,
+    restingOffset,
+    isSnapTarget,
+    snapTo,
+    interpolateDragged
   } = useDrawerSnap({
     id,
     wrapperRect,
@@ -124,7 +129,8 @@ export function useDrawerDrag(args) {
     position,
     overshoot,
     draggedY,
-    draggedX
+    draggedX,
+    activeSnapPoint
   });
   const { canDrag, canInterpolate, lockScroll } = useDrawerGuards({
     elRef,
@@ -142,96 +148,79 @@ export function useDrawerDrag(args) {
     wrapperRect.value = wrapper ? markRaw(wrapper.getBoundingClientRect()) : void 0;
     await nextTick();
   }
-  function checkPosition() {
-    const distanceX = Math.abs(draggedX.value - lastDraggedX.value);
-    const distanceY = Math.abs(draggedY.value - lastDraggedY.value);
-    switch (position) {
-      case "bottom":
-      case "top": {
-        if (distanceY > toValue(threshold).distance) {
-          const snapPointY = findClosestSnapPoint({
-            draggedX: 0,
-            draggedY: draggedRefY.value,
-            direction: relDirectionY.value
-          });
-          if (Math.abs(snapPointY ?? 0) === drawerHeight.value) {
-            shouldClose.value = true;
-          } else {
-            interpolateTo.value = snapPointY;
-          }
-        }
-        break;
-      }
-      case "right":
-      case "left": {
-        if (distanceX > toValue(threshold).distance) {
-          const snapPointX = findClosestSnapPoint({
-            draggedX: draggedRefX.value,
-            draggedY: 0,
-            direction: relDirectionX.value
-          });
-          if (Math.abs(snapPointX ?? 0) === drawerWidth.value) {
-            shouldClose.value = true;
-          } else {
-            interpolateTo.value = snapPointX;
-          }
-        }
-        break;
-      }
+  function snapDrag() {
+    const layout = {
+      points: mappedSnapPoints.value,
+      ranges: mappedRanges.value,
+      mode: snapMode.value
+    };
+    return isVertical.value ? {
+      ...layout,
+      rest: snappedY.value,
+      start: lastDraggedY.value,
+      position: draggedY.value
+    } : {
+      ...layout,
+      rest: snappedX.value,
+      start: lastDraggedX.value,
+      position: draggedX.value
+    };
+  }
+  function isClosing(offset) {
+    const extent = isVertical.value ? drawerHeight.value : drawerWidth.value;
+    if (extent <= 0) {
+      return false;
+    }
+    if (Math.abs(offset) === extent) {
+      return true;
     }
+    const side = toValue(position);
+    const closed = side === "bottom" || side === "right" ? extent : -extent;
+    const rest = isVertical.value ? snappedY.value : snappedX.value;
+    const range = rangeAt(offset);
+    const reachesClosed = range?.min === closed || range?.max === closed;
+    const towardClosed = Math.abs(closed - offset) < Math.abs(closed - rest);
+    return hasDragged.value && reachesClosed && towardClosed && Math.abs(closed - offset) <= toValue(threshold).distance;
+  }
+  function settleTarget() {
+    const target = snapRelease({
+      ...snapDrag(),
+      committed: interpolateTo.value,
+      flicked,
+      tapped: !hasDragged.value
+    });
+    return restingOffset(target);
   }
   function checkMomentum() {
     const elapsed = Date.now() - dragStart.value.getTime();
-    const distanceX = Math.abs(draggedX.value - lastDraggedX.value);
-    const distanceY = Math.abs(draggedY.value - lastDraggedY.value);
-    const velocityX = elapsed && distanceX ? distanceX / elapsed : 0;
-    const velocityY = elapsed && distanceY ? distanceY / elapsed : 0;
-    switch (position) {
-      case "bottom":
-      case "top": {
-        if (velocityY > toValue(threshold).momentum) {
-          const snapPointY = findClosestSnapPoint({
-            draggedX: 0,
-            draggedY: draggedRefY.value,
-            direction: relDirectionY.value
-          });
-          if (Math.abs(snapPointY ?? 0) === drawerHeight.value) {
-            shouldClose.value = true;
-          } else {
-            interpolateTo.value = snapPointY;
-          }
-        }
-        break;
-      }
-      case "right":
-      case "left": {
-        if (velocityX > toValue(threshold).momentum) {
-          const snapPointX = findClosestSnapPoint({
-            draggedX: draggedRefX.value,
-            draggedY,
-            direction: relDirectionX.value
-          });
-          if (Math.abs(snapPointX ?? 0) === drawerWidth.value) {
-            shouldClose.value = true;
-          } else {
-            interpolateTo.value = snapPointX;
-          }
-        }
-        break;
-      }
-    }
+    const { position: dragged, start } = snapDrag();
+    const distance = Math.abs(dragged - start);
+    const velocity = elapsed && distance ? distance / elapsed : 0;
+    flicked = velocity > toValue(threshold).momentum;
+  }
+  function checkPosition() {
+    const direction = isVertical.value ? relDirectionY.value : relDirectionX.value;
+    interpolateTo.value = snapCommit({
+      ...snapDrag(),
+      distance: toValue(threshold).distance,
+      flicked,
+      flickDirection: direction === "absolute" ? void 0 : direction
+    });
+    shouldClose.value = isClosing(settleTarget());
   }
   function emitWillSnapTo() {
-    const target = interpolateTo.value || interpolateTo.value === 0 ? interpolateTo.value : position === "top" || position === "bottom" ? snappedY.value : snappedX.value;
     if (shouldClose.value) {
       return;
     }
-    if (target === lastPendingTarget) {
+    const target = settleTarget();
+    const isPoint = mappedSnapPoints.value.includes(target);
+    const pending = !isPoint && rangeAt(target)?.range || target;
+    if (pending === lastPendingTarget) {
       return;
     }
-    lastPendingTarget = target;
-    const snapPoint = snapPointsMap.value[target];
-    if (!snapPoint && snapPoint !== 0) {
+    lastPendingTarget = pending;
+    const snapPoint = snapPointAt(target);
+    if (snapPoint === void 0) {
       return;
     }
     emitter.emit("willSnapTo", {
@@ -239,6 +228,27 @@ export function useDrawerDrag(args) {
       snapPoint
     });
   }
+  function settle(target) {
+    if (shouldClose.value) {
+      close();
+      return;
+    }
+    const destination = settleTarget();
+    const snapped = isVertical.value ? snappedY.value : snappedX.value;
+    if (destination === snapped && interpolateTo.value === void 0) {
+      interpolateDragged({ to: snapped });
+      return;
+    }
+    activeSnapPoint.value = snapPointAt(destination);
+    if (isVertical.value) {
+      snappedY.value = destination;
+    } else {
+      snappedX.value = destination;
+    }
+    if (scrollLock && scrollLock.value || canInterpolate(target)) {
+      interpolateDragged({ to: destination });
+    }
+  }
   function setDragged({ x, y }) {
     const os = toValue(overshoot);
     switch (position) {
@@ -336,14 +346,23 @@ export function useDrawerDrag(args) {
       resetSnapState();
     }
   }
+  function isUnknownSnapPoint(snapPoint) {
+    return !!wrapperRect.value && !isSnapTarget(snapPoint);
+  }
   function snapToCallback(payload) {
     if (payload.id === toValue(id)) {
+      const snapPoint = payload.snapPoint;
       if (!toValue(isActive)) {
         logWarning("Cannot snap to point when drawer is not open");
         return;
+      } else if (isUnknownSnapPoint(snapPoint)) {
+        logWarning(
+          `Cannot snap to ${snapPoint}, which is neither a snap point nor inside a range`
+        );
+        return;
       } else {
         snapTo({
-          snapPoint: payload.snapPoint,
+          snapPoint,
           interpolate: true,
           duration: payload.duration
         });
@@ -414,41 +433,7 @@ export function useDrawerDrag(args) {
     });
   }
   function onPointerup(e) {
-    if (shouldClose.value) {
-      close();
-    } else if (interpolateTo.value || interpolateTo.value === 0) {
-      if (scrollLock && scrollLock.value || canInterpolate(e.target)) {
-        interpolateDragged({
-          to: interpolateTo.value
-        });
-      }
-      activeSnapPoint.value = snapPointsMap.value[interpolateTo.value];
-      switch (position) {
-        case "bottom":
-        case "top":
-          snappedY.value = interpolateTo.value;
-          break;
-        case "right":
-        case "left":
-          snappedX.value = interpolateTo.value;
-          break;
-      }
-    } else {
-      switch (position) {
-        case "bottom":
-        case "top":
-          interpolateDragged({
-            to: snappedY.value
-          });
-          break;
-        case "right":
-        case "left":
-          interpolateDragged({
-            to: snappedX.value
-          });
-          break;
-      }
-    }
+    settle(e.target);
     emitter.emit("afterDrag", {
       id: toValue(id),
       x: draggedX.value,
@@ -498,41 +483,7 @@ export function useDrawerDrag(args) {
     });
   }
   function onTouchend(e) {
-    if (shouldClose.value) {
-      close();
-    } else if (interpolateTo.value || interpolateTo.value === 0) {
-      if (scrollLock && scrollLock.value || canInterpolate(e.target)) {
-        interpolateDragged({
-          to: interpolateTo.value
-        });
-      }
-      activeSnapPoint.value = snapPointsMap.value[interpolateTo.value];
-      switch (position) {
-        case "bottom":
-        case "top":
-          snappedY.value = interpolateTo.value;
-          break;
-        case "right":
-        case "left":
-          snappedX.value = interpolateTo.value;
-          break;
-      }
-    } else {
-      switch (position) {
-        case "bottom":
-        case "top":
-          interpolateDragged({
-            to: snappedY.value
-          });
-          break;
-        case "right":
-        case "left":
-          interpolateDragged({
-            to: snappedX.value
-          });
-          break;
-      }
-    }
+    settle(e.target);
     emitter.emit("afterDrag", {
       id: toValue(id),
       x: draggedX.value,
@@ -557,6 +508,7 @@ export function useDrawerDrag(args) {
       }
       dragging.value = true;
       lastPendingTarget = void 0;
+      flicked = false;
       pointerdownTarget = e.target;
       guardedSetPointerCapture({
         event: e,
@@ -618,6 +570,7 @@ export function useDrawerDrag(args) {
       e.stopPropagation();
       dragging.value = true;
       lastPendingTarget = void 0;
+      flicked = false;
       pointerdownTarget = e.target;
       emitter.emit("beforeDrag", {
         id: toValue(id),
@@ -657,9 +610,16 @@ export function useDrawerDrag(args) {
     async () => {
       await getSizes();
       const snapPoint = toValue(initial)?.snapPoint;
-      if (snapPoint) {
-        snapTo({ snapPoint, interpolate: false });
+      if (!snapPoint) {
+        return;
+      }
+      if (isUnknownSnapPoint(snapPoint)) {
+        logWarning(
+          `initial.snapPoint (${snapPoint}) is neither a snap point nor inside a range and is ignored`
+        );
+        return;
       }
+      snapTo({ snapPoint, interpolate: false });
     }
   );
   watch([snappedX, snappedY], ([x, y]) => {
@@ -679,7 +639,6 @@ export function useDrawerDrag(args) {
       await getSizes();
       if (activeSnapPoint.value) {
         await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
-        snapPointsMap.trigger();
       }
     }, 100)();
   });

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerSnap.d.ts

@@ -1,21 +1,17 @@
 import type { MaybeRef, Ref } from 'vue';
-import type { MagicDrawerSnapPoint, RequiredMagicDrawerOptions } from '../../types/index.js';
+import type { MagicDrawerSnapPoint, MagicDrawerSnapRange, RequiredMagicDrawerOptions } from '../../types/index.js';
 type UseDrawerSnapArgs = {
     id: MaybeRef<string>;
     wrapperRect: Ref<DOMRect | undefined>;
     draggedY: Ref<number>;
     draggedX: Ref<number>;
+    activeSnapPoint: Ref<MagicDrawerSnapPoint | undefined>;
     position: MaybeRef<RequiredMagicDrawerOptions['position']>;
     animation: MaybeRef<RequiredMagicDrawerOptions['animation']>;
     snapPoints: MaybeRef<RequiredMagicDrawerOptions['snapPoints']>;
     preventDragClose: MaybeRef<RequiredMagicDrawerOptions['preventDragClose']>;
     overshoot: MaybeRef<number>;
 };
-type FindClosestSnapPointArgs = {
-    draggedY: MaybeRef<number>;
-    draggedX: MaybeRef<number>;
-    direction?: 'below' | 'above' | 'absolute';
-};
 type SnapToArgs = {
     snapPoint: MagicDrawerSnapPoint;
     interpolate: boolean;
@@ -26,15 +22,24 @@ type InterpolateDraggedArgs = {
     duration?: number;
     easing?: (t: number) => number;
 };
+type MappedSnapRange = {
+    min: number;
+    max: number;
+    momentum?: boolean;
+    range: MagicDrawerSnapRange;
+};
 export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
     snappedY: import("vue").ShallowRef<number, number>;
     snappedX: import("vue").ShallowRef<number, number>;
-    activeSnapPoint: import("vue").ShallowRef<MagicDrawerSnapPoint | undefined, MagicDrawerSnapPoint | undefined>;
-    snapTo: (args: SnapToArgs) => Promise<void>;
-    findClosestSnapPoint: (args: FindClosestSnapPointArgs) => number | undefined;
-    interpolateDragged: (args: InterpolateDraggedArgs) => void;
-    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<number, MagicDrawerSnapPoint>>;
     drawerHeight: import("vue").ComputedRef<number>;
     drawerWidth: import("vue").ComputedRef<number>;
+    mappedSnapPoints: import("vue").ComputedRef<any[]>;
+    mappedRanges: import("vue").ComputedRef<MappedSnapRange[]>;
+    rangeAt: (offset: number) => any;
+    snapPointAt: (offset: number) => MagicDrawerSnapPoint | undefined;
+    restingOffset: (offset: number) => any;
+    isSnapTarget: (snapPoint: MagicDrawerSnapPoint) => boolean;
+    snapTo: (args: SnapToArgs) => Promise<void>;
+    interpolateDragged: (args: InterpolateDraggedArgs) => void;
 };
 export {};