@thangdevalone/meet-layout-grid-vue 1.0.0 → 1.0.3

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.
Files changed (8) hide show
  1. package/LICENSE +44 -0
  2. package/README.md +126 -126
  3. package/dist/index.cjs +46 -17
  4. package/dist/index.d.cts +51 -7
  5. package/dist/index.d.mts +51 -7
  6. package/dist/index.d.ts +281 -237
  7. package/dist/index.mjs +36 -7
  8. package/package.json +61 -60
package/LICENSE ADDED
@@ -0,0 +1,44 @@
1
+ MIT License with Attribution Requirement
2
+
3
+ Copyright (c) 2024-2026 ThangDevAlone
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ 1. The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ 2. ATTRIBUTION REQUIREMENT: Any project using this Software must include
16
+ visible attribution to the original author in one of the following ways:
17
+
18
+ a) In the project's README or documentation file, include:
19
+ "This project uses meet-layout-grid by @thangdevalone
20
+ (https://github.com/thangdevalone/meet-layout-grid)"
21
+
22
+ b) In an "About" or "Credits" section of the application, include:
23
+ "Powered by meet-layout-grid - https://github.com/thangdevalone/meet-layout-grid"
24
+
25
+ c) In the project's package.json or equivalent dependency manifest, ensure
26
+ the package is listed with its original name and author information intact.
27
+
28
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
29
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
30
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
31
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
32
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
33
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
34
+ SOFTWARE.
35
+
36
+ ---
37
+
38
+ TL;DR - Bạn được phép:
39
+ ✅ Sử dụng miễn phí cho dự án cá nhân và thương mại
40
+ ✅ Chỉnh sửa và phân phối lại
41
+ ✅ Sử dụng trong các dự án closed-source
42
+
43
+ Yêu cầu duy nhất:
44
+ 📝 Ghi nguồn/credit cho tác giả gốc trong README hoặc phần About của dự án
package/README.md CHANGED
@@ -1,126 +1,126 @@
1
- # @meet-layout-grid/vue
2
-
3
- Vue 3 integration for meet-layout-grid with Motion animations.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install @meet-layout-grid/vue
9
- ```
10
-
11
- ## Quick Start
12
-
13
- ```vue
14
- <script setup>
15
- import { GridContainer, GridItem } from '@meet-layout-grid/vue'
16
- import { ref } from 'vue'
17
-
18
- const participants = ref([
19
- { id: 1, name: 'You' },
20
- { id: 2, name: 'User 1' },
21
- ])
22
- </script>
23
-
24
- <template>
25
- <GridContainer
26
- aspect-ratio="16:9"
27
- :gap="8"
28
- :count="participants.length"
29
- layout-mode="gallery"
30
- >
31
- <GridItem
32
- v-for="(participant, index) in participants"
33
- :key="participant.id"
34
- :index="index"
35
- >
36
- <VideoTile :participant="participant" />
37
- </GridItem>
38
- </GridContainer>
39
- </template>
40
- ```
41
-
42
- ## Components
43
-
44
- ### `<GridContainer>`
45
-
46
- Container component with provide/inject context.
47
-
48
- ```vue
49
- <GridContainer
50
- aspect-ratio="16:9"
51
- :gap="8"
52
- :count="6"
53
- layout-mode="gallery"
54
- :speaker-index="0"
55
- :pinned-index="0"
56
- sidebar-position="right"
57
- :sidebar-ratio="0.25"
58
- spring-preset="smooth"
59
- tag="div"
60
- >
61
- <slot />
62
- </GridContainer>
63
- ```
64
-
65
- ### `<GridItem>`
66
-
67
- Animated grid item with motion-v animations.
68
-
69
- ```vue
70
- <GridItem
71
- :index="0"
72
- :disable-animation="false"
73
- tag="div"
74
- >
75
- <slot />
76
- </GridItem>
77
- ```
78
-
79
- ## Composables
80
-
81
- ### `useGridDimensions(ref)`
82
-
83
- ```ts
84
- import { useGridDimensions } from '@meet-layout-grid/vue'
85
- import { ref } from 'vue'
86
-
87
- const containerRef = ref<HTMLElement | null>(null)
88
- const dimensions = useGridDimensions(containerRef)
89
- // ComputedRef<{ width: number, height: number }>
90
- ```
91
-
92
- ### `useMeetGrid(options)`
93
-
94
- ```ts
95
- import { useMeetGrid } from '@meet-layout-grid/vue'
96
- import { computed } from 'vue'
97
-
98
- const options = computed(() => ({
99
- dimensions: dimensions.value,
100
- count: 6,
101
- aspectRatio: '16:9',
102
- gap: 8,
103
- layoutMode: 'speaker',
104
- }))
105
-
106
- const grid = useMeetGrid(options)
107
- ```
108
-
109
- ### `useGridItemPosition(grid, index)`
110
-
111
- ```ts
112
- import { useGridItemPosition } from '@meet-layout-grid/vue'
113
-
114
- const { position, dimensions, isMain, isHidden } = useGridItemPosition(grid, 0)
115
- ```
116
-
117
- ## Layout Modes
118
-
119
- - **gallery** - Equal-sized tiles
120
- - **speaker** - Active speaker larger
121
- - **spotlight** - Single participant focus
122
- - **sidebar** - Main view + thumbnails
123
-
124
- ## License
125
-
126
- MIT
1
+ # @meet-layout-grid/vue
2
+
3
+ Vue 3 integration for meet-layout-grid with Motion animations.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @meet-layout-grid/vue
9
+ ```
10
+
11
+ ## Quick Start
12
+
13
+ ```vue
14
+ <script setup>
15
+ import { GridContainer, GridItem } from '@meet-layout-grid/vue'
16
+ import { ref } from 'vue'
17
+
18
+ const participants = ref([
19
+ { id: 1, name: 'You' },
20
+ { id: 2, name: 'User 1' },
21
+ ])
22
+ </script>
23
+
24
+ <template>
25
+ <GridContainer
26
+ aspect-ratio="16:9"
27
+ :gap="8"
28
+ :count="participants.length"
29
+ layout-mode="gallery"
30
+ >
31
+ <GridItem
32
+ v-for="(participant, index) in participants"
33
+ :key="participant.id"
34
+ :index="index"
35
+ >
36
+ <VideoTile :participant="participant" />
37
+ </GridItem>
38
+ </GridContainer>
39
+ </template>
40
+ ```
41
+
42
+ ## Components
43
+
44
+ ### `<GridContainer>`
45
+
46
+ Container component with provide/inject context.
47
+
48
+ ```vue
49
+ <GridContainer
50
+ aspect-ratio="16:9"
51
+ :gap="8"
52
+ :count="6"
53
+ layout-mode="gallery"
54
+ :speaker-index="0"
55
+ :pinned-index="0"
56
+ sidebar-position="right"
57
+ :sidebar-ratio="0.25"
58
+ spring-preset="smooth"
59
+ tag="div"
60
+ >
61
+ <slot />
62
+ </GridContainer>
63
+ ```
64
+
65
+ ### `<GridItem>`
66
+
67
+ Animated grid item with motion-v animations.
68
+
69
+ ```vue
70
+ <GridItem
71
+ :index="0"
72
+ :disable-animation="false"
73
+ tag="div"
74
+ >
75
+ <slot />
76
+ </GridItem>
77
+ ```
78
+
79
+ ## Composables
80
+
81
+ ### `useGridDimensions(ref)`
82
+
83
+ ```ts
84
+ import { useGridDimensions } from '@meet-layout-grid/vue'
85
+ import { ref } from 'vue'
86
+
87
+ const containerRef = ref<HTMLElement | null>(null)
88
+ const dimensions = useGridDimensions(containerRef)
89
+ // ComputedRef<{ width: number, height: number }>
90
+ ```
91
+
92
+ ### `useMeetGrid(options)`
93
+
94
+ ```ts
95
+ import { useMeetGrid } from '@meet-layout-grid/vue'
96
+ import { computed } from 'vue'
97
+
98
+ const options = computed(() => ({
99
+ dimensions: dimensions.value,
100
+ count: 6,
101
+ aspectRatio: '16:9',
102
+ gap: 8,
103
+ layoutMode: 'speaker',
104
+ }))
105
+
106
+ const grid = useMeetGrid(options)
107
+ ```
108
+
109
+ ### `useGridItemPosition(grid, index)`
110
+
111
+ ```ts
112
+ import { useGridItemPosition } from '@meet-layout-grid/vue'
113
+
114
+ const { position, dimensions, isMain, isHidden } = useGridItemPosition(grid, 0)
115
+ ```
116
+
117
+ ## Layout Modes
118
+
119
+ - **gallery** - Equal-sized tiles
120
+ - **speaker** - Active speaker larger
121
+ - **spotlight** - Single participant focus
122
+ - **sidebar** - Main view + thumbnails
123
+
124
+ ## License
125
+
126
+ MIT
package/dist/index.cjs CHANGED
@@ -1,14 +1,14 @@
1
1
  'use strict';
2
2
 
3
3
  const vue = require('vue');
4
- const core$1 = require('@vueuse/core');
5
- const core = require('@meet-layout-grid/core');
4
+ const core = require('@vueuse/core');
5
+ const meetLayoutGridCore = require('@thangdevalone/meet-layout-grid-core');
6
6
  const motionV = require('motion-v');
7
7
 
8
8
  function useGridDimensions(elementRef) {
9
9
  const width = vue.ref(0);
10
10
  const height = vue.ref(0);
11
- core$1.useResizeObserver(elementRef, (entries) => {
11
+ core.useResizeObserver(elementRef, (entries) => {
12
12
  const entry = entries[0];
13
13
  if (entry) {
14
14
  width.value = entry.contentRect.width;
@@ -30,11 +30,11 @@ function useMeetGrid(options) {
30
30
  const getOptions = typeof options === "function" ? options : () => options.value;
31
31
  return vue.computed(() => {
32
32
  const opts = getOptions();
33
- return core.createMeetGrid(opts);
33
+ return meetLayoutGridCore.createMeetGrid(opts);
34
34
  });
35
35
  }
36
36
  function useGridAnimation(preset = "smooth") {
37
- return vue.computed(() => core.getSpringConfig(preset));
37
+ return vue.computed(() => meetLayoutGridCore.getSpringConfig(preset));
38
38
  }
39
39
  function useGridItemPosition(grid, index) {
40
40
  const getIndex = () => typeof index === "number" ? index : index.value;
@@ -101,6 +101,26 @@ const GridContainer = vue.defineComponent({
101
101
  type: String,
102
102
  default: "smooth"
103
103
  },
104
+ /** Maximum items per page for pagination (0 = no pagination) */
105
+ maxItemsPerPage: {
106
+ type: Number,
107
+ default: 0
108
+ },
109
+ /** Current page index (0-based) for pagination */
110
+ currentPage: {
111
+ type: Number,
112
+ default: 0
113
+ },
114
+ /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
115
+ maxVisibleOthers: {
116
+ type: Number,
117
+ default: 0
118
+ },
119
+ /** Current page for "others" in speaker/sidebar modes (0-based) */
120
+ currentOthersPage: {
121
+ type: Number,
122
+ default: 0
123
+ },
104
124
  /** HTML tag to render */
105
125
  tag: {
106
126
  type: String,
@@ -119,7 +139,11 @@ const GridContainer = vue.defineComponent({
119
139
  pinnedIndex: props.pinnedIndex,
120
140
  speakerIndex: props.speakerIndex,
121
141
  sidebarPosition: props.sidebarPosition,
122
- sidebarRatio: props.sidebarRatio
142
+ sidebarRatio: props.sidebarRatio,
143
+ maxItemsPerPage: props.maxItemsPerPage,
144
+ currentPage: props.currentPage,
145
+ maxVisibleOthers: props.maxVisibleOthers,
146
+ currentOthersPage: props.currentOthersPage
123
147
  }));
124
148
  const grid = useMeetGrid(gridOptions);
125
149
  vue.provide(GridContextKey, {
@@ -170,10 +194,15 @@ const GridItem = vue.defineComponent({
170
194
  const position = vue.computed(() => grid.value.getPosition(props.index));
171
195
  const dimensions = vue.computed(() => grid.value.getItemDimensions(props.index));
172
196
  const isMain = vue.computed(() => grid.value.isMainItem(props.index));
197
+ const isVisible = vue.computed(() => grid.value.isItemVisible(props.index));
173
198
  const isHidden = vue.computed(() => {
174
- return grid.value.layoutMode === "spotlight" && !isMain.value;
199
+ if (grid.value.layoutMode === "spotlight" && !isMain.value)
200
+ return true;
201
+ if (!isVisible.value)
202
+ return true;
203
+ return false;
175
204
  });
176
- const springConfig = core.getSpringConfig(springPreset);
205
+ const springConfig = meetLayoutGridCore.getSpringConfig(springPreset);
177
206
  return () => {
178
207
  if (isHidden.value) {
179
208
  return null;
@@ -203,9 +232,9 @@ const GridItem = vue.defineComponent({
203
232
  );
204
233
  }
205
234
  return vue.h(
206
- motionV.Motion,
235
+ motionV.motion.div,
207
236
  {
208
- tag: props.tag,
237
+ as: props.tag,
209
238
  animate: animateProps,
210
239
  transition: {
211
240
  type: springConfig.type,
@@ -260,13 +289,13 @@ const GridOverlay = vue.defineComponent({
260
289
  }
261
290
  });
262
291
 
263
- exports.createGrid = core.createGrid;
264
- exports.createGridItemPositioner = core.createGridItemPositioner;
265
- exports.createMeetGrid = core.createMeetGrid;
266
- exports.getAspectRatio = core.getAspectRatio;
267
- exports.getGridItemDimensions = core.getGridItemDimensions;
268
- exports.getSpringConfig = core.getSpringConfig;
269
- exports.springPresets = core.springPresets;
292
+ exports.createGrid = meetLayoutGridCore.createGrid;
293
+ exports.createGridItemPositioner = meetLayoutGridCore.createGridItemPositioner;
294
+ exports.createMeetGrid = meetLayoutGridCore.createMeetGrid;
295
+ exports.getAspectRatio = meetLayoutGridCore.getAspectRatio;
296
+ exports.getGridItemDimensions = meetLayoutGridCore.getGridItemDimensions;
297
+ exports.getSpringConfig = meetLayoutGridCore.getSpringConfig;
298
+ exports.springPresets = meetLayoutGridCore.springPresets;
270
299
  exports.GridContainer = GridContainer;
271
300
  exports.GridContextKey = GridContextKey;
272
301
  exports.GridItem = GridItem;
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
- import * as _meet_layout_grid_core from '@meet-layout-grid/core';
2
- import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@meet-layout-grid/core';
3
- export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@meet-layout-grid/core';
1
+ import * as _thangdevalone_meet_layout_grid_core from '@thangdevalone/meet-layout-grid-core';
2
+ import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@thangdevalone/meet-layout-grid-core';
3
+ export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
4
4
  import * as vue from 'vue';
5
5
  import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
6
6
 
@@ -40,7 +40,7 @@ declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
40
40
  * Composable to get position for a specific grid item index
41
41
  */
42
42
  declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: Ref<number> | ComputedRef<number> | number): {
43
- position: ComputedRef<_meet_layout_grid_core.Position>;
43
+ position: ComputedRef<_thangdevalone_meet_layout_grid_core.Position>;
44
44
  dimensions: ComputedRef<GridDimensions>;
45
45
  isMain: ComputedRef<boolean>;
46
46
  isHidden: ComputedRef<boolean>;
@@ -84,7 +84,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
84
84
  };
85
85
  /** Sidebar position */
86
86
  sidebarPosition: {
87
- type: PropType<"left" | "right" | "bottom">;
87
+ type: PropType<"left" | "right" | "top" | "bottom">;
88
88
  default: string;
89
89
  };
90
90
  /** Sidebar ratio (0-1) */
@@ -97,6 +97,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
97
97
  type: PropType<SpringPreset>;
98
98
  default: string;
99
99
  };
100
+ /** Maximum items per page for pagination (0 = no pagination) */
101
+ maxItemsPerPage: {
102
+ type: NumberConstructor;
103
+ default: number;
104
+ };
105
+ /** Current page index (0-based) for pagination */
106
+ currentPage: {
107
+ type: NumberConstructor;
108
+ default: number;
109
+ };
110
+ /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
111
+ maxVisibleOthers: {
112
+ type: NumberConstructor;
113
+ default: number;
114
+ };
115
+ /** Current page for "others" in speaker/sidebar modes (0-based) */
116
+ currentOthersPage: {
117
+ type: NumberConstructor;
118
+ default: number;
119
+ };
100
120
  /** HTML tag to render */
101
121
  tag: {
102
122
  type: StringConstructor;
@@ -137,7 +157,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
137
157
  };
138
158
  /** Sidebar position */
139
159
  sidebarPosition: {
140
- type: PropType<"left" | "right" | "bottom">;
160
+ type: PropType<"left" | "right" | "top" | "bottom">;
141
161
  default: string;
142
162
  };
143
163
  /** Sidebar ratio (0-1) */
@@ -150,6 +170,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
150
170
  type: PropType<SpringPreset>;
151
171
  default: string;
152
172
  };
173
+ /** Maximum items per page for pagination (0 = no pagination) */
174
+ maxItemsPerPage: {
175
+ type: NumberConstructor;
176
+ default: number;
177
+ };
178
+ /** Current page index (0-based) for pagination */
179
+ currentPage: {
180
+ type: NumberConstructor;
181
+ default: number;
182
+ };
183
+ /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
184
+ maxVisibleOthers: {
185
+ type: NumberConstructor;
186
+ default: number;
187
+ };
188
+ /** Current page for "others" in speaker/sidebar modes (0-based) */
189
+ currentOthersPage: {
190
+ type: NumberConstructor;
191
+ default: number;
192
+ };
153
193
  /** HTML tag to render */
154
194
  tag: {
155
195
  type: StringConstructor;
@@ -161,9 +201,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
161
201
  layoutMode: LayoutMode;
162
202
  pinnedIndex: number;
163
203
  speakerIndex: number;
164
- sidebarPosition: "left" | "right" | "bottom";
204
+ sidebarPosition: "left" | "right" | "top" | "bottom";
165
205
  sidebarRatio: number;
166
206
  springPreset: "snappy" | "smooth" | "gentle" | "bouncy";
207
+ maxItemsPerPage: number;
208
+ currentPage: number;
209
+ maxVisibleOthers: number;
210
+ currentOthersPage: number;
167
211
  tag: string;
168
212
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
169
213
  declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
- import * as _meet_layout_grid_core from '@meet-layout-grid/core';
2
- import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@meet-layout-grid/core';
3
- export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@meet-layout-grid/core';
1
+ import * as _thangdevalone_meet_layout_grid_core from '@thangdevalone/meet-layout-grid-core';
2
+ import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@thangdevalone/meet-layout-grid-core';
3
+ export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
4
4
  import * as vue from 'vue';
5
5
  import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
6
6
 
@@ -40,7 +40,7 @@ declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
40
40
  * Composable to get position for a specific grid item index
41
41
  */
42
42
  declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: Ref<number> | ComputedRef<number> | number): {
43
- position: ComputedRef<_meet_layout_grid_core.Position>;
43
+ position: ComputedRef<_thangdevalone_meet_layout_grid_core.Position>;
44
44
  dimensions: ComputedRef<GridDimensions>;
45
45
  isMain: ComputedRef<boolean>;
46
46
  isHidden: ComputedRef<boolean>;
@@ -84,7 +84,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
84
84
  };
85
85
  /** Sidebar position */
86
86
  sidebarPosition: {
87
- type: PropType<"left" | "right" | "bottom">;
87
+ type: PropType<"left" | "right" | "top" | "bottom">;
88
88
  default: string;
89
89
  };
90
90
  /** Sidebar ratio (0-1) */
@@ -97,6 +97,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
97
97
  type: PropType<SpringPreset>;
98
98
  default: string;
99
99
  };
100
+ /** Maximum items per page for pagination (0 = no pagination) */
101
+ maxItemsPerPage: {
102
+ type: NumberConstructor;
103
+ default: number;
104
+ };
105
+ /** Current page index (0-based) for pagination */
106
+ currentPage: {
107
+ type: NumberConstructor;
108
+ default: number;
109
+ };
110
+ /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
111
+ maxVisibleOthers: {
112
+ type: NumberConstructor;
113
+ default: number;
114
+ };
115
+ /** Current page for "others" in speaker/sidebar modes (0-based) */
116
+ currentOthersPage: {
117
+ type: NumberConstructor;
118
+ default: number;
119
+ };
100
120
  /** HTML tag to render */
101
121
  tag: {
102
122
  type: StringConstructor;
@@ -137,7 +157,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
137
157
  };
138
158
  /** Sidebar position */
139
159
  sidebarPosition: {
140
- type: PropType<"left" | "right" | "bottom">;
160
+ type: PropType<"left" | "right" | "top" | "bottom">;
141
161
  default: string;
142
162
  };
143
163
  /** Sidebar ratio (0-1) */
@@ -150,6 +170,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
150
170
  type: PropType<SpringPreset>;
151
171
  default: string;
152
172
  };
173
+ /** Maximum items per page for pagination (0 = no pagination) */
174
+ maxItemsPerPage: {
175
+ type: NumberConstructor;
176
+ default: number;
177
+ };
178
+ /** Current page index (0-based) for pagination */
179
+ currentPage: {
180
+ type: NumberConstructor;
181
+ default: number;
182
+ };
183
+ /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
184
+ maxVisibleOthers: {
185
+ type: NumberConstructor;
186
+ default: number;
187
+ };
188
+ /** Current page for "others" in speaker/sidebar modes (0-based) */
189
+ currentOthersPage: {
190
+ type: NumberConstructor;
191
+ default: number;
192
+ };
153
193
  /** HTML tag to render */
154
194
  tag: {
155
195
  type: StringConstructor;
@@ -161,9 +201,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
161
201
  layoutMode: LayoutMode;
162
202
  pinnedIndex: number;
163
203
  speakerIndex: number;
164
- sidebarPosition: "left" | "right" | "bottom";
204
+ sidebarPosition: "left" | "right" | "top" | "bottom";
165
205
  sidebarRatio: number;
166
206
  springPreset: "snappy" | "smooth" | "gentle" | "bouncy";
207
+ maxItemsPerPage: number;
208
+ currentPage: number;
209
+ maxVisibleOthers: number;
210
+ currentOthersPage: number;
167
211
  tag: string;
168
212
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
169
213
  declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{