@wyxos/vibe 1.2.1 → 1.2.3

package/README.md

@@ -32,36 +32,42 @@ npm install @wyxos/vibe
 
 ```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)
-  })
-}
+  import { ref } from 'vue'
+  import { Masonry } from '@wyxos/vibe' // named export
+  // or if globally registered via `app.use()`, you can skip this import
+
+  const items = ref([])
+
+  async function getNextPage(page) {
+    const response = await fetch(`/api/items?page=${page}`)
+    const data = await response.json()
+    return {
+      items: data.items,
+      nextPage: page + 1
+    }
+  }
 </script>
 
 <template>
-  <Vibe v-model:items="items" :get-next-page="getNextPage">
+  <WyxosMasonry
+      v-model:items="items"
+      :get-next-page="getNextPage"
+      :gutter-x="12"
+      :gutter-y="12"
+      :sizes="{ base: 1, sm: 2, md: 3, lg: 4 }"
+  >
     <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>
+      <div class="relative">
+        <img :src="item.src" class="w-full" />
+        <button
+            class="absolute bottom-2 right-2 bg-red-600 text-white text-xs p-1 rounded"
+            @click="onRemove(item)"
+        >
+          Remove
+        </button>
+      </div>
     </template>
-  </Vibe>
+  </WyxosMasonry>
 </template>
 ```
 

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "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;