@wyxos/vibe 1.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Wyxos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+# 🔷 VIBE — Vue Infinite Block Engine
+
+[![npm](https://img.shields.io/npm/v/@wyxos/vibe?color=%2300c58e&label=npm)](https://www.npmjs.com/package/@wyxos/vibe)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Demo](https://img.shields.io/badge/Demo-Live%20Preview-blue?logo=githubpages)](https://wyxos.github.io/vibe/)
+
+A responsive, dynamic, infinite-scroll masonry layout engine for Vue 3.  
+Built for performance, flexibility, and pixel-perfect layout control.
+
+---
+
+## ✅ Features
+
+- Responsive masonry layout that adapts to screen size
+- Automatically loads more items as you scroll
+- Supports removing and reflowing items with animation
+- Keeps scroll position stable after layout updates
+- Fully customizable item rendering
+- Optimized for large datasets
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @wyxos/vibe
+```
+
+---
+
+## 🚀 Usage
+
+```vue
+<script setup>
+import Vibe from '@wyxos/vibe'
+import { ref } from 'vue'
+import fixture from './pages.json'
+
+const items = ref([])
+
+const getNextPage = async (page) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        items: fixture[page - 1].items,
+        nextPage: page + 1
+      })
+    }, 1000)
+  })
+}
+</script>
+
+<template>
+  <Vibe v-model:items="items" :get-next-page="getNextPage">
+    <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)"
+      >
+        <i class="fas fa-trash"></i>
+      </button>
+    </template>
+  </Vibe>
+</template>
+```
+
+---
+
+## ⚙️ Props
+
+| Prop         | Type     | Required | Description                                                                 |
+|--------------|----------|----------|-----------------------------------------------------------------------------|
+| `items`      | `Array`  | ✅        | Two-way bound item array (each item must include `width`, `height`, `id`) |
+| `getNextPage`| `Function(page: Number)` | ✅ | Async function to load the next page — returns `{ items, nextPage }`       |
+| `loadAtPage` | `Number` | ❌        | Starting page number (default: `1`)                                        |
+| `sizes`      | `Object` | ❌        | Mobile-first column config (default: Tailwind-style breakpoints)          |
+| `gutterX`    | `Number` | ❌        | Horizontal gutter between items (default: `10`)                            |
+| `gutterY`    | `Number` | ❌        | Vertical gutter between items (default: `10`)                              |
+
+### `sizes` example:
+```js
+{
+  base: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5,
+  '2xl': 6
+}
+```
+
+---
+
+## 💡 Slots
+
+| Slot Name | Props                          | Description                       |
+|-----------|--------------------------------|-----------------------------------|
+| `item`    | `{ item, onRemove }`           | Custom rendering for each block   |
+
+---
+
+## 🧪 Run Locally
+
+```bash
+git clone https://github.com/wyxos/vibe
+cd vibe
+npm install
+npm run dev
+```
+
+Visit [`http://localhost:5173`](http://localhost:5173)
+
+---
+
+## 🌐 Live Demo
+
+👉 [View Demo on GitHub Pages](https://wyxos.github.io/vibe/)
+
+---
+
+## 📄 License
+
+MIT © [@wyxos](https://github.com/wyxos)

package/index.js

@@ -0,0 +1,9 @@
+import InfiniteMasonry from './src/archive/InfiniteMasonry.vue';
+
+export default {
+    install(app) {
+        app.component('InfiniteMasonry', InfiniteMasonry);
+    }
+};
+
+export { InfiniteMasonry };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@wyxos/vibe",
+  "version": "1.2.1",
+  "main": "index.js",
+  "module": "index.js",
+  "type": "module",
+  "files": [
+    "src",
+    "index.js"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && node write-cname.js",
+    "preview": "vite preview",
+    "watch": "vite build --watch",
+    "release": "node release.mjs",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "vue": "^3.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.15",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/test-utils": "^2.4.6",
+    "chalk": "^5.3.0",
+    "inquirer": "^10.1.8",
+    "jsdom": "^26.0.0",
+    "simple-git": "^3.27.0",
+    "tailwindcss": "^4.0.15",
+    "uuid": "^11.1.0",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.9"
+  }
+}

package/src/App.vue

@@ -0,0 +1,47 @@
+<script setup>
+import Masonry from "./Masonry.vue";
+import {ref} from "vue";
+import fixture from "./pages.json";
+
+const items = ref([])
+
+const getPage = async (index) => {
+  console.log('index', index)
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      let output = {
+        items: fixture[index - 1].items,
+        nextPage: index + 1
+      };
+
+      console.log('output', output)
+      resolve(output)
+    }, 1000)
+  })
+}
+</script>
+<template>
+  <main class="flex flex-col items-center p-4 bg-slate-100 h-screen overflow-hidden">
+    <header class="sticky top-0 z-10 bg-slate-100 w-full p-4 flex flex-col items-center gap-4">
+      <h1 class="text-2xl font-semibold mb-4">VIBE</h1>
+      <p>Vue Infinite Block Engine</p>
+
+      <p class="text-sm text-gray-500 text-center mb-4">
+        🚀 Built by <a href="https://wyxos.com" target="_blank" class="underline hover:text-black">wyxos.com</a> •
+        💾 <a href="https://github.com/wyxos/vibe" target="_blank" class="underline hover:text-black">Source on GitHub</a>
+      </p>
+    </header>
+    <masonry v-model:items="items" :get-next-page="getPage">
+      <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)">
+          <i class="fas fa-trash"></i>
+        </button>
+      </template>
+    </masonry>
+  </main>
+</template>
+
+
+
+

package/src/Masonry.vue

@@ -0,0 +1,262 @@
+<script setup>
+import {computed, nextTick, onMounted, onUnmounted, ref} from "vue";
+import calculateLayout from "./calculateLayout.js";
+import {debounce} from 'lodash'
+
+const props = defineProps({
+  getNextPage: {
+    type: Function,
+    default: () => {
+    }
+  },
+  loadAtPage: {
+    type: Number,
+    default: 1
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  sizes: {
+    type: Object,
+    default: () => ({
+      base: 1,       // mobile-first default
+      sm: 2,         // ≥ 640px
+      md: 3,         // ≥ 768px
+      lg: 4,         // ≥ 1024px
+      xl: 5,         // ≥ 1280px
+      '2xl': 6       // ≥ 1536px
+    })
+  },
+  gutterX: {
+    type: Number,
+    default: 10
+  },
+  gutterY: {
+    type: Number,
+    default: 10
+  }
+})
+
+const emits = defineEmits(['update:items'])
+
+const masonry = computed({
+  get: () => props.items,
+  set: (val) => emits('update:items', val)
+})
+
+
+const columns = ref(7)
+
+const container = ref(null)
+
+const currentPage = ref(null)
+
+const nextPage = ref(null)
+
+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
+})
+
+async function onScroll() {
+  const {scrollTop, clientHeight} = container.value
+  const visibleBottom = scrollTop + clientHeight
+
+  const whitespaceVisible = columnHeights.value.some(height => height + 300 < visibleBottom - 1)
+
+  if (whitespaceVisible && !isLoading.value) {
+    isLoading.value = true
+
+    if (currentPage.value > 3) {
+      // get first item
+      const firstItem = masonry.value[0]
+
+      // get page number
+      const page = firstItem.page
+
+      // find all item with this page
+      const removedItems = masonry.value.filter(i => i.page !== page)
+
+      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()
+      const lastItemInColumnTop = lastItemInColumn.top
+      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
+
+  if (width >= 1536 && props.sizes['2xl']) return props.sizes['2xl']
+  if (width >= 1280 && props.sizes.xl) return props.sizes.xl
+  if (width >= 1024 && props.sizes.lg) return props.sizes.lg
+  if (width >= 768 && props.sizes.md) return props.sizes.md
+  if (width >= 640 && props.sizes.sm) return props.sizes.sm
+  return props.sizes.base
+}
+
+function calculateHeight(layout) {
+  containerHeight.value = layout.reduce((acc, item) => {
+    return Math.max(acc, item.top + item.columnHeight)
+  }, 0)
+}
+
+function refreshLayout(items){
+  const layout = calculateLayout(items, container.value, columns.value, props.gutterX, props.gutterY);
+
+  calculateHeight(layout)
+
+  masonry.value = layout
+}
+
+async function getContent(page) {
+  const response = await props.getNextPage(page)
+
+  refreshLayout([...masonry.value, ...response.items])
+
+  return response
+}
+
+async function loadNext() {
+  const response = await getContent(nextPage.value)
+  currentPage.value = nextPage.value
+  nextPage.value = response.nextPage
+}
+
+const getItemStyle = (item) => {
+  return {
+    top: `${item.top}px`,
+    left: `${item.left}px`,
+    width: `${item.columnWidth}px`,
+    height: `${item.columnHeight}px`
+  }
+}
+
+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()
+  refreshLayout(masonry.value)
+}
+
+onMounted(async () => {
+  isLoading.value = true
+
+  columns.value = getColumnCount()
+
+  currentPage.value = props.loadAtPage
+
+  const response = await getContent(currentPage.value)
+
+  nextPage.value = response.nextPage
+
+  isLoading.value = false
+
+  container.value?.addEventListener('scroll', debounce(onScroll, 200));
+
+  window.addEventListener('resize', debounce(onResize, 200));
+})
+
+onUnmounted(() => {
+  container.value?.removeEventListener('scroll', debounce(onScroll, 200));
+
+  window.removeEventListener('resize', debounce(onResize, 200));
+})
+</script>
+
+<template>
+  <div class="overflow-auto bg-blue-500 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"
+             v-bind="itemAttributes(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" @click="onRemove(item)">
+              <i class="fas fa-trash"></i>
+            </button>
+          </slot>
+        </div>
+      </transition-group>
+    </div>
+  </div>
+</template>

package/src/archive/App.vue

@@ -0,0 +1,98 @@
+<!--<script setup>-->
+<!--import InfiniteMasonry from "./components/InfiniteMasonry.vue";-->
+<!--import {nextTick, onMounted, ref} from "vue";-->
+<!--import pages from './pages.json'-->
+
+<!--const scrollDetails = ref({-->
+<!--  position: 0,-->
+<!--  direction: 'down',-->
+<!--  isEnd: false,-->
+<!--  isStart: true,-->
+<!--  hasShortColumn: false,-->
+<!--});-->
+
+<!--const items = ref([]);-->
+
+<!--const count = ref(30);-->
+
+<!--const scroller = ref();-->
+
+<!--const pageIndex = ref(0);-->
+
+<!--const isLoading = ref(false);-->
+
+<!--const updateItems = (action) => {-->
+<!--  setTimeout(async () => {-->
+<!--    if (action === 'add') {-->
+<!--      if(items.value.length > 3){-->
+<!--        // remove the first page from items-->
+<!--        items.value.splice(0, 1);-->
+<!--      }-->
+
+<!--      items.value.push(pages[pageIndex.value]);-->
+
+<!--      pageIndex.value = pageIndex.value + 1;-->
+
+<!--      console.log(pageIndex.value)-->
+
+<!--      await nextTick()-->
+
+<!--      isLoading.value = false;-->
+<!--    } else {-->
+<!--      items.value.splice(-count.value);-->
+
+<!--      isLoading.value = false;-->
+<!--    }-->
+<!--  }, 1000)-->
+<!--}-->
+
+<!--const onScroll = (attributes) => {-->
+<!--  scrollDetails.value = attributes-->
+
+<!--  if (autoLoad.value && attributes.hasShortColumn && !isLoading.value) {-->
+<!--    isLoading.value = true;-->
+
+<!--    updateItems('add');-->
+<!--  }-->
+<!--}-->
+
+<!--const autoLoad = ref(true);-->
+
+<!--onMounted(async () => {-->
+<!--  setTimeout(() => {-->
+<!--    items.value = [pages[pageIndex.value]]-->
+
+<!--    pageIndex.value = pageIndex.value + 1;-->
+<!--  }, 2000)-->
+<!--})-->
+<!--</script>-->
+
+<!--<template>-->
+<!--  <main class="flex flex-col items-center p-4 bg-slate-100 h-screen overflow-hidden">-->
+<!--    <header class="sticky top-0 z-10 bg-slate-100 w-full p-4 flex flex-col items-center gap-4">-->
+<!--      <h1 class="text-2xl font-semibold mb-4">Vue Infinite Masonry</h1>-->
+
+<!--      <p class="text-sm text-gray-500 text-center mb-4">-->
+<!--        🚀 Built by <a href="https://wyxos.com" target="_blank" class="underline hover:text-black">wyxos.com</a> •-->
+<!--        💾 <a href="https://github.com/wyxos/vue-infinite-masonry" target="_blank" class="underline hover:text-black">Source on GitHub</a>-->
+<!--      </p>-->
+
+<!--      <div class="flex flex-col md:flex-row gap-4 items-center">-->
+<!--        <p>Scroll {{ scrollDetails }}</p>-->
+
+<!--        <p>Page: {{ pageIndex }}</p>-->
+
+<!--        <p>Pages in array {{ items.length }}</p>-->
+
+<!--      </div>-->
+<!--    </header>-->
+
+
+<!--    <infinite-masonry-->
+<!--        ref="scroller"-->
+<!--        v-model="items"-->
+<!--        @scroll="onScroll"-->
+<!--        :options="{ gutterY: 50 }"-->
+<!--    />-->
+<!--  </main>-->
+<!--</template>-->

package/src/archive/InfiniteMansonry.spec.js

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect } from 'vitest';
+
+describe('Example Test', () => {
+    it('should pass a basic truthiness check', () => {
+        expect(true).toBe(true)
+    })
+})