@maas/vue-equipment 1.0.1 → 1.2.0

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "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: 1793032883000,
 		docs: "https://vue.equipment/plugins/MagicTray",
 		description: "MagicTray is a flexible"
 	},

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

@@ -2,7 +2,7 @@ import { easeOutQuad } from "@maas/vue-equipment/utils";
 const defaultOptions = {
   loop: false,
   threshold: {
-    lock: 10
+    lock: 8
   },
   animation: {
     snap: {

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

@@ -4,7 +4,7 @@ const defaultOptions = {
   scrollLock: { padding: true },
   snapPoints: ["top-left", "top-right", "bottom-left", "bottom-right"],
   threshold: {
-    lock: 0,
+    lock: 8,
     distance: 128,
     momentum: 1.5,
     idle: 250

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/components/MagicDrawerContent.vue

@@ -367,6 +367,10 @@ dialog.magic-drawer-content__drag::backdrop {
   user-select: none;
 }
 
+.magic-drawer-content[data-dragging='true'] .magic-drawer-content__drag * {
+  -webkit-user-drag: none;
+}
+
 .magic-drawer-content[data-wheeling='true'] .magic-drawer-content__drag {
   cursor: auto;
 }

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,
@@ -471,8 +456,6 @@ export function useDrawerDrag(args) {
       return;
     }
     checkDirection({ x: firstTouch.clientX, y: firstTouch.clientY });
-    shouldClose.value = false;
-    checkDirection({ x: firstTouch.clientX, y: firstTouch.clientY });
     if (!scrollLock) {
       const scrollLockTarget = lockScroll(firstTouch.target);
       if (scrollLockTarget) {
@@ -498,41 +481,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 +506,7 @@ export function useDrawerDrag(args) {
       }
       dragging.value = true;
       lastPendingTarget = void 0;
+      flicked = false;
       pointerdownTarget = e.target;
       guardedSetPointerCapture({
         event: e,
@@ -618,6 +568,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 +608,17 @@ export function useDrawerDrag(args) {
     async () => {
       await getSizes();
       const snapPoint = toValue(initial)?.snapPoint;
-      if (snapPoint) {
-        snapTo({ snapPoint, interpolate: false });
+      if (!snapPoint) {
+        activeSnapPoint.value = snapPointAt(0);
+        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 +638,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/useDrawerProgress.mjs

@@ -14,6 +14,10 @@ import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerProgress(args) {
   const { id, drawerRef, elRef, position, overshoot } = args;
   const { initializeState } = useDrawerState(id);
+  const emitter = useMagicEmitter();
+  const state = initializeState();
+  const { draggedX, draggedY, wrapperRect } = toRefs(state);
+  let transitioning = false;
   const drawerRect = useElementBounding(drawerRef);
   const elRect = useElementBounding(elRef);
   const maxX = computed(
@@ -22,27 +26,38 @@ export function useDrawerProgress(args) {
   const maxY = computed(
     () => drawerRect.height.value - elRect.height.value + toValue(overshoot)
   );
-  const state = initializeState();
   const { progress } = toRefs(state);
-  function rafCallback() {
+  function setProgress(x, y) {
+    progress.value = {
+      x: clampValue(x, 0, 1) || 0,
+      y: clampValue(y, 0, 1) || 0
+    };
+  }
+  function calculate() {
+    const rect = wrapperRect.value;
+    if (!rect) {
+      setProgress(0, 0);
+      return;
+    }
+    const extentX = rect.width - toValue(overshoot);
+    const extentY = rect.height - toValue(overshoot);
+    switch (toValue(position)) {
+      case "top":
+      case "bottom":
+        setProgress(0, extentY ? 1 - Math.abs(draggedY.value) / extentY : 0);
+        break;
+      case "left":
+      case "right":
+        setProgress(extentX ? 1 - Math.abs(draggedX.value) / extentX : 0, 0);
+        break;
+    }
+  }
+  function measure() {
     drawerRect.update();
     elRect.update();
-    calculateProgress();
-  }
-  const emitter = useMagicEmitter();
-  const { pause: snapPause, resume: snapResume } = useRafFn(rafCallback, {
-    immediate: false
-  });
-  const { pause: dragPause, resume: dragResume } = useRafFn(rafCallback, {
-    immediate: false
-  });
-  const { pause, resume } = useRafFn(rafCallback, {
-    immediate: false
-  });
-  function calculateProgress() {
     let rawX = 0;
     let rawY = 0;
-    switch (position) {
+    switch (toValue(position)) {
       case "bottom":
         rawY = mapValue(
           elRect.top.value,
@@ -80,81 +95,46 @@ export function useDrawerProgress(args) {
         );
         break;
     }
-    if (Object.is(rawX, -0)) {
-      rawX = 0;
-    }
-    if (Object.is(rawY, -0)) {
-      rawY = 0;
-    }
-    const x = clampValue(rawX, 0, 1);
-    const y = clampValue(rawY, 0, 1);
-    progress.value = { x, y };
+    setProgress(rawX, rawY);
   }
-  watch([() => progress.value.x, () => progress.value.y], ([x, y]) => {
-    emitter.emit("progress", {
-      id: toValue(id),
-      x,
-      y
-    });
-  });
-  function beforeCallback(payload) {
+  const { pause, resume } = useRafFn(measure, { immediate: false });
+  function beforeTransition(payload) {
     if (payload === toValue(id)) {
+      transitioning = true;
       resume();
     }
   }
-  function beforeSnapCallback(payload) {
-    if (payload.id === toValue(id)) {
-      snapResume();
-    }
-  }
-  function beforeDragCallback(payload) {
-    if (payload.id === toValue(id)) {
-      dragResume();
-    }
-  }
-  async function afterCallback(payload) {
+  async function afterTransition(payload) {
     await nextTick();
     if (payload === toValue(id)) {
       pause();
-      await nextTick();
-      rafCallback();
-    }
-  }
-  async function afterSnapCallback(payload) {
-    await nextTick();
-    if (payload.id === toValue(id)) {
-      snapPause();
-      await nextTick();
-      rafCallback();
+      transitioning = false;
+      calculate();
     }
   }
-  async function afterDragCallback(payload) {
-    await nextTick();
-    if (payload.id === toValue(id)) {
-      dragPause();
-      await nextTick();
-      rafCallback();
+  watch([draggedX, draggedY, wrapperRect, () => toValue(overshoot)], () => {
+    if (!transitioning) {
+      calculate();
     }
-  }
+  });
+  watch([() => progress.value.x, () => progress.value.y], ([x, y]) => {
+    emitter.emit("progress", {
+      id: toValue(id),
+      x,
+      y
+    });
+  });
   onMounted(() => {
-    emitter.on("beforeEnter", beforeCallback);
-    emitter.on("afterEnter", afterCallback);
-    emitter.on("beforeDrag", beforeDragCallback);
-    emitter.on("afterDrag", afterDragCallback);
-    emitter.on("beforeSnap", beforeSnapCallback);
-    emitter.on("afterSnap", afterSnapCallback);
-    emitter.on("beforeLeave", beforeCallback);
-    emitter.on("afterLeave", afterCallback);
+    emitter.on("beforeEnter", beforeTransition);
+    emitter.on("afterEnter", afterTransition);
+    emitter.on("beforeLeave", beforeTransition);
+    emitter.on("afterLeave", afterTransition);
   });
   onBeforeUnmount(() => {
-    emitter.off("beforeEnter", beforeCallback);
-    emitter.off("afterEnter", afterCallback);
-    emitter.off("beforeDrag", beforeDragCallback);
-    emitter.off("afterDrag", afterDragCallback);
-    emitter.off("beforeSnap", beforeSnapCallback);
-    emitter.off("afterSnap", afterSnapCallback);
-    emitter.off("beforeLeave", beforeCallback);
-    emitter.off("afterLeave", afterCallback);
+    emitter.off("beforeEnter", beforeTransition);
+    emitter.off("afterEnter", afterTransition);
+    emitter.off("beforeLeave", beforeTransition);
+    emitter.off("afterLeave", afterTransition);
   });
   return { progress };
 }