@wyxos/vibe 1.2.10 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "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 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() {
@@ -237,11 +242,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
 
@@ -258,13 +271,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

@@ -60,8 +60,9 @@ export default function calculateLayout(items, container, columnCount, options =
 
         newItem.columnWidth = columnWidth;
         newItem.left = col * (columnWidth + gutterX);
-        newItem.columnHeight = Math.round((columnWidth * originalHeight) / originalWidth);
-        newItem.top = columnHeights[col] + header + footer;
+        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
-                )
-            }
-        }
-    })
-})