@maas/vue-equipment 0.15.0 → 0.16.0

package/dist/nuxt/module.json

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

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/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue

@@ -18,16 +18,11 @@ interface Props {
 
 const props = defineProps<Props>()
 const targetRef = ref<HTMLElement | undefined>(undefined)
-const colDetect = ref()
 
 const scrollPosition = inject(ScrollPositionKey, undefined)
 const pageYOffset = computed(() => toValue(scrollPosition?.y) || 0)
 
 onMounted(() => {
-  colDetect.value = useCollisionDetect(
-    pageYOffset,
-    props.collisionEntries,
-    toValue(targetRef.value),
-  )
+  useCollisionDetect(pageYOffset, props.collisionEntries, toValue(targetRef))
 })
 </script>

package/dist/plugins/MagicScroll/src/composables/useCollisionDetect.d.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { CollisionEntry, CollisionMappedEntry } from '../types.js';
+import type { CollisionEntry, MappedCollisionEntry } from '../types.js';
 export declare function useCollisionDetect(pageYOffset: ComputedRef<number>, collisionEntries: CollisionEntry[], parent: HTMLElement | undefined): {
-    collisionMappedEntries: Ref<CollisionMappedEntry[]>;
+    mappedCollisionEntries: Ref<MappedCollisionEntry[]>;
 };
 export type UseCollisionDetectReturn = ReturnType<typeof useCollisionDetect>;

package/dist/plugins/MagicScroll/src/composables/useCollisionDetect.mjs

@@ -5,7 +5,7 @@ export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
   const scrolled = ref(0);
   const intersecting = ref();
   const scrollDirection = ref();
-  const collisionMappedEntries = ref([]);
+  const mappedCollisionEntries = ref([]);
   const oppositeScrollDirection = computed(
     () => scrollDirection.value === "up" ? "down" : "up"
   );
@@ -19,7 +19,7 @@ export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
   function initialize() {
     if (!parent)
       return;
-    collisionMappedEntries.value = collisionEntries.map((entry) => {
+    mappedCollisionEntries.value = collisionEntries.map((entry) => {
       const alerted = {
         up: {
           top: false,
@@ -32,8 +32,10 @@ export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
       };
       const offset = { top: 0, bottom: 0, ...entry.offset };
       const element = entry.element ? parent?.querySelector(entry.element) : parent;
+      if (!element)
+        return void 0;
       return { ...entry, offset, element, alerted };
-    });
+    }).filter((element) => !!element);
     useIntersectionObserver(
       parent.querySelector("*"),
       ([{ isIntersecting }]) => {
@@ -51,9 +53,9 @@ export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
     }
     scrollDirection.value = scrolled.value <= pageYOffset.value ? "down" : "up";
     scrolled.value = pageYOffset.value;
-    let i = collisionMappedEntries.value.length;
+    let i = mappedCollisionEntries.value.length;
     while (i--) {
-      const entry = collisionMappedEntries.value[i];
+      const entry = mappedCollisionEntries.value[i];
       if (!entry.element)
         return;
       const boundingRect = entry.element.getBoundingClientRect();
@@ -66,7 +68,7 @@ export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
     }
   }
   function resetAll() {
-    collisionMappedEntries.value = collisionMappedEntries.value.map((entry) => {
+    mappedCollisionEntries.value = mappedCollisionEntries.value.map((entry) => {
       const alerted = {
         up: {
           top: false,
@@ -112,6 +114,6 @@ export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
     }
   );
   return {
-    collisionMappedEntries
+    mappedCollisionEntries
   };
 }

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

@@ -18,7 +18,7 @@ interface CollisionEntry {
     element?: string;
     data: Record<string, any>;
 }
-interface CollisionMappedEntry extends Omit<CollisionEntry, 'element'> {
+interface MappedCollisionEntry extends Omit<CollisionEntry, 'element'> {
     alerted: {
         up: AlertPositions;
         down: AlertPositions;
@@ -30,4 +30,4 @@ type Dimensions = {
     height: number;
 };
 type FromTo = 'top-top' | 'top-center' | 'top-bottom' | 'center-top' | 'center-center' | 'center-bottom' | 'bottom-top' | 'bottom-center' | 'bottom-bottom';
-export type { FromTo, CollisionEvents, CollisionEntry, CollisionMappedEntry, Dimensions, };
+export type { FromTo, CollisionEvents, CollisionEntry, MappedCollisionEntry, Dimensions, };

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.16.0",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",