@wyxos/vibe 1.2.9 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/src/App.vue

@@ -35,7 +35,7 @@ const getPage = async (page) => {
         <p>Loading: <span class="bg-blue-500 text-white p-2 rounded">{{ masonry.isLoading }}</span></p>
       </div>
     </header>
-    <masonry v-model:items="items" :get-next-page="getPage" ref="masonry">
+    <masonry class="bg-blue-500 " v-model:items="items" :get-next-page="getPage" ref="masonry">
       <template #item="{item, onRemove}">
         <img :src="item.src" class="w-full"/>
         <button class="absolute bottom-0 right-0 bg-red-500 text-white p-2 rounded cursor-pointer" @click="onRemove(item)">

package/src/Masonry.vue

@@ -88,7 +88,9 @@ async function onScroll() {
 
   const whitespaceVisible = columnHeights.value.some(height => height + 300 < visibleBottom - 1)
 
-  if (whitespaceVisible && !isLoading.value) {
+  const reachedContainerBottom = scrollTop + clientHeight >= containerHeight.value - 1
+
+  if ((whitespaceVisible || reachedContainerBottom) && !isLoading.value) {
     isLoading.value = true
 
     if (paginationHistory.value.length > 3) {
@@ -256,13 +258,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="overflow-auto bg-blue-500 w-full flex-1" ref="container">
+  <div class="overflow-auto w-full flex-1" ref="container">
     <div class="relative" :style="{height: `${containerHeight}px`}">
       <transition-group :css="false" @enter="onEnter" @before-enter="onBeforeEnter"
                         @leave="onLeave"
                         @before-leave="onBeforeLeave">
         <div v-for="item in masonry" :key="`${item.page}-${item.id}`"
-             class="bg-slate-200 absolute transition-[top,left,opacity] duration-500 ease-in-out"
+             class="absolute transition-[top,left,opacity] duration-500 ease-in-out"
              v-bind="itemAttributes(item)">
           <slot name="item" v-bind="{item, onRemove}">
             <img :src="item.src" class="w-full"/>

package/src/calculateLayout.js

@@ -56,12 +56,12 @@ export default function calculateLayout(items, container, columnCount, options =
 
         const col = index % columnCount;
         const originalWidth = item.width;
-        const originalHeight = item.height;
+        const originalHeight = item.height + footer + header;
 
         newItem.columnWidth = columnWidth;
         newItem.left = col * (columnWidth + gutterX);
         newItem.columnHeight = Math.round((columnWidth * originalHeight) / originalWidth);
-        newItem.top = columnHeights[col] + header + footer;
+        newItem.top = columnHeights[col];
 
         columnHeights[col] += newItem.columnHeight + gutterY;