@alaarab/ogrid-vue 2.4.2 → 2.5.1

package/dist/esm/styles/ogrid-layout.css

@@ -270,6 +270,7 @@
   z-index: var(--ogrid-z-active-cell, 2);
   position: relative;
   overflow: visible;
+  contain: none;
 }
 
 /* Active cell inside a selection range: suppress outline (Excel behavior).
@@ -310,9 +311,21 @@
   border-radius: 1px;
   cursor: crosshair;
   pointer-events: auto;
+  touch-action: none; /* Prevent browser scroll/zoom during fill handle drag */
   z-index: var(--ogrid-z-fill-handle, 3);
 }
 
+/* Increase touch target on touch-capable devices */
+@media (pointer: coarse) {
+  .ogrid-fill-handle {
+    width: 14px;
+    height: 14px;
+    right: -7px;
+    bottom: -7px;
+    border-radius: 2px;
+  }
+}
+
 /* === Resize handle === */
 
 .ogrid-resize-handle {
@@ -323,6 +336,15 @@
   width: 8px;
   cursor: col-resize;
   user-select: none;
+  touch-action: none; /* Prevent browser scroll/zoom during column resize drag */
+}
+
+/* Increase touch target on touch-capable devices */
+@media (pointer: coarse) {
+  .ogrid-resize-handle {
+    width: 16px;
+    right: -8px;
+  }
 }
 
 /* === Drop indicator === */
@@ -391,3 +413,30 @@
   min-height: 100%;
   min-width: 40px;
 }
+
+/* === Responsive Layout === */
+
+/* Compact pagination on small screens */
+@media (max-width: 576px) {
+  .ogrid-pagination {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 6px 8px;
+  }
+
+  .ogrid-pagination-nav {
+    order: -1;
+    justify-content: center;
+  }
+
+  .ogrid-pagination-info {
+    font-size: 11px;
+    text-align: center;
+  }
+
+  .ogrid-pagination-size {
+    font-size: 11px;
+    justify-content: center;
+  }
+}

package/dist/types/components/FormulaRefOverlay.d.ts

@@ -5,7 +5,7 @@
  * Port of React's FormulaRefOverlay component.
  */
 import { type PropType } from 'vue';
-import { type FormulaReference } from '@alaarab/ogrid-core';
+import { type FormulaReference } from '@alaarab/ogrid-core/formula';
 export declare const FormulaRefOverlay: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     containerEl: {
         type: PropType<HTMLElement | null>;

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

@@ -10,7 +10,7 @@ export interface UseCellSelectionParams {
 export interface UseCellSelectionResult {
     selectionRange: ShallowRef<ISelectionRange | null>;
     setSelectionRange: (range: ISelectionRange | null) => void;
-    handleCellMouseDown: (e: MouseEvent, rowIndex: number, globalColIndex: number) => void;
+    handleCellMouseDown: (e: PointerEvent, rowIndex: number, globalColIndex: number) => void;
     handleSelectAllCells: () => void;
     isDragging: Ref<boolean>;
 }

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

@@ -11,10 +11,10 @@ export interface UseColumnReorderParams {
 export interface UseColumnReorderResult {
     isDragging: Ref<boolean>;
     dropIndicatorX: Ref<number | null>;
-    handleHeaderMouseDown: (columnId: string, event: MouseEvent) => void;
+    handleHeaderMouseDown: (columnId: string, event: PointerEvent) => void;
 }
 /**
  * Manages column reordering via drag-and-drop on header cells.
- * Uses RAF-throttled mouse tracking and core's calculateDropTarget/reorderColumnArray.
+ * Uses RAF-throttled pointer tracking and core's calculateDropTarget/reorderColumnArray.
  */
 export declare function useColumnReorder(params: UseColumnReorderParams): UseColumnReorderResult;

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

@@ -12,8 +12,8 @@ export interface UseColumnResizeParams {
     onColumnResized?: (columnId: string, width: number) => void;
 }
 export interface UseColumnResizeResult<T> {
-    handleResizeStart: (e: MouseEvent, col: IColumnDef<T>) => void;
-    handleResizeDoubleClick: (e: MouseEvent, col: IColumnDef<T>) => void;
+    handleResizeStart: (e: PointerEvent, col: IColumnDef<T>) => void;
+    handleResizeDoubleClick: (e: PointerEvent, col: IColumnDef<T>) => void;
     getColumnWidth: (col: IColumnDef<T>) => number;
 }
 /**

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

@@ -70,11 +70,11 @@ export interface DataGridCellInteractionState {
         endCol: number;
     } | null;
     setSelectionRange: (range: DataGridCellInteractionState['selectionRange']) => void;
-    handleCellMouseDown: (e: MouseEvent, rowIndex: number, globalColIndex: number) => void;
+    handleCellMouseDown: (e: PointerEvent, rowIndex: number, globalColIndex: number) => void;
     handleSelectAllCells: () => void;
     hasCellSelection: boolean;
     handleGridKeyDown: (e: KeyboardEvent) => void;
-    handleFillHandleMouseDown: (e: MouseEvent) => void;
+    handleFillHandleMouseDown: (e: PointerEvent) => void;
     handleCopy: () => void;
     handleCut: () => void;
     handlePaste: () => Promise<void>;

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

@@ -24,7 +24,7 @@ export interface UseFillHandleResult {
         startRow: number;
         startCol: number;
     } | null) => void;
-    handleFillHandleMouseDown: (e: MouseEvent) => void;
+    handleFillHandleMouseDown: (e: PointerEvent) => void;
     /** Fill the current selection down from the top row (Ctrl+D). No-op if no selection or editable=false. */
     fillDown: () => void;
 }

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

@@ -4,7 +4,7 @@
  * Manages the formula bar text, editing mode, and reference extraction.
  */
 import { type Ref } from 'vue';
-import { type FormulaReference } from '@alaarab/ogrid-core';
+import { type FormulaReference } from '@alaarab/ogrid-core/formula';
 export interface UseFormulaBarParams {
     /** Active cell column index (0-based). */
     activeCol: Ref<number | null>;

package/dist/types/index.d.ts

@@ -1,4 +1,7 @@
-export * from '@alaarab/ogrid-core';
+export type { ISheetDef, IColumnReorderConfig, CsvColumn, FormulaExportOptions, StatusBarPart, StatusBarPartsInput, PaginationViewModel, GridContextMenuItem, IColumnHeaderMenuItem, GridContextMenuHandlerProps, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, ColumnPinState, IDropTarget, ICalculateDropTargetParams, IVisibleRange, IVisibleColumnRange, SortFilterRequest, SortFilterResponse, OverlayRect, ISortState, ArrowNavigationContext, ArrowNavigationResult, IFillFormulaOptions, FormulaReference, IResponsiveColumnsConfig, ZIndexKey, ICellAddress, ICellRange, CellKey, FormulaErrorType, TokenType, Token, ASTNode, BinaryOp, IFormulaContext, IFormulaFunction, IEvaluator, IRecalcResult, IFormulaEngineConfig, IGridDataAccessor, INamedRange, IAuditEntry, IAuditTrail, } from '@alaarab/ogrid-core';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, isColumnEditable, createGridDataAccessor, flattenColumns, buildHeaderRows, isFilterConfig, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, isRowInRange, getPinStateForColumn, reorderColumnArray, calculateDropTarget, computeVisibleRange, computeTotalHeight, getScrollTopForRow, computeVisibleColumnRange, partitionColumnsForVirtualization, createSortFilterWorker, terminateSortFilterWorker, extractValueMatrix, processClientSideDataAsync, CellDescriptorCache, debounce, measureRange, buildCellIndex, injectGlobalStyles, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, computeArrowNavigation, applyCellDeletion, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, applyRangeRowSelection, computeRowSelectionState, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, UndoRedoStack, validateColumns, validateRowIds, validateVirtualScrollConfig, indexToColumnLetter, columnLetterToIndex, formatCellReference, getResponsiveHiddenColumns, RESPONSIVE_BREAKPOINTS, resolveResponsiveConfig, applyResponsiveHiding, } from '@alaarab/ogrid-core';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_MIN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, DEFAULT_DEBOUNCE_MS, PEOPLE_SEARCH_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-core';
+export { FormulaError, FormulaEngine, FormulaEvaluator, DependencyGraph, tokenize, parse, createBuiltInFunctions, parseCellRef, parseRange, formatAddress, toCellKey, fromCellKey, adjustFormulaReferences, toNumber, formulaToString, toBoolean, flattenArgs, isFormulaError, REF_ERROR, DIV_ZERO_ERROR, VALUE_ERROR, NAME_ERROR, CIRC_ERROR, GENERAL_ERROR, NA_ERROR, extractFormulaReferences, processFormulaBarCommit, deriveFormulaBarText, handleFormulaBarKeyDown, canInsertReference, insertReferenceAtCursor, FORMULA_REF_COLORS, FORMULA_BAR_CSS, FORMULA_BAR_STYLES, } from '@alaarab/ogrid-core/formula';
 export type { IColumnDef, ICellEditorProps, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, } from './types';
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, } from './types';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';

package/dist/types/types/dataGridTypes.d.ts

@@ -1,7 +1,7 @@
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IOGridApi, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, ISheetDef, FormulaReference, } from '@alaarab/ogrid-core';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IOGridApi, IVirtualScrollConfig, IResponsiveColumnsConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, ISheetDef, FormulaReference, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';
-import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, ISheetDef, FormulaReference } from '@alaarab/ogrid-core';
+import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig, IResponsiveColumnsConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, ISheetDef, FormulaReference } from '@alaarab/ogrid-core';
 /** Base props shared by both client-side and server-side OGrid modes. */
 interface IOGridBaseProps<T> {
     columns: (IColumnDef<T> | IColumnGroupDef<T>)[];
@@ -81,6 +81,13 @@ interface IOGridBaseProps<T> {
     onCellError?: (error: Error, info: unknown) => void;
     /** Enable column reordering via drag-and-drop on header cells. Default: false. */
     columnReorder?: boolean;
+    /**
+     * Responsive column hiding. Columns with `responsivePriority` are hidden at narrower widths.
+     * - `true`: enable with default breakpoints
+     * - `IResponsiveColumnsConfig`: custom breakpoints
+     * - `false` / omitted: disabled
+     */
+    responsiveColumns?: boolean | IResponsiveColumnsConfig;
     /** Virtual scrolling configuration. Set `enabled: true` with a fixed `rowHeight` to virtualize large datasets. */
     virtualScroll?: IVirtualScrollConfig;
     /** Offload sort/filter to a Web Worker for large datasets. Falls back to sync when sort column has a custom compare. */
@@ -195,6 +202,8 @@ export interface IOGridDataGridProps<T> {
     onCellError?: (error: Error, info: unknown) => void;
     /** Enable column reordering via drag-and-drop on header cells. Default: false. */
     columnReorder?: boolean;
+    /** Responsive column hiding config (passed from IOGridBaseProps). */
+    responsiveColumns?: boolean | IResponsiveColumnsConfig;
     /** Virtual scrolling configuration. */
     virtualScroll?: IVirtualScrollConfig;
     /** Fixed row height in pixels. Overrides default row height (36px). */

package/dist/types/utils/dataGridViewModel.d.ts

@@ -8,7 +8,7 @@ export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayConte
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from '@alaarab/ogrid-core';
 import type { CellRenderDescriptor } from '@alaarab/ogrid-core';
 export interface CellInteractionHandlers {
-    handleCellMouseDown: (e: MouseEvent, rowIndex: number, colIndex: number) => void;
+    handleCellMouseDown: (e: PointerEvent, rowIndex: number, colIndex: number) => void;
     setActiveCell: (cell: {
         rowIndex: number;
         columnIndex: number;
@@ -30,7 +30,7 @@ export interface CellInteractionProps {
     'data-in-range'?: 'true';
     tabindex: number;
     role?: 'button';
-    onMousedown: (e: MouseEvent) => void;
+    onPointerdown: (e: PointerEvent) => void;
     onClick: () => void;
     onContextmenu: (e: MouseEvent) => void;
     onDblclick?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.4.2",
+  "version": "2.5.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.4.2"
+    "@alaarab/ogrid-core": "2.5.1"
   },
   "peerDependencies": {
     "vue": "^3.3.0"