@wyxos/vibe 1.6.10 → 1.6.12
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 +29 -2
- package/lib/index.js +809 -645
- package/lib/vibe.css +1 -1
- package/package.json +1 -1
- package/src/Masonry.vue +447 -32
- package/src/masonryUtils.ts +3 -3
- package/src/views/Home.vue +50 -11
package/README.md
CHANGED
|
@@ -16,10 +16,11 @@ VIBE (Vue Infinite Block Engine) is designed for applications that need to displ
|
|
|
16
16
|
|
|
17
17
|
- **High Performance Virtualization**: Efficiently renders thousands of items by only mounting elements currently in the viewport.
|
|
18
18
|
- **Responsive Masonry Layout**: Automatically adjusts column counts and layout based on screen width and breakpoints.
|
|
19
|
+
- **Mobile Swipe Feed**: Automatically switches to a vertical swipe feed on mobile devices for optimal mobile UX.
|
|
19
20
|
- **Infinite Scrolling**: Seamlessly loads more content as the user scrolls, with built-in support for async data fetching.
|
|
20
21
|
- **Dynamic Updates**: Supports adding, removing, and reflowing items with smooth FLIP animations.
|
|
21
22
|
- **Scroll Position Maintenance**: Keeps the user's scroll position stable when new items are loaded or the layout changes.
|
|
22
|
-
- **Built-in Item Component**: Includes a production-ready `MasonryItem` with image
|
|
23
|
+
- **Built-in Item Component**: Includes a production-ready `MasonryItem` with lazy loading, image/video support, error handling, and hover effects.
|
|
23
24
|
- **Customizable Rendering**: Full control over item markup via scoped slots.
|
|
24
25
|
|
|
25
26
|
---
|
|
@@ -36,7 +37,7 @@ npm install @wyxos/vibe
|
|
|
36
37
|
|
|
37
38
|
### Basic Usage (Default Item)
|
|
38
39
|
|
|
39
|
-
By default, VIBE uses the built-in `MasonryItem` component, which handles image loading and provides a clean UI.
|
|
40
|
+
By default, VIBE uses the built-in `MasonryItem` component, which handles image loading and provides a clean UI. On mobile devices (screen width < 768px by default), it automatically switches to a vertical swipe feed mode where users can swipe through items one at a time.
|
|
40
41
|
|
|
41
42
|
```vue
|
|
42
43
|
<script setup>
|
|
@@ -69,10 +70,34 @@ By default, VIBE uses the built-in `MasonryItem` component, which handles image
|
|
|
69
70
|
v-model:items="items"
|
|
70
71
|
:get-next-page="getNextPage"
|
|
71
72
|
:layout="layout"
|
|
73
|
+
layout-mode="auto"
|
|
74
|
+
:mobile-breakpoint="768"
|
|
72
75
|
/>
|
|
73
76
|
</template>
|
|
74
77
|
```
|
|
75
78
|
|
|
79
|
+
### Layout Modes
|
|
80
|
+
|
|
81
|
+
VIBE supports three layout modes:
|
|
82
|
+
|
|
83
|
+
- **`'auto'`** (default): Automatically switches between masonry grid (desktop) and swipe feed (mobile) based on screen width
|
|
84
|
+
- **`'masonry'`**: Always use masonry grid layout regardless of screen size
|
|
85
|
+
- **`'swipe'`**: Always use swipe feed layout regardless of screen size
|
|
86
|
+
|
|
87
|
+
```vue
|
|
88
|
+
<!-- Force masonry layout on all devices -->
|
|
89
|
+
<Masonry layout-mode="masonry" ... />
|
|
90
|
+
|
|
91
|
+
<!-- Force swipe feed on all devices -->
|
|
92
|
+
<Masonry layout-mode="swipe" ... />
|
|
93
|
+
|
|
94
|
+
<!-- Custom breakpoint (use Tailwind breakpoint name) -->
|
|
95
|
+
<Masonry layout-mode="auto" mobile-breakpoint="lg" ... />
|
|
96
|
+
|
|
97
|
+
<!-- Custom breakpoint (use pixel value) -->
|
|
98
|
+
<Masonry layout-mode="auto" :mobile-breakpoint="1024" ... />
|
|
99
|
+
```
|
|
100
|
+
|
|
76
101
|
### Custom Item Rendering
|
|
77
102
|
|
|
78
103
|
You can fully customize the item rendering using the `#item` slot. You can also import and use `MasonryItem` inside the slot if you want to wrap it or extend it.
|
|
@@ -147,6 +172,8 @@ The `MasonryItem` component exposes the following props to its default slot:
|
|
|
147
172
|
| `loadAtPage` | `Number` | No | The starting page number (default: `1`). |
|
|
148
173
|
| `paginationType` | `String` | No | `'page'` or `'cursor'` (default: `'page'`). |
|
|
149
174
|
| `pageSize` | `Number` | No | Number of items per page, used for backfilling (default: `40`). |
|
|
175
|
+
| `layoutMode` | `String` | No | Layout mode: `'auto'` (detect from screen size), `'masonry'`, or `'swipe'` (default: `'auto'`). |
|
|
176
|
+
| `mobileBreakpoint` | `Number \| String` | No | Breakpoint for switching to swipe mode in pixels or Tailwind breakpoint name (default: `768`). |
|
|
150
177
|
|
|
151
178
|
### Layout Configuration Example
|
|
152
179
|
|