@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/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as _thangdevalone_meet_layout_grid_core from '@thangdevalone/meet-layout-grid-core';
2
- import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio } from '@thangdevalone/meet-layout-grid-core';
3
- export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
2
+ import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint } from '@thangdevalone/meet-layout-grid-core';
3
+ export { ContentDimensions, DEFAULT_FLOAT_BREAKPOINTS, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PipBreakpoint, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, 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
 
@@ -121,6 +121,25 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
121
121
  type: PropType<(ItemAspectRatio | undefined)[]>;
122
122
  default: undefined;
123
123
  };
124
+ /** Custom width for the floating PiP item in 2-person mode */
125
+ floatWidth: {
126
+ type: NumberConstructor;
127
+ default: undefined;
128
+ };
129
+ /** Custom height for the floating PiP item in 2-person mode */
130
+ floatHeight: {
131
+ type: NumberConstructor;
132
+ default: undefined;
133
+ };
134
+ /**
135
+ * Responsive breakpoints for the floating PiP in 2-person mode.
136
+ * When provided, PiP size auto-adjusts based on container width.
137
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
138
+ */
139
+ floatBreakpoints: {
140
+ type: PropType<PipBreakpoint[]>;
141
+ default: undefined;
142
+ };
124
143
  /** HTML tag to render */
125
144
  tag: {
126
145
  type: StringConstructor;
@@ -197,6 +216,25 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
197
216
  type: PropType<(ItemAspectRatio | undefined)[]>;
198
217
  default: undefined;
199
218
  };
219
+ /** Custom width for the floating PiP item in 2-person mode */
220
+ floatWidth: {
221
+ type: NumberConstructor;
222
+ default: undefined;
223
+ };
224
+ /** Custom height for the floating PiP item in 2-person mode */
225
+ floatHeight: {
226
+ type: NumberConstructor;
227
+ default: undefined;
228
+ };
229
+ /**
230
+ * Responsive breakpoints for the floating PiP in 2-person mode.
231
+ * When provided, PiP size auto-adjusts based on container width.
232
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
233
+ */
234
+ floatBreakpoints: {
235
+ type: PropType<PipBreakpoint[]>;
236
+ default: undefined;
237
+ };
200
238
  /** HTML tag to render */
201
239
  tag: {
202
240
  type: StringConstructor;
@@ -214,6 +252,9 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
214
252
  maxVisible: number;
215
253
  currentVisiblePage: number;
216
254
  itemAspectRatios: (string | undefined)[];
255
+ floatWidth: number;
256
+ floatHeight: number;
257
+ floatBreakpoints: PipBreakpoint[];
217
258
  tag: string;
218
259
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
219
260
  declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -294,16 +335,26 @@ declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{
294
335
  visible: boolean;
295
336
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
296
337
  declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
297
- /** Width of the floating item */
338
+ /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
298
339
  width: {
299
340
  type: NumberConstructor;
300
341
  default: number;
301
342
  };
302
- /** Height of the floating item */
343
+ /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
303
344
  height: {
304
345
  type: NumberConstructor;
305
346
  default: number;
306
347
  };
348
+ /**
349
+ * Responsive breakpoints for PiP sizing.
350
+ * When provided, width/height auto-adjust based on container width.
351
+ * Overrides the fixed `width`/`height` props.
352
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
353
+ */
354
+ breakpoints: {
355
+ type: PropType<PipBreakpoint[]>;
356
+ default: undefined;
357
+ };
307
358
  /** Initial position (x, y from container edges) */
308
359
  initialPosition: {
309
360
  type: PropType<{
@@ -343,16 +394,26 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
343
394
  }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
344
395
  [key: string]: any;
345
396
  }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "anchorChange"[], "anchorChange", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
346
- /** Width of the floating item */
397
+ /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
347
398
  width: {
348
399
  type: NumberConstructor;
349
400
  default: number;
350
401
  };
351
- /** Height of the floating item */
402
+ /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
352
403
  height: {
353
404
  type: NumberConstructor;
354
405
  default: number;
355
406
  };
407
+ /**
408
+ * Responsive breakpoints for PiP sizing.
409
+ * When provided, width/height auto-adjust based on container width.
410
+ * Overrides the fixed `width`/`height` props.
411
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
412
+ */
413
+ breakpoints: {
414
+ type: PropType<PipBreakpoint[]>;
415
+ default: undefined;
416
+ };
356
417
  /** Initial position (x, y from container edges) */
357
418
  initialPosition: {
358
419
  type: PropType<{
@@ -398,6 +459,7 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
398
459
  width: number;
399
460
  anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
400
461
  visible: boolean;
462
+ breakpoints: PipBreakpoint[];
401
463
  initialPosition: {
402
464
  x: number;
403
465
  y: number;
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as _thangdevalone_meet_layout_grid_core from '@thangdevalone/meet-layout-grid-core';
2
- import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio } from '@thangdevalone/meet-layout-grid-core';
3
- export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
2
+ import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint } from '@thangdevalone/meet-layout-grid-core';
3
+ export { ContentDimensions, DEFAULT_FLOAT_BREAKPOINTS, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PipBreakpoint, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, 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
 
@@ -121,6 +121,25 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
121
121
  type: PropType<(ItemAspectRatio | undefined)[]>;
122
122
  default: undefined;
123
123
  };
124
+ /** Custom width for the floating PiP item in 2-person mode */
125
+ floatWidth: {
126
+ type: NumberConstructor;
127
+ default: undefined;
128
+ };
129
+ /** Custom height for the floating PiP item in 2-person mode */
130
+ floatHeight: {
131
+ type: NumberConstructor;
132
+ default: undefined;
133
+ };
134
+ /**
135
+ * Responsive breakpoints for the floating PiP in 2-person mode.
136
+ * When provided, PiP size auto-adjusts based on container width.
137
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
138
+ */
139
+ floatBreakpoints: {
140
+ type: PropType<PipBreakpoint[]>;
141
+ default: undefined;
142
+ };
124
143
  /** HTML tag to render */
125
144
  tag: {
126
145
  type: StringConstructor;
@@ -197,6 +216,25 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
197
216
  type: PropType<(ItemAspectRatio | undefined)[]>;
198
217
  default: undefined;
199
218
  };
219
+ /** Custom width for the floating PiP item in 2-person mode */
220
+ floatWidth: {
221
+ type: NumberConstructor;
222
+ default: undefined;
223
+ };
224
+ /** Custom height for the floating PiP item in 2-person mode */
225
+ floatHeight: {
226
+ type: NumberConstructor;
227
+ default: undefined;
228
+ };
229
+ /**
230
+ * Responsive breakpoints for the floating PiP in 2-person mode.
231
+ * When provided, PiP size auto-adjusts based on container width.
232
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
233
+ */
234
+ floatBreakpoints: {
235
+ type: PropType<PipBreakpoint[]>;
236
+ default: undefined;
237
+ };
200
238
  /** HTML tag to render */
201
239
  tag: {
202
240
  type: StringConstructor;
@@ -214,6 +252,9 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
214
252
  maxVisible: number;
215
253
  currentVisiblePage: number;
216
254
  itemAspectRatios: (string | undefined)[];
255
+ floatWidth: number;
256
+ floatHeight: number;
257
+ floatBreakpoints: PipBreakpoint[];
217
258
  tag: string;
218
259
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
219
260
  declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -294,16 +335,26 @@ declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{
294
335
  visible: boolean;
295
336
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
296
337
  declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
297
- /** Width of the floating item */
338
+ /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
298
339
  width: {
299
340
  type: NumberConstructor;
300
341
  default: number;
301
342
  };
302
- /** Height of the floating item */
343
+ /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
303
344
  height: {
304
345
  type: NumberConstructor;
305
346
  default: number;
306
347
  };
348
+ /**
349
+ * Responsive breakpoints for PiP sizing.
350
+ * When provided, width/height auto-adjust based on container width.
351
+ * Overrides the fixed `width`/`height` props.
352
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
353
+ */
354
+ breakpoints: {
355
+ type: PropType<PipBreakpoint[]>;
356
+ default: undefined;
357
+ };
307
358
  /** Initial position (x, y from container edges) */
308
359
  initialPosition: {
309
360
  type: PropType<{
@@ -343,16 +394,26 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
343
394
  }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
344
395
  [key: string]: any;
345
396
  }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "anchorChange"[], "anchorChange", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
346
- /** Width of the floating item */
397
+ /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
347
398
  width: {
348
399
  type: NumberConstructor;
349
400
  default: number;
350
401
  };
351
- /** Height of the floating item */
402
+ /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
352
403
  height: {
353
404
  type: NumberConstructor;
354
405
  default: number;
355
406
  };
407
+ /**
408
+ * Responsive breakpoints for PiP sizing.
409
+ * When provided, width/height auto-adjust based on container width.
410
+ * Overrides the fixed `width`/`height` props.
411
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
412
+ */
413
+ breakpoints: {
414
+ type: PropType<PipBreakpoint[]>;
415
+ default: undefined;
416
+ };
356
417
  /** Initial position (x, y from container edges) */
357
418
  initialPosition: {
358
419
  type: PropType<{
@@ -398,6 +459,7 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
398
459
  width: number;
399
460
  anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
400
461
  visible: boolean;
462
+ breakpoints: PipBreakpoint[];
401
463
  initialPosition: {
402
464
  x: number;
403
465
  y: number;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as _thangdevalone_meet_layout_grid_core from '@thangdevalone/meet-layout-grid-core';
2
- import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio } from '@thangdevalone/meet-layout-grid-core';
3
- export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
2
+ import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint } from '@thangdevalone/meet-layout-grid-core';
3
+ export { ContentDimensions, DEFAULT_FLOAT_BREAKPOINTS, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PipBreakpoint, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, 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
 
@@ -121,6 +121,25 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
121
121
  type: PropType<(ItemAspectRatio | undefined)[]>;
122
122
  default: undefined;
123
123
  };
124
+ /** Custom width for the floating PiP item in 2-person mode */
125
+ floatWidth: {
126
+ type: NumberConstructor;
127
+ default: undefined;
128
+ };
129
+ /** Custom height for the floating PiP item in 2-person mode */
130
+ floatHeight: {
131
+ type: NumberConstructor;
132
+ default: undefined;
133
+ };
134
+ /**
135
+ * Responsive breakpoints for the floating PiP in 2-person mode.
136
+ * When provided, PiP size auto-adjusts based on container width.
137
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
138
+ */
139
+ floatBreakpoints: {
140
+ type: PropType<PipBreakpoint[]>;
141
+ default: undefined;
142
+ };
124
143
  /** HTML tag to render */
125
144
  tag: {
126
145
  type: StringConstructor;
@@ -197,6 +216,25 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
197
216
  type: PropType<(ItemAspectRatio | undefined)[]>;
198
217
  default: undefined;
199
218
  };
219
+ /** Custom width for the floating PiP item in 2-person mode */
220
+ floatWidth: {
221
+ type: NumberConstructor;
222
+ default: undefined;
223
+ };
224
+ /** Custom height for the floating PiP item in 2-person mode */
225
+ floatHeight: {
226
+ type: NumberConstructor;
227
+ default: undefined;
228
+ };
229
+ /**
230
+ * Responsive breakpoints for the floating PiP in 2-person mode.
231
+ * When provided, PiP size auto-adjusts based on container width.
232
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
233
+ */
234
+ floatBreakpoints: {
235
+ type: PropType<PipBreakpoint[]>;
236
+ default: undefined;
237
+ };
200
238
  /** HTML tag to render */
201
239
  tag: {
202
240
  type: StringConstructor;
@@ -214,6 +252,9 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
214
252
  maxVisible: number;
215
253
  currentVisiblePage: number;
216
254
  itemAspectRatios: (string | undefined)[];
255
+ floatWidth: number;
256
+ floatHeight: number;
257
+ floatBreakpoints: PipBreakpoint[];
217
258
  tag: string;
218
259
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
219
260
  declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -294,16 +335,26 @@ declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{
294
335
  visible: boolean;
295
336
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
296
337
  declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
297
- /** Width of the floating item */
338
+ /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
298
339
  width: {
299
340
  type: NumberConstructor;
300
341
  default: number;
301
342
  };
302
- /** Height of the floating item */
343
+ /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
303
344
  height: {
304
345
  type: NumberConstructor;
305
346
  default: number;
306
347
  };
348
+ /**
349
+ * Responsive breakpoints for PiP sizing.
350
+ * When provided, width/height auto-adjust based on container width.
351
+ * Overrides the fixed `width`/`height` props.
352
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
353
+ */
354
+ breakpoints: {
355
+ type: PropType<PipBreakpoint[]>;
356
+ default: undefined;
357
+ };
307
358
  /** Initial position (x, y from container edges) */
308
359
  initialPosition: {
309
360
  type: PropType<{
@@ -343,16 +394,26 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
343
394
  }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
344
395
  [key: string]: any;
345
396
  }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "anchorChange"[], "anchorChange", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
346
- /** Width of the floating item */
397
+ /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
347
398
  width: {
348
399
  type: NumberConstructor;
349
400
  default: number;
350
401
  };
351
- /** Height of the floating item */
402
+ /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
352
403
  height: {
353
404
  type: NumberConstructor;
354
405
  default: number;
355
406
  };
407
+ /**
408
+ * Responsive breakpoints for PiP sizing.
409
+ * When provided, width/height auto-adjust based on container width.
410
+ * Overrides the fixed `width`/`height` props.
411
+ * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
412
+ */
413
+ breakpoints: {
414
+ type: PropType<PipBreakpoint[]>;
415
+ default: undefined;
416
+ };
356
417
  /** Initial position (x, y from container edges) */
357
418
  initialPosition: {
358
419
  type: PropType<{
@@ -398,6 +459,7 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
398
459
  width: number;
399
460
  anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
400
461
  visible: boolean;
462
+ breakpoints: PipBreakpoint[];
401
463
  initialPosition: {
402
464
  x: number;
403
465
  y: number;