@maas/vue-equipment 1.0.1 → 1.1.0

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

@@ -1,7 +1,20 @@
 import { computed, nextTick, shallowRef, toValue } from "vue";
-import { computedWithControl } from "@vueuse/core";
-import { interpolate, mapValue } from "@maas/vue-equipment/utils";
+import {
+  clampValue,
+  interpolate,
+  mapValue,
+  snapRangeAt,
+  snapTargetAt
+} from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useDrawerUtils } from "./useDrawerUtils.mjs";
+const SNAP_TOLERANCE = 0.01;
+function isMapped(value) {
+  return value !== void 0 && !Number.isNaN(value);
+}
+function roundDecimal(value) {
+  return Math.round(value * 1e4) / 1e4;
+}
 export function useDrawerSnap(args) {
   const {
     id,
@@ -12,43 +25,21 @@ export function useDrawerSnap(args) {
     overshoot,
     draggedY,
     draggedX,
+    activeSnapPoint,
     preventDragClose
   } = args;
-  const mappedSnapPoints = computedWithControl(
-    () => toValue(wrapperRect),
-    () => {
-      const extended = toValue(preventDragClose) ? toValue(snapPoints) : [...toValue(snapPoints), 0];
-      const mapped = extended.map((snapPoint) => {
-        return mapSnapPoint(snapPoint);
-      });
-      const filtered = mapped.filter(
-        (snapPoint) => !!snapPoint || snapPoint === 0
-      ).sort((a, b) => a - b);
-      return filtered;
-    }
-  );
-  const snapPointsMap = computedWithControl(
-    () => toValue(snapPoints),
-    () => {
-      const extended = toValue(preventDragClose) ? toValue(snapPoints) : [...toValue(snapPoints), 0];
-      const mapped = extended.reduce(
-        (acc, current) => {
-          const key = mapSnapPoint(current);
-          if (key || key === 0) {
-            acc[key] = current;
-          }
-          return acc;
-        },
-        {}
-      );
-      return mapped;
-    }
-  );
+  const { isSnapRange, flattenSnapPoints } = useDrawerUtils();
+  const emitter = useMagicEmitter();
+  const isVertical = computed(() => {
+    const side = toValue(position);
+    return side === "top" || side === "bottom";
+  });
+  const configuredPoints = computed(() => {
+    const flattened = flattenSnapPoints(toValue(snapPoints));
+    return toValue(preventDragClose) ? flattened : [...flattened, 0];
+  });
   const snappedY = shallowRef(0);
   const snappedX = shallowRef(0);
-  const activeSnapPoint = shallowRef(
-    void 0
-  );
   const drawerHeight = computed(() => {
     const rect = toValue(wrapperRect);
     if (rect === void 0) {
@@ -63,36 +54,27 @@ export function useDrawerSnap(args) {
     }
     return rect.width - toValue(overshoot);
   });
-  const emitter = useMagicEmitter();
-  function findClosestNumber(args2) {
-    const { number, numbers, direction } = args2;
-    let filtered = numbers;
-    if (!numbers.length) {
-      return void 0;
-    }
-    switch (direction) {
-      case "above":
-        filtered = numbers.filter((num) => num > number);
-        break;
-      case "below":
-        filtered = numbers.filter((num) => num < number);
-        break;
-    }
-    if (filtered.length === 0) {
-      switch (direction) {
-        case "above":
-          return Math.max(...numbers);
-        case "below":
-          return Math.min(...numbers);
-        default:
-          return void 0;
+  const mappedSnapPoints = computed(() => {
+    const mapped = configuredPoints.value.map(mapSnapPoint).filter(isMapped);
+    return [...new Set(mapped)].sort((a, b) => a - b);
+  });
+  const mappedRanges = computed(
+    () => toValue(snapPoints).filter(isSnapRange).flatMap((range) => {
+      const min = mapSnapPoint(range.min);
+      const max = mapSnapPoint(range.max);
+      if (!isMapped(min) || !isMapped(max)) {
+        return [];
       }
-    }
-    const closestNumber = filtered.reduce(
-      (closest, current) => Math.abs(current - number) < Math.abs(closest - number) ? current : closest
-    );
-    return closestNumber;
-  }
+      return [
+        {
+          min: Math.min(min, max),
+          max: Math.max(min, max),
+          momentum: range.momentum,
+          range
+        }
+      ];
+    })
+  );
   function mapSnapPoint(snapPoint) {
     if (typeof snapPoint === "number") {
       const reversedSnapPoint = mapValue(snapPoint, 0, 1, 1, 0);
@@ -176,49 +158,116 @@ export function useDrawerSnap(args) {
       }
     }
   }
-  async function snapTo(args2) {
-    const { snapPoint, interpolate: interpolate2, duration } = args2;
-    await nextTick();
+  function decimalAt(offset) {
+    const rect = toValue(wrapperRect);
+    if (!rect) {
+      return 0;
+    }
     switch (position) {
+      case "bottom":
+        return 1 - (offset + rect.top) / window.innerHeight;
       case "top":
-      case "bottom": {
-        const mappedSnapPointY = mapSnapPoint(snapPoint);
-        if (!mappedSnapPointY && mappedSnapPointY !== 0) {
-          return;
-        }
-        const closestY = findClosestSnapPoint({
-          draggedX,
-          draggedY: mappedSnapPointY
-        }) || 0;
-        if (interpolate2) {
-          interpolateDragged({ to: closestY, duration });
-        } else {
-          draggedY.value = closestY;
-        }
-        snappedY.value = closestY;
-        activeSnapPoint.value = toValue(snapPoint);
-        break;
-      }
+        return 1 - (offset + rect.bottom) / window.innerHeight;
+      case "right":
+        return 1 - (offset + rect.left) / window.innerWidth;
       case "left":
-      case "right": {
-        const mappedSnapPointX = mapSnapPoint(toValue(snapPoint));
-        if (!mappedSnapPointX && mappedSnapPointX !== 0) {
-          return;
-        }
-        const closestX = findClosestSnapPoint({
-          draggedX: mappedSnapPointX,
-          draggedY
-        }) || 0;
-        if (interpolate2) {
-          interpolateDragged({ to: closestX, duration });
-        } else {
-          draggedX.value = closestX;
-          snappedX.value = closestX;
-        }
-        snappedX.value = closestX;
-        activeSnapPoint.value = toValue(snapPoint);
-        break;
-      }
+        return 1 - (offset + rect.right) / window.innerWidth;
+      default:
+        return 0;
+    }
+  }
+  function pixelsAt(offset) {
+    switch (position) {
+      case "bottom":
+        return drawerHeight.value - offset;
+      case "top":
+        return drawerHeight.value + offset;
+      case "right":
+        return drawerWidth.value - offset;
+      case "left":
+        return drawerWidth.value + offset;
+      default:
+        return offset;
+    }
+  }
+  function configuredPointAt(offset) {
+    return configuredPoints.value.find((snapPoint) => {
+      const mapped = mapSnapPoint(snapPoint);
+      return isMapped(mapped) && Math.abs(mapped - offset) < SNAP_TOLERANCE;
+    });
+  }
+  function draggedOnAxis() {
+    return isVertical.value ? draggedY.value : draggedX.value;
+  }
+  function setDraggedOnAxis(value) {
+    if (isVertical.value) {
+      draggedY.value = value;
+    } else {
+      draggedX.value = value;
+    }
+  }
+  function setSnappedOnAxis(value) {
+    if (isVertical.value) {
+      snappedY.value = value;
+    } else {
+      snappedX.value = value;
+    }
+  }
+  function rangeAt(offset) {
+    return snapRangeAt({ ranges: mappedRanges.value, position: offset });
+  }
+  function snapPointAt(offset) {
+    const configured = configuredPointAt(offset);
+    if (configured !== void 0) {
+      return configured;
+    }
+    const mapped = rangeAt(offset);
+    if (!mapped) {
+      return void 0;
+    }
+    const { min, max } = mapped.range;
+    return typeof min === "number" && typeof max === "number" ? roundDecimal(decimalAt(offset)) : `${Math.round(pixelsAt(offset))}px`;
+  }
+  function restingOffset(offset) {
+    const range = rangeAt(offset);
+    const snapPoint = snapPointAt(offset);
+    if (!range || snapPoint === void 0) {
+      return offset;
+    }
+    const mapped = mapSnapPoint(snapPoint);
+    return isMapped(mapped) ? clampValue(mapped, range.min, range.max) : offset;
+  }
+  function isSnapTarget(snapPoint) {
+    const mapped = mapSnapPoint(snapPoint);
+    if (!isMapped(mapped)) {
+      return false;
+    }
+    return !!rangeAt(mapped) || mappedSnapPoints.value.some(
+      (point) => Math.abs(point - mapped) < SNAP_TOLERANCE
+    );
+  }
+  function findSnapTarget(offset) {
+    const target = snapTargetAt({
+      points: mappedSnapPoints.value,
+      ranges: mappedRanges.value,
+      value: offset
+    });
+    return target === void 0 ? void 0 : restingOffset(target);
+  }
+  async function snapTo(args2) {
+    const { snapPoint, interpolate: shouldInterpolate, duration } = args2;
+    await nextTick();
+    const mapped = mapSnapPoint(snapPoint);
+    if (!isMapped(mapped)) {
+      return;
+    }
+    const closest = findSnapTarget(mapped) ?? 0;
+    setSnappedOnAxis(closest);
+    activeSnapPoint.value = snapPointAt(closest) ?? snapPoint;
+    if (shouldInterpolate) {
+      interpolateDragged({ to: closest, duration });
+    } else {
+      setDraggedOnAxis(closest);
     }
   }
   function interpolateDragged(args2) {
@@ -227,86 +276,40 @@ export function useDrawerSnap(args) {
       duration = toValue(animation).snap.duration,
       easing = toValue(animation).snap.easing
     } = args2;
-    const snapPoint = snapPointsMap.value[to];
-    if (!snapPoint && snapPoint !== 0) {
+    const snapPoint = snapPointAt(to);
+    if (snapPoint === void 0) {
       return;
     }
     emitter.emit("beforeSnap", { id: toValue(id), snapPoint });
-    switch (position) {
-      case "bottom":
-      case "top":
-        interpolate({
-          from: draggedY.value,
-          to,
-          duration,
-          easing,
-          callback: (value) => {
-            draggedY.value = value;
-            if (draggedY.value === to) {
-              emitter.emit("afterSnap", {
-                id: toValue(id),
-                snapPoint
-              });
-            }
-          }
-        });
-        break;
-      case "right":
-      case "left":
-        interpolate({
-          from: draggedX.value,
-          to,
-          duration,
-          easing,
-          callback: (value) => {
-            draggedX.value = value;
-            if (draggedX.value === to) {
-              emitter.emit("afterSnap", {
-                id: toValue(id),
-                snapPoint
-              });
-            }
-          }
-        });
-        break;
+    if (draggedOnAxis() === to) {
+      emitter.emit("afterSnap", { id: toValue(id), snapPoint });
+      return;
     }
-  }
-  function findClosestSnapPoint(args2) {
-    const { draggedY: draggedY2, draggedX: draggedX2, direction = "absolute" } = args2;
-    let closest = void 0;
-    switch (position) {
-      case "bottom":
-      case "top":
-        if (!!toValue(draggedY2) || toValue(draggedY2) === 0) {
-          closest = findClosestNumber({
-            number: toValue(draggedY2),
-            numbers: mappedSnapPoints.value,
-            direction
-          });
-        }
-        break;
-      case "right":
-      case "left":
-        if (!!toValue(draggedX2) || toValue(draggedX2) === 0) {
-          closest = findClosestNumber({
-            number: toValue(draggedX2),
-            numbers: mappedSnapPoints.value,
-            direction
-          });
+    interpolate({
+      from: draggedOnAxis(),
+      to,
+      duration,
+      easing,
+      callback: (value) => {
+        setDraggedOnAxis(value);
+        if (value === to) {
+          emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
-        break;
-    }
-    return closest;
+      }
+    });
   }
   return {
     snappedY,
     snappedX,
-    activeSnapPoint,
-    snapTo,
-    findClosestSnapPoint,
-    interpolateDragged,
-    snapPointsMap,
     drawerHeight,
-    drawerWidth
+    drawerWidth,
+    mappedSnapPoints,
+    mappedRanges,
+    rangeAt,
+    snapPointAt,
+    restingOffset,
+    isSnapTarget,
+    snapTo,
+    interpolateDragged
   };
 }

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

@@ -38,7 +38,8 @@ export function useDrawerState(id) {
       absDirectionX: void 0,
       elRect: void 0,
       wrapperRect: void 0,
-      progress: { x: 0, y: 0 }
+      progress: { x: 0, y: 0 },
+      activeSnapPoint: void 0
     };
     return reactive(state);
   }

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

@@ -1,3 +1,6 @@
+import type { MagicDrawerSnapEntry, MagicDrawerSnapRange } from '../../types/index.js';
 export declare function useDrawerUtils(): {
     clamp: (value: number, from: number, to: number, flip: boolean) => any;
+    isSnapRange: (entry: MagicDrawerSnapEntry) => entry is MagicDrawerSnapRange;
+    flattenSnapPoints: (entries: Array<MagicDrawerSnapEntry>) => import("../../types/index.js").MagicDrawerSnapPoint[];
 };

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

@@ -10,7 +10,17 @@ export function useDrawerUtils() {
       return flip ? Math.min(value, to) : Math.max(value, to);
     }
   }
+  function isSnapRange(entry) {
+    return typeof entry === "object";
+  }
+  function flattenSnapPoints(entries) {
+    return entries.flatMap(
+      (entry) => isSnapRange(entry) ? [entry.min, entry.max] : [entry]
+    );
+  }
   return {
-    clamp
+    clamp,
+    isSnapRange,
+    flattenSnapPoints
   };
 }

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.d.ts

@@ -3,6 +3,7 @@ import type { MagicDrawerOptions, MagicDrawerSnapPoint } from '../types/index.js
 export declare function useMagicDrawer(id: MaybeRef<string>, options?: MagicDrawerOptions): {
     isActive: import("vue").ComputedRef<any>;
     progress: any;
+    activeSnapPoint: any;
     state: any;
     open: () => void;
     close: () => void;

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.mjs

@@ -4,7 +4,7 @@ import { useDrawerState } from "./private/useDrawerState.mjs";
 export function useMagicDrawer(id, options) {
   const { initializeState } = useDrawerState(toValue(id));
   const state = initializeState(options);
-  const { progress, active } = toRefs(state);
+  const { progress, active, activeSnapPoint } = toRefs(state);
   const emitter = useMagicEmitter();
   const isActive = computed(() => active.value);
   function open() {
@@ -23,6 +23,7 @@ export function useMagicDrawer(id, options) {
   return {
     isActive,
     progress,
+    activeSnapPoint,
     state,
     open,
     close,

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

@@ -1,6 +1,12 @@
 import type { Options as FocusTrapOptions } from 'focus-trap';
 import type { RequireAllNested } from '@maas/vue-equipment/utils';
 export type MagicDrawerSnapPoint = number | `${number}px`;
+export interface MagicDrawerSnapRange {
+    min: MagicDrawerSnapPoint;
+    max: MagicDrawerSnapPoint;
+    momentum?: boolean;
+}
+export type MagicDrawerSnapEntry = MagicDrawerSnapPoint | MagicDrawerSnapRange;
 export type DrawerSnapMode = 'closest' | 'step';
 export interface MagicDrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
@@ -9,7 +15,7 @@ export interface MagicDrawerOptions {
     scrollLock?: boolean | {
         padding: boolean;
     };
-    snapPoints?: MagicDrawerSnapPoint[];
+    snapPoints?: Array<MagicDrawerSnapEntry>;
     snap?: {
         mode?: DrawerSnapMode;
     };
@@ -64,6 +70,7 @@ export interface DrawerState {
         x: number;
         y: number;
     };
+    activeSnapPoint: MagicDrawerSnapPoint | undefined;
     shouldClose: boolean;
     interpolateTo: number | undefined;
     originX: number;

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

@@ -5,7 +5,7 @@ import MagicTrayHandle from './src/components/MagicTrayHandle.vue.js';
 import MagicTrayTransform from './src/components/MagicTrayTransform.vue.js';
 import { useMagicTray } from './src/composables/useMagicTray.js';
 import type { Plugin } from 'vue';
-import type { MagicTrayDragMode, MagicTrayOptions, MagicTraySide, MagicTraySidePayload, MagicTraySnapMode, MagicTraySnapPoint, MagicTraySnapPointPayload, MagicTrayTransformAxis, MagicTrayWillSnapToPayload } from './src/types/index.js';
+import type { MagicTrayDragMode, MagicTrayOptions, MagicTraySide, MagicTraySidePayload, MagicTraySnapEntry, MagicTraySnapMode, MagicTraySnapPoint, MagicTraySnapPointPayload, MagicTraySnapRange, MagicTrayTransformAxis, MagicTrayWillSnapToPayload } from './src/types/index.js';
 declare const MagicTrayPlugin: Plugin;
 export { MagicTrayPlugin, MagicTray, MagicTrayProvider, MagicTrayContent, MagicTrayHandle, MagicTrayTransform, useMagicTray, };
-export type { MagicTrayOptions, MagicTraySide, MagicTraySidePayload, MagicTraySnapMode, MagicTrayDragMode, MagicTraySnapPoint, MagicTraySnapPointPayload, MagicTrayWillSnapToPayload, MagicTrayTransformAxis, };
+export type { MagicTrayOptions, MagicTraySide, MagicTraySidePayload, MagicTraySnapMode, MagicTrayDragMode, MagicTraySnapPoint, MagicTraySnapRange, MagicTraySnapEntry, MagicTraySnapPointPayload, MagicTrayWillSnapToPayload, MagicTrayTransformAxis, };