@thangdevalone/meet-layout-grid-vue 1.3.1 → 1.3.2

package/dist/index.cjs

@@ -198,7 +198,7 @@ const GridItem = vue.defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset } = context;
+    const { grid, springPreset, dimensions: containerDimensions } = context;
     const position = vue.computed(() => grid.value.getPosition(props.index));
     const dimensions = vue.computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = vue.computed(
@@ -213,6 +213,77 @@ const GridItem = vue.defineComponent({
         return true;
       return false;
     });
+    const isFloat = vue.computed(() => grid.value.floatIndex === props.index);
+    const floatDims = vue.computed(() => grid.value.floatDimensions ?? { width: 120, height: 160 });
+    const floatAnchor = vue.ref("bottom-right");
+    const floatDragging = vue.ref(false);
+    const floatDragOffset = vue.ref({ x: 0, y: 0 });
+    const floatStartPos = vue.ref({ x: 0, y: 0 });
+    const floatDisplayPos = vue.ref({ x: 0, y: 0 });
+    const floatInitialized = vue.ref(false);
+    const getFloatCornerPos = (corner) => {
+      const padding = 12;
+      const dims = containerDimensions.value;
+      const fw = floatDims.value.width;
+      const fh = floatDims.value.height;
+      switch (corner) {
+        case "top-left":
+          return { x: padding, y: padding };
+        case "top-right":
+          return { x: dims.width - fw - padding, y: padding };
+        case "bottom-left":
+          return { x: padding, y: dims.height - fh - padding };
+        case "bottom-right":
+        default:
+          return { x: dims.width - fw - padding, y: dims.height - fh - padding };
+      }
+    };
+    const findFloatNearestCorner = (x, y) => {
+      const fw = floatDims.value.width;
+      const fh = floatDims.value.height;
+      const centerX = x + fw / 2;
+      const centerY = y + fh / 2;
+      const dims = containerDimensions.value;
+      const isLeft = centerX < dims.width / 2;
+      const isTop = centerY < dims.height / 2;
+      if (isTop && isLeft)
+        return "top-left";
+      if (isTop && !isLeft)
+        return "top-right";
+      if (!isTop && isLeft)
+        return "bottom-left";
+      return "bottom-right";
+    };
+    const floatCornerPos = vue.computed(() => getFloatCornerPos(floatAnchor.value));
+    const handleFloatDragStart = (e) => {
+      floatDragging.value = true;
+      const pos = "touches" in e ? e.touches[0] : e;
+      floatStartPos.value = { x: pos.clientX, y: pos.clientY };
+      floatDragOffset.value = { x: 0, y: 0 };
+    };
+    const handleFloatDragMove = (e) => {
+      if (!floatDragging.value)
+        return;
+      e.preventDefault();
+      const pos = "touches" in e ? e.touches[0] : e;
+      floatDragOffset.value = {
+        x: pos.clientX - floatStartPos.value.x,
+        y: pos.clientY - floatStartPos.value.y
+      };
+      floatDisplayPos.value = {
+        x: floatCornerPos.value.x + floatDragOffset.value.x,
+        y: floatCornerPos.value.y + floatDragOffset.value.y
+      };
+    };
+    const handleFloatDragEnd = () => {
+      if (!floatDragging.value)
+        return;
+      floatDragging.value = false;
+      const nearest = findFloatNearestCorner(floatDisplayPos.value.x, floatDisplayPos.value.y);
+      floatAnchor.value = nearest;
+      floatDisplayPos.value = getFloatCornerPos(nearest);
+      floatDragOffset.value = { x: 0, y: 0 };
+    };
     const isLastVisibleOther = vue.computed(() => {
       const lastVisibleOthersIndex = grid.value.getLastVisibleOthersIndex();
       return props.index === lastVisibleOthersIndex;
@@ -228,6 +299,50 @@ const GridItem = vue.defineComponent({
       if (isHidden.value) {
         return null;
       }
+      if (isFloat.value) {
+        const dims = containerDimensions.value;
+        if (dims.width === 0 || dims.height === 0)
+          return null;
+        if (!floatInitialized.value) {
+          floatDisplayPos.value = floatCornerPos.value;
+          floatInitialized.value = true;
+        }
+        return vue.h(
+          motionV.motion.div,
+          {
+            animate: {
+              x: floatDisplayPos.value.x,
+              y: floatDisplayPos.value.y,
+              opacity: 1,
+              scale: floatDragging.value ? 1.05 : 1
+            },
+            transition: floatDragging.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
+            style: {
+              position: "absolute",
+              width: `${floatDims.value.width}px`,
+              height: `${floatDims.value.height}px`,
+              borderRadius: "12px",
+              boxShadow: floatDragging.value ? "0 8px 32px rgba(0,0,0,0.4)" : "0 4px 20px rgba(0,0,0,0.3)",
+              overflow: "hidden",
+              cursor: floatDragging.value ? "grabbing" : "grab",
+              zIndex: 100,
+              touchAction: "none",
+              left: 0,
+              top: 0
+            },
+            "data-grid-index": props.index,
+            "data-grid-float": true,
+            onMousedown: handleFloatDragStart,
+            onMousemove: handleFloatDragMove,
+            onMouseup: handleFloatDragEnd,
+            onMouseleave: handleFloatDragEnd,
+            onTouchstart: handleFloatDragStart,
+            onTouchmove: handleFloatDragMove,
+            onTouchend: handleFloatDragEnd
+          },
+          () => slots.default?.(slotProps.value)
+        );
+      }
       const animateProps = {
         width: dimensions.value.width,
         height: dimensions.value.height,

package/dist/index.mjs

@@ -197,7 +197,7 @@ const GridItem = defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset } = context;
+    const { grid, springPreset, dimensions: containerDimensions } = context;
     const position = computed(() => grid.value.getPosition(props.index));
     const dimensions = computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = computed(
@@ -212,6 +212,77 @@ const GridItem = defineComponent({
         return true;
       return false;
     });
+    const isFloat = computed(() => grid.value.floatIndex === props.index);
+    const floatDims = computed(() => grid.value.floatDimensions ?? { width: 120, height: 160 });
+    const floatAnchor = ref("bottom-right");
+    const floatDragging = ref(false);
+    const floatDragOffset = ref({ x: 0, y: 0 });
+    const floatStartPos = ref({ x: 0, y: 0 });
+    const floatDisplayPos = ref({ x: 0, y: 0 });
+    const floatInitialized = ref(false);
+    const getFloatCornerPos = (corner) => {
+      const padding = 12;
+      const dims = containerDimensions.value;
+      const fw = floatDims.value.width;
+      const fh = floatDims.value.height;
+      switch (corner) {
+        case "top-left":
+          return { x: padding, y: padding };
+        case "top-right":
+          return { x: dims.width - fw - padding, y: padding };
+        case "bottom-left":
+          return { x: padding, y: dims.height - fh - padding };
+        case "bottom-right":
+        default:
+          return { x: dims.width - fw - padding, y: dims.height - fh - padding };
+      }
+    };
+    const findFloatNearestCorner = (x, y) => {
+      const fw = floatDims.value.width;
+      const fh = floatDims.value.height;
+      const centerX = x + fw / 2;
+      const centerY = y + fh / 2;
+      const dims = containerDimensions.value;
+      const isLeft = centerX < dims.width / 2;
+      const isTop = centerY < dims.height / 2;
+      if (isTop && isLeft)
+        return "top-left";
+      if (isTop && !isLeft)
+        return "top-right";
+      if (!isTop && isLeft)
+        return "bottom-left";
+      return "bottom-right";
+    };
+    const floatCornerPos = computed(() => getFloatCornerPos(floatAnchor.value));
+    const handleFloatDragStart = (e) => {
+      floatDragging.value = true;
+      const pos = "touches" in e ? e.touches[0] : e;
+      floatStartPos.value = { x: pos.clientX, y: pos.clientY };
+      floatDragOffset.value = { x: 0, y: 0 };
+    };
+    const handleFloatDragMove = (e) => {
+      if (!floatDragging.value)
+        return;
+      e.preventDefault();
+      const pos = "touches" in e ? e.touches[0] : e;
+      floatDragOffset.value = {
+        x: pos.clientX - floatStartPos.value.x,
+        y: pos.clientY - floatStartPos.value.y
+      };
+      floatDisplayPos.value = {
+        x: floatCornerPos.value.x + floatDragOffset.value.x,
+        y: floatCornerPos.value.y + floatDragOffset.value.y
+      };
+    };
+    const handleFloatDragEnd = () => {
+      if (!floatDragging.value)
+        return;
+      floatDragging.value = false;
+      const nearest = findFloatNearestCorner(floatDisplayPos.value.x, floatDisplayPos.value.y);
+      floatAnchor.value = nearest;
+      floatDisplayPos.value = getFloatCornerPos(nearest);
+      floatDragOffset.value = { x: 0, y: 0 };
+    };
     const isLastVisibleOther = computed(() => {
       const lastVisibleOthersIndex = grid.value.getLastVisibleOthersIndex();
       return props.index === lastVisibleOthersIndex;
@@ -227,6 +298,50 @@ const GridItem = defineComponent({
       if (isHidden.value) {
         return null;
       }
+      if (isFloat.value) {
+        const dims = containerDimensions.value;
+        if (dims.width === 0 || dims.height === 0)
+          return null;
+        if (!floatInitialized.value) {
+          floatDisplayPos.value = floatCornerPos.value;
+          floatInitialized.value = true;
+        }
+        return h(
+          motion.div,
+          {
+            animate: {
+              x: floatDisplayPos.value.x,
+              y: floatDisplayPos.value.y,
+              opacity: 1,
+              scale: floatDragging.value ? 1.05 : 1
+            },
+            transition: floatDragging.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
+            style: {
+              position: "absolute",
+              width: `${floatDims.value.width}px`,
+              height: `${floatDims.value.height}px`,
+              borderRadius: "12px",
+              boxShadow: floatDragging.value ? "0 8px 32px rgba(0,0,0,0.4)" : "0 4px 20px rgba(0,0,0,0.3)",
+              overflow: "hidden",
+              cursor: floatDragging.value ? "grabbing" : "grab",
+              zIndex: 100,
+              touchAction: "none",
+              left: 0,
+              top: 0
+            },
+            "data-grid-index": props.index,
+            "data-grid-float": true,
+            onMousedown: handleFloatDragStart,
+            onMousemove: handleFloatDragMove,
+            onMouseup: handleFloatDragEnd,
+            onMouseleave: handleFloatDragEnd,
+            onTouchstart: handleFloatDragStart,
+            onTouchmove: handleFloatDragMove,
+            onTouchend: handleFloatDragEnd
+          },
+          () => slots.default?.(slotProps.value)
+        );
+      }
       const animateProps = {
         width: dimensions.value.width,
         height: dimensions.value.height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meet-layout-grid-vue",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Vue 3 integration for meet-layout-grid 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/meet-layout-grid-core": "1.3.1"
+    "@thangdevalone/meet-layout-grid-core": "1.3.2"
   },
   "devDependencies": {
     "vue": "^3.4.0",