@maas/vue-equipment 0.24.7 → 0.25.0

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

@@ -1,5 +1,4 @@
 import {
-  ref,
   computed,
   onMounted,
   watch,
@@ -17,6 +16,8 @@ import {
 import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
 import { useDrawerSnap } from "./useDrawerSnap.mjs";
 import { useDrawerGuards } from "./useDrawerGuards.mjs";
+import { useDrawerUtils } from "./useDrawerUtils.mjs";
+import { useDrawerState } from "./useDrawerState.mjs";
 import { isIOS } from "@maas/vue-equipment/utils";
 export function useDrawerDrag(args) {
   const {
@@ -31,29 +32,31 @@ export function useDrawerDrag(args) {
     canClose,
     close
   } = args;
-  const dragStart = ref(void 0);
-  const dragging = ref(false);
-  const shouldClose = ref(false);
-  const interpolateTo = ref(void 0);
+  const { findState } = useDrawerState(toValue(id));
+  const {
+    dragStart,
+    dragging,
+    wheeling,
+    shouldClose,
+    interpolateTo,
+    originX,
+    originY,
+    lastDraggedX,
+    lastDraggedY,
+    draggedX,
+    draggedY,
+    relDirectionX,
+    relDirectionY,
+    absDirectionX,
+    absDirectionY,
+    elRect,
+    wrapperRect
+  } = findState();
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;
   let scrollLock = void 0;
-  const originX = ref(0);
-  const originY = ref(0);
-  const pointerdownX = ref(0);
-  const pointerdownY = ref(0);
-  const lastDraggedX = ref(0);
-  const lastDraggedY = ref(0);
-  const relDirectionY = ref("absolute");
-  const relDirectionX = ref("absolute");
-  const absDirectionY = ref(void 0);
-  const absDirectionX = ref(void 0);
-  const elRect = ref(void 0);
-  const wrapperRect = ref(void 0);
   const duration = computed(() => toValue(snap)?.duration);
-  const draggedX = ref(0);
-  const draggedY = ref(0);
   const hasDragged = computed(() => {
     const hasDraggedX = !isWithinRange({
       input: draggedX.value,
@@ -97,23 +100,20 @@ export function useDrawerDrag(args) {
     position,
     activeSnapPoint
   });
-  function isWithinRange(args2) {
-    const { input, base, threshold: threshold2 } = args2;
-    return input >= base - threshold2 && input <= base + threshold2;
-  }
+  const { clamp, isWithinRange } = useDrawerUtils();
   async function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
     wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
     await nextTick();
   }
-  async function checkPosition({ x, y }) {
-    const distanceY = Math.abs(y - pointerdownY.value);
-    const distanceX = Math.abs(x - pointerdownX.value);
+  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 = await findClosestSnapPoint({
+          const snapPointY = findClosestSnapPoint({
             draggedX: 0,
             draggedY,
             direction: relDirectionY.value
@@ -128,7 +128,7 @@ export function useDrawerDrag(args) {
       case "right":
       case "left":
         if (distanceX > toValue(threshold).distance) {
-          const snapPointX = await findClosestSnapPoint({
+          const snapPointX = findClosestSnapPoint({
             draggedX,
             draggedY: 0,
             direction: relDirectionX.value
@@ -142,17 +142,17 @@ export function useDrawerDrag(args) {
         break;
     }
   }
-  async function checkMomentum({ x, y }) {
+  function checkMomentum() {
     const elapsed = Date.now() - dragStart.value.getTime();
-    const distanceX = Math.abs(x - pointerdownX.value);
-    const distanceY = Math.abs(y - pointerdownY.value);
+    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 snapPointB = await findClosestSnapPoint({
+          const snapPointB = findClosestSnapPoint({
             draggedX: 0,
             draggedY,
             direction: relDirectionY.value
@@ -167,7 +167,7 @@ export function useDrawerDrag(args) {
       case "right":
       case "left":
         if (velocityX > toValue(threshold).momentum) {
-          const snapPointR = await findClosestSnapPoint({
+          const snapPointR = findClosestSnapPoint({
             draggedX,
             draggedY,
             direction: relDirectionX.value
@@ -181,28 +181,6 @@ export function useDrawerDrag(args) {
         break;
     }
   }
-  function clamp(value, from, to) {
-    if (from > to) {
-      if (value > from)
-        return value;
-      if (value < to)
-        return to;
-      else
-        return value;
-    } else if (from < to) {
-      if (value < from)
-        return value;
-      if (value > to)
-        return to;
-      else
-        return value;
-    } else {
-      if (value < to)
-        return to;
-      else
-        return value;
-    }
-  }
   function setDragged({ x, y }) {
     switch (position) {
       case "bottom":
@@ -257,11 +235,15 @@ export function useDrawerDrag(args) {
     }
     scrollLock = void 0;
   }
-  function resetDragged() {
+  function resetState() {
     draggedX.value = 0;
     draggedY.value = 0;
     lastDraggedX.value = 0;
     lastDraggedY.value = 0;
+    originX.value = 0;
+    originY.value = 0;
+    elRect.value = void 0;
+    wrapperRect.value = void 0;
   }
   function resetSnapped() {
     snappedX.value = 0;
@@ -270,7 +252,7 @@ export function useDrawerDrag(args) {
   }
   function afterLeaveCallback(payload) {
     if (payload === toValue(id)) {
-      resetDragged();
+      resetState();
       resetSnapped();
     }
   }
@@ -289,8 +271,6 @@ export function useDrawerDrag(args) {
     }
   }
   function onPointerup(e) {
-    const eventTarget = e.target;
-    const tagNameBlacklist = ["INPUT", "TEXTAREA", "BUTTON", "SELECT", "A"];
     if (shouldClose.value) {
       close();
     } else if (interpolateTo.value || interpolateTo.value === 0) {
@@ -311,7 +291,7 @@ export function useDrawerDrag(args) {
           snappedX.value = interpolateTo.value;
           break;
       }
-    } else if (!tagNameBlacklist.includes(eventTarget.tagName)) {
+    } else if (hasDragged.value) {
       switch (position) {
         case "bottom":
         case "top":
@@ -341,6 +321,9 @@ export function useDrawerDrag(args) {
     }
   }
   function onPointermove(e) {
+    if (e.isTrusted && wheeling.value) {
+      return;
+    }
     shouldClose.value = false;
     checkDirection({ x: e.screenX, y: e.screenY });
     if (!scrollLock) {
@@ -353,9 +336,9 @@ export function useDrawerDrag(args) {
     if (!canDrag(e.target)) {
       return;
     }
-    checkMomentum({ x: e.screenX, y: e.screenY });
     setDragged({ x: e.screenX, y: e.screenY });
-    checkPosition({ x: e.screenX, y: e.screenY });
+    checkMomentum();
+    checkPosition();
     useDrawerEmitter().emit("drag", {
       id: toValue(id),
       x: draggedX.value,
@@ -380,12 +363,10 @@ export function useDrawerDrag(args) {
     cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
     originX.value = e.screenX - draggedX.value;
     originY.value = e.screenY - draggedY.value;
-    pointerdownY.value = e.screenY;
-    pointerdownX.value = e.screenX;
     dragStart.value = /* @__PURE__ */ new Date();
     onPointermove(e);
   }
-  async function onClick(e) {
+  function onClick(e) {
     if (hasDragged.value) {
       e.preventDefault();
     }
@@ -421,12 +402,9 @@ export function useDrawerDrag(args) {
     useDrawerEmitter().off("afterLeave", afterLeaveCallback);
   });
   return {
-    style,
-    draggedX,
-    draggedY,
-    dragging,
-    hasDragged,
     onPointerdown,
-    onClick
+    onClick,
+    style,
+    hasDragged
   };
 }

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

@@ -0,0 +1,39 @@
+import { type MaybeRef, type Ref } from 'vue';
+import { type DefaultOptions } from '../../utils/defaultOptions.js';
+import { type SnapPoint } from '../../types.js';
+type UseDrawerSnapArgs = {
+    id: MaybeRef<string>;
+    wrapperRect: Ref<DOMRect | undefined>;
+    draggedY: Ref<number>;
+    draggedX: Ref<number>;
+    position: MaybeRef<DefaultOptions['position']>;
+    snap: MaybeRef<DefaultOptions['snap']>;
+    canClose: MaybeRef<DefaultOptions['canClose']>;
+    overshoot: MaybeRef<number>;
+};
+type FindClosestSnapPointArgs = {
+    draggedY: MaybeRef<number>;
+    draggedX: MaybeRef<number>;
+    direction?: 'below' | 'above' | 'absolute';
+};
+type SnapToArgs = {
+    snapPoint: SnapPoint;
+    interpolate: boolean;
+    duration?: number;
+};
+type InterpolateDraggedArgs = {
+    to: number;
+    duration?: number;
+};
+export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
+    snappedY: Ref<number>;
+    snappedX: Ref<number>;
+    activeSnapPoint: Ref<SnapPoint | undefined>;
+    snapTo: (args: SnapToArgs) => Promise<void>;
+    findClosestSnapPoint: (args: FindClosestSnapPointArgs) => number | undefined;
+    interpolateDragged: (args: InterpolateDraggedArgs) => void;
+    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<number, SnapPoint>>;
+    drawerHeight: import("vue").ComputedRef<number>;
+    drawerWidth: import("vue").ComputedRef<number>;
+};
+export {};

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

@@ -65,6 +65,9 @@ export function useDrawerSnap(args) {
   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);
@@ -156,12 +159,12 @@ export function useDrawerSnap(args) {
         const mappedSnapPointY = mapSnapPoint(snapPoint);
         if (!mappedSnapPointY && mappedSnapPointY !== 0)
           return;
-        const closestY = await findClosestSnapPoint({
+        const closestY = findClosestSnapPoint({
           draggedX,
           draggedY: mappedSnapPointY
         }) || 0;
         if (interpolate2) {
-          await interpolateDragged({ to: closestY, duration });
+          interpolateDragged({ to: closestY, duration });
         } else {
           draggedY.value = closestY;
         }
@@ -173,12 +176,12 @@ export function useDrawerSnap(args) {
         const mappedSnapPointX = mapSnapPoint(toValue(snapPoint));
         if (!mappedSnapPointX && mappedSnapPointX !== 0)
           return;
-        const closestX = await findClosestSnapPoint({
+        const closestX = findClosestSnapPoint({
           draggedX: mappedSnapPointX,
           draggedY
         }) || 0;
         if (interpolate2) {
-          await interpolateDragged({ to: closestX, duration });
+          interpolateDragged({ to: closestX, duration });
         } else {
           draggedX.value = closestX;
           snappedX.value = closestX;
@@ -188,7 +191,7 @@ export function useDrawerSnap(args) {
         break;
     }
   }
-  async function interpolateDragged(args2) {
+  function interpolateDragged(args2) {
     const { to, duration = toValue(snap).duration } = args2;
     const snapPoint = snapPointsMap.value[to];
     useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint });
@@ -229,7 +232,7 @@ export function useDrawerSnap(args) {
         break;
     }
   }
-  async function findClosestSnapPoint(args2) {
+  function findClosestSnapPoint(args2) {
     const { draggedY: draggedY2, draggedX: draggedX2, direction = "absolute" } = args2;
     let closest = void 0;
     switch (position) {

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

@@ -0,0 +1,109 @@
+import { type MaybeRef } from 'vue';
+import type { DrawerState } from '../../types/index.js';
+export declare function useDrawerState(id: MaybeRef<string>): {
+    addState: (id: string) => {
+        id: string;
+        dragStart: {
+            toString: () => string;
+            toDateString: () => string;
+            toTimeString: () => string;
+            toLocaleString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            toLocaleDateString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            toLocaleTimeString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            valueOf: () => number;
+            getTime: () => number;
+            getFullYear: () => number;
+            getUTCFullYear: () => number;
+            getMonth: () => number;
+            getUTCMonth: () => number;
+            getDate: () => number;
+            getUTCDate: () => number;
+            getDay: () => number;
+            getUTCDay: () => number;
+            getHours: () => number;
+            getUTCHours: () => number;
+            getMinutes: () => number;
+            getUTCMinutes: () => number;
+            getSeconds: () => number;
+            getUTCSeconds: () => number;
+            getMilliseconds: () => number;
+            getUTCMilliseconds: () => number;
+            getTimezoneOffset: () => number;
+            setTime: (time: number) => number;
+            setMilliseconds: (ms: number) => number;
+            setUTCMilliseconds: (ms: number) => number;
+            setSeconds: (sec: number, ms?: number | undefined) => number;
+            setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+            setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+            setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+            setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+            setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+            setDate: (date: number) => number;
+            setUTCDate: (date: number) => number;
+            setMonth: (month: number, date?: number | undefined) => number;
+            setUTCMonth: (month: number, date?: number | undefined) => number;
+            setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+            setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+            toUTCString: () => string;
+            toISOString: () => string;
+            toJSON: (key?: any) => string;
+            getVarDate: () => VarDate;
+            [Symbol.toPrimitive]: {
+                (hint: "default"): string;
+                (hint: "string"): string;
+                (hint: "number"): number;
+                (hint: string): string | number;
+            };
+        } | undefined;
+        dragging: boolean;
+        wheeling: boolean;
+        shouldClose: boolean;
+        interpolateTo: number | undefined;
+        originX: number;
+        originY: number;
+        lastDraggedX: number;
+        lastDraggedY: number;
+        draggedX: number;
+        draggedY: number;
+        relDirectionY: "below" | "above" | "absolute";
+        relDirectionX: "below" | "above" | "absolute";
+        absDirectionY: "with" | "against" | undefined;
+        absDirectionX: "with" | "against" | undefined;
+        elRect: {
+            height: number;
+            width: number;
+            x: number;
+            y: number;
+            readonly bottom: number;
+            readonly left: number;
+            readonly right: number;
+            readonly top: number;
+            toJSON: () => any;
+        } | undefined;
+        wrapperRect: {
+            height: number;
+            width: number;
+            x: number;
+            y: number;
+            readonly bottom: number;
+            readonly left: number;
+            readonly right: number;
+            readonly top: number;
+            toJSON: () => any;
+        } | undefined;
+    };
+    findState: () => import("vue").ToRefs<DrawerState>;
+    deleteState: () => void;
+};

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

@@ -0,0 +1,50 @@
+import { ref, reactive, toRefs, toValue } from "vue";
+const drawerStateStore = ref([]);
+export function useDrawerState(id) {
+  function createState(id2) {
+    const state = {
+      id: id2,
+      dragStart: void 0,
+      dragging: false,
+      wheeling: false,
+      shouldClose: false,
+      interpolateTo: void 0,
+      originX: 0,
+      originY: 0,
+      lastDraggedX: 0,
+      lastDraggedY: 0,
+      draggedX: 0,
+      draggedY: 0,
+      relDirectionY: "absolute",
+      relDirectionX: "absolute",
+      absDirectionY: void 0,
+      absDirectionX: void 0,
+      elRect: void 0,
+      wrapperRect: void 0
+    };
+    return reactive(state);
+  }
+  function addState(id2) {
+    const instance = createState(id2);
+    drawerStateStore.value = [...drawerStateStore.value, instance];
+    return instance;
+  }
+  function findState() {
+    let instance = drawerStateStore.value.find((instance2) => {
+      return instance2.id === id;
+    });
+    if (!instance)
+      instance = addState(toValue(id));
+    return toRefs(instance);
+  }
+  function deleteState() {
+    drawerStateStore.value = drawerStateStore.value.filter(
+      (x) => x.id !== id
+    );
+  }
+  return {
+    addState,
+    findState,
+    deleteState
+  };
+}

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

@@ -0,0 +1,10 @@
+interface isWithinRangeArgs {
+    input: number;
+    base: number;
+    threshold: number;
+}
+export declare function useDrawerUtils(): {
+    clamp: (value: number, from: number, to: number) => number;
+    isWithinRange: (args: isWithinRangeArgs) => boolean;
+};
+export {};

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

@@ -0,0 +1,32 @@
+export function useDrawerUtils() {
+  function clamp(value, from, to) {
+    if (from > to) {
+      if (value > from)
+        return value;
+      if (value < to)
+        return to;
+      else
+        return value;
+    } else if (from < to) {
+      if (value < from)
+        return value;
+      if (value > to)
+        return to;
+      else
+        return value;
+    } else {
+      if (value < to)
+        return to;
+      else
+        return value;
+    }
+  }
+  function isWithinRange(args) {
+    const { input, base, threshold } = args;
+    return input >= base - threshold && input <= base + threshold;
+  }
+  return {
+    clamp,
+    isWithinRange
+  };
+}

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

@@ -0,0 +1,13 @@
+import { type Ref, type MaybeRef } from 'vue';
+import { type DefaultOptions } from '../../utils/defaultOptions.js';
+type UseDrawerWheelArgs = {
+    id: MaybeRef<string>;
+    elRef: Ref<HTMLElement | undefined>;
+    drawerRef: Ref<HTMLElement | undefined>;
+    position: MaybeRef<DefaultOptions['position']>;
+};
+export declare function useDrawerWheel(args: UseDrawerWheelArgs): {
+    initializeWheelListener: () => void;
+    destroyWheelListener: () => void;
+};
+export {};

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

@@ -0,0 +1,98 @@
+import { computed, toValue } from "vue";
+import { unrefElement } from "@vueuse/core";
+import WheelGestures from "wheel-gestures";
+import { useDrawerState } from "./useDrawerState.mjs";
+export function useDrawerWheel(args) {
+  const { id, elRef, drawerRef, position } = args;
+  const { findState } = useDrawerState(toValue(id));
+  const { dragging, wheeling } = findState();
+  let startEvent;
+  const axis = computed(() => {
+    switch (toValue(position)) {
+      case "left":
+      case "right":
+        return "x";
+      case "top":
+      case "bottom":
+        return "y";
+    }
+  });
+  const wheelGestures = WheelGestures({
+    preventWheelAction: axis.value,
+    reverseSign: [true, true, false]
+    // Reverse scroll direction for x and y axis
+  });
+  let unobserveTargetNode;
+  let cancelWheel;
+  function createPointerEvent(type, state) {
+    let moveX, moveY;
+    [moveX, moveY] = state.axisMovement;
+    if (!startEvent) {
+      return new PointerEvent(type);
+    }
+    return new PointerEvent(type, {
+      clientX: startEvent.clientX + moveX,
+      clientY: startEvent.clientY + moveY,
+      screenX: startEvent.screenX + moveX,
+      screenY: startEvent.screenY + moveY,
+      button: 0,
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    });
+  }
+  function dispatchEvent(event) {
+    unrefElement(elRef)?.dispatchEvent(event);
+  }
+  function onWheelStarted(state) {
+    try {
+      startEvent = new PointerEvent("pointerdown", state.event);
+      dispatchEvent(startEvent);
+      wheeling.value = true;
+    } catch (e) {
+      return destroyWheelListener();
+    }
+  }
+  function onWheelMove(state) {
+    dispatchEvent(createPointerEvent("pointermove", state));
+  }
+  function onWheelEnded(state) {
+    dispatchEvent(createPointerEvent("pointerup", state));
+    wheeling.value = false;
+  }
+  function handleWheel(state) {
+    const {
+      axisDelta: [deltaX, deltaY]
+    } = state;
+    const primaryAxisDelta = axis.value === "x" ? deltaX : deltaY;
+    const crossAxisDelta = axis.value === "x" ? deltaY : deltaX;
+    const isEndingOrRelease = state.isEnding && !state.isMomentum || state.isMomentum && state.previous && !state.previous.isMomentum;
+    const primaryAxisDeltaIsDominant = Math.abs(primaryAxisDelta) > Math.abs(crossAxisDelta);
+    if (primaryAxisDeltaIsDominant && !dragging.value && !state.isMomentum) {
+      onWheelStarted(state);
+    }
+    if (!dragging.value) {
+      return;
+    }
+    if (isEndingOrRelease) {
+      onWheelEnded(state);
+    } else {
+      onWheelMove(state);
+    }
+  }
+  function initializeWheelListener() {
+    if (!unrefElement(drawerRef)) {
+      return;
+    }
+    unobserveTargetNode = wheelGestures.observe(unrefElement(drawerRef));
+    cancelWheel = wheelGestures.on("wheel", handleWheel);
+  }
+  function destroyWheelListener() {
+    unobserveTargetNode();
+    cancelWheel();
+  }
+  return {
+    initializeWheelListener,
+    destroyWheelListener
+  };
+}

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

@@ -13,7 +13,7 @@ export declare function useDrawerApi(id?: MaybeRef<string>, options?: UseDrawerA
     }>;
     open: () => void;
     close: () => void;
-    snapTo: (snapPoint: SnapPoint, duration: number) => void;
+    snapTo: (snapPoint: SnapPoint, duration?: number) => void;
     trapFocus: () => void;
     releaseFocus: () => void;
     lockScroll: () => void;