@maas/vue-equipment 1.0.1 → 1.2.0

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 {};

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

@@ -1,7 +1,19 @@
 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";
+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 +24,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 +53,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 +157,114 @@ 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 mapped === offset;
+    });
+  }
+  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.includes(mapped);
+  }
+  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 +273,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/MagicDrawer/src/utils/defaultOptions.mjs

@@ -21,7 +21,7 @@ const defaultOptions = {
     backdrop: "magic-drawer-backdrop"
   },
   threshold: {
-    lock: 0,
+    lock: 8,
     distance: 128,
     momentum: 1
   },

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

@@ -2,10 +2,11 @@ import MagicTray from './src/components/MagicTray.vue.js';
 import MagicTrayProvider from './src/components/MagicTrayProvider.vue.js';
 import MagicTrayContent from './src/components/MagicTrayContent.vue.js';
 import MagicTrayHandle from './src/components/MagicTrayHandle.vue.js';
+import MagicTrayTrigger from './src/components/MagicTrayTrigger.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 { MagicTrayPlugin, MagicTray, MagicTrayProvider, MagicTrayContent, MagicTrayHandle, MagicTrayTrigger, MagicTrayTransform, useMagicTray, };
+export type { MagicTrayOptions, MagicTraySide, MagicTraySidePayload, MagicTraySnapMode, MagicTrayDragMode, MagicTraySnapPoint, MagicTraySnapRange, MagicTraySnapEntry, MagicTraySnapPointPayload, MagicTrayWillSnapToPayload, MagicTrayTransformAxis, };

package/dist/plugins/MagicTray/index.mjs

@@ -2,6 +2,7 @@ import MagicTray from "./src/components/MagicTray.vue";
 import MagicTrayProvider from "./src/components/MagicTrayProvider.vue";
 import MagicTrayContent from "./src/components/MagicTrayContent.vue";
 import MagicTrayHandle from "./src/components/MagicTrayHandle.vue";
+import MagicTrayTrigger from "./src/components/MagicTrayTrigger.vue";
 import MagicTrayTransform from "./src/components/MagicTrayTransform.vue";
 import { useMagicTray } from "./src/composables/useMagicTray.mjs";
 const MagicTrayPlugin = {
@@ -10,6 +11,7 @@ const MagicTrayPlugin = {
     app.component("MagicTrayProvider", MagicTrayProvider);
     app.component("MagicTrayContent", MagicTrayContent);
     app.component("MagicTrayHandle", MagicTrayHandle);
+    app.component("MagicTrayTrigger", MagicTrayTrigger);
     app.component("MagicTrayTransform", MagicTrayTransform);
   }
 };
@@ -19,6 +21,7 @@ export {
   MagicTrayProvider,
   MagicTrayContent,
   MagicTrayHandle,
+  MagicTrayTrigger,
   MagicTrayTransform,
   useMagicTray
 };

package/dist/plugins/MagicTray/src/components/MagicTrayContent.d.vue.ts

@@ -1,9 +1,9 @@
 import type { MagicTraySide } from '../types/index.js';
-declare var __VLS_9: {}, __VLS_11: {}, __VLS_25: "handle-top" | "handle-right" | "handle-bottom" | "handle-left" | "handle", __VLS_26: {
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_24: "handle-top" | "handle-right" | "handle-bottom" | "handle-left" | "handle", __VLS_25: {
     side: MagicTraySide;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_25>]?: (props: typeof __VLS_26) => any;
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
 } & {
     background?: (props: typeof __VLS_9) => any;
 } & {