@thangdevalone/meet-layout-grid-vue 1.1.1 → 1.3.0

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 (6) hide show
  1. package/dist/index.cjs +12 -25
  2. package/dist/index.d.cts +21 -45
  3. package/dist/index.d.mts +21 -45
  4. package/dist/index.d.ts +21 -45
  5. package/dist/index.mjs +12 -25
  6. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -76,21 +76,20 @@ const GridContainer = vue.defineComponent({
76
76
  type: String,
77
77
  default: "gallery"
78
78
  },
79
- /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
79
+ /** Index of pinned/focused item (main participant for pin/spotlight modes) */
80
80
  pinnedIndex: {
81
81
  type: Number,
82
82
  default: void 0
83
83
  },
84
- /** Sidebar position */
85
- sidebarPosition: {
84
+ /**
85
+ * Position of "others" thumbnails when a participant is pinned.
86
+ * In portrait containers, this is forced to 'bottom'.
87
+ * @default 'right'
88
+ */
89
+ othersPosition: {
86
90
  type: String,
87
91
  default: "right"
88
92
  },
89
- /** Sidebar ratio (0-1) */
90
- sidebarRatio: {
91
- type: Number,
92
- default: 0.25
93
- },
94
93
  /** Spring animation preset */
95
94
  springPreset: {
96
95
  type: String,
@@ -106,7 +105,7 @@ const GridContainer = vue.defineComponent({
106
105
  type: Number,
107
106
  default: 0
108
107
  },
109
- /** Maximum visible items (0 = show all). In gallery: limits all items. In sidebar: limits "others". */
108
+ /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
110
109
  maxVisible: {
111
110
  type: Number,
112
111
  default: 0
@@ -118,23 +117,13 @@ const GridContainer = vue.defineComponent({
118
117
  },
119
118
  /**
120
119
  * Per-item aspect ratio configurations.
121
- * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
122
- * @example ['16:9', '9:16', 'fill', undefined]
120
+ * Use different ratios for mobile (9:16), desktop (16:9).
121
+ * @example ['16:9', '9:16', undefined]
123
122
  */
124
123
  itemAspectRatios: {
125
124
  type: Array,
126
125
  default: void 0
127
126
  },
128
- /**
129
- * Enable flexible cell sizing based on item aspect ratios.
130
- * When true, items with different aspect ratios get appropriately sized cells.
131
- * Items are sorted by aspect ratio and grouped in rows.
132
- * @default false
133
- */
134
- flexLayout: {
135
- type: Boolean,
136
- default: false
137
- },
138
127
  /** HTML tag to render */
139
128
  tag: {
140
129
  type: String,
@@ -151,14 +140,12 @@ const GridContainer = vue.defineComponent({
151
140
  gap: props.gap,
152
141
  layoutMode: props.layoutMode,
153
142
  pinnedIndex: props.pinnedIndex,
154
- sidebarPosition: props.sidebarPosition,
155
- sidebarRatio: props.sidebarRatio,
143
+ othersPosition: props.othersPosition,
156
144
  maxItemsPerPage: props.maxItemsPerPage,
157
145
  currentPage: props.currentPage,
158
146
  maxVisible: props.maxVisible,
159
147
  currentVisiblePage: props.currentVisiblePage,
160
- itemAspectRatios: props.itemAspectRatios,
161
- flexLayout: props.flexLayout
148
+ itemAspectRatios: props.itemAspectRatios
162
149
  }));
163
150
  const grid = useMeetGrid(gridOptions);
164
151
  vue.provide(GridContextKey, {
package/dist/index.d.cts CHANGED
@@ -73,21 +73,20 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
73
73
  type: PropType<LayoutMode>;
74
74
  default: string;
75
75
  };
76
- /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
76
+ /** Index of pinned/focused item (main participant for pin/spotlight modes) */
77
77
  pinnedIndex: {
78
78
  type: NumberConstructor;
79
79
  default: undefined;
80
80
  };
81
- /** Sidebar position */
82
- sidebarPosition: {
81
+ /**
82
+ * Position of "others" thumbnails when a participant is pinned.
83
+ * In portrait containers, this is forced to 'bottom'.
84
+ * @default 'right'
85
+ */
86
+ othersPosition: {
83
87
  type: PropType<"left" | "right" | "top" | "bottom">;
84
88
  default: string;
85
89
  };
86
- /** Sidebar ratio (0-1) */
87
- sidebarRatio: {
88
- type: NumberConstructor;
89
- default: number;
90
- };
91
90
  /** Spring animation preset */
92
91
  springPreset: {
93
92
  type: PropType<SpringPreset>;
@@ -103,7 +102,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
103
102
  type: NumberConstructor;
104
103
  default: number;
105
104
  };
106
- /** Maximum visible items (0 = show all). In gallery: limits all items. In sidebar: limits "others". */
105
+ /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
107
106
  maxVisible: {
108
107
  type: NumberConstructor;
109
108
  default: number;
@@ -115,23 +114,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
115
114
  };
116
115
  /**
117
116
  * Per-item aspect ratio configurations.
118
- * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
119
- * @example ['16:9', '9:16', 'fill', undefined]
117
+ * Use different ratios for mobile (9:16), desktop (16:9).
118
+ * @example ['16:9', '9:16', undefined]
120
119
  */
121
120
  itemAspectRatios: {
122
121
  type: PropType<(ItemAspectRatio | undefined)[]>;
123
122
  default: undefined;
124
123
  };
125
- /**
126
- * Enable flexible cell sizing based on item aspect ratios.
127
- * When true, items with different aspect ratios get appropriately sized cells.
128
- * Items are sorted by aspect ratio and grouped in rows.
129
- * @default false
130
- */
131
- flexLayout: {
132
- type: BooleanConstructor;
133
- default: boolean;
134
- };
135
124
  /** HTML tag to render */
136
125
  tag: {
137
126
  type: StringConstructor;
@@ -160,21 +149,20 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
160
149
  type: PropType<LayoutMode>;
161
150
  default: string;
162
151
  };
163
- /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
152
+ /** Index of pinned/focused item (main participant for pin/spotlight modes) */
164
153
  pinnedIndex: {
165
154
  type: NumberConstructor;
166
155
  default: undefined;
167
156
  };
168
- /** Sidebar position */
169
- sidebarPosition: {
157
+ /**
158
+ * Position of "others" thumbnails when a participant is pinned.
159
+ * In portrait containers, this is forced to 'bottom'.
160
+ * @default 'right'
161
+ */
162
+ othersPosition: {
170
163
  type: PropType<"left" | "right" | "top" | "bottom">;
171
164
  default: string;
172
165
  };
173
- /** Sidebar ratio (0-1) */
174
- sidebarRatio: {
175
- type: NumberConstructor;
176
- default: number;
177
- };
178
166
  /** Spring animation preset */
179
167
  springPreset: {
180
168
  type: PropType<SpringPreset>;
@@ -190,7 +178,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
190
178
  type: NumberConstructor;
191
179
  default: number;
192
180
  };
193
- /** Maximum visible items (0 = show all). In gallery: limits all items. In sidebar: limits "others". */
181
+ /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
194
182
  maxVisible: {
195
183
  type: NumberConstructor;
196
184
  default: number;
@@ -202,23 +190,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
202
190
  };
203
191
  /**
204
192
  * Per-item aspect ratio configurations.
205
- * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
206
- * @example ['16:9', '9:16', 'fill', undefined]
193
+ * Use different ratios for mobile (9:16), desktop (16:9).
194
+ * @example ['16:9', '9:16', undefined]
207
195
  */
208
196
  itemAspectRatios: {
209
197
  type: PropType<(ItemAspectRatio | undefined)[]>;
210
198
  default: undefined;
211
199
  };
212
- /**
213
- * Enable flexible cell sizing based on item aspect ratios.
214
- * When true, items with different aspect ratios get appropriately sized cells.
215
- * Items are sorted by aspect ratio and grouped in rows.
216
- * @default false
217
- */
218
- flexLayout: {
219
- type: BooleanConstructor;
220
- default: boolean;
221
- };
222
200
  /** HTML tag to render */
223
201
  tag: {
224
202
  type: StringConstructor;
@@ -229,15 +207,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
229
207
  gap: number;
230
208
  layoutMode: LayoutMode;
231
209
  pinnedIndex: number;
232
- sidebarPosition: "left" | "right" | "top" | "bottom";
233
- sidebarRatio: number;
210
+ othersPosition: "left" | "right" | "top" | "bottom";
234
211
  springPreset: "snappy" | "smooth" | "gentle" | "bouncy";
235
212
  maxItemsPerPage: number;
236
213
  currentPage: number;
237
214
  maxVisible: number;
238
215
  currentVisiblePage: number;
239
216
  itemAspectRatios: (string | undefined)[];
240
- flexLayout: boolean;
241
217
  tag: string;
242
218
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
243
219
  declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
package/dist/index.d.mts CHANGED
@@ -73,21 +73,20 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
73
73
  type: PropType<LayoutMode>;
74
74
  default: string;
75
75
  };
76
- /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
76
+ /** Index of pinned/focused item (main participant for pin/spotlight modes) */
77
77
  pinnedIndex: {
78
78
  type: NumberConstructor;
79
79
  default: undefined;
80
80
  };
81
- /** Sidebar position */
82
- sidebarPosition: {
81
+ /**
82
+ * Position of "others" thumbnails when a participant is pinned.
83
+ * In portrait containers, this is forced to 'bottom'.
84
+ * @default 'right'
85
+ */
86
+ othersPosition: {
83
87
  type: PropType<"left" | "right" | "top" | "bottom">;
84
88
  default: string;
85
89
  };
86
- /** Sidebar ratio (0-1) */
87
- sidebarRatio: {
88
- type: NumberConstructor;
89
- default: number;
90
- };
91
90
  /** Spring animation preset */
92
91
  springPreset: {
93
92
  type: PropType<SpringPreset>;
@@ -103,7 +102,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
103
102
  type: NumberConstructor;
104
103
  default: number;
105
104
  };
106
- /** Maximum visible items (0 = show all). In gallery: limits all items. In sidebar: limits "others". */
105
+ /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
107
106
  maxVisible: {
108
107
  type: NumberConstructor;
109
108
  default: number;
@@ -115,23 +114,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
115
114
  };
116
115
  /**
117
116
  * Per-item aspect ratio configurations.
118
- * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
119
- * @example ['16:9', '9:16', 'fill', undefined]
117
+ * Use different ratios for mobile (9:16), desktop (16:9).
118
+ * @example ['16:9', '9:16', undefined]
120
119
  */
121
120
  itemAspectRatios: {
122
121
  type: PropType<(ItemAspectRatio | undefined)[]>;
123
122
  default: undefined;
124
123
  };
125
- /**
126
- * Enable flexible cell sizing based on item aspect ratios.
127
- * When true, items with different aspect ratios get appropriately sized cells.
128
- * Items are sorted by aspect ratio and grouped in rows.
129
- * @default false
130
- */
131
- flexLayout: {
132
- type: BooleanConstructor;
133
- default: boolean;
134
- };
135
124
  /** HTML tag to render */
136
125
  tag: {
137
126
  type: StringConstructor;
@@ -160,21 +149,20 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
160
149
  type: PropType<LayoutMode>;
161
150
  default: string;
162
151
  };
163
- /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
152
+ /** Index of pinned/focused item (main participant for pin/spotlight modes) */
164
153
  pinnedIndex: {
165
154
  type: NumberConstructor;
166
155
  default: undefined;
167
156
  };
168
- /** Sidebar position */
169
- sidebarPosition: {
157
+ /**
158
+ * Position of "others" thumbnails when a participant is pinned.
159
+ * In portrait containers, this is forced to 'bottom'.
160
+ * @default 'right'
161
+ */
162
+ othersPosition: {
170
163
  type: PropType<"left" | "right" | "top" | "bottom">;
171
164
  default: string;
172
165
  };
173
- /** Sidebar ratio (0-1) */
174
- sidebarRatio: {
175
- type: NumberConstructor;
176
- default: number;
177
- };
178
166
  /** Spring animation preset */
179
167
  springPreset: {
180
168
  type: PropType<SpringPreset>;
@@ -190,7 +178,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
190
178
  type: NumberConstructor;
191
179
  default: number;
192
180
  };
193
- /** Maximum visible items (0 = show all). In gallery: limits all items. In sidebar: limits "others". */
181
+ /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
194
182
  maxVisible: {
195
183
  type: NumberConstructor;
196
184
  default: number;
@@ -202,23 +190,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
202
190
  };
203
191
  /**
204
192
  * Per-item aspect ratio configurations.
205
- * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
206
- * @example ['16:9', '9:16', 'fill', undefined]
193
+ * Use different ratios for mobile (9:16), desktop (16:9).
194
+ * @example ['16:9', '9:16', undefined]
207
195
  */
208
196
  itemAspectRatios: {
209
197
  type: PropType<(ItemAspectRatio | undefined)[]>;
210
198
  default: undefined;
211
199
  };
212
- /**
213
- * Enable flexible cell sizing based on item aspect ratios.
214
- * When true, items with different aspect ratios get appropriately sized cells.
215
- * Items are sorted by aspect ratio and grouped in rows.
216
- * @default false
217
- */
218
- flexLayout: {
219
- type: BooleanConstructor;
220
- default: boolean;
221
- };
222
200
  /** HTML tag to render */
223
201
  tag: {
224
202
  type: StringConstructor;
@@ -229,15 +207,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
229
207
  gap: number;
230
208
  layoutMode: LayoutMode;
231
209
  pinnedIndex: number;
232
- sidebarPosition: "left" | "right" | "top" | "bottom";
233
- sidebarRatio: number;
210
+ othersPosition: "left" | "right" | "top" | "bottom";
234
211
  springPreset: "snappy" | "smooth" | "gentle" | "bouncy";
235
212
  maxItemsPerPage: number;
236
213
  currentPage: number;
237
214
  maxVisible: number;
238
215
  currentVisiblePage: number;
239
216
  itemAspectRatios: (string | undefined)[];
240
- flexLayout: boolean;
241
217
  tag: string;
242
218
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
243
219
  declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
package/dist/index.d.ts CHANGED
@@ -73,21 +73,20 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
73
73
  type: PropType<LayoutMode>;
74
74
  default: string;
75
75
  };
76
- /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
76
+ /** Index of pinned/focused item (main participant for pin/spotlight modes) */
77
77
  pinnedIndex: {
78
78
  type: NumberConstructor;
79
79
  default: undefined;
80
80
  };
81
- /** Sidebar position */
82
- sidebarPosition: {
81
+ /**
82
+ * Position of "others" thumbnails when a participant is pinned.
83
+ * In portrait containers, this is forced to 'bottom'.
84
+ * @default 'right'
85
+ */
86
+ othersPosition: {
83
87
  type: PropType<"left" | "right" | "top" | "bottom">;
84
88
  default: string;
85
89
  };
86
- /** Sidebar ratio (0-1) */
87
- sidebarRatio: {
88
- type: NumberConstructor;
89
- default: number;
90
- };
91
90
  /** Spring animation preset */
92
91
  springPreset: {
93
92
  type: PropType<SpringPreset>;
@@ -103,7 +102,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
103
102
  type: NumberConstructor;
104
103
  default: number;
105
104
  };
106
- /** Maximum visible items (0 = show all). In gallery: limits all items. In sidebar: limits "others". */
105
+ /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
107
106
  maxVisible: {
108
107
  type: NumberConstructor;
109
108
  default: number;
@@ -115,23 +114,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
115
114
  };
116
115
  /**
117
116
  * Per-item aspect ratio configurations.
118
- * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
119
- * @example ['16:9', '9:16', 'fill', undefined]
117
+ * Use different ratios for mobile (9:16), desktop (16:9).
118
+ * @example ['16:9', '9:16', undefined]
120
119
  */
121
120
  itemAspectRatios: {
122
121
  type: PropType<(ItemAspectRatio | undefined)[]>;
123
122
  default: undefined;
124
123
  };
125
- /**
126
- * Enable flexible cell sizing based on item aspect ratios.
127
- * When true, items with different aspect ratios get appropriately sized cells.
128
- * Items are sorted by aspect ratio and grouped in rows.
129
- * @default false
130
- */
131
- flexLayout: {
132
- type: BooleanConstructor;
133
- default: boolean;
134
- };
135
124
  /** HTML tag to render */
136
125
  tag: {
137
126
  type: StringConstructor;
@@ -160,21 +149,20 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
160
149
  type: PropType<LayoutMode>;
161
150
  default: string;
162
151
  };
163
- /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
152
+ /** Index of pinned/focused item (main participant for pin/spotlight modes) */
164
153
  pinnedIndex: {
165
154
  type: NumberConstructor;
166
155
  default: undefined;
167
156
  };
168
- /** Sidebar position */
169
- sidebarPosition: {
157
+ /**
158
+ * Position of "others" thumbnails when a participant is pinned.
159
+ * In portrait containers, this is forced to 'bottom'.
160
+ * @default 'right'
161
+ */
162
+ othersPosition: {
170
163
  type: PropType<"left" | "right" | "top" | "bottom">;
171
164
  default: string;
172
165
  };
173
- /** Sidebar ratio (0-1) */
174
- sidebarRatio: {
175
- type: NumberConstructor;
176
- default: number;
177
- };
178
166
  /** Spring animation preset */
179
167
  springPreset: {
180
168
  type: PropType<SpringPreset>;
@@ -190,7 +178,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
190
178
  type: NumberConstructor;
191
179
  default: number;
192
180
  };
193
- /** Maximum visible items (0 = show all). In gallery: limits all items. In sidebar: limits "others". */
181
+ /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
194
182
  maxVisible: {
195
183
  type: NumberConstructor;
196
184
  default: number;
@@ -202,23 +190,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
202
190
  };
203
191
  /**
204
192
  * Per-item aspect ratio configurations.
205
- * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
206
- * @example ['16:9', '9:16', 'fill', undefined]
193
+ * Use different ratios for mobile (9:16), desktop (16:9).
194
+ * @example ['16:9', '9:16', undefined]
207
195
  */
208
196
  itemAspectRatios: {
209
197
  type: PropType<(ItemAspectRatio | undefined)[]>;
210
198
  default: undefined;
211
199
  };
212
- /**
213
- * Enable flexible cell sizing based on item aspect ratios.
214
- * When true, items with different aspect ratios get appropriately sized cells.
215
- * Items are sorted by aspect ratio and grouped in rows.
216
- * @default false
217
- */
218
- flexLayout: {
219
- type: BooleanConstructor;
220
- default: boolean;
221
- };
222
200
  /** HTML tag to render */
223
201
  tag: {
224
202
  type: StringConstructor;
@@ -229,15 +207,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
229
207
  gap: number;
230
208
  layoutMode: LayoutMode;
231
209
  pinnedIndex: number;
232
- sidebarPosition: "left" | "right" | "top" | "bottom";
233
- sidebarRatio: number;
210
+ othersPosition: "left" | "right" | "top" | "bottom";
234
211
  springPreset: "snappy" | "smooth" | "gentle" | "bouncy";
235
212
  maxItemsPerPage: number;
236
213
  currentPage: number;
237
214
  maxVisible: number;
238
215
  currentVisiblePage: number;
239
216
  itemAspectRatios: (string | undefined)[];
240
- flexLayout: boolean;
241
217
  tag: string;
242
218
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
243
219
  declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
package/dist/index.mjs CHANGED
@@ -75,21 +75,20 @@ const GridContainer = defineComponent({
75
75
  type: String,
76
76
  default: "gallery"
77
77
  },
78
- /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
78
+ /** Index of pinned/focused item (main participant for pin/spotlight modes) */
79
79
  pinnedIndex: {
80
80
  type: Number,
81
81
  default: void 0
82
82
  },
83
- /** Sidebar position */
84
- sidebarPosition: {
83
+ /**
84
+ * Position of "others" thumbnails when a participant is pinned.
85
+ * In portrait containers, this is forced to 'bottom'.
86
+ * @default 'right'
87
+ */
88
+ othersPosition: {
85
89
  type: String,
86
90
  default: "right"
87
91
  },
88
- /** Sidebar ratio (0-1) */
89
- sidebarRatio: {
90
- type: Number,
91
- default: 0.25
92
- },
93
92
  /** Spring animation preset */
94
93
  springPreset: {
95
94
  type: String,
@@ -105,7 +104,7 @@ const GridContainer = defineComponent({
105
104
  type: Number,
106
105
  default: 0
107
106
  },
108
- /** Maximum visible items (0 = show all). In gallery: limits all items. In sidebar: limits "others". */
107
+ /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
109
108
  maxVisible: {
110
109
  type: Number,
111
110
  default: 0
@@ -117,23 +116,13 @@ const GridContainer = defineComponent({
117
116
  },
118
117
  /**
119
118
  * Per-item aspect ratio configurations.
120
- * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
121
- * @example ['16:9', '9:16', 'fill', undefined]
119
+ * Use different ratios for mobile (9:16), desktop (16:9).
120
+ * @example ['16:9', '9:16', undefined]
122
121
  */
123
122
  itemAspectRatios: {
124
123
  type: Array,
125
124
  default: void 0
126
125
  },
127
- /**
128
- * Enable flexible cell sizing based on item aspect ratios.
129
- * When true, items with different aspect ratios get appropriately sized cells.
130
- * Items are sorted by aspect ratio and grouped in rows.
131
- * @default false
132
- */
133
- flexLayout: {
134
- type: Boolean,
135
- default: false
136
- },
137
126
  /** HTML tag to render */
138
127
  tag: {
139
128
  type: String,
@@ -150,14 +139,12 @@ const GridContainer = defineComponent({
150
139
  gap: props.gap,
151
140
  layoutMode: props.layoutMode,
152
141
  pinnedIndex: props.pinnedIndex,
153
- sidebarPosition: props.sidebarPosition,
154
- sidebarRatio: props.sidebarRatio,
142
+ othersPosition: props.othersPosition,
155
143
  maxItemsPerPage: props.maxItemsPerPage,
156
144
  currentPage: props.currentPage,
157
145
  maxVisible: props.maxVisible,
158
146
  currentVisiblePage: props.currentVisiblePage,
159
- itemAspectRatios: props.itemAspectRatios,
160
- flexLayout: props.flexLayout
147
+ itemAspectRatios: props.itemAspectRatios
161
148
  }));
162
149
  const grid = useMeetGrid(gridOptions);
163
150
  provide(GridContextKey, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thangdevalone/meet-layout-grid-vue",
3
- "version": "1.1.1",
3
+ "version": "1.3.0",
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.1.1"
46
+ "@thangdevalone/meet-layout-grid-core": "1.3.0"
47
47
  },
48
48
  "devDependencies": {
49
49
  "vue": "^3.4.0",