@wyxos/vibe 1.2.11 → 1.2.13

package/package.json

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

package/src/App.vue

@@ -10,9 +10,21 @@ const masonry = ref(null)
 const getPage = async (page) => {
   return new Promise((resolve) => {
     setTimeout(() => {
+      // Check if the page exists in the fixture
+      const pageData = fixture[page - 1];
+
+      if (!pageData) {
+        // Return empty items if page doesn't exist
+        resolve({
+          items: [],
+          nextPage: null // null indicates no more pages
+        });
+        return;
+      }
+
       let output = {
-        items: fixture[page - 1].items,
-        nextPage: page + 1
+        items: pageData.items,
+        nextPage: page < fixture.length ? page + 1 : null
       };
 
       resolve(output)
@@ -35,7 +47,7 @@ const getPage = async (page) => {
         <p>Loading: <span class="bg-blue-500 text-white p-2 rounded">{{ masonry.isLoading }}</span></p>
       </div>
     </header>
-    <masonry class="bg-blue-500 " v-model:items="items" :get-next-page="getPage" ref="masonry">
+    <masonry class="bg-blue-500 " v-model:items="items" :get-next-page="getPage" :load-at-page="1" 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

@@ -10,8 +10,8 @@ const props = defineProps({
     }
   },
   loadAtPage: {
-    type: Number,
-    default: 1
+    type: [Number, String],
+    default: null
   },
   items: {
     type: Array,
@@ -24,6 +24,10 @@ const props = defineProps({
     type: String,
     default: 'page', // or 'cursor'
     validator: v => ['page', 'cursor'].includes(v)
+  },
+  skipInitialLoad: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -80,6 +84,7 @@ defineExpose({
   refreshLayout,
   containerHeight,
   onRemove,
+  loadNext
 })
 
 async function onScroll() {
@@ -94,14 +99,31 @@ async function onScroll() {
     isLoading.value = true
 
     if (paginationHistory.value.length > 3) {
-      // get first item
+      // get first item - only proceed if it exists
       const firstItem = masonry.value[0]
+      
+      if (!firstItem) {
+        // Skip removal logic if there are no items
+        await loadNext()
+        await nextTick()
+        isLoading.value = false
+        return
+      }
 
       // get page number
       const page = firstItem.page
 
       // find all item with this page
       const removedItems = masonry.value.filter(i => i.page !== page)
+      
+      // Only proceed with removal if there are actually items to remove
+      if (removedItems.length === masonry.value.length) {
+        // All items belong to the same page, skip removal logic
+        await loadNext()
+        await nextTick()
+        isLoading.value = false
+        return
+      }
 
       refreshLayout(removedItems)
 
@@ -111,16 +133,20 @@ async function onScroll() {
 
       // find the last item in that column
       const lastItemInColumn = masonry.value.filter((_, index) => index % columns.value === lowestColumnIndex).pop()
-      const lastItemInColumnTop = lastItemInColumn.top + lastItemInColumn.columnHeight
-      const lastItemInColumnBottom = lastItemInColumnTop + lastItemInColumn.columnHeight
-      const containerTop = container.value.scrollTop
-      const containerBottom = containerTop + container.value.clientHeight
-      const itemInView = lastItemInColumnTop >= containerTop && lastItemInColumnBottom <= containerBottom
-      if (!itemInView) {
-        container.value.scrollTo({
-          top: lastItemInColumnTop - 10,
-          behavior: 'smooth'
-        })
+      
+      // Only proceed with scroll adjustment if we have a valid item
+      if (lastItemInColumn) {
+        const lastItemInColumnTop = lastItemInColumn.top + lastItemInColumn.columnHeight
+        const lastItemInColumnBottom = lastItemInColumnTop + lastItemInColumn.columnHeight
+        const containerTop = container.value.scrollTop
+        const containerBottom = containerTop + container.value.clientHeight
+        const itemInView = lastItemInColumnTop >= containerTop && lastItemInColumnBottom <= containerBottom
+        if (!itemInView) {
+          container.value.scrollTo({
+            top: lastItemInColumnTop - 10,
+            behavior: 'smooth'
+          })
+        }
       }
     }
 
@@ -237,11 +263,19 @@ onMounted(async () => {
 
   columns.value = getColumnCount()
 
-  paginationHistory.value = [props.loadAtPage]
-
-  const response = await getContent(paginationHistory.value[0])
+  // For cursor-based pagination, loadAtPage can be null for the first request
+  const initialPage = props.loadAtPage
+  paginationHistory.value = [initialPage]
 
-  paginationHistory.value.push(response.nextPage)
+  // Skip initial load if skipInitialLoad prop is true
+  if (!props.skipInitialLoad) {
+    const response = await getContent(paginationHistory.value[0])
+    paginationHistory.value.push(response.nextPage)
+  } else {
+    await nextTick()
+    // Just refresh the layout with any existing items
+    refreshLayout(masonry.value)
+  }
 
   isLoading.value = false
 

package/src/calculateLayout.js

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

package/src/calculateLayout.test.js

@@ -1,48 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import calculateLayout from './calculateLayout'
-import fixture from './pages.json'
-
-describe('calculateLayout', () => {
-    it('should calculate correct layout positions for known inputs', () => {
-        const items = fixture[0].items.slice(0, 3) // first 3 items
-        const mockContainer = {
-            offsetWidth: 1000,
-            clientWidth: 980 // scrollbarWidth = 20
-        }
-        const columnCount = 3
-        const gutterX = 10
-        const gutterY = 10
-
-        const scrollbarWidth = mockContainer.offsetWidth - mockContainer.clientWidth
-        const usableWidth = mockContainer.offsetWidth - scrollbarWidth
-        const totalGutterX = gutterX * (columnCount - 1)
-        const expectedColumnWidth = Math.floor((usableWidth - totalGutterX) / columnCount)
-
-        const result = calculateLayout(items, mockContainer, columnCount, gutterX, gutterY)
-
-        expect(result.length).toBe(3)
-
-        result.forEach((item, i) => {
-            const original = items[i]
-            const expectedColumn = i % columnCount
-            const expectedLeft = expectedColumn * (expectedColumnWidth + gutterX)
-            const expectedHeight = Math.round((expectedColumnWidth * original.height) / original.width)
-
-            expect(item.left).toBe(expectedLeft)
-            expect(item.columnWidth).toBe(expectedColumnWidth)
-            expect(item.columnHeight).toBe(expectedHeight)
-        })
-
-        // Test top stacking logic: second item in same column should be placed below with gutter
-        const secondBatch = fixture[0].items.slice(0, 6)
-        const stacked = calculateLayout(secondBatch, mockContainer, columnCount, gutterX, gutterY)
-        for (let col = 0; col < columnCount; col++) {
-            const colItems = stacked.filter((_, i) => i % columnCount === col)
-            for (let j = 1; j < colItems.length; j++) {
-                expect(colItems[j].top).toBe(
-                    colItems[j - 1].top + colItems[j - 1].columnHeight + gutterY
-                )
-            }
-        }
-    })
-})