@maas/vue-equipment 0.25.1 → 0.25.3

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.25.0"
+  "version": "0.25.2"
 }

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

@@ -154,6 +154,15 @@ const {
   removeScrollLockPadding,
 } = drawerApi
 
+// Make sure this is reactive
+const disabled = computed(() => {
+  if (props.options.disabled === undefined) {
+    return defaultOptions.disabled
+  } else {
+    return props.options.disabled
+  }
+})
+
 const { onPointerdown, onClick, style, hasDragged } = useDrawerDrag({
   id: props.id,
   isActive,
@@ -171,6 +180,7 @@ const { initializeWheelListener, destroyWheelListener } = useDrawerWheel({
   id: props.id,
   elRef,
   position,
+  disabled,
 })
 
 const { findState } = useDrawerState(props.id)
@@ -225,15 +235,6 @@ const contentTransition = computed(() => {
     : mappedOptions.transitions?.content
 })
 
-// Make sure this is reactive
-const disabled = computed(() => {
-  if (props.options.disabled === undefined) {
-    return defaultOptions.disabled
-  } else {
-    return props.options.disabled
-  }
-})
-
 // Private functions
 function convertToPixels(value: string) {
   const regex = /^(\d*\.?\d+)\s*(rem|px)$/

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

@@ -152,30 +152,30 @@ export function useDrawerDrag(args) {
       case "bottom":
       case "top":
         if (velocityY > toValue(threshold).momentum) {
-          const snapPointB = findClosestSnapPoint({
+          const snapPointY = findClosestSnapPoint({
             draggedX: 0,
             draggedY,
             direction: relDirectionY.value
           });
-          if (snapPointB === drawerHeight.value) {
+          if (snapPointY === drawerHeight.value) {
             shouldClose.value = true;
           } else {
-            interpolateTo.value = snapPointB;
+            interpolateTo.value = snapPointY;
           }
         }
         break;
       case "right":
       case "left":
         if (velocityX > toValue(threshold).momentum) {
-          const snapPointR = findClosestSnapPoint({
+          const snapPointX = findClosestSnapPoint({
             draggedX,
             draggedY,
             direction: relDirectionX.value
           });
-          if (snapPointR === drawerWidth.value) {
+          if (snapPointX === drawerWidth.value) {
             shouldClose.value = true;
           } else {
-            interpolateTo.value = snapPointR;
+            interpolateTo.value = snapPointX;
           }
         }
         break;
@@ -185,21 +185,29 @@ export function useDrawerDrag(args) {
     switch (position) {
       case "bottom":
         const newDraggedB = clamp(y - originY.value, 0, toValue(overshoot) * -1);
+        if (newDraggedB === draggedY.value)
+          break;
         relDirectionY.value = newDraggedB < draggedY.value ? "below" : "above";
         draggedY.value = newDraggedB;
         break;
       case "top":
         const newDraggedT = clamp(y - originY.value, 0, toValue(overshoot));
+        if (newDraggedT === draggedY.value)
+          break;
         relDirectionY.value = newDraggedT < draggedY.value ? "below" : "above";
         draggedY.value = newDraggedT;
         break;
       case "right":
         const newDraggedR = clamp(x - originX.value, 0, toValue(overshoot) * -1);
+        if (newDraggedR === draggedX.value)
+          break;
         relDirectionX.value = newDraggedR < draggedX.value ? "below" : "above";
         draggedX.value = newDraggedR;
         break;
       case "left":
         const newDraggedL = clamp(x - originX.value, 0, toValue(overshoot));
+        if (newDraggedL === draggedX.value)
+          break;
         relDirectionX.value = newDraggedL < draggedX.value ? "below" : "above";
         draggedX.value = newDraggedL;
         break;
@@ -291,7 +299,7 @@ export function useDrawerDrag(args) {
           snappedX.value = interpolateTo.value;
           break;
       }
-    } else if (hasDragged.value) {
+    } else {
       switch (position) {
         case "bottom":
         case "top":

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

@@ -238,9 +238,7 @@ export function useDrawerSnap(args) {
     switch (position) {
       case "bottom":
       case "top":
-        if (!toValue(draggedY2)) {
-          break;
-        } else {
+        if (!!toValue(draggedY2) || toValue(draggedY2) === 0) {
           closest = findClosestNumber({
             number: toValue(draggedY2),
             numbers: mappedSnapPoints.value,
@@ -250,9 +248,7 @@ export function useDrawerSnap(args) {
         }
       case "right":
       case "left":
-        if (!toValue(draggedX2)) {
-          break;
-        } else {
+        if (!!toValue(draggedX2) || toValue(draggedX2) === 0) {
           closest = findClosestNumber({
             number: toValue(draggedX2),
             numbers: mappedSnapPoints.value,

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

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

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

@@ -1,9 +1,12 @@
-import { computed, toValue } from "vue";
+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, position } = args;
+  const { id, elRef, position, disabled } = args;
   const { findState } = useDrawerState(toValue(id));
   const { dragging, wheeling } = findState();
   let startEvent;
@@ -18,7 +21,7 @@ export function useDrawerWheel(args) {
     }
   });
   const wheelGestures = WheelGestures({
-    preventWheelAction: axis.value,
+    preventWheelAction: disabled ? false : axis.value,
     reverseSign: [true, true, false]
     // Reverse scroll direction for x and y axis
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.25.1",
+  "version": "0.25.3",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",