@maas/vue-equipment 1.0.0-beta.68 → 1.0.0-beta.69

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.67",
+  "version": "1.0.0-beta.68",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -109,10 +109,9 @@ const functions$1 = [
 	{
 		name: "MagicTray",
 		"package": "plugins",
-		lastUpdated: 0,
+		lastUpdated: 1781787163000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicTray/",
-		description: "MagicTray is a flexible",
-		soon: true
+		description: "MagicTray is a flexible"
 	},
 	{
 		name: "useCountdown",

package/dist/plugins/MagicDrawer/src/components/MagicDrawerContent.vue

@@ -127,6 +127,7 @@ const { onPointerdown, onTouchstart, onClick, style, hasDragged } = useDrawerDra
   wrapperRef,
   position: state.options.position,
   snapPoints: state.options.snapPoints,
+  snap: state.options.snap,
   threshold: state.options.threshold,
   overshoot,
   animation: state.options.animation,

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

@@ -6,6 +6,7 @@ type UseDrawerDragArgs = {
     wrapperRef: Ref<HTMLDivElement | null>;
     position: MaybeRef<RequiredMagicDrawerOptions['position']>;
     snapPoints: MaybeRef<RequiredMagicDrawerOptions['snapPoints']>;
+    snap: MaybeRef<RequiredMagicDrawerOptions['snap']>;
     threshold: MaybeRef<RequiredMagicDrawerOptions['threshold']>;
     initial: MaybeRef<RequiredMagicDrawerOptions['initial']>;
     animation: MaybeRef<RequiredMagicDrawerOptions['animation']>;

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

@@ -38,6 +38,7 @@ export function useDrawerDrag(args) {
     wrapperRef,
     position,
     snapPoints,
+    snap,
     overshoot,
     threshold,
     initial,
@@ -96,6 +97,13 @@ export function useDrawerDrag(args) {
   const style = computed(
     () => `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 {
     snappedY,
     snappedX,
@@ -142,7 +150,7 @@ export function useDrawerDrag(args) {
         if (distanceY > toValue(threshold).distance) {
           const snapPointY = findClosestSnapPoint({
             draggedX: 0,
-            draggedY,
+            draggedY: draggedRefY.value,
             direction: relDirectionY.value
           });
           if (Math.abs(snapPointY ?? 0) === drawerHeight.value) {
@@ -157,7 +165,7 @@ export function useDrawerDrag(args) {
       case "left": {
         if (distanceX > toValue(threshold).distance) {
           const snapPointX = findClosestSnapPoint({
-            draggedX,
+            draggedX: draggedRefX.value,
             draggedY: 0,
             direction: relDirectionX.value
           });
@@ -183,7 +191,7 @@ export function useDrawerDrag(args) {
         if (velocityY > toValue(threshold).momentum) {
           const snapPointY = findClosestSnapPoint({
             draggedX: 0,
-            draggedY,
+            draggedY: draggedRefY.value,
             direction: relDirectionY.value
           });
           if (Math.abs(snapPointY ?? 0) === drawerHeight.value) {
@@ -198,7 +206,7 @@ export function useDrawerDrag(args) {
       case "left": {
         if (velocityX > toValue(threshold).momentum) {
           const snapPointX = findClosestSnapPoint({
-            draggedX,
+            draggedX: draggedRefX.value,
             draggedY,
             direction: relDirectionX.value
           });

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

@@ -1,6 +1,7 @@
 import { type Options as FocusTrapOptions } from 'focus-trap';
 import type { RequireAllNested } from '@maas/vue-equipment/utils';
 export type DrawerSnapPoint = number | `${number}px`;
+export type DrawerSnapMode = 'closest' | 'step';
 export interface MagicDrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
     tag?: 'dialog' | 'div';
@@ -9,6 +10,9 @@ export interface MagicDrawerOptions {
         padding: boolean;
     };
     snapPoints?: DrawerSnapPoint[];
+    snap?: {
+        mode?: DrawerSnapMode;
+    };
     teleport?: {
         target?: string;
         disabled?: boolean;
@@ -42,6 +46,7 @@ export interface MagicDrawerOptions {
     disabled?: boolean;
 }
 export type RequiredMagicDrawerOptions = Required<MagicDrawerOptions> & {
+    snap: Required<MagicDrawerOptions['snap']>;
     scrollLock: Required<MagicDrawerOptions['scrollLock']>;
     threshold: Required<MagicDrawerOptions['threshold']>;
     animation: RequireAllNested<NonNullable<MagicDrawerOptions['animation']>>;

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

@@ -9,6 +9,9 @@ const defaultOptions = {
   },
   scrollLock: { padding: true },
   snapPoints: [1],
+  snap: {
+    mode: "closest"
+  },
   teleport: {
     target: "body",
     disabled: false