@maas/vue-equipment 0.15.0 → 0.15.1

package/dist/nuxt/module.json

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

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

@@ -23,8 +23,10 @@ export function useDrawerDrag(args) {
     canClose,
     close
   } = args;
+  const elRect = ref(void 0);
+  const wrapperRect = ref(void 0);
   const { findClosestSnapPoint, mapSnapPoint, drawerHeight, drawerWidth } = useDrawerSnap({
-    wrapperRef,
+    wrapperRect,
     snapPoints,
     canClose,
     position,
@@ -34,7 +36,6 @@ export function useDrawerDrag(args) {
   const dragging = ref(false);
   const shouldClose = ref(false);
   const interpolateTo = ref(void 0);
-  const elRect = ref(void 0);
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   const originX = ref(0);
@@ -49,8 +50,10 @@ export function useDrawerDrag(args) {
   const style = computed(
     () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
   );
-  function getSizes() {
+  async function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
+    wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
+    await nextTick();
   }
   async function checkPosition() {
     switch (position) {
@@ -223,15 +226,23 @@ export function useDrawerDrag(args) {
     switch (position) {
       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({
           draggedX,
-          draggedY: mapSnapPoint(toValue(snapPoint)) || 0
+          draggedY: mappedSnapPointY
         }) || 0;
         break;
       case "left":
       case "right":
+        const mappedSnapPointX = mapSnapPoint(toValue(snapPoint));
+        if (!mappedSnapPointX)
+          return;
         draggedX.value = await findClosestSnapPoint({
-          draggedX: mapSnapPoint(toValue(snapPoint)) || 0,
+          draggedX: mappedSnapPointX,
           draggedY
         }) || 0;
         break;
@@ -329,14 +340,14 @@ export function useDrawerDrag(args) {
     onPointermove(e);
     e.preventDefault();
   }
-  onMounted(() => {
-    getSizes();
+  onMounted(async () => {
+    await getSizes();
     useDrawerEmitter().on("*", emitterCallback);
   });
   watch(
     () => [unrefElement(elRef), unrefElement(wrapperRef)],
-    () => {
-      getSizes();
+    async () => {
+      await getSizes();
       setInitial();
     }
   );

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

@@ -2,7 +2,7 @@ import { type MaybeRef } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
 import { type SnapPoint } from '../../types.js';
 type UseDrawerSnapArgs = {
-    wrapperRef: MaybeRef<HTMLDivElement | undefined>;
+    wrapperRect: MaybeRef<DOMRect | undefined>;
     position: MaybeRef<DefaultOptions['position']>;
     snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
     canClose: MaybeRef<DefaultOptions['canClose']>;

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

@@ -1,27 +1,31 @@
-import { ref, computed, toValue, nextTick } from "vue";
-import { unrefElement } from "@vueuse/core";
+import { computed, toValue } from "vue";
 import { mapValue } from "@maas/vue-equipment/utils";
 export function useDrawerSnap(args) {
-  const { snapPoints, position, wrapperRef, overshoot, canClose } = args;
-  const wrapperRect = ref(void 0);
+  const { snapPoints, position, wrapperRect, overshoot, canClose } = args;
   const mappedSnapPoints = computed(() => {
     const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
     const mapped = extended.map((snapPoint) => {
       return mapSnapPoint(snapPoint);
     });
-    const filtered = mapped.filter((snapPoint) => !!snapPoint).sort((a, b) => a - b);
+    const filtered = mapped.filter(
+      (snapPoint) => !!snapPoint || snapPoint === 0
+    ).sort((a, b) => a - b);
     return filtered;
   });
-  const drawerHeight = computed(
-    () => wrapperRect.value?.height - toValue(overshoot)
-  );
-  const drawerWidth = computed(
-    () => wrapperRect.value?.width - toValue(overshoot)
-  );
-  async function getSizes() {
-    wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
-    await nextTick();
-  }
+  const drawerHeight = computed(() => {
+    if (toValue(wrapperRect) === void 0) {
+      return 0;
+    } else {
+      return toValue(wrapperRect)?.height - toValue(overshoot);
+    }
+  });
+  const drawerWidth = computed(() => {
+    if (toValue(wrapperRect) === void 0) {
+      return 0;
+    } else {
+      return toValue(wrapperRect)?.width - toValue(overshoot);
+    }
+  });
   function findClosestNumber(args2) {
     const { number, numbers, direction } = args2;
     let filtered = numbers;
@@ -53,7 +57,7 @@ export function useDrawerSnap(args) {
       const reversedSnapPoint = mapValue(snapPoint, 0, 1, 1, 0);
       const vh = window.innerHeight;
       const vw = window.innerWidth;
-      if (wrapperRect.value === void 0) {
+      if (toValue(wrapperRect) === void 0) {
         return void 0;
       }
       switch (position) {
@@ -63,34 +67,34 @@ export function useDrawerSnap(args) {
           else if (reversedSnapPoint === 0)
             return 0;
           else
-            return vh * reversedSnapPoint - wrapperRect.value?.top;
+            return vh * reversedSnapPoint - toValue(wrapperRect)?.top;
         case "top":
           if (reversedSnapPoint === 1)
             return drawerHeight.value * -1;
           else if (reversedSnapPoint === 0)
             return 0;
           else
-            return vh * reversedSnapPoint - wrapperRect.value?.bottom;
+            return vh * reversedSnapPoint - toValue(wrapperRect)?.bottom;
         case "right":
           if (reversedSnapPoint === 1)
             return drawerWidth.value;
           else if (reversedSnapPoint === 0)
             return 0;
           else
-            return vw * reversedSnapPoint - wrapperRect.value?.left;
+            return vw * reversedSnapPoint - toValue(wrapperRect)?.left;
         case "left":
           if (reversedSnapPoint === 1)
             return drawerWidth.value * -1;
           else if (reversedSnapPoint === 0)
             return 0;
           else
-            return vw * reversedSnapPoint - wrapperRect.value?.right;
+            return vw * reversedSnapPoint - toValue(wrapperRect)?.right;
         default:
           return 0;
       }
     } else {
       const parsedSnapPoint = parseFloat(snapPoint);
-      if (drawerHeight.value === void 0 || drawerWidth.value === void 0) {
+      if (!drawerHeight.value || !drawerWidth.value) {
         return void 0;
       }
       switch (position) {
@@ -109,7 +113,6 @@ export function useDrawerSnap(args) {
   }
   async function findClosestSnapPoint(args2) {
     const { draggedY, draggedX, direction = "absolute" } = args2;
-    await getSizes();
     let closest = 0;
     switch (position) {
       case "bottom":

package/package.json

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