@wyxos/vibe 1.2.2 → 1.2.4

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.2",
+  "version": "1.2.4",
   "main": "index.js",
   "module": "index.js",
   "type": "module",