@alaarab/ogrid-vue 2.1.7 → 2.1.8

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { injectGlobalStyles, Z_INDEX, getStatusBarParts, measureRange, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeRowSelectionState, 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, 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';
@@ -921,18 +921,6 @@ function useCellSelection(params) {
   };
   const markedCells = /* @__PURE__ */ new Set();
   let cellIndex = null;
-  const buildCellIndex = () => {
-    const wrapper = wrapperRef.value;
-    if (!wrapper) return;
-    cellIndex = /* @__PURE__ */ new Map();
-    const cells = wrapper.querySelectorAll("[data-row-index][data-col-index]");
-    for (let i = 0; i < cells.length; i++) {
-      const el = cells[i];
-      const r = el.getAttribute("data-row-index") ?? "";
-      const c = el.getAttribute("data-col-index") ?? "";
-      cellIndex.set(`${r},${c}`, el);
-    }
-  };
   const styleCellInRange = (el, r, c, minR, maxR, minC, maxC, anchor) => {
     if (!el.hasAttribute(DRAG_ATTR)) el.setAttribute(DRAG_ATTR, "");
     const isAnchor = anchor && r === anchor.row && c === anchor.col;
@@ -972,13 +960,13 @@ function useCellSelection(params) {
         markedCells.delete(el);
       }
     }
-    if (!cellIndex) buildCellIndex();
+    if (!cellIndex) cellIndex = buildCellIndex(wrapperRef.value);
     for (let r = minR; r <= maxR; r++) {
       for (let c = minC; c <= maxC; c++) {
         const key = `${r},${c + colOff}`;
         let el = cellIndex?.get(key);
         if (el && !el.isConnected) {
-          buildCellIndex();
+          cellIndex = buildCellIndex(wrapperRef.value);
           el = cellIndex?.get(key);
         }
         if (el) {
@@ -1074,7 +1062,7 @@ function useCellSelection(params) {
     if (!dragMoved) {
       dragMoved = true;
       isDragging.value = true;
-      buildCellIndex();
+      cellIndex = buildCellIndex(wrapperRef.value);
     }
     lastMousePos = { cx: e.clientX, cy: e.clientY };
     updateAutoScroll();
@@ -1508,20 +1496,7 @@ function useFillHandle(params) {
     fillDragEnd = { endRow: drag.startRow, endCol: drag.startCol };
     liveFillRange = null;
     const markedCells = /* @__PURE__ */ new Set();
-    let fillCellIndex = null;
-    const buildFillCellIndex = () => {
-      const wrapper = wrapperRef.value;
-      if (!wrapper) return;
-      fillCellIndex = /* @__PURE__ */ new Map();
-      const cells = wrapper.querySelectorAll("[data-row-index][data-col-index]");
-      for (let i = 0; i < cells.length; i++) {
-        const el = cells[i];
-        const r = el.getAttribute("data-row-index") ?? "";
-        const c = el.getAttribute("data-col-index") ?? "";
-        fillCellIndex.set(`${r},${c}`, el);
-      }
-    };
-    buildFillCellIndex();
+    let fillCellIndex = buildCellIndex(wrapperRef.value);
     const applyDragAttrs = (range) => {
       const wrapper = wrapperRef.value;
       if (!wrapper) return;
@@ -1543,8 +1518,8 @@ function useFillHandle(params) {
           const key = `${r},${c + colOff}`;
           let el = fillCellIndex?.get(key);
           if (el && !el.isConnected) {
-            buildFillCellIndex();
-            el = fillCellIndex?.get(key);
+            fillCellIndex = buildCellIndex(wrapperRef.value);
+            el = fillCellIndex.get(key);
           }
           if (el) {
             if (!el.hasAttribute(DRAG_ATTR2)) el.setAttribute(DRAG_ATTR2, "");
@@ -1558,7 +1533,6 @@ function useFillHandle(params) {
         el.removeAttribute(DRAG_ATTR2);
       }
       markedCells.clear();
-      fillCellIndex = null;
     };
     let lastFillMousePos = null;
     const resolveRange = (cx, cy) => {
@@ -2238,7 +2212,10 @@ function useDataGridState(params) {
     setPopoverAnchorEl(null);
     setPendingEditorValue(void 0);
     if (rowIndex < items.value.length - 1) {
-      setActiveCell({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
+      const newRow = rowIndex + 1;
+      const localCol = globalColIndex - colOffset.value;
+      setActiveCell({ rowIndex: newRow, columnIndex: globalColIndex });
+      setSelectionRange({ startRow: newRow, startCol: localCol, endRow: newRow, endCol: localCol });
     }
   };
   const cancelPopoverEdit = () => {

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

@@ -17,24 +17,6 @@
   --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --ogrid-bg: #1e1e1e;
-    --ogrid-fg: rgba(255, 255, 255, 0.87);
-    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
-    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
-    --ogrid-border: rgba(255, 255, 255, 0.12);
-    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
-    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
-    --ogrid-selected-row-bg: #1a3a5c;
-    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
-    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
-    --ogrid-accent: #4da6ff;
-    --ogrid-selection-color: #2ea043;
-    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
-  }
-}
-
 [data-theme="dark"] {
   --ogrid-bg: #1e1e1e;
   --ogrid-fg: rgba(255, 255, 255, 0.87);

package/package.json

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