@maas/vue-equipment 0.15.1 → 0.16.0

package/dist/nuxt/module.json

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

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