@thangdevalone/meet-layout-grid-vue 1.0.0

package/README.md

@@ -0,0 +1,126 @@
+# @meet-layout-grid/vue
+
+Vue 3 integration for meet-layout-grid with Motion animations.
+
+## Installation
+
+```bash
+npm install @meet-layout-grid/vue
+```
+
+## Quick Start
+
+```vue
+<script setup>
+import { GridContainer, GridItem } from '@meet-layout-grid/vue'
+import { ref } from 'vue'
+
+const participants = ref([
+  { id: 1, name: 'You' },
+  { id: 2, name: 'User 1' },
+])
+</script>
+
+<template>
+  <GridContainer
+    aspect-ratio="16:9"
+    :gap="8"
+    :count="participants.length"
+    layout-mode="gallery"
+  >
+    <GridItem
+      v-for="(participant, index) in participants"
+      :key="participant.id"
+      :index="index"
+    >
+      <VideoTile :participant="participant" />
+    </GridItem>
+  </GridContainer>
+</template>
+```
+
+## Components
+
+### `<GridContainer>`
+
+Container component with provide/inject context.
+
+```vue
+<GridContainer
+  aspect-ratio="16:9"
+  :gap="8"
+  :count="6"
+  layout-mode="gallery"
+  :speaker-index="0"
+  :pinned-index="0"
+  sidebar-position="right"
+  :sidebar-ratio="0.25"
+  spring-preset="smooth"
+  tag="div"
+>
+  <slot />
+</GridContainer>
+```
+
+### `<GridItem>`
+
+Animated grid item with motion-v animations.
+
+```vue
+<GridItem
+  :index="0"
+  :disable-animation="false"
+  tag="div"
+>
+  <slot />
+</GridItem>
+```
+
+## Composables
+
+### `useGridDimensions(ref)`
+
+```ts
+import { useGridDimensions } from '@meet-layout-grid/vue'
+import { ref } from 'vue'
+
+const containerRef = ref<HTMLElement | null>(null)
+const dimensions = useGridDimensions(containerRef)
+// ComputedRef<{ width: number, height: number }>
+```
+
+### `useMeetGrid(options)`
+
+```ts
+import { useMeetGrid } from '@meet-layout-grid/vue'
+import { computed } from 'vue'
+
+const options = computed(() => ({
+  dimensions: dimensions.value,
+  count: 6,
+  aspectRatio: '16:9',
+  gap: 8,
+  layoutMode: 'speaker',
+}))
+
+const grid = useMeetGrid(options)
+```
+
+### `useGridItemPosition(grid, index)`
+
+```ts
+import { useGridItemPosition } from '@meet-layout-grid/vue'
+
+const { position, dimensions, isMain, isHidden } = useGridItemPosition(grid, 0)
+```
+
+## Layout Modes
+
+- **gallery** - Equal-sized tiles
+- **speaker** - Active speaker larger
+- **spotlight** - Single participant focus
+- **sidebar** - Main view + thumbnails
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,277 @@
+'use strict';
+
+const vue = require('vue');
+const core$1 = require('@vueuse/core');
+const core = require('@meet-layout-grid/core');
+const motionV = require('motion-v');
+
+function useGridDimensions(elementRef) {
+  const width = vue.ref(0);
+  const height = vue.ref(0);
+  core$1.useResizeObserver(elementRef, (entries) => {
+    const entry = entries[0];
+    if (entry) {
+      width.value = entry.contentRect.width;
+      height.value = entry.contentRect.height;
+    }
+  });
+  vue.onMounted(() => {
+    if (elementRef.value) {
+      width.value = elementRef.value.clientWidth;
+      height.value = elementRef.value.clientHeight;
+    }
+  });
+  return vue.computed(() => ({
+    width: width.value,
+    height: height.value
+  }));
+}
+function useMeetGrid(options) {
+  const getOptions = typeof options === "function" ? options : () => options.value;
+  return vue.computed(() => {
+    const opts = getOptions();
+    return core.createMeetGrid(opts);
+  });
+}
+function useGridAnimation(preset = "smooth") {
+  return vue.computed(() => core.getSpringConfig(preset));
+}
+function useGridItemPosition(grid, index) {
+  const getIndex = () => typeof index === "number" ? index : index.value;
+  const position = vue.computed(() => grid.value.getPosition(getIndex()));
+  const dimensions = vue.computed(() => grid.value.getItemDimensions(getIndex()));
+  const isMain = vue.computed(() => grid.value.isMainItem(getIndex()));
+  const isHidden = vue.computed(() => {
+    return grid.value.layoutMode === "spotlight" && !isMain.value;
+  });
+  return {
+    position,
+    dimensions,
+    isMain,
+    isHidden
+  };
+}
+
+const GridContextKey = Symbol("MeetGridContext");
+const GridContainer = vue.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 = vue.ref(null);
+    const dimensions = useGridDimensions(containerRef);
+    const gridOptions = vue.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);
+    vue.provide(GridContextKey, {
+      grid,
+      springPreset: props.springPreset
+    });
+    return () => vue.h(
+      props.tag,
+      {
+        ref: containerRef,
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden"
+        }
+      },
+      slots.default?.()
+    );
+  }
+});
+const GridItem = vue.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 = vue.inject(GridContextKey);
+    if (!context) {
+      console.warn("GridItem must be used inside a GridContainer");
+      return () => null;
+    }
+    const { grid, springPreset } = context;
+    const position = vue.computed(() => grid.value.getPosition(props.index));
+    const dimensions = vue.computed(() => grid.value.getItemDimensions(props.index));
+    const isMain = vue.computed(() => grid.value.isMainItem(props.index));
+    const isHidden = vue.computed(() => {
+      return grid.value.layoutMode === "spotlight" && !isMain.value;
+    });
+    const springConfig = core.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 vue.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 vue.h(
+        motionV.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 = vue.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 vue.h(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: props.backgroundColor
+          }
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+exports.createGrid = core.createGrid;
+exports.createGridItemPositioner = core.createGridItemPositioner;
+exports.createMeetGrid = core.createMeetGrid;
+exports.getAspectRatio = core.getAspectRatio;
+exports.getGridItemDimensions = core.getGridItemDimensions;
+exports.getSpringConfig = core.getSpringConfig;
+exports.springPresets = core.springPresets;
+exports.GridContainer = GridContainer;
+exports.GridContextKey = GridContextKey;
+exports.GridItem = GridItem;
+exports.GridOverlay = GridOverlay;
+exports.useGridAnimation = useGridAnimation;
+exports.useGridDimensions = useGridDimensions;
+exports.useGridItemPosition = useGridItemPosition;
+exports.useMeetGrid = useMeetGrid;

package/dist/index.d.cts

@@ -0,0 +1,237 @@
+import * as _meet_layout_grid_core from '@meet-layout-grid/core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@meet-layout-grid/core';
+export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@meet-layout-grid/core';
+import * as vue from 'vue';
+import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
+
+/**
+ * Vue composable to track element dimensions using ResizeObserver.
+ * @param elementRef A ref to the target element
+ * @returns Reactive dimensions object
+ */
+declare function useGridDimensions(elementRef: Ref<HTMLElement | null | undefined>): ComputedRef<GridDimensions>;
+/**
+ * Vue composable for creating a meet-style responsive grid.
+ * @param options Reactive or static grid options
+ * @returns Reactive grid result
+ */
+declare function useMeetGrid(options: Ref<MeetGridOptions> | ComputedRef<MeetGridOptions> | (() => MeetGridOptions)): ComputedRef<MeetGridResult>;
+/**
+ * Composable to get animation configuration for Motion
+ */
+declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
+    stiffness: 400;
+    damping: 30;
+    type: "spring";
+} | {
+    stiffness: 300;
+    damping: 30;
+    type: "spring";
+} | {
+    stiffness: 200;
+    damping: 25;
+    type: "spring";
+} | {
+    stiffness: 400;
+    damping: 15;
+    type: "spring";
+}>;
+/**
+ * Composable to get position for a specific grid item index
+ */
+declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: Ref<number> | ComputedRef<number> | number): {
+    position: ComputedRef<_meet_layout_grid_core.Position>;
+    dimensions: ComputedRef<GridDimensions>;
+    isMain: ComputedRef<boolean>;
+    isHidden: ComputedRef<boolean>;
+};
+
+interface GridContextValue {
+    grid: ComputedRef<MeetGridResult>;
+    springPreset: SpringPreset;
+}
+declare const GridContextKey: InjectionKey<GridContextValue>;
+declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Aspect ratio in format "width:height" */
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Gap between items in pixels */
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Number of items */
+    count: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Layout mode */
+    layoutMode: {
+        type: PropType<LayoutMode>;
+        default: string;
+    };
+    /** Index of pinned item */
+    pinnedIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Index of active speaker */
+    speakerIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Sidebar position */
+    sidebarPosition: {
+        type: PropType<"left" | "right" | "bottom">;
+        default: string;
+    };
+    /** Sidebar ratio (0-1) */
+    sidebarRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Spring animation preset */
+    springPreset: {
+        type: PropType<SpringPreset>;
+        default: string;
+    };
+    /** HTML tag to render */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Aspect ratio in format "width:height" */
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Gap between items in pixels */
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Number of items */
+    count: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Layout mode */
+    layoutMode: {
+        type: PropType<LayoutMode>;
+        default: string;
+    };
+    /** Index of pinned item */
+    pinnedIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Index of active speaker */
+    speakerIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Sidebar position */
+    sidebarPosition: {
+        type: PropType<"left" | "right" | "bottom">;
+        default: string;
+    };
+    /** Sidebar ratio (0-1) */
+    sidebarRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Spring animation preset */
+    springPreset: {
+        type: PropType<SpringPreset>;
+        default: string;
+    };
+    /** HTML tag to render */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    aspectRatio: string;
+    gap: number;
+    layoutMode: LayoutMode;
+    pinnedIndex: number;
+    speakerIndex: number;
+    sidebarPosition: "left" | "right" | "bottom";
+    sidebarRatio: number;
+    springPreset: "snappy" | "smooth" | "gentle" | "bouncy";
+    tag: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Index of this item in the grid */
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Whether to disable animations */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** HTML tag to render */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Index of this item in the grid */
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Whether to disable animations */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** HTML tag to render */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    tag: string;
+    disableAnimation: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Whether to show the overlay */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Background color */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Whether to show the overlay */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Background color */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    backgroundColor: string;
+    visible: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { GridContainer, GridContextKey, GridItem, GridOverlay, useGridAnimation, useGridDimensions, useGridItemPosition, useMeetGrid };
+export type { GridContextValue };