@thangdevalone/meet-layout-grid-vue 1.3.2 → 1.3.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 +107 -31
- package/dist/index.cjs +240 -150
- package/dist/index.d.cts +68 -6
- package/dist/index.d.mts +68 -6
- package/dist/index.d.ts +68 -6
- package/dist/index.mjs +242 -154
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -38,52 +38,114 @@ const participants = ref([
|
|
|
38
38
|
|
|
39
39
|
Wraps the grid and provides layout via `provide`/`inject`.
|
|
40
40
|
|
|
41
|
-
| Prop
|
|
42
|
-
|
|
|
43
|
-
| `aspect-ratio`
|
|
44
|
-
| `gap`
|
|
45
|
-
| `count`
|
|
46
|
-
| `layout-mode`
|
|
47
|
-
| `pinned-index`
|
|
48
|
-
| `others-position`
|
|
49
|
-
| `spring-preset`
|
|
50
|
-
| `max-items-per-page`
|
|
51
|
-
| `current-page`
|
|
52
|
-
| `max-visible`
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
| ---------------------- | ----------------------------------------- | ----------- | -------------------------------------------------------------------- |
|
|
43
|
+
| `aspect-ratio` | `string` | `'16:9'` | Default tile aspect ratio |
|
|
44
|
+
| `gap` | `number` | `8` | Gap between tiles (px) |
|
|
45
|
+
| `count` | `number` | required | Number of items |
|
|
46
|
+
| `layout-mode` | `LayoutMode` | `'gallery'` | `gallery` \| `spotlight` |
|
|
47
|
+
| `pinned-index` | `number` | - | Pinned participant index |
|
|
48
|
+
| `others-position` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | Thumbnail position in pin mode |
|
|
49
|
+
| `spring-preset` | `SpringPreset` | `'smooth'` | Animation preset |
|
|
50
|
+
| `max-items-per-page` | `number` | `0` | Max items per page (0 = no pagination) |
|
|
51
|
+
| `current-page` | `number` | `0` | Current page |
|
|
52
|
+
| `max-visible` | `number` | `0` | Max visible in others area (0 = show all) |
|
|
53
|
+
| `current-visible-page` | `number` | `0` | Current page for visible items (when max-visible > 0) |
|
|
54
|
+
| `item-aspect-ratios` | `(ItemAspectRatio \| undefined)[]` | - | Per-item aspect ratios |
|
|
55
|
+
| `float-width` | `number` | - | Width of the auto-float PiP (2-person mode). Overrides breakpoints. |
|
|
56
|
+
| `float-height` | `number` | - | Height of the auto-float PiP (2-person mode). Overrides breakpoints. |
|
|
57
|
+
| `float-breakpoints` | `PipBreakpoint[]` | - | Responsive breakpoints for auto-float PiP (see [Responsive PiP](#responsive-pip)) |
|
|
58
|
+
| `tag` | `string` | `'div'` | Root HTML element tag |
|
|
55
59
|
|
|
56
60
|
### `<GridItem>`
|
|
57
61
|
|
|
58
62
|
Single grid cell with motion-v animation.
|
|
59
63
|
|
|
60
|
-
| Prop | Type
|
|
61
|
-
| ------------------- |
|
|
62
|
-
| `index` | `number`
|
|
63
|
-
| `disable-animation` | `boolean`
|
|
64
|
-
| `
|
|
64
|
+
| Prop | Type | Default | Description |
|
|
65
|
+
| ------------------- | ----------------- | -------- | ------------------------------------------ |
|
|
66
|
+
| `index` | `number` | required | Item index |
|
|
67
|
+
| `disable-animation` | `boolean` | `false` | Disable layout animation |
|
|
68
|
+
| `item-aspect-ratio` | `ItemAspectRatio` | - | Per-item aspect ratio (overrides container) |
|
|
69
|
+
| `tag` | `string` | `'div'` | Root HTML element tag |
|
|
70
|
+
|
|
71
|
+
Scoped slot props: `{ contentDimensions, isLastVisibleOther, hiddenCount, isFloat }`
|
|
72
|
+
|
|
73
|
+
```vue
|
|
74
|
+
<GridItem v-for="(p, index) in participants" :key="p.id" :index="index">
|
|
75
|
+
<template #default="{ isLastVisibleOther, hiddenCount }">
|
|
76
|
+
<div v-if="isLastVisibleOther && hiddenCount > 0" class="more-indicator">
|
|
77
|
+
+{{ hiddenCount }} more
|
|
78
|
+
</div>
|
|
79
|
+
<VideoTile v-else :participant="p" />
|
|
80
|
+
</template>
|
|
81
|
+
</GridItem>
|
|
82
|
+
```
|
|
65
83
|
|
|
66
84
|
### `<FloatingGridItem>`
|
|
67
85
|
|
|
68
86
|
Draggable Picture-in-Picture overlay with corner snapping.
|
|
69
87
|
|
|
70
|
-
| Prop
|
|
71
|
-
|
|
|
72
|
-
| `width`
|
|
73
|
-
| `height`
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
88
|
+
| Prop | Type | Default | Description |
|
|
89
|
+
| ------------------ | ------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
|
|
90
|
+
| `width` | `number` | `120` | Floating item width (px). Overridden by `breakpoints`. |
|
|
91
|
+
| `height` | `number` | `160` | Floating item height (px). Overridden by `breakpoints`. |
|
|
92
|
+
| `breakpoints` | `PipBreakpoint[]` | - | Responsive breakpoints (see [Responsive PiP](#responsive-pip)) |
|
|
93
|
+
| `initial-position` | `{ x: number; y: number }` | `{ x: 16, y: 16 }` | Extra offset from anchor corner |
|
|
94
|
+
| `anchor` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'bottom-right'` | Which corner to snap/anchor the item |
|
|
95
|
+
| `visible` | `boolean` | `true` | Whether the floating item is visible |
|
|
96
|
+
| `edge-padding` | `number` | `12` | Minimum padding from container edges (px) |
|
|
97
|
+
| `border-radius` | `number` | `12` | Border radius of the floating item (px) |
|
|
98
|
+
| `box-shadow` | `string` | `'0 4px 20px rgba(0,0,0,0.3)'` | CSS box-shadow of the floating item |
|
|
99
|
+
|
|
100
|
+
**Events:**
|
|
101
|
+
|
|
102
|
+
| Event | Payload | Description |
|
|
103
|
+
| ---------------- | ---------- | ------------------------------------------ |
|
|
104
|
+
| `@anchor-change` | `string` | Emitted when anchor corner changes on drag |
|
|
78
105
|
|
|
79
106
|
### `<GridOverlay>`
|
|
80
107
|
|
|
81
108
|
Full-grid overlay for screen sharing, whiteboard, etc.
|
|
82
109
|
|
|
83
|
-
| Prop | Type | Default
|
|
84
|
-
| ------------------ | --------- |
|
|
85
|
-
| `visible` | `boolean` | `
|
|
86
|
-
| `background-color` | `string` |
|
|
110
|
+
| Prop | Type | Default | Description |
|
|
111
|
+
| ------------------ | --------- | -------------------- | ------------------------ |
|
|
112
|
+
| `visible` | `boolean` | `true` | Show/hide the overlay |
|
|
113
|
+
| `background-color` | `string` | `'rgba(0,0,0,0.5)'` | Overlay background color |
|
|
114
|
+
|
|
115
|
+
## Responsive PiP
|
|
116
|
+
|
|
117
|
+
PiP supports responsive breakpoints that auto-adjust size based on container width.
|
|
118
|
+
|
|
119
|
+
```vue
|
|
120
|
+
<script setup>
|
|
121
|
+
import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet-layout-grid-vue'
|
|
122
|
+
</script>
|
|
123
|
+
|
|
124
|
+
<template>
|
|
125
|
+
<!-- Standalone FloatingGridItem — auto-responsive -->
|
|
126
|
+
<FloatingGridItem :breakpoints="DEFAULT_FLOAT_BREAKPOINTS">
|
|
127
|
+
<VideoTile />
|
|
128
|
+
</FloatingGridItem>
|
|
129
|
+
|
|
130
|
+
<!-- Auto-float in 2-person mode — responsive PiP via GridContainer -->
|
|
131
|
+
<GridContainer :count="2" :float-breakpoints="DEFAULT_FLOAT_BREAKPOINTS">
|
|
132
|
+
<GridItem v-for="(p, i) in participants" :key="p.id" :index="i">
|
|
133
|
+
<VideoTile :participant="p" />
|
|
134
|
+
</GridItem>
|
|
135
|
+
</GridContainer>
|
|
136
|
+
</template>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
Resolve PiP size programmatically:
|
|
140
|
+
|
|
141
|
+
```ts
|
|
142
|
+
import { resolveFloatSize, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet-layout-grid-vue'
|
|
143
|
+
|
|
144
|
+
const size = resolveFloatSize(800, DEFAULT_FLOAT_BREAKPOINTS)
|
|
145
|
+
// → { width: 160, height: 215 }
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
> See the [main README](https://github.com/thangdevalone/meet-layout-grid#responsive-pip) for full details, default breakpoint table, and custom breakpoint examples.
|
|
87
149
|
|
|
88
150
|
## Composables
|
|
89
151
|
|
|
@@ -94,6 +156,20 @@ Full-grid overlay for screen sharing, whiteboard, etc.
|
|
|
94
156
|
| `useGridAnimation()` | Access animation config from context |
|
|
95
157
|
| `useGridItemPosition(grid, index)` | Get position and size for one item |
|
|
96
158
|
|
|
159
|
+
## Re-exported from Core
|
|
160
|
+
|
|
161
|
+
| Export | Type | Description |
|
|
162
|
+
| --------------------------- | ---------- | ------------------------------------------------ |
|
|
163
|
+
| `createMeetGrid` | function | Create grid layout (Vanilla JS) |
|
|
164
|
+
| `createGrid` | function | Low-level grid computation |
|
|
165
|
+
| `resolveFloatSize` | function | Resolve PiP size for a given container width |
|
|
166
|
+
| `DEFAULT_FLOAT_BREAKPOINTS` | constant | Ready-made 5-level responsive PiP breakpoints |
|
|
167
|
+
| `getSpringConfig` | function | Get spring config from preset name |
|
|
168
|
+
| `springPresets` | object | All spring presets |
|
|
169
|
+
| `getAspectRatio` | function | Parse aspect ratio string |
|
|
170
|
+
| `PipBreakpoint` | type | Breakpoint definition type |
|
|
171
|
+
| `ContentDimensions` | type | Content dimensions with offset |
|
|
172
|
+
|
|
97
173
|
## License
|
|
98
174
|
|
|
99
175
|
MIT
|