@thangdevalone/meet-layout-grid-vue 1.0.0

package/dist/index.d.mts

@@ -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 };

package/dist/index.d.ts

@@ -0,0 +1,237 @@
+import * as _meet_layout_grid_core from '@thangdevalone/meet-layout-grid-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@thangdevalone/meet-layout-grid-core';
+export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/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 };