@thangdevalone/meeting-grid-layout-vue 1.4.1

package/dist/index.d.ts

@@ -0,0 +1,471 @@
+import * as _thangdevalone_meeting_grid_layout_core from '@thangdevalone/meeting-grid-layout-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint } from '@thangdevalone/meeting-grid-layout-core';
+export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-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<_thangdevalone_meeting_grid_layout_core.Position>;
+    dimensions: ComputedRef<GridDimensions>;
+    isMain: ComputedRef<boolean>;
+    isHidden: ComputedRef<boolean>;
+};
+
+interface GridContextValue {
+    grid: ComputedRef<MeetGridResult>;
+    springPreset: SpringPreset;
+    dimensions: Ref<GridDimensions>;
+}
+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/focused item (main participant for pin/spotlight modes) */
+    pinnedIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /**
+     * Position of "others" thumbnails when a participant is pinned.
+     * In portrait containers, this is forced to 'bottom'.
+     * @default 'right'
+     */
+    othersPosition: {
+        type: PropType<"left" | "right" | "top" | "bottom">;
+        default: string;
+    };
+    /** Spring animation preset */
+    springPreset: {
+        type: PropType<SpringPreset>;
+        default: string;
+    };
+    /** Maximum items per page for pagination (0 = no pagination) */
+    maxItemsPerPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Current page index (0-based) for pagination */
+    currentPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
+    maxVisible: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Current page for visible items (0-based), used when maxVisible > 0 */
+    currentVisiblePage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Per-item aspect ratio configurations.
+     * Use different ratios for mobile (9:16), desktop (16:9).
+     * @example ['16:9', '9:16', undefined]
+     */
+    itemAspectRatios: {
+        type: PropType<(ItemAspectRatio | undefined)[]>;
+        default: undefined;
+    };
+    /** Custom width for the floating PiP item in 2-person mode */
+    floatWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Custom height for the floating PiP item in 2-person mode */
+    floatHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /**
+     * Responsive breakpoints for the floating PiP in 2-person mode.
+     * When provided, PiP size auto-adjusts based on container width.
+     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     */
+    floatBreakpoints: {
+        type: PropType<PipBreakpoint[]>;
+        default: undefined;
+    };
+    /** 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/focused item (main participant for pin/spotlight modes) */
+    pinnedIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /**
+     * Position of "others" thumbnails when a participant is pinned.
+     * In portrait containers, this is forced to 'bottom'.
+     * @default 'right'
+     */
+    othersPosition: {
+        type: PropType<"left" | "right" | "top" | "bottom">;
+        default: string;
+    };
+    /** Spring animation preset */
+    springPreset: {
+        type: PropType<SpringPreset>;
+        default: string;
+    };
+    /** Maximum items per page for pagination (0 = no pagination) */
+    maxItemsPerPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Current page index (0-based) for pagination */
+    currentPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Maximum visible items (0 = show all). In gallery without pin: limits all items. With pin: limits "others". */
+    maxVisible: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Current page for visible items (0-based), used when maxVisible > 0 */
+    currentVisiblePage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Per-item aspect ratio configurations.
+     * Use different ratios for mobile (9:16), desktop (16:9).
+     * @example ['16:9', '9:16', undefined]
+     */
+    itemAspectRatios: {
+        type: PropType<(ItemAspectRatio | undefined)[]>;
+        default: undefined;
+    };
+    /** Custom width for the floating PiP item in 2-person mode */
+    floatWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Custom height for the floating PiP item in 2-person mode */
+    floatHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /**
+     * Responsive breakpoints for the floating PiP in 2-person mode.
+     * When provided, PiP size auto-adjusts based on container width.
+     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     */
+    floatBreakpoints: {
+        type: PropType<PipBreakpoint[]>;
+        default: undefined;
+    };
+    /** HTML tag to render */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    aspectRatio: string;
+    gap: number;
+    layoutMode: LayoutMode;
+    pinnedIndex: number;
+    othersPosition: "left" | "right" | "top" | "bottom";
+    springPreset: "snappy" | "smooth" | "gentle" | "bouncy";
+    maxItemsPerPage: number;
+    currentPage: number;
+    maxVisible: number;
+    currentVisiblePage: number;
+    itemAspectRatios: (string | undefined)[];
+    floatWidth: number;
+    floatHeight: number;
+    floatBreakpoints: PipBreakpoint[];
+    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;
+    };
+    /** Optional item-specific aspect ratio (overrides itemAspectRatios from container) */
+    itemAspectRatio: {
+        type: PropType<ItemAspectRatio>;
+        default: undefined;
+    };
+    /** 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;
+    };
+    /** Optional item-specific aspect ratio (overrides itemAspectRatios from container) */
+    itemAspectRatio: {
+        type: PropType<ItemAspectRatio>;
+        default: undefined;
+    };
+    /** HTML tag to render */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    tag: string;
+    disableAnimation: boolean;
+    itemAspectRatio: string;
+}, {}, {}, {}, 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>;
+declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Responsive breakpoints for PiP sizing.
+     * When provided, width/height auto-adjust based on container width.
+     * Overrides the fixed `width`/`height` props.
+     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     */
+    breakpoints: {
+        type: PropType<PipBreakpoint[]>;
+        default: undefined;
+    };
+    /** Initial position (x, y from container edges) */
+    initialPosition: {
+        type: PropType<{
+            x: number;
+            y: number;
+        }>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    /** Which corner to anchor */
+    anchor: {
+        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        default: string;
+    };
+    /** Whether the item is visible */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Padding from container edges */
+    edgePadding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Border radius */
+    borderRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Box shadow */
+    boxShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "anchorChange"[], "anchorChange", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Responsive breakpoints for PiP sizing.
+     * When provided, width/height auto-adjust based on container width.
+     * Overrides the fixed `width`/`height` props.
+     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     */
+    breakpoints: {
+        type: PropType<PipBreakpoint[]>;
+        default: undefined;
+    };
+    /** Initial position (x, y from container edges) */
+    initialPosition: {
+        type: PropType<{
+            x: number;
+            y: number;
+        }>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    /** Which corner to anchor */
+    anchor: {
+        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        default: string;
+    };
+    /** Whether the item is visible */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Padding from container edges */
+    edgePadding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Border radius */
+    borderRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Box shadow */
+    boxShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onAnchorChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    borderRadius: number;
+    boxShadow: string;
+    height: number;
+    width: number;
+    anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    visible: boolean;
+    breakpoints: PipBreakpoint[];
+    initialPosition: {
+        x: number;
+        y: number;
+    };
+    edgePadding: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FloatingGridItem, GridContainer, GridContextKey, GridItem, GridOverlay, useGridAnimation, useGridDimensions, useGridItemPosition, useMeetGrid };
+export type { GridContextValue };