@thangdevalone/meeting-grid-layout-vue 1.5.2 → 1.5.3

package/README.md

@@ -56,6 +56,7 @@ Wraps the grid and provides layout via `provide`/`inject`.
 | `float-height`         | `number`                                  | -           | Height of the auto-float PiP (2-person mode). Overrides breakpoints. |
 | `float-breakpoints`    | `PipBreakpoint[]`                         | -           | Responsive breakpoints for auto-float PiP (see [Responsive PiP](#responsive-pip)) |
 | `pip-index`            | `number`                                  | `1`         | Which participant (0 or 1) is the floating PiP in 2-person mode      |
+| `pin-only`             | `boolean`                                 | `false`     | Mobile pin-only mode: page 0 = pinned full-screen, page 1+ = others gallery (≤768px) |
 | `tag`                  | `string`                                  | `'div'`     | Root HTML element tag                                                |
 
 ### `<GridItem>`

package/dist/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const vue = require('vue');
-const core = require('@vueuse/core');
 const meetingGridLayoutCore = require('@thangdevalone/meeting-grid-layout-core');
+const core = require('@vueuse/core');
+const vue = require('vue');
 const motionV = require('motion-v');
 
 function useGridDimensions(elementRef) {
@@ -152,6 +152,17 @@ const GridContainer = vue.defineComponent({
       type: Number,
       default: void 0
     },
+    /**
+     * Pin-only mode. When enabled with pagination on mobile/tablet (container width <= 768px):
+     * - Page 0: Only the pinned participant is shown (full screen)
+     * - Page 1+: Other participants are shown in gallery grid (without pin)
+     * On desktop (width > 768px), the layout behaves as normal sidebar.
+     * @default false
+     */
+    pinOnly: {
+      type: Boolean,
+      default: false
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -177,7 +188,8 @@ const GridContainer = vue.defineComponent({
       floatWidth: props.floatWidth,
       floatHeight: props.floatHeight,
       floatBreakpoints: props.floatBreakpoints,
-      pipIndex: props.pipIndex
+      pipIndex: props.pipIndex,
+      pinOnly: props.pinOnly
     }));
     const grid = useMeetGrid(gridOptions);
     vue.provide(GridContextKey, {

package/dist/index.d.cts

@@ -149,6 +149,17 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * Pin-only mode. When enabled with pagination on mobile/tablet (container width <= 768px):
+     * - Page 0: Only the pinned participant is shown (full screen)
+     * - Page 1+: Other participants are shown in gallery grid (without pin)
+     * On desktop (width > 768px), the layout behaves as normal sidebar.
+     * @default false
+     */
+    pinOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -253,6 +264,17 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * Pin-only mode. When enabled with pagination on mobile/tablet (container width <= 768px):
+     * - Page 0: Only the pinned participant is shown (full screen)
+     * - Page 1+: Other participants are shown in gallery grid (without pin)
+     * On desktop (width > 768px), the layout behaves as normal sidebar.
+     * @default false
+     */
+    pinOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -274,6 +296,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatHeight: number;
     floatBreakpoints: PipBreakpoint[];
     pipIndex: number;
+    pinOnly: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.mts

@@ -149,6 +149,17 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * Pin-only mode. When enabled with pagination on mobile/tablet (container width <= 768px):
+     * - Page 0: Only the pinned participant is shown (full screen)
+     * - Page 1+: Other participants are shown in gallery grid (without pin)
+     * On desktop (width > 768px), the layout behaves as normal sidebar.
+     * @default false
+     */
+    pinOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -253,6 +264,17 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * Pin-only mode. When enabled with pagination on mobile/tablet (container width <= 768px):
+     * - Page 0: Only the pinned participant is shown (full screen)
+     * - Page 1+: Other participants are shown in gallery grid (without pin)
+     * On desktop (width > 768px), the layout behaves as normal sidebar.
+     * @default false
+     */
+    pinOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -274,6 +296,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatHeight: number;
     floatBreakpoints: PipBreakpoint[];
     pipIndex: number;
+    pinOnly: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.ts

@@ -149,6 +149,17 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * Pin-only mode. When enabled with pagination on mobile/tablet (container width <= 768px):
+     * - Page 0: Only the pinned participant is shown (full screen)
+     * - Page 1+: Other participants are shown in gallery grid (without pin)
+     * On desktop (width > 768px), the layout behaves as normal sidebar.
+     * @default false
+     */
+    pinOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -253,6 +264,17 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * Pin-only mode. When enabled with pagination on mobile/tablet (container width <= 768px):
+     * - Page 0: Only the pinned participant is shown (full screen)
+     * - Page 1+: Other participants are shown in gallery grid (without pin)
+     * On desktop (width > 768px), the layout behaves as normal sidebar.
+     * @default false
+     */
+    pinOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -274,6 +296,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatHeight: number;
     floatBreakpoints: PipBreakpoint[];
     pipIndex: number;
+    pinOnly: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { ref, onMounted, computed, defineComponent, provide, h, inject, watch } from 'vue';
-import { useResizeObserver } from '@vueuse/core';
 import { createMeetGrid, getSpringConfig, resolveFloatSize } from '@thangdevalone/meeting-grid-layout-core';
 export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
+import { useResizeObserver } from '@vueuse/core';
+import { ref, onMounted, computed, defineComponent, provide, h, inject, watch } from 'vue';
 import { useMotionValue, animate, motion } from 'motion-v';
 
 function useGridDimensions(elementRef) {
@@ -151,6 +151,17 @@ const GridContainer = defineComponent({
       type: Number,
       default: void 0
     },
+    /**
+     * Pin-only mode. When enabled with pagination on mobile/tablet (container width <= 768px):
+     * - Page 0: Only the pinned participant is shown (full screen)
+     * - Page 1+: Other participants are shown in gallery grid (without pin)
+     * On desktop (width > 768px), the layout behaves as normal sidebar.
+     * @default false
+     */
+    pinOnly: {
+      type: Boolean,
+      default: false
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -176,7 +187,8 @@ const GridContainer = defineComponent({
       floatWidth: props.floatWidth,
       floatHeight: props.floatHeight,
       floatBreakpoints: props.floatBreakpoints,
-      pipIndex: props.pipIndex
+      pipIndex: props.pipIndex,
+      pinOnly: props.pinOnly
     }));
     const grid = useMeetGrid(gridOptions);
     provide(GridContextKey, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meeting-grid-layout-vue",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Vue 3 integration for meeting-grid-layout with Motion animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@vueuse/core": "^10.7.0",
     "motion-v": "^1.0.0",
-    "@thangdevalone/meeting-grid-layout-core": "1.5.2"
+    "@thangdevalone/meeting-grid-layout-core": "1.5.3"
   },
   "devDependencies": {
     "vue": "^3.4.0",