@thangdevalone/meet-layout-grid-vue 1.0.0

package/dist/index.mjs

@@ -0,0 +1,262 @@
+import { ref, onMounted, computed, defineComponent, provide, h, inject } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import { createMeetGrid, getSpringConfig } from '@meet-layout-grid/core';
+export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@meet-layout-grid/core';
+import { Motion } from 'motion-v';
+
+function useGridDimensions(elementRef) {
+  const width = ref(0);
+  const height = ref(0);
+  useResizeObserver(elementRef, (entries) => {
+    const entry = entries[0];
+    if (entry) {
+      width.value = entry.contentRect.width;
+      height.value = entry.contentRect.height;
+    }
+  });
+  onMounted(() => {
+    if (elementRef.value) {
+      width.value = elementRef.value.clientWidth;
+      height.value = elementRef.value.clientHeight;
+    }
+  });
+  return computed(() => ({
+    width: width.value,
+    height: height.value
+  }));
+}
+function useMeetGrid(options) {
+  const getOptions = typeof options === "function" ? options : () => options.value;
+  return computed(() => {
+    const opts = getOptions();
+    return createMeetGrid(opts);
+  });
+}
+function useGridAnimation(preset = "smooth") {
+  return computed(() => getSpringConfig(preset));
+}
+function useGridItemPosition(grid, index) {
+  const getIndex = () => typeof index === "number" ? index : index.value;
+  const position = computed(() => grid.value.getPosition(getIndex()));
+  const dimensions = computed(() => grid.value.getItemDimensions(getIndex()));
+  const isMain = computed(() => grid.value.isMainItem(getIndex()));
+  const isHidden = computed(() => {
+    return grid.value.layoutMode === "spotlight" && !isMain.value;
+  });
+  return {
+    position,
+    dimensions,
+    isMain,
+    isHidden
+  };
+}
+
+const GridContextKey = Symbol("MeetGridContext");
+const GridContainer = defineComponent({
+  name: "GridContainer",
+  props: {
+    /** Aspect ratio in format "width:height" */
+    aspectRatio: {
+      type: String,
+      default: "16:9"
+    },
+    /** Gap between items in pixels */
+    gap: {
+      type: Number,
+      default: 8
+    },
+    /** Number of items */
+    count: {
+      type: Number,
+      required: true
+    },
+    /** Layout mode */
+    layoutMode: {
+      type: String,
+      default: "gallery"
+    },
+    /** Index of pinned item */
+    pinnedIndex: {
+      type: Number,
+      default: void 0
+    },
+    /** Index of active speaker */
+    speakerIndex: {
+      type: Number,
+      default: void 0
+    },
+    /** Sidebar position */
+    sidebarPosition: {
+      type: String,
+      default: "right"
+    },
+    /** Sidebar ratio (0-1) */
+    sidebarRatio: {
+      type: Number,
+      default: 0.25
+    },
+    /** Spring animation preset */
+    springPreset: {
+      type: String,
+      default: "smooth"
+    },
+    /** HTML tag to render */
+    tag: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(props, { slots }) {
+    const containerRef = ref(null);
+    const dimensions = useGridDimensions(containerRef);
+    const gridOptions = computed(() => ({
+      dimensions: dimensions.value,
+      count: props.count,
+      aspectRatio: props.aspectRatio,
+      gap: props.gap,
+      layoutMode: props.layoutMode,
+      pinnedIndex: props.pinnedIndex,
+      speakerIndex: props.speakerIndex,
+      sidebarPosition: props.sidebarPosition,
+      sidebarRatio: props.sidebarRatio
+    }));
+    const grid = useMeetGrid(gridOptions);
+    provide(GridContextKey, {
+      grid,
+      springPreset: props.springPreset
+    });
+    return () => h(
+      props.tag,
+      {
+        ref: containerRef,
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden"
+        }
+      },
+      slots.default?.()
+    );
+  }
+});
+const GridItem = defineComponent({
+  name: "GridItem",
+  props: {
+    /** Index of this item in the grid */
+    index: {
+      type: Number,
+      required: true
+    },
+    /** Whether to disable animations */
+    disableAnimation: {
+      type: Boolean,
+      default: false
+    },
+    /** HTML tag to render */
+    tag: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(props, { slots }) {
+    const context = inject(GridContextKey);
+    if (!context) {
+      console.warn("GridItem must be used inside a GridContainer");
+      return () => null;
+    }
+    const { grid, springPreset } = context;
+    const position = computed(() => grid.value.getPosition(props.index));
+    const dimensions = computed(() => grid.value.getItemDimensions(props.index));
+    const isMain = computed(() => grid.value.isMainItem(props.index));
+    const isHidden = computed(() => {
+      return grid.value.layoutMode === "spotlight" && !isMain.value;
+    });
+    const springConfig = getSpringConfig(springPreset);
+    return () => {
+      if (isHidden.value) {
+        return null;
+      }
+      const animateProps = {
+        width: dimensions.value.width,
+        height: dimensions.value.height,
+        top: position.value.top,
+        left: position.value.left
+      };
+      if (props.disableAnimation) {
+        return h(
+          props.tag,
+          {
+            style: {
+              position: "absolute",
+              ...animateProps,
+              width: `${animateProps.width}px`,
+              height: `${animateProps.height}px`,
+              top: `${animateProps.top}px`,
+              left: `${animateProps.left}px`
+            },
+            "data-grid-index": props.index,
+            "data-grid-main": isMain.value
+          },
+          slots.default?.()
+        );
+      }
+      return h(
+        Motion,
+        {
+          tag: props.tag,
+          animate: animateProps,
+          transition: {
+            type: springConfig.type,
+            stiffness: springConfig.stiffness,
+            damping: springConfig.damping
+          },
+          style: {
+            position: "absolute"
+          },
+          "data-grid-index": props.index,
+          "data-grid-main": isMain.value
+        },
+        slots.default
+      );
+    };
+  }
+});
+const GridOverlay = defineComponent({
+  name: "GridOverlay",
+  props: {
+    /** Whether to show the overlay */
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    /** Background color */
+    backgroundColor: {
+      type: String,
+      default: "rgba(0,0,0,0.5)"
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (!props.visible) {
+        return null;
+      }
+      return h(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: props.backgroundColor
+          }
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+export { GridContainer, GridContextKey, GridItem, GridOverlay, useGridAnimation, useGridDimensions, useGridItemPosition, useMeetGrid };

package/package.json

@@ -0,0 +1,60 @@
+{
+    "name": "@thangdevalone/meet-layout-grid-vue",
+    "version": "1.0.0",
+    "description": "Vue 3 integration for meet-layout-grid with Motion animations",
+    "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.mts",
+                "default": "./dist/index.mjs"
+            },
+            "require": {
+                "types": "./dist/index.d.cts",
+                "default": "./dist/index.cjs"
+            }
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "unbuild",
+        "dev": "unbuild --watch",
+        "clean": "rimraf dist",
+        "test": "vitest run",
+        "test:watch": "vitest"
+    },
+    "keywords": [
+        "vue",
+        "vue3",
+        "grid",
+        "meeting",
+        "video",
+        "motion",
+        "animation"
+    ],
+    "author": "ThangDevAlone",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/thangdevalone/meet-layout-grid"
+    },
+    "peerDependencies": {
+        "vue": ">=3.3.0"
+    },
+    "dependencies": {
+        "@thangdevalone/meet-layout-grid-core": "workspace:*",
+        "@vueuse/core": "^10.7.0",
+        "motion-v": "^1.0.0"
+    },
+    "devDependencies": {
+        "vue": "^3.4.0",
+        "unbuild": "^2.0.0",
+        "vitest": "^1.0.0",
+        "rimraf": "^5.0.0"
+    }
+}