@thangdevalone/meet-layout-grid-vue 1.0.0 → 1.0.3

package/dist/index.d.ts

@@ -1,237 +1,281 @@
-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 };
+import * as _thangdevalone_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<_thangdevalone_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" | "top" | "bottom">;
+        default: string;
+    };
+    /** Sidebar ratio (0-1) */
+    sidebarRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 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 "others" in speaker/sidebar modes (0 = show all) */
+    maxVisibleOthers: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Current page for "others" in speaker/sidebar modes (0-based) */
+    currentOthersPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 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" | "top" | "bottom">;
+        default: string;
+    };
+    /** Sidebar ratio (0-1) */
+    sidebarRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 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 "others" in speaker/sidebar modes (0 = show all) */
+    maxVisibleOthers: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Current page for "others" in speaker/sidebar modes (0-based) */
+    currentOthersPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** HTML tag to render */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    aspectRatio: string;
+    gap: number;
+    layoutMode: LayoutMode;
+    pinnedIndex: number;
+    speakerIndex: number;
+    sidebarPosition: "left" | "right" | "top" | "bottom";
+    sidebarRatio: number;
+    springPreset: "snappy" | "smooth" | "gentle" | "bouncy";
+    maxItemsPerPage: number;
+    currentPage: number;
+    maxVisibleOthers: number;
+    currentOthersPage: number;
+    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.mjs

@@ -1,8 +1,8 @@
 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';
+import { createMeetGrid, getSpringConfig } from '@thangdevalone/meet-layout-grid-core';
+export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
+import { motion } from 'motion-v';
 
 function useGridDimensions(elementRef) {
   const width = ref(0);
@@ -100,6 +100,26 @@ const GridContainer = defineComponent({
       type: String,
       default: "smooth"
     },
+    /** Maximum items per page for pagination (0 = no pagination) */
+    maxItemsPerPage: {
+      type: Number,
+      default: 0
+    },
+    /** Current page index (0-based) for pagination */
+    currentPage: {
+      type: Number,
+      default: 0
+    },
+    /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
+    maxVisibleOthers: {
+      type: Number,
+      default: 0
+    },
+    /** Current page for "others" in speaker/sidebar modes (0-based) */
+    currentOthersPage: {
+      type: Number,
+      default: 0
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -118,7 +138,11 @@ const GridContainer = defineComponent({
       pinnedIndex: props.pinnedIndex,
       speakerIndex: props.speakerIndex,
       sidebarPosition: props.sidebarPosition,
-      sidebarRatio: props.sidebarRatio
+      sidebarRatio: props.sidebarRatio,
+      maxItemsPerPage: props.maxItemsPerPage,
+      currentPage: props.currentPage,
+      maxVisibleOthers: props.maxVisibleOthers,
+      currentOthersPage: props.currentOthersPage
     }));
     const grid = useMeetGrid(gridOptions);
     provide(GridContextKey, {
@@ -169,8 +193,13 @@ const GridItem = defineComponent({
     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 isVisible = computed(() => grid.value.isItemVisible(props.index));
     const isHidden = computed(() => {
-      return grid.value.layoutMode === "spotlight" && !isMain.value;
+      if (grid.value.layoutMode === "spotlight" && !isMain.value)
+        return true;
+      if (!isVisible.value)
+        return true;
+      return false;
     });
     const springConfig = getSpringConfig(springPreset);
     return () => {
@@ -202,9 +231,9 @@ const GridItem = defineComponent({
         );
       }
       return h(
-        Motion,
+        motion.div,
         {
-          tag: props.tag,
+          as: props.tag,
           animate: animateProps,
           transition: {
             type: springConfig.type,