@wyxos/vibe 1.6.25 → 1.6.27

package/src/components/examples/BasicExample.vue

@@ -1,9 +1,10 @@
 <template>
   <Masonry
     v-model:items="items"
-    :get-next-page="getPage"
+    :get-page="getPage"
     :load-at-page="1"
     :layout="layout"
+    init="auto"
   />
 </template>
 

package/src/components/examples/CustomItemExample.vue

@@ -1,9 +1,10 @@
 <template>
   <Masonry
     v-model:items="items"
-    :get-next-page="getPage"
+    :get-page="getPage"
     :load-at-page="1"
     :layout="layout"
+    init="auto"
   >
     <template #item="{ item, remove }">
       <div class="custom-card">

package/src/components/examples/HeaderFooterExample.vue

@@ -1,78 +1,79 @@
-<template>
-  <Masonry
-    v-model:items="items"
-    :get-next-page="getPage"
-    :load-at-page="1"
-    :layout="layout"
-  >
-    <template #item-header="{ item }">
-      <div class="h-full flex items-center justify-between px-3">
-        <div class="flex items-center gap-2">
-          <div class="w-6 h-6 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm">
-            <i :class="item.type === 'video' ? 'fas fa-video text-[10px] text-slate-500' : 'fas fa-image text-[10px] text-slate-500'"></i>
-          </div>
-          <span class="text-xs font-medium text-slate-700">#{{ String(item.id).split('-')[0] }}</span>
-        </div>
-        <span v-if="item.title" class="text-[11px] text-slate-600 truncate max-w-[160px]">{{ item.title }}</span>
-      </div>
-    </template>
-
-    <template #item-footer="{ item, remove }">
-      <div class="h-full flex items-center justify-between px-3">
-        <div class="flex items-center gap-2">
-          <button
-            v-if="remove"
-            class="px-2.5 py-1 rounded-full bg-white/90 text-slate-700 text-[11px] shadow-sm hover:bg-red-500 hover:text-white transition-colors"
-            @click.stop="remove(item)"
-          >
-            Remove
-          </button>
-        </div>
-        <div class="text-[11px] text-slate-600">
-          {{ item.width }}×{{ item.height }}
-        </div>
-      </div>
-    </template>
-  </Masonry>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import Masonry from '../../Masonry.vue'
-import fixture from '../../pages.json'
-import type { MasonryItem, GetPageResult } from '../../types'
-
-const items = ref<MasonryItem[]>([])
-
-const layout = {
-  sizes: { base: 1, sm: 2, md: 3, lg: 4 },
-  gutterX: 10,
-  gutterY: 10,
-  header: 36,
-  footer: 40
-}
-
-const getPage = async (page: number): Promise<GetPageResult> => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
-      
-      if (!pageData) {
-        resolve({
-          items: [],
-          nextPage: null
-        })
-        return
-      }
-      
-      resolve({
-        items: pageData.items,
-        nextPage: page < (fixture as any[]).length ? page + 1 : null
-      })
-    }, 300)
-  })
-}
-</script>
-
-
-
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-page="getPage"
+    :load-at-page="1"
+    :layout="layout"
+    init="auto"
+  >
+    <template #item-header="{ item }">
+      <div class="h-full flex items-center justify-between px-3">
+        <div class="flex items-center gap-2">
+          <div class="w-6 h-6 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm">
+            <i :class="item.type === 'video' ? 'fas fa-video text-[10px] text-slate-500' : 'fas fa-image text-[10px] text-slate-500'"></i>
+          </div>
+          <span class="text-xs font-medium text-slate-700">#{{ String(item.id).split('-')[0] }}</span>
+        </div>
+        <span v-if="item.title" class="text-[11px] text-slate-600 truncate max-w-[160px]">{{ item.title }}</span>
+      </div>
+    </template>
+
+    <template #item-footer="{ item, remove }">
+      <div class="h-full flex items-center justify-between px-3">
+        <div class="flex items-center gap-2">
+          <button
+            v-if="remove"
+            class="px-2.5 py-1 rounded-full bg-white/90 text-slate-700 text-[11px] shadow-sm hover:bg-red-500 hover:text-white transition-colors"
+            @click.stop="remove(item)"
+          >
+            Remove
+          </button>
+        </div>
+        <div class="text-[11px] text-slate-600">
+          {{ item.width }}×{{ item.height }}
+        </div>
+      </div>
+    </template>
+  </Masonry>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Masonry from '../../Masonry.vue'
+import fixture from '../../pages.json'
+import type { MasonryItem, GetPageResult } from '../../types'
+
+const items = ref<MasonryItem[]>([])
+
+const layout = {
+  sizes: { base: 1, sm: 2, md: 3, lg: 4 },
+  gutterX: 10,
+  gutterY: 10,
+  header: 36,
+  footer: 40
+}
+
+const getPage = async (page: number): Promise<GetPageResult> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
+      
+      if (!pageData) {
+        resolve({
+          items: [],
+          nextPage: null
+        })
+        return
+      }
+      
+      resolve({
+        items: pageData.items,
+        nextPage: page < (fixture as any[]).length ? page + 1 : null
+      })
+    }, 300)
+  })
+}
+</script>
+
+
+

package/src/components/examples/ManualInitExample.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="relative h-full">
+    <div
+      v-if="!isInitialized"
+      class="absolute inset-0 z-10 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm"
+    >
+      <button
+        type="button"
+        class="inline-flex items-center gap-2 rounded-full bg-white px-5 py-2 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md"
+        @click="handleInit"
+      >
+        Load gallery
+        <span class="text-slate-400">-></span>
+      </button>
+    </div>
+
+    <Masonry
+      ref="masonryRef"
+      v-model:items="items"
+      :get-page="getPage"
+      :load-at-page="1"
+      :layout="layout"
+      init="manual"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Masonry from '../../Masonry.vue'
+import fixture from '../../pages.json'
+import type { MasonryItem, GetPageResult } from '../../types'
+
+const items = ref<MasonryItem[]>([])
+const isInitialized = ref(false)
+const masonryRef = ref<InstanceType<typeof Masonry> | null>(null)
+
+const layout = {
+  sizes: { base: 1, sm: 2, md: 3, lg: 4 },
+  gutterX: 10,
+  gutterY: 10
+}
+
+const getPage = async (page: number): Promise<GetPageResult> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
+
+      if (!pageData) {
+        resolve({
+          items: [],
+          nextPage: null
+        })
+        return
+      }
+
+      resolve({
+        items: pageData.items,
+        nextPage: page < (fixture as any[]).length ? page + 1 : null
+      })
+    }, 300)
+  })
+}
+
+function handleInit() {
+  if (isInitialized.value) {
+    return
+  }
+
+  isInitialized.value = true
+  masonryRef.value?.loadPage(1)
+}
+</script>
+
+
+
+
+

package/src/components/examples/SwipeModeExample.vue

@@ -1,9 +1,10 @@
 <template>
   <Masonry
     v-model:items="items"
-    :get-next-page="getPage"
+    :get-page="getPage"
     :load-at-page="1"
     layout-mode="swipe"
+    init="auto"
   />
 </template>
 

package/src/{useMasonryTransitions.ts → createMasonryTransitions.ts}

@@ -1,8 +1,8 @@
 /**
- * Composable for handling masonry item transitions (typed)
+ * Factory for masonry item transitions (typed)
  * Optimized for large item arrays by skipping DOM operations for items outside viewport
  */
-export function useMasonryTransitions(
+export function createMasonryTransitions(
   refs: { container?: any; masonry?: any },
   opts?: { leaveDurationMs?: number; virtualizing?: { value: boolean } }
 ) {
@@ -80,7 +80,7 @@ export function useMasonryTransitions(
   function onBeforeEnter(el: HTMLElement) {
     const left = parseInt(el.dataset.left || '0', 10)
     const top = parseInt(el.dataset.top || '0', 10)
-    
+
     // Skip animation during virtualization
     if (opts?.virtualizing?.value) {
       el.style.transition = 'none'
@@ -89,7 +89,7 @@ export function useMasonryTransitions(
       el.style.removeProperty('--masonry-opacity-delay')
       return
     }
-    
+
     el.style.opacity = '0'
     el.style.transform = `translate3d(${left}px, ${top + 10}px, 0) scale(0.985)`
   }
@@ -141,8 +141,8 @@ export function useMasonryTransitions(
     }
 
     // Prefer explicit option, fallback to CSS variable for safety
-    const fromOpts = typeof opts?.leaveDurationMs === 'number' ? opts!.leaveDurationMs : NaN
-    let leaveMs = Number.isFinite(fromOpts) && fromOpts > 0 ? fromOpts : NaN
+    const fromOpts = typeof opts?.leaveDurationMs === 'number' ? opts!.leaveDurationMs : Number.NaN
+    let leaveMs = Number.isFinite(fromOpts) && fromOpts > 0 ? fromOpts : Number.NaN
     if (!Number.isFinite(leaveMs)) {
       const cs = getComputedStyle(el)
       const varVal = cs.getPropertyValue('--masonry-leave-duration') || ''