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

package/dist/index.cjs

@@ -163,6 +163,26 @@ const GridContainer = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Disable the floating PiP in 2-person mode.
+     * When true, 2 participants are laid out in a standard gallery grid
+     * instead of one full-screen + one draggable floating PiP.
+     * @default false
+     */
+    disableFloat: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+      type: Boolean,
+      default: false
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -189,13 +209,15 @@ const GridContainer = vue.defineComponent({
       floatHeight: props.floatHeight,
       floatBreakpoints: props.floatBreakpoints,
       pipIndex: props.pipIndex,
-      pinOnly: props.pinOnly
+      pinOnly: props.pinOnly,
+      disableFloat: props.disableFloat
     }));
     const grid = useMeetGrid(gridOptions);
     vue.provide(GridContextKey, {
       grid,
       springPreset: props.springPreset,
-      dimensions
+      dimensions,
+      disableAnimation: props.disableAnimation
     });
     return () => vue.h(
       props.tag,
@@ -242,7 +264,8 @@ const GridItem = vue.defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset, dimensions: containerDimensions } = context;
+    const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation } = context;
+    const noAnimation = vue.computed(() => containerDisableAnimation || props.disableAnimation);
     const position = vue.computed(() => grid.value.getPosition(props.index));
     const dimensions = vue.computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = vue.computed(
@@ -320,9 +343,14 @@ const GridItem = vue.defineComponent({
       ([, w, h2]) => {
         if (isFloat.value && floatInitialized.value && w > 0 && h2 > 0) {
           const pos = getFloatCornerPos(floatAnchor.value);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          motionV.animate(x, pos.x, springCfg);
-          motionV.animate(y, pos.y, springCfg);
+          if (noAnimation.value) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            motionV.animate(x, pos.x, springCfg);
+            motionV.animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -352,6 +380,9 @@ const GridItem = vue.defineComponent({
           gridX.set(pos.left);
           gridY.set(pos.top);
           gridAnimReady.value = true;
+        } else if (noAnimation.value) {
+          gridX.set(pos.left);
+          gridY.set(pos.top);
         } else {
           const cfg = {
             type: "spring",
@@ -390,9 +421,14 @@ const GridItem = vue.defineComponent({
           const nearestCorner = findFloatNearestCorner(currentX, currentY);
           floatAnchor.value = nearestCorner;
           const snapPos = getFloatCornerPos(nearestCorner);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          motionV.animate(x, snapPos.x, springCfg);
-          motionV.animate(y, snapPos.y, springCfg);
+          if (noAnimation.value) {
+            x.set(snapPos.x);
+            y.set(snapPos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            motionV.animate(x, snapPos.x, springCfg);
+            motionV.animate(y, snapPos.y, springCfg);
+          }
         };
         return vue.h(
           motionV.motion.div,
@@ -418,8 +454,8 @@ const GridItem = vue.defineComponent({
               x,
               y
             },
-            whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-            transition: { type: "spring", stiffness: 400, damping: 30 },
+            whileDrag: noAnimation.value ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+            transition: noAnimation.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
             "data-grid-index": props.index,
             "data-grid-float": true,
             onDragEnd: handleDragEnd
@@ -429,7 +465,7 @@ const GridItem = vue.defineComponent({
       }
       const itemWidth = dimensions.value.width;
       const itemHeight = dimensions.value.height;
-      if (props.disableAnimation) {
+      if (noAnimation.value) {
         return vue.h(
           props.tag,
           {
@@ -564,7 +600,7 @@ const FloatingGridItem = vue.defineComponent({
       console.warn("FloatingGridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { dimensions } = context;
+    const { dimensions, disableAnimation: containerDisableAnimation } = context;
     const currentAnchor = vue.ref(props.anchor);
     const effectiveSize = vue.computed(() => {
       if (props.breakpoints && props.breakpoints.length > 0 && dimensions.value.width > 0) {
@@ -634,9 +670,14 @@ const FloatingGridItem = vue.defineComponent({
         if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
           currentAnchor.value = newAnchor;
           const pos = getCornerPosition(newAnchor);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          motionV.animate(x, pos.x, springCfg);
-          motionV.animate(y, pos.y, springCfg);
+          if (containerDisableAnimation) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            motionV.animate(x, pos.x, springCfg);
+            motionV.animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -645,9 +686,14 @@ const FloatingGridItem = vue.defineComponent({
       () => {
         if (isInitialized.value && containerDimensions.value.width > 0 && containerDimensions.value.height > 0) {
           const pos = getCornerPosition(currentAnchor.value);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          motionV.animate(x, pos.x, springCfg);
-          motionV.animate(y, pos.y, springCfg);
+          if (containerDisableAnimation) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            motionV.animate(x, pos.x, springCfg);
+            motionV.animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -672,9 +718,14 @@ const FloatingGridItem = vue.defineComponent({
         currentAnchor.value = nearestCorner;
         emit("anchorChange", nearestCorner);
         const snapPos = getCornerPosition(nearestCorner);
-        const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-        motionV.animate(x, snapPos.x, springCfg);
-        motionV.animate(y, snapPos.y, springCfg);
+        if (containerDisableAnimation) {
+          x.set(snapPos.x);
+          y.set(snapPos.y);
+        } else {
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          motionV.animate(x, snapPos.x, springCfg);
+          motionV.animate(y, snapPos.y, springCfg);
+        }
       };
       return vue.h(
         motionV.motion.div,
@@ -698,8 +749,8 @@ const FloatingGridItem = vue.defineComponent({
             x,
             y
           },
-          whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-          transition: { type: "spring", stiffness: 400, damping: 30 },
+          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 },
           onDragEnd: handleDragEnd
         },
         slots.default?.()

package/dist/index.d.cts

@@ -50,6 +50,7 @@ interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
     springPreset: SpringPreset;
     dimensions: Ref<GridDimensions>;
+    disableAnimation: boolean;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -160,6 +161,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable the floating PiP in 2-person mode.
+     * When true, 2 participants are laid out in a standard gallery grid
+     * instead of one full-screen + one draggable floating PiP.
+     * @default false
+     */
+    disableFloat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -275,6 +296,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable the floating PiP in 2-person mode.
+     * When true, 2 participants are laid out in a standard gallery grid
+     * instead of one full-screen + one draggable floating PiP.
+     * @default false
+     */
+    disableFloat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -297,6 +338,8 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatBreakpoints: PipBreakpoint[];
     pipIndex: number;
     pinOnly: boolean;
+    disableFloat: boolean;
+    disableAnimation: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -344,8 +387,8 @@ declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: string;
     };
 }>> & Readonly<{}>, {
-    tag: string;
     disableAnimation: boolean;
+    tag: string;
     itemAspectRatio: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.mts

@@ -50,6 +50,7 @@ interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
     springPreset: SpringPreset;
     dimensions: Ref<GridDimensions>;
+    disableAnimation: boolean;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -160,6 +161,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable the floating PiP in 2-person mode.
+     * When true, 2 participants are laid out in a standard gallery grid
+     * instead of one full-screen + one draggable floating PiP.
+     * @default false
+     */
+    disableFloat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -275,6 +296,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable the floating PiP in 2-person mode.
+     * When true, 2 participants are laid out in a standard gallery grid
+     * instead of one full-screen + one draggable floating PiP.
+     * @default false
+     */
+    disableFloat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -297,6 +338,8 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatBreakpoints: PipBreakpoint[];
     pipIndex: number;
     pinOnly: boolean;
+    disableFloat: boolean;
+    disableAnimation: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -344,8 +387,8 @@ declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: string;
     };
 }>> & Readonly<{}>, {
-    tag: string;
     disableAnimation: boolean;
+    tag: string;
     itemAspectRatio: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.ts

@@ -50,6 +50,7 @@ interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
     springPreset: SpringPreset;
     dimensions: Ref<GridDimensions>;
+    disableAnimation: boolean;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -160,6 +161,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable the floating PiP in 2-person mode.
+     * When true, 2 participants are laid out in a standard gallery grid
+     * instead of one full-screen + one draggable floating PiP.
+     * @default false
+     */
+    disableFloat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -275,6 +296,26 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable the floating PiP in 2-person mode.
+     * When true, 2 participants are laid out in a standard gallery grid
+     * instead of one full-screen + one draggable floating PiP.
+     * @default false
+     */
+    disableFloat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -297,6 +338,8 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatBreakpoints: PipBreakpoint[];
     pipIndex: number;
     pinOnly: boolean;
+    disableFloat: boolean;
+    disableAnimation: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -344,8 +387,8 @@ declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: string;
     };
 }>> & Readonly<{}>, {
-    tag: string;
     disableAnimation: boolean;
+    tag: string;
     itemAspectRatio: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.mjs

@@ -162,6 +162,26 @@ const GridContainer = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Disable the floating PiP in 2-person mode.
+     * When true, 2 participants are laid out in a standard gallery grid
+     * instead of one full-screen + one draggable floating PiP.
+     * @default false
+     */
+    disableFloat: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+      type: Boolean,
+      default: false
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -188,13 +208,15 @@ const GridContainer = defineComponent({
       floatHeight: props.floatHeight,
       floatBreakpoints: props.floatBreakpoints,
       pipIndex: props.pipIndex,
-      pinOnly: props.pinOnly
+      pinOnly: props.pinOnly,
+      disableFloat: props.disableFloat
     }));
     const grid = useMeetGrid(gridOptions);
     provide(GridContextKey, {
       grid,
       springPreset: props.springPreset,
-      dimensions
+      dimensions,
+      disableAnimation: props.disableAnimation
     });
     return () => h(
       props.tag,
@@ -241,7 +263,8 @@ const GridItem = defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset, dimensions: containerDimensions } = context;
+    const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation } = context;
+    const noAnimation = computed(() => containerDisableAnimation || props.disableAnimation);
     const position = computed(() => grid.value.getPosition(props.index));
     const dimensions = computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = computed(
@@ -319,9 +342,14 @@ const GridItem = defineComponent({
       ([, w, h2]) => {
         if (isFloat.value && floatInitialized.value && w > 0 && h2 > 0) {
           const pos = getFloatCornerPos(floatAnchor.value);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          animate(x, pos.x, springCfg);
-          animate(y, pos.y, springCfg);
+          if (noAnimation.value) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            animate(x, pos.x, springCfg);
+            animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -351,6 +379,9 @@ const GridItem = defineComponent({
           gridX.set(pos.left);
           gridY.set(pos.top);
           gridAnimReady.value = true;
+        } else if (noAnimation.value) {
+          gridX.set(pos.left);
+          gridY.set(pos.top);
         } else {
           const cfg = {
             type: "spring",
@@ -389,9 +420,14 @@ const GridItem = defineComponent({
           const nearestCorner = findFloatNearestCorner(currentX, currentY);
           floatAnchor.value = nearestCorner;
           const snapPos = getFloatCornerPos(nearestCorner);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          animate(x, snapPos.x, springCfg);
-          animate(y, snapPos.y, springCfg);
+          if (noAnimation.value) {
+            x.set(snapPos.x);
+            y.set(snapPos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            animate(x, snapPos.x, springCfg);
+            animate(y, snapPos.y, springCfg);
+          }
         };
         return h(
           motion.div,
@@ -417,8 +453,8 @@ const GridItem = defineComponent({
               x,
               y
             },
-            whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-            transition: { type: "spring", stiffness: 400, damping: 30 },
+            whileDrag: noAnimation.value ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+            transition: noAnimation.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
             "data-grid-index": props.index,
             "data-grid-float": true,
             onDragEnd: handleDragEnd
@@ -428,7 +464,7 @@ const GridItem = defineComponent({
       }
       const itemWidth = dimensions.value.width;
       const itemHeight = dimensions.value.height;
-      if (props.disableAnimation) {
+      if (noAnimation.value) {
         return h(
           props.tag,
           {
@@ -563,7 +599,7 @@ const FloatingGridItem = defineComponent({
       console.warn("FloatingGridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { dimensions } = context;
+    const { dimensions, disableAnimation: containerDisableAnimation } = context;
     const currentAnchor = ref(props.anchor);
     const effectiveSize = computed(() => {
       if (props.breakpoints && props.breakpoints.length > 0 && dimensions.value.width > 0) {
@@ -633,9 +669,14 @@ const FloatingGridItem = defineComponent({
         if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
           currentAnchor.value = newAnchor;
           const pos = getCornerPosition(newAnchor);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          animate(x, pos.x, springCfg);
-          animate(y, pos.y, springCfg);
+          if (containerDisableAnimation) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            animate(x, pos.x, springCfg);
+            animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -644,9 +685,14 @@ const FloatingGridItem = defineComponent({
       () => {
         if (isInitialized.value && containerDimensions.value.width > 0 && containerDimensions.value.height > 0) {
           const pos = getCornerPosition(currentAnchor.value);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          animate(x, pos.x, springCfg);
-          animate(y, pos.y, springCfg);
+          if (containerDisableAnimation) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            animate(x, pos.x, springCfg);
+            animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -671,9 +717,14 @@ const FloatingGridItem = defineComponent({
         currentAnchor.value = nearestCorner;
         emit("anchorChange", nearestCorner);
         const snapPos = getCornerPosition(nearestCorner);
-        const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-        animate(x, snapPos.x, springCfg);
-        animate(y, snapPos.y, springCfg);
+        if (containerDisableAnimation) {
+          x.set(snapPos.x);
+          y.set(snapPos.y);
+        } else {
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          animate(x, snapPos.x, springCfg);
+          animate(y, snapPos.y, springCfg);
+        }
       };
       return h(
         motion.div,
@@ -697,8 +748,8 @@ const FloatingGridItem = defineComponent({
             x,
             y
           },
-          whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-          transition: { type: "spring", stiffness: 400, damping: 30 },
+          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 },
           onDragEnd: handleDragEnd
         },
         slots.default?.()

package/package.json

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