@wyxos/vibe 1.2.13 → 1.2.15

package/package.json

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

package/src/App.vue

@@ -43,8 +43,9 @@ const getPage = async (page) => {
         💾 <a href="https://github.com/wyxos/vibe" target="_blank" class="underline hover:text-black">Source on GitHub</a>
       </p>
 
-      <div v-if="masonry">
+      <div v-if="masonry" class="flex gap-4">
         <p>Loading: <span class="bg-blue-500 text-white p-2 rounded">{{ masonry.isLoading }}</span></p>
+        <p>Showing: <span class="bg-blue-500 text-white p-2 rounded">{{ items.length }}</span></p>
       </div>
     </header>
     <masonry class="bg-blue-500 " v-model:items="items" :get-next-page="getPage" :load-at-page="1" ref="masonry">

package/src/Masonry.vue

@@ -2,6 +2,14 @@
 import {computed, nextTick, onMounted, onUnmounted, ref} from "vue";
 import calculateLayout from "./calculateLayout.js";
 import { debounce } from 'lodash-es'
+import { 
+  getColumnCount, 
+  calculateContainerHeight, 
+  getItemAttributes,
+  calculateColumnHeights 
+} from './masonryUtils.js'
+import { useMasonryTransitions } from './useMasonryTransitions.js'
+import { useMasonryScroll } from './useMasonryScroll.js'
 
 const props = defineProps({
   getNextPage: {
@@ -28,6 +36,10 @@ const props = defineProps({
   skipInitialLoad: {
     type: Boolean,
     default: false
+  },
+  maxItems: {
+    type: Number,
+    default: 100
   }
 })
 
@@ -70,13 +82,21 @@ const isLoading = ref(false)
 const containerHeight = ref(0)
 
 const columnHeights = computed(() => {
-  const heights = new Array(columns.value).fill(0)
-  for (let i = 0; i < masonry.value.length; i++) {
-    const item = masonry.value[i]
-    const col = i % columns.value
-    heights[col] = Math.max(heights[col], item.top + item.columnHeight)
-  }
-  return heights
+  return calculateColumnHeights(masonry.value, columns.value)
+})
+
+// Setup composables
+const { onEnter, onBeforeEnter, onBeforeLeave, onLeave } = useMasonryTransitions(masonry)
+
+const { handleScroll } = useMasonryScroll({
+  container,
+  masonry,
+  columns,
+  containerHeight,
+  isLoading,
+  maxItems: props.maxItems,
+  refreshLayout,
+  loadNext
 })
 
 defineExpose({
@@ -84,97 +104,12 @@ defineExpose({
   refreshLayout,
   containerHeight,
   onRemove,
-  loadNext
+  loadNext,
+  loadPage
 })
 
-async function onScroll() {
-  const {scrollTop, clientHeight} = container.value
-  const visibleBottom = scrollTop + clientHeight
-
-  const whitespaceVisible = columnHeights.value.some(height => height + 300 < visibleBottom - 1)
-
-  const reachedContainerBottom = scrollTop + clientHeight >= containerHeight.value - 1
-
-  if ((whitespaceVisible || reachedContainerBottom) && !isLoading.value) {
-    isLoading.value = true
-
-    if (paginationHistory.value.length > 3) {
-      // 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)
-
-      await nextTick()
-
-      const lowestColumnIndex = columnHeights.value.indexOf(Math.min(...columnHeights.value))
-
-      // find the last item in that column
-      const lastItemInColumn = masonry.value.filter((_, index) => index % columns.value === lowestColumnIndex).pop()
-      
-      // 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'
-          })
-        }
-      }
-    }
-
-    await loadNext()
-
-    await nextTick()
-
-    isLoading.value = false
-  }
-}
-
-function getColumnCount() {
-  const width = window.innerWidth
-
-  const sizes = layout.value.sizes
-
-  if (width >= 1536 && sizes['2xl']) return sizes['2xl']
-  if (width >= 1280 && sizes.xl) return sizes.xl
-  if (width >= 1024 && sizes.lg) return sizes.lg
-  if (width >= 768 && sizes.md) return sizes.md
-  if (width >= 640 && sizes.sm) return sizes.sm
-  return sizes.base
-}
-
 function calculateHeight(content) {
-  containerHeight.value = content.reduce((acc, item) => {
-    return Math.max(acc, item.top + item.columnHeight)
-  }, 0)
+  containerHeight.value = calculateContainerHeight(content)
 }
 
 function refreshLayout(items) {
@@ -193,75 +128,30 @@ async function getContent(page) {
   return response
 }
 
-async function loadNext() {
-  const response = await getContent(paginationHistory.value[paginationHistory.value.length - 1])
+async function loadPage(page) {
+  const response = await getContent(page)
   paginationHistory.value.push(response.nextPage)
+  return response
 }
 
-const getItemStyle = (item) => {
-  return {
-    top: `${item.top}px`,
-    left: `${item.left}px`,
-    width: `${item.columnWidth}px`,
-    height: `${item.columnHeight}px`
-  }
+async function loadNext() {
+  const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
+  return await loadPage(currentPage)
 }
 
 function onRemove(item) {
   refreshLayout(masonry.value.filter(i => i.id !== item.id))
 }
 
-function onEnter(el, done) {
-  // set top to data-top
-  const top = el.dataset.top
-  requestAnimationFrame(() => {
-    el.style.top = `${top}px`
-    done()
-  })
-}
-
-function onBeforeEnter(el) {
-  // set top to last item + 500
-  const lastItem = masonry.value[masonry.value.length - 1]
-  if (lastItem) {
-    const lastTop = lastItem.top + lastItem.columnHeight + 10
-    el.style.top = `${lastTop}px`
-  } else {
-    el.style.top = '0px'
-  }
-}
-
-function onBeforeLeave(el) {
-  // Ensure it's at its current position before animating
-  el.style.transition = 'none'
-  el.style.top = `${el.offsetTop}px`
-  void el.offsetWidth // force reflow to flush style
-  el.style.transition = '' // allow transition to apply again
-}
-
-function onLeave(el, done) {
-  el.style.top = '-600px'
-  el.style.opacity = '0'
-  el.addEventListener('transitionend', done)
-}
-
-function itemAttributes(item) {
-  return {
-    style: getItemStyle(item),
-    'data-top': item.top,
-    'data-id': `${item.page}-${item.id}`,
-  }
-}
-
 function onResize() {
-  columns.value = getColumnCount()
+  columns.value = getColumnCount(layout.value)
   refreshLayout(masonry.value)
 }
 
 onMounted(async () => {
   isLoading.value = true
 
-  columns.value = getColumnCount()
+  columns.value = getColumnCount(layout.value)
 
   // For cursor-based pagination, loadAtPage can be null for the first request
   const initialPage = props.loadAtPage
@@ -269,8 +159,7 @@ onMounted(async () => {
 
   // Skip initial load if skipInitialLoad prop is true
   if (!props.skipInitialLoad) {
-    const response = await getContent(paginationHistory.value[0])
-    paginationHistory.value.push(response.nextPage)
+    await loadPage(paginationHistory.value[0])
   } else {
     await nextTick()
     // Just refresh the layout with any existing items
@@ -279,13 +168,13 @@ onMounted(async () => {
 
   isLoading.value = false
 
-  container.value?.addEventListener('scroll', debounce(onScroll, 200));
+  container.value?.addEventListener('scroll', debounce(handleScroll, 200));
 
   window.addEventListener('resize', debounce(onResize, 200));
 })
 
 onUnmounted(() => {
-  container.value?.removeEventListener('scroll', debounce(onScroll, 200));
+  container.value?.removeEventListener('scroll', debounce(handleScroll, 200));
 
   window.removeEventListener('resize', debounce(onResize, 200));
 })
@@ -299,7 +188,7 @@ onUnmounted(() => {
                         @before-leave="onBeforeLeave">
         <div v-for="item in masonry" :key="`${item.page}-${item.id}`"
              class="absolute transition-[top,left,opacity] duration-500 ease-in-out"
-             v-bind="itemAttributes(item)">
+             v-bind="getItemAttributes(item)">
           <slot name="item" v-bind="{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"

package/src/masonryUtils.js

@@ -0,0 +1,59 @@
+/**
+ * Get responsive column count based on window width and layout sizes
+ */
+export function getColumnCount(layout) {
+  const width = window.innerWidth
+  const sizes = layout.sizes
+
+  if (width >= 1536 && sizes['2xl']) return sizes['2xl']
+  if (width >= 1280 && sizes.xl) return sizes.xl
+  if (width >= 1024 && sizes.lg) return sizes.lg
+  if (width >= 768 && sizes.md) return sizes.md
+  if (width >= 640 && sizes.sm) return sizes.sm
+  return sizes.base
+}
+
+/**
+ * Calculate container height based on item positions
+ */
+export function calculateContainerHeight(items) {
+  return items.reduce((acc, item) => {
+    return Math.max(acc, item.top + item.columnHeight)
+  }, 0)
+}
+
+/**
+ * Get style object for masonry item positioning
+ */
+export function getItemStyle(item) {
+  return {
+    top: `${item.top}px`,
+    left: `${item.left}px`,
+    width: `${item.columnWidth}px`,
+    height: `${item.columnHeight}px`
+  }
+}
+
+/**
+ * Get item attributes for rendering
+ */
+export function getItemAttributes(item) {
+  return {
+    style: getItemStyle(item),
+    'data-top': item.top,
+    'data-id': `${item.page}-${item.id}`,
+  }
+}
+
+/**
+ * Calculate column heights for masonry layout
+ */
+export function calculateColumnHeights(items, columnCount) {
+  const heights = new Array(columnCount).fill(0)
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    const col = i % columnCount
+    heights[col] = Math.max(heights[col], item.top + item.columnHeight)
+  }
+  return heights
+}

package/src/useMasonryScroll.js

@@ -0,0 +1,89 @@
+import { nextTick } from 'vue'
+import { calculateColumnHeights } from './masonryUtils.js'
+
+/**
+ * Composable for handling masonry scroll behavior and item cleanup
+ */
+export function useMasonryScroll({
+  container,
+  masonry,
+  columns,
+  containerHeight,
+  isLoading,
+  maxItems,
+  refreshLayout,
+  loadNext
+}) {
+  
+  async function handleScroll() {
+    const { scrollTop, clientHeight } = container.value
+    const visibleBottom = scrollTop + clientHeight
+
+    const columnHeights = calculateColumnHeights(masonry.value, columns.value)
+    const whitespaceVisible = columnHeights.some(height => height + 300 < visibleBottom - 1)
+    const reachedContainerBottom = scrollTop + clientHeight >= containerHeight.value - 1
+
+    if ((whitespaceVisible || reachedContainerBottom) && !isLoading.value) {
+      isLoading.value = true
+
+      // Handle cleanup when too many items
+      if (masonry.value.length > maxItems) {
+        await handleItemCleanup(columnHeights)
+      }
+
+      await loadNext()
+      await nextTick()
+      isLoading.value = false
+    }
+  }
+
+  async function handleItemCleanup(columnHeights) {
+    const firstItem = masonry.value[0]
+    
+    if (!firstItem) {
+      await loadNext()
+      await nextTick()
+      isLoading.value = false
+      return
+    }
+
+    const page = firstItem.page
+    const removedItems = masonry.value.filter(i => i.page !== page)
+    
+    if (removedItems.length === masonry.value.length) {
+      await loadNext()
+      await nextTick()
+      isLoading.value = false
+      return
+    }
+
+    refreshLayout(removedItems)
+    await nextTick()
+    
+    await adjustScrollPosition(columnHeights)
+  }
+
+  async function adjustScrollPosition(columnHeights) {
+    const lowestColumnIndex = columnHeights.indexOf(Math.min(...columnHeights))
+    const lastItemInColumn = masonry.value.filter((_, index) => index % columns.value === lowestColumnIndex).pop()
+    
+    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'
+        })
+      }
+    }
+  }
+
+  return {
+    handleScroll
+  }
+}

package/src/useMasonryTransitions.js

@@ -0,0 +1,45 @@
+/**
+ * Composable for handling masonry item transitions
+ */
+export function useMasonryTransitions(masonry) {
+  function onEnter(el, done) {
+    // Set top to data-top
+    const top = el.dataset.top
+    requestAnimationFrame(() => {
+      el.style.top = `${top}px`
+      done()
+    })
+  }
+
+  function onBeforeEnter(el) {
+    // Set top to last item + offset
+    const lastItem = masonry.value[masonry.value.length - 1]
+    if (lastItem) {
+      const lastTop = lastItem.top + lastItem.columnHeight + 10
+      el.style.top = `${lastTop}px`
+    } else {
+      el.style.top = '0px'
+    }
+  }
+
+  function onBeforeLeave(el) {
+    // Ensure it's at its current position before animating
+    el.style.transition = 'none'
+    el.style.top = `${el.offsetTop}px`
+    void el.offsetWidth // force reflow to flush style
+    el.style.transition = '' // allow transition to apply again
+  }
+
+  function onLeave(el, done) {
+    el.style.top = '-600px'
+    el.style.opacity = '0'
+    el.addEventListener('transitionend', done)
+  }
+
+  return {
+    onEnter,
+    onBeforeEnter,
+    onBeforeLeave,
+    onLeave
+  }
+}