@wyxos/vibe 1.2.1 → 1.2.2

package/package.json

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

package/src/App.vue

@@ -5,8 +5,9 @@ import fixture from "./pages.json";
 
 const items = ref([])
 
+const masonry = ref(null)
+
 const getPage = async (index) => {
-  console.log('index', index)
   return new Promise((resolve) => {
     setTimeout(() => {
       let output = {
@@ -14,7 +15,6 @@ const getPage = async (index) => {
         nextPage: index + 1
       };
 
-      console.log('output', output)
       resolve(output)
     }, 1000)
   })
@@ -30,8 +30,12 @@ const getPage = async (index) => {
         🚀 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>
+
+      <div v-if="masonry">
+        <p>Loading: <span class="bg-blue-500 text-white p-2 rounded">{{ masonry.isLoading }}</span></p>
+      </div>
     </header>
-    <masonry v-model:items="items" :get-next-page="getPage">
+    <masonry v-model:items="items" :get-next-page="getPage" ref="masonry">
       <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)">

package/src/Masonry.vue

@@ -35,7 +35,23 @@ const props = defineProps({
   gutterY: {
     type: Number,
     default: 10
-  }
+  },
+  header: {
+    type: Number,
+    default: 0
+  },
+  footer: {
+    type: Number,
+    default: 0
+  },
+  paddingLeft: {
+    type: Number,
+    default: 0
+  },
+  paddingRight: {
+    type: Number,
+    default: 0
+  },
 })
 
 const emits = defineEmits(['update:items'])
@@ -45,7 +61,6 @@ const masonry = computed({
   set: (val) => emits('update:items', val)
 })
 
-
 const columns = ref(7)
 
 const container = ref(null)
@@ -68,6 +83,13 @@ const columnHeights = computed(() => {
   return heights
 })
 
+defineExpose({
+  isLoading,
+  refreshLayout,
+  containerHeight,
+  onRemove,
+})
+
 async function onScroll() {
   const {scrollTop, clientHeight} = container.value
   const visibleBottom = scrollTop + clientHeight
@@ -95,7 +117,7 @@ async function onScroll() {
 
       // find the last item in that column
       const lastItemInColumn = masonry.value.filter((_, index) => index % columns.value === lowestColumnIndex).pop()
-      const lastItemInColumnTop = lastItemInColumn.top
+      const lastItemInColumnTop = lastItemInColumn.top + lastItemInColumn.columnHeight
       const lastItemInColumnBottom = lastItemInColumnTop + lastItemInColumn.columnHeight
       const containerTop = container.value.scrollTop
       const containerBottom = containerTop + container.value.clientHeight
@@ -133,8 +155,15 @@ function calculateHeight(layout) {
   }, 0)
 }
 
-function refreshLayout(items){
-  const layout = calculateLayout(items, container.value, columns.value, props.gutterX, props.gutterY);
+function refreshLayout(items) {
+  const layout = calculateLayout(items, container.value, columns.value, {
+    gutterX: props.gutterX,
+    gutterY: props.gutterY,
+    header: props.header,
+    footer: props.footer,
+    paddingLeft: props.paddingLeft,
+    paddingRight: props.paddingRight,
+  });
 
   calculateHeight(layout)
 
@@ -251,7 +280,8 @@ onUnmounted(() => {
              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)">
+            <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>

package/src/archive/App.vue

@@ -33,8 +33,6 @@
 
 <!--      pageIndex.value = pageIndex.value + 1;-->
 
-<!--      console.log(pageIndex.value)-->
-
 <!--      await nextTick()-->
 
 <!--      isLoading.value = false;-->

package/src/calculateLayout.js

@@ -23,10 +23,19 @@ function getScrollbarWidth() {
     return scrollbarWidth
 }
 
-export default function calculateLayout(items, container, columnCount, gutterX = 0, gutterY = 0, header = 0, footer = 0) {
+export default function calculateLayout(items, container, columnCount, options = {}) {
+    const {
+        gutterX = 0,
+        gutterY = 0,
+        header = 0,
+        footer = 0,
+        paddingLeft = 0,
+        paddingRight = 0
+    } = options;
+
     const measuredScrollbarWidth = container.offsetWidth - container.clientWidth;
     const scrollbarWidth = measuredScrollbarWidth > 0 ? measuredScrollbarWidth + 2 : getScrollbarWidth() + 2;
-    const usableWidth = container.offsetWidth - scrollbarWidth;
+    const usableWidth = container.offsetWidth - scrollbarWidth - paddingLeft - paddingRight;
     const totalGutterX = gutterX * (columnCount - 1);
     const columnWidth = Math.floor((usableWidth - totalGutterX) / columnCount);
 
@@ -44,7 +53,7 @@ export default function calculateLayout(items, container, columnCount, gutterX =
         newItem.columnWidth = columnWidth;
         newItem.left = col * (columnWidth + gutterX);
         newItem.columnHeight = Math.round((columnWidth * originalHeight) / originalWidth);
-        newItem.top = columnHeights[col];
+        newItem.top = columnHeights[col] + header + footer;
 
         columnHeights[col] += newItem.columnHeight + gutterY;