@alaarab/ogrid-vue 2.0.23 → 2.1.1

package/dist/esm/composables/usePeopleFilterState.js

@@ -11,7 +11,7 @@ export function usePeopleFilterState(params) {
         peopleSearchText.value = v;
     };
     // Sync temp state when popover opens
-    watch(() => params.isFilterOpen(), (open) => {
+    watch(params.isFilterOpen, (open) => {
         if (open) {
             peopleSearchText.value = '';
             peopleSuggestions.value = [];
@@ -21,7 +21,7 @@ export function usePeopleFilterState(params) {
         }
     });
     // People search with debounce
-    watch([peopleSearchText, () => params.peopleSearch, () => params.isFilterOpen()], ([searchText, search, isOpen]) => {
+    watch([peopleSearchText, () => params.peopleSearch, params.isFilterOpen], ([searchText, search, isOpen]) => {
         if (peopleSearchTimeout)
             clearTimeout(peopleSearchTimeout);
         if (!search || !isOpen || filterType !== 'people')

package/dist/esm/composables/useRowSelection.js

@@ -1,4 +1,5 @@
-import { shallowRef, computed } from 'vue';
+import { shallowRef, computed, isReadonly } from 'vue';
+import { applyRangeRowSelection, computeRowSelectionState } from '@alaarab/ogrid-core';
 /**
  * Manages row selection state for single or multiple selection modes with shift-click range support.
  */
@@ -17,7 +18,12 @@ export function useRowSelection(params) {
     });
     const updateSelection = (newSelectedIds) => {
         if (controlledSelectedRows.value !== undefined) {
-            controlledSelectedRows.value = newSelectedIds;
+            // In controlled mode: only fire the callback. The parent is responsible for
+            // updating its selectedRows prop in response. Only write if the ref is writable
+            // (plain ref in tests), not if it's a readonly computed ref from useDataGridState.
+            if (!isReadonly(controlledSelectedRows)) {
+                controlledSelectedRows.value = newSelectedIds;
+            }
         }
         else {
             internalSelectedRows.value = newSelectedIds;
@@ -33,22 +39,13 @@ export function useRowSelection(params) {
             lastClickedRow = rowIndex;
             return;
         }
-        const next = new Set(selectedRowIds.value);
         const currentItems = items.value;
+        let next;
         if (shiftKey && lastClickedRow >= 0 && lastClickedRow !== rowIndex) {
-            const start = Math.min(lastClickedRow, rowIndex);
-            const end = Math.max(lastClickedRow, rowIndex);
-            for (let i = start; i <= end; i++) {
-                if (i < currentItems.length) {
-                    const id = getRowId(currentItems[i]);
-                    if (checked)
-                        next.add(id);
-                    else
-                        next.delete(id);
-                }
-            }
+            next = applyRangeRowSelection(lastClickedRow, rowIndex, checked, currentItems, getRowId, selectedRowIds.value);
         }
         else {
+            next = new Set(selectedRowIds.value);
             if (checked)
                 next.add(rowId);
             else
@@ -65,8 +62,8 @@ export function useRowSelection(params) {
             updateSelection(new Set());
         }
     };
-    const allSelected = computed(() => items.value.length > 0 && items.value.every((item) => selectedRowIds.value.has(getRowId(item))));
-    const someSelected = computed(() => !allSelected.value && items.value.some((item) => selectedRowIds.value.has(getRowId(item))));
+    const allSelected = computed(() => computeRowSelectionState(selectedRowIds.value, items.value, getRowId).allSelected);
+    const someSelected = computed(() => computeRowSelectionState(selectedRowIds.value, items.value, getRowId).someSelected);
     return {
         selectedRowIds,
         updateSelection,

package/dist/esm/composables/useTableLayout.js

@@ -22,8 +22,10 @@ export function useTableLayout(params) {
     onMounted(() => {
         const el = wrapperRef.value;
         if (el) {
-            resizeObserver = new ResizeObserver(measure);
-            resizeObserver.observe(el);
+            if (typeof ResizeObserver !== 'undefined') {
+                resizeObserver = new ResizeObserver(measure);
+                resizeObserver.observe(el);
+            }
             measure();
         }
     });
@@ -52,16 +54,14 @@ export function useTableLayout(params) {
     watch(flatColumns, (cols) => {
         const colIds = new Set(cols.map((c) => c.columnId));
         const prev = columnSizingOverrides.value;
-        const next = { ...prev };
-        let changed = false;
-        for (const id of Object.keys(next)) {
-            if (!colIds.has(id)) {
-                delete next[id];
-                changed = true;
-            }
-        }
-        if (changed)
+        const keys = Object.keys(prev);
+        const kept = keys.filter((id) => colIds.has(id));
+        if (kept.length < keys.length) {
+            const next = {};
+            for (const id of kept)
+                next[id] = prev[id];
             columnSizingOverrides.value = next;
+        }
     });
     // Desired table width calculation
     const desiredTableWidth = computed(() => {

package/dist/esm/composables/useTextFilterState.js

@@ -3,7 +3,7 @@ export function useTextFilterState(params) {
     const { textValue = '', onTextChange } = params;
     const tempTextValue = ref(textValue);
     // Sync temp state when popover opens
-    watch(() => params.isFilterOpen(), (open) => {
+    watch(params.isFilterOpen, (open) => {
         if (open) {
             tempTextValue.value = params.textValue ?? '';
         }

package/dist/esm/composables/useVirtualScroll.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { ref, computed, watch, onUnmounted } from 'vue';
 import { computeVisibleRange, computeTotalHeight, getScrollTopForRow, } from '@alaarab/ogrid-core';
 /**
  * Manages virtual scrolling with RAF-throttled scroll handling and ResizeObserver
@@ -11,6 +11,7 @@ export function useVirtualScroll(params) {
     const containerHeight = ref(0);
     let rafId = 0;
     let resizeObserver;
+    let prevObservedEl = null;
     const visibleRange = computed(() => {
         if (!enabled.value) {
             return { startIndex: 0, endIndex: totalRows.value - 1, offsetTop: 0, offsetBottom: 0 };
@@ -39,26 +40,28 @@ export function useVirtualScroll(params) {
             return;
         containerHeight.value = el.clientHeight;
     };
-    // Watch containerRef to attach/detach scroll listener and ResizeObserver
-    watch(containerRef, (el, prevEl) => {
-        if (prevEl) {
-            prevEl.removeEventListener('scroll', onScroll);
-            resizeObserver?.disconnect();
+    // Watch containerRef to attach/detach scroll listener and ResizeObserver.
+    // Track prevObservedEl to avoid re-observing the same element and to
+    // properly disconnect old observers before creating new ones.
+    watch(containerRef, (el) => {
+        if (el === prevObservedEl)
+            return; // skip if same element
+        // Teardown previous element
+        if (prevObservedEl) {
+            prevObservedEl.removeEventListener('scroll', onScroll);
         }
-        if (el) {
-            el.addEventListener('scroll', onScroll, { passive: true });
-            resizeObserver = new ResizeObserver(measure);
-            resizeObserver.observe(el);
-            measure();
-            scrollTop.value = el.scrollTop;
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = undefined;
         }
-    });
-    onMounted(() => {
-        const el = containerRef.value;
+        prevObservedEl = el;
+        // Setup new element
         if (el) {
             el.addEventListener('scroll', onScroll, { passive: true });
-            resizeObserver = new ResizeObserver(measure);
-            resizeObserver.observe(el);
+            if (typeof ResizeObserver !== 'undefined') {
+                resizeObserver = new ResizeObserver(measure);
+                resizeObserver.observe(el);
+            }
             measure();
             scrollTop.value = el.scrollTop;
         }

package/dist/types/composables/index.d.ts

@@ -27,6 +27,7 @@ export type { UseFilterOptionsResult } from './useFilterOptions';
 export { useDebounce, useDebouncedCallback } from './useDebounce';
 export type { DebouncedFn } from './useDebounce';
 export { useLatestRef } from './useLatestRef';
+export type { MaybeShallowRef } from './useLatestRef';
 export { useTableLayout } from './useTableLayout';
 export type { UseTableLayoutParams, UseTableLayoutResult } from './useTableLayout';
 export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';

package/dist/types/composables/useCellSelection.d.ts

@@ -1,7 +1,7 @@
 import { type Ref, type ShallowRef } from 'vue';
 import type { ISelectionRange, IActiveCell } from '../types';
 export interface UseCellSelectionParams {
-    colOffset: number;
+    colOffset: Ref<number> | number;
     rowCount: Ref<number>;
     visibleColCount: Ref<number>;
     setActiveCell: (cell: IActiveCell | null) => void;

package/dist/types/composables/useClipboard.d.ts

@@ -3,7 +3,7 @@ import type { ISelectionRange, IActiveCell, ICellValueChangedEvent, IColumnDef }
 export interface UseClipboardParams<T> {
     items: Ref<T[]>;
     visibleCols: Ref<IColumnDef<T>[]>;
-    colOffset: number;
+    colOffset: Ref<number> | number;
     selectionRange: Ref<ISelectionRange | null> | ShallowRef<ISelectionRange | null>;
     activeCell: Ref<IActiveCell | null> | ShallowRef<IActiveCell | null>;
     editable: Ref<boolean | undefined>;

package/dist/types/composables/useDateFilterState.d.ts

@@ -1,9 +1,9 @@
-import { ref } from 'vue';
+import { ref, type Ref } from 'vue';
 import type { IDateFilterValue } from '../types';
 export interface UseDateFilterStateParams {
     dateValue?: IDateFilterValue;
     onDateChange?: (value: IDateFilterValue | undefined) => void;
-    isFilterOpen: () => boolean;
+    isFilterOpen: Ref<boolean>;
 }
 export interface UseDateFilterStateResult {
     tempDateFrom: ReturnType<typeof ref<string>>;

package/dist/types/composables/useFillHandle.d.ts

@@ -9,7 +9,7 @@ export interface UseFillHandleParams<T> {
     selectionRange: Ref<ISelectionRange | null> | ShallowRef<ISelectionRange | null>;
     setSelectionRange: (range: ISelectionRange | null) => void;
     setActiveCell: (cell: IActiveCell | null) => void;
-    colOffset: number;
+    colOffset: Ref<number> | number;
     wrapperRef: Ref<HTMLElement | null> | ShallowRef<HTMLElement | null>;
     beginBatch?: () => void;
     endBatch?: () => void;

package/dist/types/composables/useKeyboardNavigation.d.ts

@@ -1,14 +1,13 @@
-import { type Ref, type ShallowRef } from 'vue';
+import { type Ref } from 'vue';
 import type { RowId, IActiveCell, ISelectionRange, IColumnDef, ICellValueChangedEvent, RowSelectionMode } from '../types';
 import type { EditingCell } from './useCellEditing';
 import type { ContextMenuPosition } from './useContextMenu';
-/** Accept either Ref or ShallowRef for state fields */
-type MaybeShallowRef<T> = Ref<T> | ShallowRef<T>;
+import { type MaybeShallowRef } from './useLatestRef';
 export interface UseKeyboardNavigationParams<T> {
     data: {
         items: Ref<T[]>;
         visibleCols: Ref<IColumnDef<T>[]>;
-        colOffset: number;
+        colOffset: Ref<number> | number;
         hasCheckboxCol: Ref<boolean>;
         visibleColumnCount: Ref<number>;
         getRowId: (item: T) => RowId;
@@ -36,7 +35,7 @@ export interface UseKeyboardNavigationParams<T> {
         editable: Ref<boolean | undefined>;
         onCellValueChanged: Ref<((event: ICellValueChangedEvent<T>) => void) | undefined>;
         rowSelection: Ref<RowSelectionMode>;
-        wrapperRef: Ref<HTMLElement | null> | ShallowRef<HTMLElement | null>;
+        wrapperRef: MaybeShallowRef<HTMLElement | null>;
         scrollToRow?: (index: number, align?: 'start' | 'center' | 'end') => void;
     };
 }
@@ -47,4 +46,3 @@ export interface UseKeyboardNavigationResult {
  * Handles all keyboard navigation, shortcuts, and cell editing triggers for the grid.
  */
 export declare function useKeyboardNavigation<T>(params: UseKeyboardNavigationParams<T>): UseKeyboardNavigationResult;
-export {};

package/dist/types/composables/useLatestRef.d.ts

@@ -1,4 +1,6 @@
-import { type Ref } from 'vue';
+import { type Ref, type ShallowRef } from 'vue';
+/** Accept either Ref or ShallowRef for state fields */
+export type MaybeShallowRef<T> = Ref<T> | ShallowRef<T>;
 /**
  * Returns a ref that always holds the latest value.
  * Useful for capturing volatile state in stable callbacks

package/dist/types/composables/useMultiSelectFilterState.d.ts

@@ -3,7 +3,7 @@ export interface UseMultiSelectFilterStateParams {
     selectedValues?: string[];
     onFilterChange?: (values: string[]) => void;
     options?: string[];
-    isFilterOpen: () => boolean;
+    isFilterOpen: Ref<boolean>;
 }
 export interface UseMultiSelectFilterStateResult {
     tempSelected: Ref<Set<string>>;

package/dist/types/composables/usePeopleFilterState.d.ts

@@ -5,7 +5,7 @@ export interface UsePeopleFilterStateParams {
     selectedUser?: UserLike;
     onUserChange?: (user: UserLike | undefined) => void;
     peopleSearch?: (query: string) => Promise<UserLike[]>;
-    isFilterOpen: () => boolean;
+    isFilterOpen: Ref<boolean>;
     filterType: ColumnFilterType;
 }
 export interface UsePeopleFilterStateResult {

package/dist/types/composables/useTextFilterState.d.ts

@@ -1,8 +1,8 @@
-import { ref } from 'vue';
+import { ref, type Ref } from 'vue';
 export interface UseTextFilterStateParams {
     textValue?: string;
     onTextChange?: (value: string) => void;
-    isFilterOpen: () => boolean;
+    isFilterOpen: Ref<boolean>;
 }
 export interface UseTextFilterStateResult {
     tempTextValue: ReturnType<typeof ref<string>>;

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@ export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types
 export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export { StatusBar, type StatusBarProps } from './components/StatusBar';
 export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useColumnPinning, useColumnHeaderMenuState, useDataGridTableSetup, } from './composables';
-export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseActiveCellResult, EditingCell, UseCellEditingParams, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, DebouncedFn, UseColumnPinningParams, UseColumnPinningResult, UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, UseDataGridTableSetupParams, UseDataGridTableSetupResult, } from './composables';
+export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseActiveCellResult, EditingCell, UseCellEditingParams, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, DebouncedFn, UseColumnPinningParams, UseColumnPinningResult, UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, UseDataGridTableSetupParams, UseDataGridTableSetupResult, MaybeShallowRef, } from './composables';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, CellInteractionProps, } from './utils';
 export { createDataGridTable, type IDataGridTableUIBindings } from './components/createDataGridTable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.0.23",
+  "version": "2.1.1",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.23"
+    "@alaarab/ogrid-core": "2.1.1"
   },
   "peerDependencies": {
     "vue": "^3.3.0"
@@ -53,5 +53,12 @@
   ],
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alaarab/ogrid.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://ogrid.dev",
+  "bugs": "https://github.com/alaarab/ogrid/issues"
 }