@wyxos/vibe 1.6.13 → 1.6.14

package/src/components/examples/HeaderFooterExample.vue

@@ -0,0 +1,78 @@
+<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>
+
+
+

package/src/useMasonryScroll.ts

@@ -1,60 +1,60 @@
-import { nextTick, type Ref } from 'vue'
-import { calculateColumnHeights } from './masonryUtils'
-import type { ProcessedMasonryItem } from './types'
-
-/**
- * Composable for handling masonry scroll behavior and item cleanup
- */
-export function useMasonryScroll({
-  container,
-  masonry,
-  columns,
-  containerHeight,
-  isLoading,
-  pageSize,
-  refreshLayout,
-  setItemsRaw,
-  loadNext,
-  loadThresholdPx
-}: {
-  container: Ref<HTMLElement | null>
-  masonry: Ref<ProcessedMasonryItem[]>
-  columns: Ref<number>
-  containerHeight: Ref<number>
-  isLoading: Ref<boolean>
-  pageSize: number
-  refreshLayout: (items: ProcessedMasonryItem[]) => void
-  setItemsRaw: (items: ProcessedMasonryItem[]) => void
-  loadNext: () => Promise<any>
-  loadThresholdPx?: number
-}) {
-  let cleanupInProgress = false
-  let lastScrollTop = 0
-
-  async function handleScroll(precomputedHeights?: number[]) {
-    if (!container.value) return
-
-    const columnHeights = precomputedHeights ?? calculateColumnHeights(masonry.value, columns.value)
-    const tallest = columnHeights.length ? Math.max(...columnHeights) : 0
-    const scrollerBottom = container.value.scrollTop + container.value.clientHeight
-
-    const isScrollingDown = container.value.scrollTop > lastScrollTop + 1 // tolerate tiny jitter
-    lastScrollTop = container.value.scrollTop
-
-    const threshold = typeof loadThresholdPx === 'number' ? loadThresholdPx : 200
-    const triggerPoint = threshold >= 0
-      ? Math.max(0, tallest - threshold)
-      : Math.max(0, tallest + threshold)
-    const nearBottom = scrollerBottom >= triggerPoint
-
-    if (nearBottom && isScrollingDown && !isLoading.value) {
-      await loadNext()
-      await nextTick()
-      return
-    }
-  }
-
-  return {
-    handleScroll
-  }
-}
+import { nextTick, type Ref } from 'vue'
+import { calculateColumnHeights } from './masonryUtils'
+import type { ProcessedMasonryItem } from './types'
+
+/**
+ * Composable for handling masonry scroll behavior and item cleanup
+ */
+export function useMasonryScroll({
+  container,
+  masonry,
+  columns,
+  containerHeight,
+  isLoading,
+  pageSize,
+  refreshLayout,
+  setItemsRaw,
+  loadNext,
+  loadThresholdPx
+}: {
+  container: Ref<HTMLElement | null>
+  masonry: Ref<ProcessedMasonryItem[]>
+  columns: Ref<number>
+  containerHeight: Ref<number>
+  isLoading: Ref<boolean>
+  pageSize: number
+  refreshLayout: (items: ProcessedMasonryItem[]) => void
+  setItemsRaw: (items: ProcessedMasonryItem[]) => void
+  loadNext: () => Promise<any>
+  loadThresholdPx?: number
+}) {
+  let cleanupInProgress = false
+  let lastScrollTop = 0
+
+  async function handleScroll(precomputedHeights?: number[]) {
+    if (!container.value) return
+
+    const columnHeights = precomputedHeights ?? calculateColumnHeights(masonry.value, columns.value)
+    const tallest = columnHeights.length ? Math.max(...columnHeights) : 0
+    const scrollerBottom = container.value.scrollTop + container.value.clientHeight
+
+    const isScrollingDown = container.value.scrollTop > lastScrollTop + 1 // tolerate tiny jitter
+    lastScrollTop = container.value.scrollTop
+
+    const threshold = typeof loadThresholdPx === 'number' ? loadThresholdPx : 200
+    const triggerPoint = threshold >= 0
+      ? Math.max(0, tallest - threshold)
+      : Math.max(0, tallest + threshold)
+    const nearBottom = scrollerBottom >= triggerPoint
+
+    if (nearBottom && isScrollingDown && !isLoading.value) {
+      await loadNext()
+      await nextTick()
+      return
+    }
+  }
+
+  return {
+    handleScroll
+  }
+}

package/src/views/Examples.vue

@@ -125,6 +125,29 @@ async function getNextPage(page) {
 </template>'
                   />
                 </div>
+                -->
+              </div>
+            </section>
+
+            <!-- Header & Footer Example -->
+            <section id="header-footer" ref="headerFooterRef" class="scroll-mt-24">
+              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
+                  <h2 class="text-2xl font-bold text-slate-800">Header & Footer</h2>
+                  <p class="text-slate-600 mt-1">
+                    Use `layout.header` and `layout.footer` with slots to add per-item UI like badges, titles and actions.
+                  </p>
+                </div>
+                
+                <!-- Live Example -->
+                <div class="p-6 bg-slate-50">
+                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
+                    <HeaderFooterExample />
+                  </div>
+                </div>
+
+                <!-- Code Tabs omitted for this example to keep docs build-safe.
+                     See the Header & Footer example component for full code. -->
               </div>
             </section>
 
@@ -190,21 +213,25 @@ async function getNextPage(page) {
 </template>
 
 <script setup lang="ts">
+// @ts-nocheck - documentation page with inline string code samples that Vue/TS can't statically analyze cleanly
 import { ref, onMounted, onUnmounted } from 'vue'
 import CodeTabs from '../components/CodeTabs.vue'
 import BasicExample from '../components/examples/BasicExample.vue'
 import CustomItemExample from '../components/examples/CustomItemExample.vue'
 import SwipeModeExample from '../components/examples/SwipeModeExample.vue'
+import HeaderFooterExample from '../components/examples/HeaderFooterExample.vue'
 
 const examples = [
   { id: 'basic', title: 'Basic Usage' },
   { id: 'custom-item', title: 'Custom Masonry Item' },
+  { id: 'header-footer', title: 'Header & Footer' },
   { id: 'swipe-mode', title: 'Swipe Mode' }
 ]
 
 const activeSection = ref('basic')
 const basicRef = ref<HTMLElement | null>(null)
 const customItemRef = ref<HTMLElement | null>(null)
+const headerFooterRef = ref<HTMLElement | null>(null)
 const swipeModeRef = ref<HTMLElement | null>(null)
 
 function scrollTo(id: string) {
@@ -219,6 +246,7 @@ function updateActiveSection() {
   const sections = [
     { id: 'basic', ref: basicRef },
     { id: 'custom-item', ref: customItemRef },
+    { id: 'header-footer', ref: headerFooterRef },
     { id: 'swipe-mode', ref: swipeModeRef }
   ]