@maas/vue-equipment 0.16.1 → 0.16.3

package/dist/nuxt/module.json

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

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

@@ -141,6 +141,7 @@ const {
 } = drawerApi
 
 const { onPointerdown, dragging, style } = useDrawerDrag({
+  id: props.id,
   elRef,
   wrapperRef,
   position,

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

@@ -1,6 +1,7 @@
 import { type MaybeRef } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
 type UseDrawerDragArgs = {
+    id: MaybeRef<string>;
     elRef: MaybeRef<HTMLDivElement | undefined>;
     wrapperRef: MaybeRef<HTMLDivElement | undefined>;
     position: MaybeRef<DefaultOptions['position']>;

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

@@ -13,6 +13,7 @@ import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
 import { useDrawerSnap } from "./useDrawerSnap.mjs";
 export function useDrawerDrag(args) {
   const {
+    id,
     elRef,
     wrapperRef,
     snapPoints,
@@ -25,7 +26,13 @@ export function useDrawerDrag(args) {
   } = args;
   const elRect = ref(void 0);
   const wrapperRect = ref(void 0);
-  const { findClosestSnapPoint, mapSnapPoint, drawerHeight, drawerWidth } = useDrawerSnap({
+  const {
+    findClosestSnapPoint,
+    mapSnapPoint,
+    snapPointsMap,
+    drawerHeight,
+    drawerWidth
+  } = useDrawerSnap({
     wrapperRect,
     snapPoints,
     canClose,
@@ -227,8 +234,6 @@ export function useDrawerDrag(args) {
       case "top":
       case "bottom":
         const mappedSnapPointY = mapSnapPoint(toValue(snapPoint));
-        console.log("toValue(snapPoint):", toValue(snapPoint));
-        console.log("mappedSnapPointY:", mappedSnapPointY);
         if (!mappedSnapPointY)
           return;
         draggedY.value = await findClosestSnapPoint({
@@ -263,13 +268,15 @@ export function useDrawerDrag(args) {
     snappedX.value = 0;
     snappedY.value = 0;
   }
-  function emitterCallback(event, _payload) {
-    if (event === "afterLeave") {
+  function emitterCallback(event, payload) {
+    if (event === "afterLeave" && payload === toValue(id)) {
       resetDragged();
       resetSnapped();
     }
   }
   async function interpolateDragged(target) {
+    const snapPoint2 = snapPointsMap.value[target];
+    useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint: snapPoint2 });
     switch (position) {
       case "bottom":
       case "top":
@@ -280,6 +287,12 @@ export function useDrawerDrag(args) {
           duration: 300,
           callback: (value) => {
             draggedY.value = value;
+            if (draggedY.value === target) {
+              useDrawerEmitter().emit("beforeSnap", {
+                id: toValue(id),
+                snapPoint: snapPoint2
+              });
+            }
           }
         });
         break;
@@ -292,6 +305,12 @@ export function useDrawerDrag(args) {
           duration: 300,
           callback: (value) => {
             draggedX.value = value;
+            if (draggedX.value === target) {
+              useDrawerEmitter().emit("beforeSnap", {
+                id: toValue(id),
+                snapPoint: snapPoint2
+              });
+            }
           }
         });
         break;

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

@@ -16,6 +16,7 @@ type FindClosestSnapPointArgs = {
 export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
     findClosestSnapPoint: (args: FindClosestSnapPointArgs) => Promise<number | undefined>;
     mapSnapPoint: (snapPoint: SnapPoint) => number | undefined;
+    snapPointsMap: import("vue").ComputedRef<Record<number, SnapPoint>>;
     drawerHeight: import("vue").ComputedRef<number>;
     drawerWidth: import("vue").ComputedRef<number>;
 };

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

@@ -12,6 +12,17 @@ export function useDrawerSnap(args) {
     ).sort((a, b) => a - b);
     return filtered;
   });
+  const snapPointsMap = computed(() => {
+    const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
+    const mapped = extended.reduce((acc, current) => {
+      const key = mapSnapPoint(current);
+      if (key || key === 0) {
+        acc[key] = current;
+      }
+      return acc;
+    }, {});
+    return mapped;
+  });
   const drawerHeight = computed(() => {
     if (toValue(wrapperRect) === void 0) {
       return 0;
@@ -134,5 +145,11 @@ export function useDrawerSnap(args) {
     }
     return closest;
   }
-  return { findClosestSnapPoint, mapSnapPoint, drawerHeight, drawerWidth };
+  return {
+    findClosestSnapPoint,
+    mapSnapPoint,
+    snapPointsMap,
+    drawerHeight,
+    drawerWidth
+  };
 }

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

@@ -34,4 +34,12 @@ export type DrawerEvents = {
     beforeLeave: string;
     leave: string;
     afterLeave: string;
+    beforeSnap: {
+        id: string;
+        snapPoint: SnapPoint;
+    };
+    afterSnap: {
+        id: string;
+        snapPoint: SnapPoint;
+    };
 };

package/package.json

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