@thangdevalone/meet-layout-grid-vue 1.0.6 → 1.0.7
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 +16 -14
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @thangdevalone/meet-layout-grid-vue
|
|
2
2
|
|
|
3
|
-
Vue 3
|
|
3
|
+
Vue 3 bindings for meet-layout-grid with Motion (motion-v) animations.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,7 +8,7 @@ Vue 3 integration for meet-layout-grid with Motion animations.
|
|
|
8
8
|
npm install @thangdevalone/meet-layout-grid-vue
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Quick
|
|
11
|
+
## Quick start
|
|
12
12
|
|
|
13
13
|
```vue
|
|
14
14
|
<script setup>
|
|
@@ -43,7 +43,7 @@ const participants = ref([
|
|
|
43
43
|
|
|
44
44
|
### `<GridContainer>`
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
Wraps the grid and provides layout via provide/inject.
|
|
47
47
|
|
|
48
48
|
```vue
|
|
49
49
|
<GridContainer
|
|
@@ -64,14 +64,10 @@ Container component with provide/inject context.
|
|
|
64
64
|
|
|
65
65
|
### `<GridItem>`
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
One grid cell; uses motion-v for animation.
|
|
68
68
|
|
|
69
69
|
```vue
|
|
70
|
-
<GridItem
|
|
71
|
-
:index="0"
|
|
72
|
-
:disable-animation="false"
|
|
73
|
-
tag="div"
|
|
74
|
-
>
|
|
70
|
+
<GridItem :index="0" :disable-animation="false" tag="div">
|
|
75
71
|
<slot />
|
|
76
72
|
</GridItem>
|
|
77
73
|
```
|
|
@@ -80,6 +76,8 @@ Animated grid item with motion-v animations.
|
|
|
80
76
|
|
|
81
77
|
### `useGridDimensions(ref)`
|
|
82
78
|
|
|
79
|
+
Tracks element size (ResizeObserver).
|
|
80
|
+
|
|
83
81
|
```ts
|
|
84
82
|
import { useGridDimensions } from '@thangdevalone/meet-layout-grid-vue'
|
|
85
83
|
import { ref } from 'vue'
|
|
@@ -91,6 +89,8 @@ const dimensions = useGridDimensions(containerRef)
|
|
|
91
89
|
|
|
92
90
|
### `useMeetGrid(options)`
|
|
93
91
|
|
|
92
|
+
Compute grid layout yourself.
|
|
93
|
+
|
|
94
94
|
```ts
|
|
95
95
|
import { useMeetGrid } from '@thangdevalone/meet-layout-grid-vue'
|
|
96
96
|
import { computed } from 'vue'
|
|
@@ -108,18 +108,20 @@ const grid = useMeetGrid(options)
|
|
|
108
108
|
|
|
109
109
|
### `useGridItemPosition(grid, index)`
|
|
110
110
|
|
|
111
|
+
Get position and size for one item.
|
|
112
|
+
|
|
111
113
|
```ts
|
|
112
114
|
import { useGridItemPosition } from '@thangdevalone/meet-layout-grid-vue'
|
|
113
115
|
|
|
114
116
|
const { position, dimensions, isMain, isHidden } = useGridItemPosition(grid, 0)
|
|
115
117
|
```
|
|
116
118
|
|
|
117
|
-
## Layout
|
|
119
|
+
## Layout modes
|
|
118
120
|
|
|
119
|
-
- **gallery**
|
|
120
|
-
- **speaker**
|
|
121
|
-
- **spotlight**
|
|
122
|
-
- **sidebar**
|
|
121
|
+
- **gallery** — Same-size tiles
|
|
122
|
+
- **speaker** — One large tile
|
|
123
|
+
- **spotlight** — Single participant
|
|
124
|
+
- **sidebar** — Main + thumbnails
|
|
123
125
|
|
|
124
126
|
## License
|
|
125
127
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thangdevalone/meet-layout-grid-vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "Vue 3 integration for meet-layout-grid with Motion animations",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@vueuse/core": "^10.7.0",
|
|
45
45
|
"motion-v": "^1.0.0",
|
|
46
|
-
"@thangdevalone/meet-layout-grid-core": "1.0.
|
|
46
|
+
"@thangdevalone/meet-layout-grid-core": "1.0.7"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"vue": "^3.4.0",
|