@wyxos/vibe 1.6.23 → 1.6.24

package/lib/vibe.css

@@ -1 +1 @@
-.masonry-container[data-v-9de56a55]{overflow-anchor:none}.masonry-item[data-v-9de56a55]{will-change:transform,opacity;contain:layout paint;transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),opacity var(--masonry-leave-duration, .16s) ease-out var(--masonry-opacity-delay, 0ms);backface-visibility:hidden}.masonry-move[data-v-9de56a55]{transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1))}@media (prefers-reduced-motion: reduce){.masonry-container:not(.force-motion) .masonry-item[data-v-9de56a55],.masonry-container:not(.force-motion) .masonry-move[data-v-9de56a55]{transition-duration:1ms!important}}
+.masonry-container[data-v-c6a3147d]{overflow-anchor:none}.masonry-item[data-v-c6a3147d]{will-change:transform,opacity;contain:layout paint;transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),opacity var(--masonry-leave-duration, .16s) ease-out var(--masonry-opacity-delay, 0ms);backface-visibility:hidden}.masonry-move[data-v-c6a3147d]{transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1))}@media (prefers-reduced-motion: reduce){.masonry-container:not(.force-motion) .masonry-item[data-v-c6a3147d],.masonry-container:not(.force-motion) .masonry-move[data-v-c6a3147d]{transition-duration:1ms!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.6.23",
+  "version": "1.6.24",
   "description": "A high-performance, responsive masonry layout engine for Vue 3 with built-in infinite scrolling and virtualization.",
   "keywords": [
     "vue",

package/src/Masonry.vue

@@ -45,6 +45,15 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  // Initial pagination state when skipInitialLoad is true and items are provided
+  initialPage: {
+    type: [Number, String],
+    default: null
+  },
+  initialNextPage: {
+    type: [Number, String],
+    default: null
+  },
   pageSize: {
     type: Number,
     default: 40
@@ -455,6 +464,9 @@ function reset() {
 
   // Reset virtualization state
   resetVirtualization()
+
+  // Reset auto-initialization flag so watcher can work again if needed
+  hasInitializedWithItems = false
 }
 
 function destroy() {
@@ -566,7 +578,9 @@ async function restoreItems(items: any[], page: any, next: any) {
   if (next !== null && next !== undefined) {
     paginationHistory.value.push(next)
   }
-  hasReachedEnd.value = next == null
+  // Only set hasReachedEnd to true if next is explicitly null (end of list)
+  // undefined means "unknown" - don't assume end of list
+  hasReachedEnd.value = next === null
   loadError.value = null
 
   // Diagnostics: check incoming items
@@ -639,6 +653,36 @@ watch(container, (el) => {
   }
 }, { immediate: true })
 
+// Watch for items when skipInitialLoad is true to auto-initialize pagination state
+// This handles cases where items are provided after mount or updated externally
+let hasInitializedWithItems = false
+watch(
+  () => [props.items, props.skipInitialLoad, props.initialPage, props.initialNextPage] as const,
+  ([items, skipInitialLoad, initialPage, initialNextPage]) => {
+    // Only auto-initialize if:
+    // 1. skipInitialLoad is true
+    // 2. Items exist
+    // 3. We haven't already initialized with items (to avoid re-initializing on every update)
+    if (
+      skipInitialLoad &&
+      items &&
+      items.length > 0 &&
+      !hasInitializedWithItems
+    ) {
+      hasInitializedWithItems = true
+      const page = initialPage !== null && initialPage !== undefined
+        ? initialPage
+        : (props.loadAtPage as any)
+      const next = initialNextPage !== undefined
+        ? initialNextPage
+        : undefined // undefined means "unknown", null means "end of list"
+
+      restoreItems(items as any[], page, next)
+    }
+  },
+  { immediate: false }
+)
+
 // Watch for swipe mode changes to refresh layout and setup/teardown handlers
 watch(useSwipeMode, (newValue, oldValue) => {
   // Skip if this is the initial watch call and values are the same
@@ -787,23 +831,20 @@ onMounted(async () => {
 
     if (!props.skipInitialLoad) {
       await loadPage(paginationHistory.value[0] as any)
-    } else {
-      // When skipInitialLoad is true, restore items from props if they exist
-      // This allows parent components to pass items via v-model and vibe handles restoration
-      if (props.items && props.items.length > 0) {
-        // Extract page and next from items if available, otherwise use loadAtPage
-        const firstItem = props.items[0] as any
-        const lastItem = props.items[props.items.length - 1] as any
-        const page = firstItem?.page ?? initialPage ?? 1
-        const next = lastItem?.next ?? null
-
-        // Restore items - this will set masonry.value and handle layout
-        await restoreItems(props.items, page, next)
-      } else {
-        // No items to restore, just initialize pagination state
-        currentPage.value = initialPage
-        paginationHistory.value = [initialPage]
-      }
+    } else if (props.items && props.items.length > 0) {
+      // When skipInitialLoad is true and items are provided, initialize pagination state
+      // Use initialPage/initialNextPage props if provided, otherwise use loadAtPage
+      // Only set next to null if initialNextPage is explicitly null (not undefined)
+      const page = props.initialPage !== null && props.initialPage !== undefined
+        ? props.initialPage
+        : (props.loadAtPage as any)
+      const next = props.initialNextPage !== undefined
+        ? props.initialNextPage
+        : undefined // undefined means "unknown", null means "end of list"
+
+      await restoreItems(props.items as any[], page, next)
+      // Mark as initialized to prevent watcher from running again
+      hasInitializedWithItems = true
     }
 
     if (!useSwipeMode.value) {