@alaarab/ogrid-js 2.1.6 → 2.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/index.js CHANGED
@@ -69,6 +69,9 @@ function getCellValue(item, col) {
69
69
  if (col.valueGetter) return col.valueGetter(item);
70
70
  return item[col.columnId];
71
71
  }
72
+ function isColumnEditable(col, item) {
73
+ return col.editable === true || typeof col.editable === "function" && col.editable(item);
74
+ }
72
75
  function isColumnGroupDef(c) {
73
76
  return "children" in c && Array.isArray(c.children);
74
77
  }
@@ -757,9 +760,9 @@ function getHeaderFilterConfig(col, input) {
757
760
  function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
758
761
  const rowId = input.getRowId(item);
759
762
  const globalColIndex = colIdx + input.colOffset;
760
- const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
761
- const canEditInline = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== "function";
762
- const canEditPopup = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor === "function" && col.cellEditorPopup !== false;
763
+ const colEditable = isColumnEditable(col, item);
764
+ const canEditInline = input.editable !== false && colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== "function";
765
+ const canEditPopup = input.editable !== false && colEditable && !!input.onCellValueChanged && typeof col.cellEditor === "function" && col.cellEditorPopup !== false;
763
766
  const canEditAny = canEditInline || canEditPopup;
764
767
  const isEditing = input.editingCell?.rowId === rowId && input.editingCell?.columnId === col.columnId;
765
768
  const isActive = !input.isDragging && input.activeCell?.rowIndex === rowIndex && input.activeCell?.columnIndex === globalColIndex;
@@ -891,6 +894,18 @@ function measureRange(container, range, colOffset) {
891
894
  height: brRect.bottom - tlRect.top
892
895
  };
893
896
  }
897
+ function buildCellIndex(container) {
898
+ const index = /* @__PURE__ */ new Map();
899
+ if (!container) return index;
900
+ const cells = container.querySelectorAll("[data-row-index][data-col-index]");
901
+ for (let i = 0; i < cells.length; i++) {
902
+ const el = cells[i];
903
+ const r = el.getAttribute("data-row-index") ?? "";
904
+ const c = el.getAttribute("data-col-index") ?? "";
905
+ index.set(`${r},${c}`, el);
906
+ }
907
+ return index;
908
+ }
894
909
  function injectGlobalStyles(id, css) {
895
910
  if (typeof document === "undefined") return;
896
911
  if (document.getElementById(id)) return;
@@ -1044,8 +1059,7 @@ function applyCellDeletion(range, items, visibleCols) {
1044
1059
  if (r >= items.length || c >= visibleCols.length) continue;
1045
1060
  const item = items[r];
1046
1061
  const col = visibleCols[c];
1047
- const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
1048
- if (!colEditable) continue;
1062
+ if (!isColumnEditable(col, item)) continue;
1049
1063
  const oldValue = getCellValue(item, col);
1050
1064
  const result = parseValue("", oldValue, item, col);
1051
1065
  if (!result.valid) continue;
@@ -1141,8 +1155,7 @@ function applyPastedValues(parsedRows, anchorRow, anchorCol, items, visibleCols)
1141
1155
  if (targetRow >= items.length || targetCol >= visibleCols.length) continue;
1142
1156
  const item = items[targetRow];
1143
1157
  const col = visibleCols[targetCol];
1144
- const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
1145
- if (!colEditable) continue;
1158
+ if (!isColumnEditable(col, item)) continue;
1146
1159
  const rawValue = cells[c] ?? "";
1147
1160
  const oldValue = getCellValue(item, col);
1148
1161
  const result = parseValue(rawValue, oldValue, item, col);
@@ -1165,8 +1178,7 @@ function applyCutClear(cutRange, items, visibleCols) {
1165
1178
  if (r >= items.length || c >= visibleCols.length) continue;
1166
1179
  const item = items[r];
1167
1180
  const col = visibleCols[c];
1168
- const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
1169
- if (!colEditable) continue;
1181
+ if (!isColumnEditable(col, item)) continue;
1170
1182
  const oldValue = getCellValue(item, col);
1171
1183
  const result = parseValue("", oldValue, item, col);
1172
1184
  if (!result.valid) continue;
@@ -1193,8 +1205,7 @@ function applyFillValues(range, sourceRow, sourceCol, items, visibleCols) {
1193
1205
  if (row >= items.length || col >= visibleCols.length) continue;
1194
1206
  const item = items[row];
1195
1207
  const colDef = visibleCols[col];
1196
- const colEditable = colDef.editable === true || typeof colDef.editable === "function" && colDef.editable(item);
1197
- if (!colEditable) continue;
1208
+ if (!isColumnEditable(colDef, item)) continue;
1198
1209
  const oldValue = getCellValue(item, colDef);
1199
1210
  const result = parseValue(startValue, oldValue, item, colDef);
1200
1211
  if (!result.valid) continue;
@@ -5861,34 +5872,6 @@ var OGRID_THEME_CSS = `
5861
5872
  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
5862
5873
  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
5863
5874
  }
5864
- @media (prefers-color-scheme: dark) {
5865
- :root:not([data-theme='light']) {
5866
- --ogrid-bg: #1e1e1e;
5867
- --ogrid-fg: rgba(255, 255, 255, 0.87);
5868
- --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
5869
- --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
5870
- --ogrid-border: rgba(255, 255, 255, 0.12);
5871
- --ogrid-header-bg: rgba(255, 255, 255, 0.06);
5872
- --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
5873
- --ogrid-selected-row-bg: #1a3a5c;
5874
- --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
5875
- --ogrid-range-bg: rgba(46, 160, 67, 0.15);
5876
- --ogrid-accent: #4da6ff;
5877
- --ogrid-selection-color: #2ea043;
5878
- --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
5879
- --ogrid-bg-subtle: #2a2a2a;
5880
- --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
5881
- --ogrid-bg-selected: #1a3a5c;
5882
- --ogrid-bg-selected-hover: #1f426b;
5883
- --ogrid-bg-range: rgba(46, 160, 67, 0.15);
5884
- --ogrid-muted: rgba(255, 255, 255, 0.5);
5885
- --ogrid-selection: #2ea043;
5886
- --ogrid-primary: #2ea043;
5887
- --ogrid-primary-fg: #fff;
5888
- --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
5889
- --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
5890
- }
5891
- }
5892
5875
  `;
5893
5876
  var OGrid = class {
5894
5877
  constructor(container, options) {
@@ -6340,4 +6323,4 @@ var OGrid = class {
6340
6323
  }
6341
6324
  };
6342
6325
 
6343
- export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, ClipboardState, ColumnChooser, ColumnPinningState, ColumnReorderState, ColumnResizeState, ContextMenu, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, EventEmitter, FillHandleState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridState, HeaderFilter, HeaderFilterState, InlineCellEditor, KeyboardNavState, MAX_PAGE_BUTTONS, MarchingAntsOverlay, OGrid, OGridEventWiring, OGridRendering, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, PaginationControls, ROW_NUMBER_COLUMN_WIDTH, RowSelectionState, SIDEBAR_TRANSITION_MS, SelectionState, SideBar, SideBarState, StatusBar, TableLayoutState, TableRenderer, UndoRedoStack, UndoRedoState, VirtualScrollState, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds };
6326
+ export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, ClipboardState, ColumnChooser, ColumnPinningState, ColumnReorderState, ColumnResizeState, ContextMenu, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, EventEmitter, FillHandleState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridState, HeaderFilter, HeaderFilterState, InlineCellEditor, KeyboardNavState, MAX_PAGE_BUTTONS, MarchingAntsOverlay, OGrid, OGridEventWiring, OGridRendering, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, PaginationControls, ROW_NUMBER_COLUMN_WIDTH, RowSelectionState, SIDEBAR_TRANSITION_MS, SelectionState, SideBar, SideBarState, StatusBar, TableLayoutState, TableRenderer, UndoRedoStack, UndoRedoState, VirtualScrollState, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCellIndex, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isColumnEditable, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds };
@@ -74,42 +74,6 @@
74
74
  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.4);
75
75
  }
76
76
 
77
- @media (prefers-color-scheme: dark) {
78
- :root:not([data-theme='light']) {
79
- --ogrid-bg: #1e1e1e;
80
- --ogrid-fg: rgba(255, 255, 255, 0.87);
81
- --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
82
- --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
83
- --ogrid-border: rgba(255, 255, 255, 0.12);
84
- --ogrid-header-bg: rgba(255, 255, 255, 0.06);
85
- --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
86
- --ogrid-selected-row-bg: #1a3a5c;
87
- --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
88
- --ogrid-range-bg: rgba(46, 160, 67, 0.15);
89
- --ogrid-accent: #4da6ff;
90
- --ogrid-selection-color: #2ea043;
91
- --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
92
- /* Aliases for backward compat */
93
- --ogrid-border-strong: #555;
94
- --ogrid-border-hover: #666;
95
- --ogrid-bg-subtle: #2a2a2a;
96
- --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
97
- --ogrid-bg-selected: #1a3a5c;
98
- --ogrid-bg-selected-hover: #1f426b;
99
- --ogrid-bg-range: rgba(46, 160, 67, 0.15);
100
- --ogrid-muted: rgba(255, 255, 255, 0.5);
101
- --ogrid-selection: #2ea043;
102
- --ogrid-primary: #2ea043;
103
- --ogrid-primary-fg: #fff;
104
- --ogrid-primary-hover: #3db852;
105
- --ogrid-accent-dark: #3db852;
106
- --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
107
- --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
108
- --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
109
- --ogrid-pinned-shadow: rgba(0, 0, 0, 0.4);
110
- }
111
- }
112
-
113
77
  /* ── Layout ── */
114
78
 
115
79
  .ogrid-container {
@@ -316,6 +280,7 @@
316
280
 
317
281
  .ogrid-table tbody td {
318
282
  padding: 6px 10px;
283
+ background: var(--ogrid-bg, #ffffff);
319
284
  border-bottom: 1px solid var(--ogrid-border, #e8e8e8);
320
285
  position: relative;
321
286
  color: var(--ogrid-fg, #242424);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alaarab/ogrid-js",
3
- "version": "2.1.6",
3
+ "version": "2.1.8",
4
4
  "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
36
36
  "node": ">=18"
37
37
  },
38
38
  "dependencies": {
39
- "@alaarab/ogrid-core": "2.1.6"
39
+ "@alaarab/ogrid-core": "2.1.8"
40
40
  },
41
41
  "sideEffects": [
42
42
  "**/*.css"