@thangdevalone/meeting-grid-layout-vue 1.5.8 → 1.5.9

package/README.md

@@ -57,6 +57,8 @@ Wraps the grid and provides layout via `provide`/`inject`.
 | `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/tablet pin-only mode: page 0 = pinned full-screen, page 1+ = others gallery (≤1024px) |
+| `disable-float`        | `boolean`                                 | `false`     | Disable Floating PiP in 2-person mode; shows standard gallery grid instead |
+| `disable-animation`    | `boolean`                                 | `false`     | Disable all spring/transition animations globally; items snap instantly    |
 | `tag`                  | `string`                                  | `'div'`     | Root HTML element tag                                                |
 
 ### `<GridItem>`

package/dist/index.cjs

@@ -215,9 +215,9 @@ const GridContainer = vue.defineComponent({
     const grid = useMeetGrid(gridOptions);
     vue.provide(GridContextKey, {
       grid,
-      springPreset: props.springPreset,
+      springPreset: vue.toRef(props, "springPreset"),
       dimensions,
-      disableAnimation: props.disableAnimation
+      disableAnimation: vue.toRef(props, "disableAnimation")
     });
     return () => vue.h(
       props.tag,
@@ -265,7 +265,7 @@ const GridItem = vue.defineComponent({
       return () => null;
     }
     const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation } = context;
-    const noAnimation = vue.computed(() => containerDisableAnimation || props.disableAnimation);
+    const noAnimation = vue.computed(() => containerDisableAnimation.value || props.disableAnimation);
     const position = vue.computed(() => grid.value.getPosition(props.index));
     const dimensions = vue.computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = vue.computed(
@@ -359,7 +359,7 @@ const GridItem = vue.defineComponent({
       return props.index === lastVisibleOthersIndex;
     });
     const hiddenCount = vue.computed(() => grid.value.hiddenCount);
-    const springConfig = meetingGridLayoutCore.getSpringConfig(springPreset);
+    const springConfig = vue.computed(() => meetingGridLayoutCore.getSpringConfig(springPreset.value));
     const gridX = motionV.useMotionValue(0);
     const gridY = motionV.useMotionValue(0);
     const gridAnimReady = vue.ref(false);
@@ -368,7 +368,10 @@ const GridItem = vue.defineComponent({
         () => position.value.top,
         () => position.value.left,
         isFloat,
-        isHidden
+        isHidden,
+        () => springConfig.value.stiffness,
+        () => springConfig.value.damping,
+        () => springConfig.value.mass
       ],
       ([, , floating, hidden]) => {
         if (floating || hidden) {
@@ -386,8 +389,9 @@ const GridItem = vue.defineComponent({
         } else {
           const cfg = {
             type: "spring",
-            stiffness: springConfig.stiffness,
-            damping: springConfig.damping
+            stiffness: springConfig.value.stiffness,
+            damping: springConfig.value.damping,
+            mass: springConfig.value.mass
           };
           motionV.animate(gridX, pos.left, cfg);
           motionV.animate(gridY, pos.top, cfg);
@@ -482,18 +486,25 @@ const GridItem = vue.defineComponent({
           slots.default?.(slotProps.value)
         );
       }
+      const transition = noAnimation.value ? { duration: 0 } : {
+        type: "spring",
+        stiffness: springConfig.value.stiffness,
+        damping: springConfig.value.damping,
+        mass: springConfig.value.mass
+      };
       return vue.h(
         motionV.motion.div,
         {
           key: `grid-${props.index}`,
+          initial: { width: itemWidth, height: itemHeight },
+          animate: { width: itemWidth, height: itemHeight },
+          transition,
           style: {
             position: "absolute",
             top: 0,
             left: 0,
             x: gridX,
-            y: gridY,
-            width: `${itemWidth}px`,
-            height: `${itemHeight}px`
+            y: gridY
           },
           "data-grid-index": props.index,
           "data-grid-main": isMain.value
@@ -670,7 +681,7 @@ const FloatingGridItem = vue.defineComponent({
         if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
           currentAnchor.value = newAnchor;
           const pos = getCornerPosition(newAnchor);
-          if (containerDisableAnimation) {
+          if (containerDisableAnimation.value) {
             x.set(pos.x);
             y.set(pos.y);
           } else {
@@ -718,7 +729,7 @@ const FloatingGridItem = vue.defineComponent({
         currentAnchor.value = nearestCorner;
         emit("anchorChange", nearestCorner);
         const snapPos = getCornerPosition(nearestCorner);
-        if (containerDisableAnimation) {
+        if (containerDisableAnimation.value) {
           x.set(snapPos.x);
           y.set(snapPos.y);
         } else {
@@ -749,8 +760,8 @@ const FloatingGridItem = vue.defineComponent({
             x,
             y
           },
-          whileDrag: containerDisableAnimation ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-          transition: containerDisableAnimation ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
+          whileDrag: containerDisableAnimation.value ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+          transition: containerDisableAnimation.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
           onDragEnd: handleDragEnd
         },
         slots.default?.()

package/dist/index.d.cts

@@ -20,20 +20,24 @@ declare function useMeetGrid(options: Ref<MeetGridOptions> | ComputedRef<MeetGri
  * Composable to get animation configuration for Motion
  */
 declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
-    stiffness: 400;
-    damping: 30;
+    stiffness: 800;
+    damping: 35;
+    mass: 0.5;
     type: "spring";
 } | {
-    stiffness: 300;
-    damping: 30;
+    stiffness: 200;
+    damping: 26;
+    mass: 1;
     type: "spring";
 } | {
-    stiffness: 200;
-    damping: 25;
+    stiffness: 60;
+    damping: 14;
+    mass: 1.8;
     type: "spring";
 } | {
-    stiffness: 400;
-    damping: 15;
+    stiffness: 500;
+    damping: 8;
+    mass: 0.6;
     type: "spring";
 }>;
 /**
@@ -48,9 +52,9 @@ declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: R
 
 interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
-    springPreset: SpringPreset;
+    springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
-    disableAnimation: boolean;
+    disableAnimation: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.mts

@@ -20,20 +20,24 @@ declare function useMeetGrid(options: Ref<MeetGridOptions> | ComputedRef<MeetGri
  * Composable to get animation configuration for Motion
  */
 declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
-    stiffness: 400;
-    damping: 30;
+    stiffness: 800;
+    damping: 35;
+    mass: 0.5;
     type: "spring";
 } | {
-    stiffness: 300;
-    damping: 30;
+    stiffness: 200;
+    damping: 26;
+    mass: 1;
     type: "spring";
 } | {
-    stiffness: 200;
-    damping: 25;
+    stiffness: 60;
+    damping: 14;
+    mass: 1.8;
     type: "spring";
 } | {
-    stiffness: 400;
-    damping: 15;
+    stiffness: 500;
+    damping: 8;
+    mass: 0.6;
     type: "spring";
 }>;
 /**
@@ -48,9 +52,9 @@ declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: R
 
 interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
-    springPreset: SpringPreset;
+    springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
-    disableAnimation: boolean;
+    disableAnimation: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.ts

@@ -20,20 +20,24 @@ declare function useMeetGrid(options: Ref<MeetGridOptions> | ComputedRef<MeetGri
  * Composable to get animation configuration for Motion
  */
 declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
-    stiffness: 400;
-    damping: 30;
+    stiffness: 800;
+    damping: 35;
+    mass: 0.5;
     type: "spring";
 } | {
-    stiffness: 300;
-    damping: 30;
+    stiffness: 200;
+    damping: 26;
+    mass: 1;
     type: "spring";
 } | {
-    stiffness: 200;
-    damping: 25;
+    stiffness: 60;
+    damping: 14;
+    mass: 1.8;
     type: "spring";
 } | {
-    stiffness: 400;
-    damping: 15;
+    stiffness: 500;
+    damping: 8;
+    mass: 0.6;
     type: "spring";
 }>;
 /**
@@ -48,9 +52,9 @@ declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: R
 
 interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
-    springPreset: SpringPreset;
+    springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
-    disableAnimation: boolean;
+    disableAnimation: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.mjs

@@ -1,7 +1,7 @@
 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 { ref, onMounted, computed, defineComponent, provide, toRef, h, inject, watch } from 'vue';
 import { useMotionValue, animate, motion } from 'motion-v';
 
 function useGridDimensions(elementRef) {
@@ -214,9 +214,9 @@ const GridContainer = defineComponent({
     const grid = useMeetGrid(gridOptions);
     provide(GridContextKey, {
       grid,
-      springPreset: props.springPreset,
+      springPreset: toRef(props, "springPreset"),
       dimensions,
-      disableAnimation: props.disableAnimation
+      disableAnimation: toRef(props, "disableAnimation")
     });
     return () => h(
       props.tag,
@@ -264,7 +264,7 @@ const GridItem = defineComponent({
       return () => null;
     }
     const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation } = context;
-    const noAnimation = computed(() => containerDisableAnimation || props.disableAnimation);
+    const noAnimation = computed(() => containerDisableAnimation.value || props.disableAnimation);
     const position = computed(() => grid.value.getPosition(props.index));
     const dimensions = computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = computed(
@@ -358,7 +358,7 @@ const GridItem = defineComponent({
       return props.index === lastVisibleOthersIndex;
     });
     const hiddenCount = computed(() => grid.value.hiddenCount);
-    const springConfig = getSpringConfig(springPreset);
+    const springConfig = computed(() => getSpringConfig(springPreset.value));
     const gridX = useMotionValue(0);
     const gridY = useMotionValue(0);
     const gridAnimReady = ref(false);
@@ -367,7 +367,10 @@ const GridItem = defineComponent({
         () => position.value.top,
         () => position.value.left,
         isFloat,
-        isHidden
+        isHidden,
+        () => springConfig.value.stiffness,
+        () => springConfig.value.damping,
+        () => springConfig.value.mass
       ],
       ([, , floating, hidden]) => {
         if (floating || hidden) {
@@ -385,8 +388,9 @@ const GridItem = defineComponent({
         } else {
           const cfg = {
             type: "spring",
-            stiffness: springConfig.stiffness,
-            damping: springConfig.damping
+            stiffness: springConfig.value.stiffness,
+            damping: springConfig.value.damping,
+            mass: springConfig.value.mass
           };
           animate(gridX, pos.left, cfg);
           animate(gridY, pos.top, cfg);
@@ -481,18 +485,25 @@ const GridItem = defineComponent({
           slots.default?.(slotProps.value)
         );
       }
+      const transition = noAnimation.value ? { duration: 0 } : {
+        type: "spring",
+        stiffness: springConfig.value.stiffness,
+        damping: springConfig.value.damping,
+        mass: springConfig.value.mass
+      };
       return h(
         motion.div,
         {
           key: `grid-${props.index}`,
+          initial: { width: itemWidth, height: itemHeight },
+          animate: { width: itemWidth, height: itemHeight },
+          transition,
           style: {
             position: "absolute",
             top: 0,
             left: 0,
             x: gridX,
-            y: gridY,
-            width: `${itemWidth}px`,
-            height: `${itemHeight}px`
+            y: gridY
           },
           "data-grid-index": props.index,
           "data-grid-main": isMain.value
@@ -669,7 +680,7 @@ const FloatingGridItem = defineComponent({
         if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
           currentAnchor.value = newAnchor;
           const pos = getCornerPosition(newAnchor);
-          if (containerDisableAnimation) {
+          if (containerDisableAnimation.value) {
             x.set(pos.x);
             y.set(pos.y);
           } else {
@@ -717,7 +728,7 @@ const FloatingGridItem = defineComponent({
         currentAnchor.value = nearestCorner;
         emit("anchorChange", nearestCorner);
         const snapPos = getCornerPosition(nearestCorner);
-        if (containerDisableAnimation) {
+        if (containerDisableAnimation.value) {
           x.set(snapPos.x);
           y.set(snapPos.y);
         } else {
@@ -748,8 +759,8 @@ const FloatingGridItem = defineComponent({
             x,
             y
           },
-          whileDrag: containerDisableAnimation ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-          transition: containerDisableAnimation ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
+          whileDrag: containerDisableAnimation.value ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+          transition: containerDisableAnimation.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
           onDragEnd: handleDragEnd
         },
         slots.default?.()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meeting-grid-layout-vue",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "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.8"
+    "@thangdevalone/meeting-grid-layout-core": "1.5.9"
   },
   "devDependencies": {
     "vue": "^3.4.0",