@alaarab/ogrid-vue 2.1.9 → 2.1.11

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { injectGlobalStyles, Z_INDEX, getStatusBarParts, measureRange, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeRowSelectionState, buildCellIndex, UndoRedoStack, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, buildHeaderRows, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, measureColumnContentWidth, getPinStateForColumn, parseValue, applyFillValues, applyCellDeletion, computeTabNavigation, computeArrowNavigation, computeNextSortState, mergeFilter, applyRangeRowSelection, getScrollTopForRow, getCellValue, calculateDropTarget, reorderColumnArray, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
+import { injectGlobalStyles, Z_INDEX, getStatusBarParts, measureRange, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeRowSelectionState, buildCellIndex, UndoRedoStack, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, computeAggregations, getDataGridStatusBarConfig, validateVirtualScrollConfig, computeVisibleRange, computeTotalHeight, buildHeaderRows, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, measureColumnContentWidth, getPinStateForColumn, parseValue, applyFillValues, applyCellDeletion, computeTabNavigation, computeArrowNavigation, computeNextSortState, mergeFilter, applyRangeRowSelection, getScrollTopForRow, getCellValue, calculateDropTarget, reorderColumnArray, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
 export * from '@alaarab/ogrid-core';
 export { buildInlineEditorProps, buildPopoverEditorProps, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
 import { defineComponent, ref, computed, onMounted, watch, toValue, onUnmounted, h, shallowRef, triggerRef, nextTick, Teleport, isRef, isReadonly, unref, customRef } from 'vue';
@@ -1254,6 +1254,12 @@ function useKeyboardNavigation(params) {
     const rowSelection = features.rowSelection.value;
     const wrapperRef = features.wrapperRef;
     const scrollToRow = features.scrollToRow;
+    const { fillDown } = features;
+    const onKeyDown = features.onKeyDown?.value;
+    if (onKeyDown) {
+      onKeyDown(e);
+      if (e.defaultPrevented) return;
+    }
     const maxRowIndex = items.length - 1;
     const maxColIndex = visibleColumnCount - 1 + colOffset;
     if (items.length === 0) return;
@@ -1294,6 +1300,15 @@ function useKeyboardNavigation(params) {
           void handlePaste();
         }
         break;
+      case "d":
+        if (e.ctrlKey || e.metaKey) {
+          if (editingCell != null) break;
+          if (editable !== false && fillDown) {
+            e.preventDefault();
+            fillDown();
+          }
+        }
+        break;
       case "ArrowDown":
       case "ArrowUp":
       case "ArrowRight":
@@ -1622,7 +1637,21 @@ function useFillHandle(params) {
     if (!range) return;
     fillDrag.value = { startRow: range.startRow, startCol: range.startCol };
   };
-  return { fillDrag, setFillDrag, handleFillHandleMouseDown };
+  const fillDown = () => {
+    const range = selectionRange.value;
+    if (!range || editable.value === false || !onCellValueChanged.value) return;
+    const norm = normalizeSelectionRange(range);
+    const currentItems = items.value;
+    const currentCols = visibleCols.value;
+    const callback = onCellValueChanged.value;
+    const fillEvents = applyFillValues(norm, norm.startRow, norm.startCol, currentItems, currentCols);
+    if (fillEvents.length > 0) {
+      beginBatch?.();
+      for (const evt of fillEvents) callback(evt);
+      endBatch?.();
+    }
+  };
+  return { fillDrag, setFillDrag, handleFillHandleMouseDown, fillDown };
 }
 function useUndoRedo(params) {
   const { onCellValueChanged, maxUndoDepth = 100 } = params;
@@ -2034,6 +2063,19 @@ function useDataGridState(params) {
     clearClipboardRanges();
     handleCellMouseDownBase(e, rowIndex, globalColIndex);
   };
+  const { handleFillHandleMouseDown, fillDown } = useFillHandle({
+    items,
+    visibleCols,
+    editable: editableProp,
+    onCellValueChanged,
+    selectionRange,
+    setSelectionRange,
+    setActiveCell,
+    colOffset,
+    wrapperRef,
+    beginBatch: undoRedo.beginBatch,
+    endBatch: undoRedo.endBatch
+  });
   const { handleGridKeyDown } = useKeyboardNavigation({
     data: { items, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, getRowId },
     state: { activeCell, selectionRange, editingCell, selectedRowIds: rowSelectionResult.selectedRowIds },
@@ -2054,22 +2096,11 @@ function useDataGridState(params) {
       editable: editableProp,
       onCellValueChanged,
       rowSelection: rowSelectionProp,
-      wrapperRef
+      wrapperRef,
+      fillDown,
+      onKeyDown: computed(() => props.value.onKeyDown)
     }
   });
-  const { handleFillHandleMouseDown } = useFillHandle({
-    items,
-    visibleCols,
-    editable: editableProp,
-    onCellValueChanged,
-    selectionRange,
-    setSelectionRange,
-    setActiveCell,
-    colOffset,
-    wrapperRef,
-    beginBatch: undoRedo.beginBatch,
-    endBatch: undoRedo.endBatch
-  });
   const {
     containerWidth,
     minTableWidth,
@@ -3050,17 +3081,22 @@ function useColumnReorder(params) {
   };
   return { isDragging, dropIndicatorX, handleHeaderMouseDown };
 }
+var DEFAULT_PASSTHROUGH_THRESHOLD = 100;
 function useVirtualScroll(params) {
-  const { totalRows, rowHeight, enabled, overscan = 5 } = params;
+  const { totalRows, rowHeight, enabled, overscan = 5, threshold = DEFAULT_PASSTHROUGH_THRESHOLD } = params;
+  onMounted(() => {
+    validateVirtualScrollConfig({ enabled: enabled.value, rowHeight });
+  });
   const containerRef = ref(null);
   const scrollTop = ref(0);
   const containerHeight = ref(0);
   let rafId = 0;
   let resizeObserver;
   let prevObservedEl = null;
+  const isActive = computed(() => enabled.value && totalRows.value >= threshold);
   const visibleRange = computed(() => {
-    if (!enabled.value) {
-      return { startIndex: 0, endIndex: totalRows.value - 1, offsetTop: 0, offsetBottom: 0 };
+    if (!isActive.value) {
+      return { startIndex: 0, endIndex: Math.max(0, totalRows.value - 1), offsetTop: 0, offsetBottom: 0 };
     }
     return computeVisibleRange(
       scrollTop.value,
@@ -3278,10 +3314,7 @@ function createDataGridTable(ui) {
           visibleCols,
           hasCheckboxCol,
           hasRowNumbersCol,
-          colOffset: _colOffset,
-          containerWidth,
-          minTableWidth,
-          desiredTableWidth
+          colOffset: _colOffset
         } = layout;
         const currentPage = p.currentPage ?? 1;
         const pageSize = p.pageSize ?? 25;
@@ -3309,7 +3342,7 @@ function createDataGridTable(ui) {
           isDragging: _isDragging
         } = interaction;
         const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
-        const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError: _onCellError } = viewModels;
+        const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
         const items = p.items;
         const getRowId = p.getRowId;
         const layoutMode = p.layoutMode ?? "fill";
@@ -3321,7 +3354,6 @@ function createDataGridTable(ui) {
         const ariaLabel = p["aria-label"];
         const ariaLabelledBy = p["aria-labelledby"];
         const fitToContent = layoutMode === "content";
-        const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
         const headerRows = headerRowsComputed.value;
         const editCallbacks = { commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit };
         const interactionHandlers = { handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu };
@@ -3333,6 +3365,16 @@ function createDataGridTable(ui) {
           rowSel.updateSelection(selectedRowIds.has(rowId) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([rowId]));
         };
         const renderCellContent = (item, col, rowIndex, colIdx) => {
+          try {
+            return renderCellContentInner(item, col, rowIndex, colIdx);
+          } catch (err) {
+            if (onCellError) {
+              onCellError(err instanceof Error ? err : new Error(String(err)), void 0);
+            }
+            return "";
+          }
+        };
+        const renderCellContentInner = (item, col, rowIndex, colIdx) => {
           const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInput);
           if (descriptor.mode === "editing-inline") {
             const editorProps = buildInlineEditorProps(item, col, descriptor, editCallbacks);
@@ -3408,7 +3450,7 @@ function createDataGridTable(ui) {
           minHeight: isLoading && items.length === 0 ? "200px" : "0",
           width: fitToContent ? "fit-content" : "100%",
           maxWidth: "100%",
-          overflowX: suppressHorizontalScroll ? "hidden" : allowOverflowX ? "auto" : "hidden",
+          overflowX: suppressHorizontalScroll ? "hidden" : "auto",
           overflowY: "auto",
           backgroundColor: "#fff",
           willChange: "scroll-position"
@@ -3430,11 +3472,11 @@ function createDataGridTable(ui) {
             onMousedown: onWrapperMousedown,
             onKeydown: handleGridKeyDown,
             onContextmenu,
-            "data-overflow-x": allowOverflowX ? "true" : "false",
+            "data-suppress-scroll": suppressHorizontalScroll ? "true" : void 0,
             style: wrapperStyle
           }, [
             h("div", { class: "ogrid-scroll-wrapper" }, [
-              h("div", { style: { minWidth: allowOverflowX ? `${minTableWidth}px` : void 0 } }, [
+              h("div", { style: { width: "max-content", minWidth: "100%", overflow: "clip" } }, [
                 h("div", {
                   ref: (el) => {
                     tableContainerRef.value = el;
@@ -3454,7 +3496,8 @@ function createDataGridTable(ui) {
                       tableRef.value = el;
                     },
                     class: "ogrid-table",
-                    style: { minWidth: `${minTableWidth}px` }
+                    role: "grid",
+                    style: { width: "100%", minWidth: "max-content" }
                   }, [
                     // Header
                     h(
@@ -3531,6 +3574,8 @@ function createDataGridTable(ui) {
                             if (!cell.columnDef) return null;
                             const col = cell.columnDef;
                             const { classes: headerClasses, style: headerStyle } = getHeaderClassAndStyle(col);
+                            const isSorted = p.sortBy === col.columnId;
+                            const ariaSort = isSorted ? p.sortDirection === "asc" ? "ascending" : "descending" : void 0;
                             return h("th", {
                               key: col.columnId,
                               scope: "col",
@@ -3538,6 +3583,7 @@ function createDataGridTable(ui) {
                               rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : void 0,
                               class: headerClasses,
                               style: headerStyle,
+                              "aria-sort": ariaSort,
                               onMousedown: (e) => handleReorderMouseDown(col.columnId, e)
                             }, [
                               h("div", { class: "ogrid-header-content" }, [
@@ -3586,6 +3632,7 @@ function createDataGridTable(ui) {
                           rows.push(h("tr", {
                             key: rowIdStr,
                             "data-row-id": rowIdStr,
+                            "aria-selected": isSelected || void 0,
                             onClick: handleSingleRowClick,
                             style: { cursor: rowSelection === "single" ? "pointer" : void 0 }
                           }, [

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

@@ -1,29 +1,33 @@
 /* OGrid Shared Layout Styles — consumed by vue-vuetify and vue-primevue */
 
-/* Remove focus outline from scrollable wrapper (keyboard nav is handled via cell outlines) */
+/* Remove focus outline from scrollable wrapper (keyboard nav is handled via cell outlines).
+   [role="region"][tabindex] has attribute-selector specificity (0,2,0) which beats any
+   framework's single-class or element rule — no !important needed. */
 [role="region"][tabindex="0"] {
-  outline: none !important;
+  outline: none;
 }
 
-/* Cell selection highlighting */
-.ogrid-cell-in-range {
-  background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+/* Cell selection highlighting.
+   Qualify with .ogrid-outer-container (specificity 0,2,0) to beat row-level hover backgrounds. */
+.ogrid-outer-container .ogrid-cell-in-range {
+  background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12));
 }
 
 /* Cut range highlighting */
-.ogrid-cell-cut {
-  background: var(--ogrid-hover-bg) !important;
+.ogrid-outer-container .ogrid-cell-cut {
+  background: var(--ogrid-hover-bg);
   opacity: 0.7;
 }
 
-/* Drag-range highlight applied via DOM attributes during drag (bypasses Vue for performance) */
-[data-drag-range] {
-  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+/* Drag-range highlight applied via DOM attributes during drag (bypasses Vue for performance).
+   Qualifier .ogrid-outer-container raises specificity to 0,2,0, enough to beat row-hover rules. */
+.ogrid-outer-container [data-drag-range] {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
 
 /* Anchor cell during drag: white/transparent background (like Excel) */
-[data-drag-anchor] {
-  background: var(--ogrid-bg) !important;
+.ogrid-outer-container [data-drag-anchor] {
+  background: var(--ogrid-bg);
 }
 
 /* === Layout === */
@@ -67,7 +71,7 @@
 /* === Header === */
 
 .ogrid-thead {
-  z-index: 8;
+  z-index: var(--ogrid-z-thead, 8);
   background-color: var(--ogrid-header-bg);
 }
 
@@ -78,7 +82,7 @@
 .ogrid-header-cell {
   font-weight: 600;
   background-color: var(--ogrid-header-bg);
-  z-index: 8;
+  z-index: var(--ogrid-z-thead, 8);
 }
 
 .ogrid-sticky-header .ogrid-header-cell {
@@ -87,14 +91,14 @@
 }
 
 .ogrid-header-cell--pinned-left {
-  z-index: 10;
+  z-index: var(--ogrid-z-pinned-header, 10);
   will-change: transform;
   border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
 }
 
 .ogrid-header-cell--pinned-right {
-  z-index: 10;
+  z-index: var(--ogrid-z-pinned-header, 10);
   will-change: transform;
   border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
@@ -189,7 +193,7 @@
 
 .ogrid-data-cell--pinned-left {
   position: sticky;
-  z-index: 6;
+  z-index: var(--ogrid-z-pinned, 6);
   background-color: var(--ogrid-bg);
   will-change: transform;
   border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
@@ -198,7 +202,7 @@
 
 .ogrid-data-cell--pinned-right {
   position: sticky;
-  z-index: 6;
+  z-index: var(--ogrid-z-pinned, 6);
   background-color: var(--ogrid-bg);
   will-change: transform;
   border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
@@ -211,7 +215,7 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  padding: 6px 10px;
+  padding: var(--ogrid-cell-padding, 6px 10px);
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -237,7 +241,7 @@
 .ogrid-cell-content--active {
   outline: 2px solid var(--ogrid-selection, #217346);
   outline-offset: -1px;
-  z-index: 2;
+  z-index: var(--ogrid-z-active-cell, 2);
   position: relative;
   overflow: visible;
 }
@@ -252,7 +256,7 @@
   box-sizing: border-box;
   outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;
-  z-index: 2;
+  z-index: var(--ogrid-z-active-cell, 2);
   position: relative;
   background: var(--ogrid-bg, #fff);
   overflow: visible;
@@ -272,7 +276,7 @@
   border-radius: 1px;
   cursor: crosshair;
   pointer-events: auto;
-  z-index: 3;
+  z-index: var(--ogrid-z-fill-handle, 3);
 }
 
 /* === Resize handle === */
@@ -296,7 +300,7 @@
   width: 3px;
   background: var(--ogrid-primary, #217346);
   pointer-events: none;
-  z-index: 100;
+  z-index: var(--ogrid-z-drop-indicator, 100);
 }
 
 /* === Empty state === */
@@ -324,7 +328,7 @@
 .ogrid-loading-overlay {
   position: absolute;
   inset: 0;
-  z-index: 2;
+  z-index: var(--ogrid-z-loading, 2);
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -6,6 +6,13 @@
 
 /* ─── Light Theme (default) ─── */
 :where(:root) {
+  /* Cell padding — override for row density:
+     --ogrid-cell-padding          : shorthand (default 6px 10px)
+     --ogrid-cell-padding-vertical : vertical only (default 6px)
+     --ogrid-cell-padding-horizontal: horizontal only (default 10px) */
+  --ogrid-cell-padding: 6px 10px;
+  --ogrid-cell-padding-vertical: 6px;
+  --ogrid-cell-padding-horizontal: 10px;
   --ogrid-bg: #ffffff;
   --ogrid-fg: rgba(0, 0, 0, 0.87);
   --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);

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

@@ -25,6 +25,8 @@ export interface UseFillHandleResult {
         startCol: number;
     } | null) => void;
     handleFillHandleMouseDown: (e: MouseEvent) => void;
+    /** Fill the current selection down from the top row (Ctrl+D). No-op if no selection or editable=false. */
+    fillDown: () => void;
 }
 /**
  * Manages Excel-style fill handle drag-to-fill for cell ranges.

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

@@ -37,6 +37,8 @@ export interface UseKeyboardNavigationParams<T> {
         rowSelection: Ref<RowSelectionMode>;
         wrapperRef: MaybeShallowRef<HTMLElement | null>;
         scrollToRow?: (index: number, align?: 'start' | 'center' | 'end') => void;
+        fillDown?: () => void;
+        onKeyDown?: Ref<((event: KeyboardEvent) => void) | undefined>;
     };
 }
 export interface UseKeyboardNavigationResult {

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

@@ -5,6 +5,11 @@ export interface UseVirtualScrollParams {
     rowHeight: number;
     enabled: Ref<boolean>;
     overscan?: number;
+    /**
+     * Minimum row count before virtual scrolling activates. Default: 100.
+     * When totalRows < threshold, all rows render without virtualization.
+     */
+    threshold?: number;
 }
 export interface UseVirtualScrollResult {
     containerRef: Ref<HTMLElement | null>;

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

@@ -171,4 +171,6 @@ export interface IOGridDataGridProps<T> {
     density?: 'compact' | 'normal' | 'comfortable';
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    /** Custom keydown handler. Called before grid's built-in handling. Call event.preventDefault() to suppress grid default. */
+    onKeyDown?: (event: KeyboardEvent) => void;
 }

package/package.json

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