@wyxos/vibe 2.1.3 → 2.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -23,6 +23,66 @@ It’s built for large, scroll-heavy media feeds and aims to stay smooth with th
|
|
|
23
23
|
```bash
|
|
24
24
|
npm i @wyxos/vibe
|
|
25
25
|
```
|
|
26
|
+
|
|
27
|
+
## Simple integration (minimal)
|
|
28
|
+
|
|
29
|
+
Minimal example with the required scrolling container CSS and a simple `getContent(page)`.
|
|
30
|
+
|
|
31
|
+
```vue
|
|
32
|
+
<script setup lang="ts">
|
|
33
|
+
import { ref } from 'vue'
|
|
34
|
+
import { Masonry, MasonryItem } from '@wyxos/vibe'
|
|
35
|
+
|
|
36
|
+
type Item = { id: string; width: number; height: number }
|
|
37
|
+
|
|
38
|
+
const items = ref<Item[]>([])
|
|
39
|
+
|
|
40
|
+
async function getContent(page: number) {
|
|
41
|
+
// Replace with your server/API call.
|
|
42
|
+
const pageSize = 20
|
|
43
|
+
const newItems: Item[] = Array.from({ length: pageSize }, (_, i) => ({
|
|
44
|
+
id: `${page}-${i}`,
|
|
45
|
+
width: 640,
|
|
46
|
+
height: 480,
|
|
47
|
+
}))
|
|
48
|
+
|
|
49
|
+
return {
|
|
50
|
+
items: newItems,
|
|
51
|
+
nextPage: page + 1,
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<template>
|
|
57
|
+
<div class="app">
|
|
58
|
+
<Masonry class="masonry" v-model:items="items" :get-content="getContent" :page="1">
|
|
59
|
+
<MasonryItem>
|
|
60
|
+
<template #default="{ item }">
|
|
61
|
+
<div>{{ item.id }}</div>
|
|
62
|
+
</template>
|
|
63
|
+
</MasonryItem>
|
|
64
|
+
</Masonry>
|
|
65
|
+
</div>
|
|
66
|
+
</template>
|
|
67
|
+
|
|
68
|
+
<style>
|
|
69
|
+
.app {
|
|
70
|
+
height: 100vh;
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Required: gives the Masonry internal scroll viewport a real height */
|
|
76
|
+
.masonry {
|
|
77
|
+
flex: 1 1 auto;
|
|
78
|
+
min-height: 0;
|
|
79
|
+
}
|
|
80
|
+
</style>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
> **Warning**
|
|
84
|
+
> Each item must include `{ id, width, height }` so the layout can be calculated.
|
|
85
|
+
|
|
26
86
|
## Local library build
|
|
27
87
|
|
|
28
88
|
- JS bundles: `npm run build:lib`
|