@maas/vue-equipment 1.0.0 → 1.1.0

package/README.md

@@ -7,13 +7,9 @@ Our Frontend Toolkit, Free and Open Source.
 
 Over the years, we have found ourselves facing a common problem: driven by the lack of options in the Vue ecosystem, we needed to implement solutions from the ground-up, over and over again. Vue Equipment is our attempt to solve this. It is essentially a collection of ready-to-use plugins and composables for building modern web applications.
 
-## 🚧 Disclaimer
-
-This project is currently in beta. Expect breaking changes before the initial stable release. With this being said, we aim to keep the amount to an absolute minimum and will communicate any breaking changes with each [release](https://github.com/magicasaservice/vue-equipment/releases).
-
 ## 📖 Docs
 
-For the full documentation visit [vue.equipment](https://vue.equipment). We are actively working on updating the docs before our initial stable release.
+For the full documentation visit [vue.equipment](https://vue.equipment).
 
 ## 🐛 Found a Bug?
 

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.88",
+  "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 {};