@wyxos/vibe 1.2.1

package/src/archive/InfiniteMasonry.vue

@@ -0,0 +1,218 @@
+<script setup>
+import {computed, nextTick, onMounted, onUnmounted, ref, watchEffect} from "vue";
+
+const scrollPosition = ref(0);
+const scrollDirection = ref('down');
+
+const defaultOptions = {
+  sizes: {
+    1: {min: 0,},
+    2: {min: 401,},
+    4: {min: 801,},
+    6: {min: 1201,},
+    8: {min: 1601,},
+    10: {min: 2001,},
+  },
+  gutterX: 10,
+  gutterY: 10,
+  cellPadding: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+};
+
+const mergedOptions = computed(() => ({
+  ...defaultOptions,
+  ...props.options,
+  sizes: props.options?.sizes ?? defaultOptions.sizes
+}));
+
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  options: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const columnsCount = ref(7);
+
+const internalColumnHeights = ref([]);
+
+const maximumHeight = computed(() => Math.max(...internalColumnHeights.value));
+
+const container = ref(null);
+
+const layouts = ref([]); // contains { id, top, left, width, height, src }
+
+watchEffect(() => {
+  if (!container.value) return;
+
+  const scrollbarWidth = getScrollbarWidth(); // ← add this
+  const containerWidth = container.value.offsetWidth - scrollbarWidth;
+  const totalGutterX = (columnsCount.value - 1) * mergedOptions.value.gutterX;
+  const colWidth = Math.floor((containerWidth - totalGutterX) / columnsCount.value);
+  const colHeights = Array(columnsCount.value).fill(0);
+
+  const flatItems = props.modelValue.flatMap(p => p.items);
+  layouts.value = flatItems.map((item, index) => {
+    const columnIndex = index % columnsCount.value;
+    const scaledHeight = Math.round((item.height / item.width) * colWidth);
+    const top = colHeights[columnIndex];
+    const left = columnIndex * (colWidth + mergedOptions.value.gutterX);
+
+    // update cumulative column height
+    colHeights[columnIndex] += scaledHeight + mergedOptions.value.gutterY;
+
+    return {
+      ...item,
+      width: colWidth,
+      height: scaledHeight,
+      top,
+      left
+    };
+  });
+
+  internalColumnHeights.value = colHeights;
+});
+
+const visibleItems = computed(() => {
+  const scroll = scrollPosition.value;
+  const viewHeight = container.value?.offsetHeight || 0;
+
+  return layouts.value.filter(item => {
+    return (
+        item.top + item.height >= scroll - 200 &&
+        item.top <= scroll + viewHeight + 200
+    );
+  });
+});
+
+const getScrollbarWidth = () => {
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll';
+  outer.style.msOverflowStyle = 'scrollbar'; // for IE
+  outer.style.position = 'absolute';
+  outer.style.top = '-9999px';
+  outer.style.width = '100px';
+  document.body.appendChild(outer);
+
+  const inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+  document.body.removeChild(outer);
+  return scrollbarWidth;
+};
+
+const emit = defineEmits(['update:modelValue', 'scroll']);
+
+const onScroll = () => {
+  const el = container.value;
+  if (!el) return;
+
+  const scroll = el.scrollTop;
+  const viewHeight = el.clientHeight;
+  const contentHeight = el.scrollHeight;
+
+  const threshold = 50; // pixels from bottom (you can tweak this)
+
+  scrollDirection.value = scroll > scrollPosition.value ? 'down' : 'up';
+  scrollPosition.value = scroll;
+
+  const isEnd = scroll + viewHeight >= contentHeight - threshold;
+  const isStart = scroll <= threshold;
+
+  const viewportBottom = scroll + viewHeight;
+  const hasShortColumn = internalColumnHeights.value.some(height => height < viewportBottom - 50);
+
+  emit('scroll', {
+    position: scroll,
+    direction: scrollDirection.value,
+    isEnd,
+    isStart,
+    hasShortColumn
+  });
+};
+
+const onResize = () => {
+  const scrollbarWidth = getScrollbarWidth();
+  const containerWidth = container.value.offsetWidth - scrollbarWidth;
+  columnsCount.value = 0;
+
+  const sizes = mergedOptions.value.sizes;
+
+  const sortedSizes = Object.entries(sizes).sort(
+      (a, b) => a[1].min - b[1].min
+  );
+
+  for (const [columns, { min }] of sortedSizes) {
+    if (containerWidth >= min) {
+      columnsCount.value = Number(columns);
+    }
+  }
+};
+
+const getCellPosition = (item) => {
+  return {
+    top: item.top + 'px',
+    left: item.left + 'px',
+    width: item.width + 'px',
+    height: item.height + 'px'
+  }
+}
+
+const remove = () => {
+
+}
+
+const restore = () => {
+
+}
+
+defineExpose({
+  remove,
+  restore
+})
+
+onMounted(async () => {
+  await nextTick(); // wait for DOM to render and size
+  onResize(); // now has proper width
+  container.value?.addEventListener('scroll', onScroll);
+  window.addEventListener('resize', onResize);
+});
+
+onUnmounted(() => {
+  if (container.value) {
+    container.value.removeEventListener('scroll', onScroll);
+  }
+
+  window.removeEventListener('resize', onResize);
+})
+</script>
+
+<template>
+  <div ref="container" class="overflow-auto flex-1 h-full w-full">
+    <div :style="{ height: `${maximumHeight}px` }" class="relative w-full">
+      <template v-for="item in visibleItems" :key="item.id">
+        <slot name="cell" :item="item" :get-cell-position="getCellPosition">
+          <div
+              class="absolute bg-slate-200 rounded-lg shadow-lg"
+              :style="getCellPosition(item)"
+          >
+            <img :src="item.src" class="w-full h-auto"/>
+          </div>
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/calculateLayout.js

@@ -0,0 +1,55 @@
+function getScrollbarWidth() {
+    // Create a temporary div
+    const div = document.createElement('div')
+    div.style.visibility = 'hidden'
+    div.style.overflow = 'scroll' // force scrollbar
+    div.style.msOverflowStyle = 'scrollbar' // for IE
+    div.style.width = '100px'
+    div.style.height = '100px'
+
+    // Append to body
+    document.body.appendChild(div)
+
+    // Create inner div and measure difference
+    const inner = document.createElement('div')
+    inner.style.width = '100%'
+    div.appendChild(inner)
+
+    const scrollbarWidth = div.offsetWidth - inner.offsetWidth
+
+    // Clean up
+    document.body.removeChild(div)
+
+    return scrollbarWidth
+}
+
+export default function calculateLayout(items, container, columnCount, gutterX = 0, gutterY = 0, header = 0, footer = 0) {
+    const measuredScrollbarWidth = container.offsetWidth - container.clientWidth;
+    const scrollbarWidth = measuredScrollbarWidth > 0 ? measuredScrollbarWidth + 2 : getScrollbarWidth() + 2;
+    const usableWidth = container.offsetWidth - scrollbarWidth;
+    const totalGutterX = gutterX * (columnCount - 1);
+    const columnWidth = Math.floor((usableWidth - totalGutterX) / columnCount);
+
+    const columnHeights = new Array(columnCount).fill(0);
+    const processedItems = [];
+
+    for (let index = 0; index < items.length; index++) {
+        const item = items[index];
+        const newItem = { ...item };
+
+        const col = index % columnCount;
+        const originalWidth = item.width;
+        const originalHeight = item.height;
+
+        newItem.columnWidth = columnWidth;
+        newItem.left = col * (columnWidth + gutterX);
+        newItem.columnHeight = Math.round((columnWidth * originalHeight) / originalWidth);
+        newItem.top = columnHeights[col];
+
+        columnHeights[col] += newItem.columnHeight + gutterY;
+
+        processedItems.push(newItem);
+    }
+
+    return processedItems;
+}

package/src/calculateLayout.test.js

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import calculateLayout from './calculateLayout'
+import fixture from './pages.json'
+
+describe('calculateLayout', () => {
+    it('should calculate correct layout positions for known inputs', () => {
+        const items = fixture[0].items.slice(0, 3) // first 3 items
+        const mockContainer = {
+            offsetWidth: 1000,
+            clientWidth: 980 // scrollbarWidth = 20
+        }
+        const columnCount = 3
+        const gutterX = 10
+        const gutterY = 10
+
+        const scrollbarWidth = mockContainer.offsetWidth - mockContainer.clientWidth
+        const usableWidth = mockContainer.offsetWidth - scrollbarWidth
+        const totalGutterX = gutterX * (columnCount - 1)
+        const expectedColumnWidth = Math.floor((usableWidth - totalGutterX) / columnCount)
+
+        const result = calculateLayout(items, mockContainer, columnCount, gutterX, gutterY)
+
+        expect(result.length).toBe(3)
+
+        result.forEach((item, i) => {
+            const original = items[i]
+            const expectedColumn = i % columnCount
+            const expectedLeft = expectedColumn * (expectedColumnWidth + gutterX)
+            const expectedHeight = Math.round((expectedColumnWidth * original.height) / original.width)
+
+            expect(item.left).toBe(expectedLeft)
+            expect(item.columnWidth).toBe(expectedColumnWidth)
+            expect(item.columnHeight).toBe(expectedHeight)
+        })
+
+        // Test top stacking logic: second item in same column should be placed below with gutter
+        const secondBatch = fixture[0].items.slice(0, 6)
+        const stacked = calculateLayout(secondBatch, mockContainer, columnCount, gutterX, gutterY)
+        for (let col = 0; col < columnCount; col++) {
+            const colItems = stacked.filter((_, i) => i % columnCount === col)
+            for (let j = 1; j < colItems.length; j++) {
+                expect(colItems[j].top).toBe(
+                    colItems[j - 1].top + colItems[j - 1].columnHeight + gutterY
+                )
+            }
+        }
+    })
+})

package/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')