@alaarab/ogrid-vue 2.4.0 → 2.4.1

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.
Files changed (2) hide show
  1. package/dist/esm/index.js +61 -28
  2. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { injectGlobalStyles, Z_INDEX, getStatusBarParts, FORMULA_BAR_STYLES, handleFormulaBarKeyDown, measureRange, FORMULA_REF_COLORS, deriveFormulaBarText, extractFormulaReferences, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, processClientSideDataAsync, validateColumns, validateRowIds, computeRowSelectionState, buildCellIndex, UndoRedoStack, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, computeAggregations, getDataGridStatusBarConfig, validateVirtualScrollConfig, computeVisibleRange, computeTotalHeight, computeVisibleColumnRange, partitionColumnsForVirtualization, formatCellReference, buildHeaderRows, indexToColumnLetter, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, measureColumnContentWidth, getPinStateForColumn, parseValue, applyFillValues, processFormulaBarCommit, applyCellDeletion, computeTabNavigation, computeArrowNavigation, computeNextSortState, mergeFilter, columnLetterToIndex, getCellValue, applyRangeRowSelection, getScrollTopForRow, FormulaEngine, calculateDropTarget, reorderColumnArray, createGridDataAccessor, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
1
+ import { injectGlobalStyles, Z_INDEX, getStatusBarParts, FORMULA_BAR_STYLES, handleFormulaBarKeyDown, measureRange, FORMULA_REF_COLORS, deriveFormulaBarText, extractFormulaReferences, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, processClientSideDataAsync, validateColumns, validateRowIds, computeRowSelectionState, buildCellIndex, UndoRedoStack, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, computeAggregations, getDataGridStatusBarConfig, validateVirtualScrollConfig, computeVisibleRange, computeTotalHeight, computeVisibleColumnRange, partitionColumnsForVirtualization, formatCellReference, buildHeaderRows, indexToColumnLetter, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, measureColumnContentWidth, getPinStateForColumn, parseValue, applyFillValues, processFormulaBarCommit, applyCellDeletion, computeTabNavigation, computeArrowNavigation, computeNextSortState, mergeFilter, columnLetterToIndex, getCellValue, applyRangeRowSelection, getScrollTopForRow, FormulaEngine, calculateDropTarget, reorderColumnArray, ROW_NUMBER_COLUMN_MIN_WIDTH, createGridDataAccessor, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
2
2
  export * from '@alaarab/ogrid-core';
3
3
  export { buildInlineEditorProps, buildPopoverEditorProps, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
4
4
  import { defineComponent, ref, computed, onMounted, watch, toValue, onUnmounted, h, shallowRef, triggerRef, nextTick, Teleport, isRef, isReadonly, unref, customRef } from 'vue';
@@ -1816,6 +1816,7 @@ function useKeyboardNavigation(params) {
1816
1816
  case "ArrowUp":
1817
1817
  case "ArrowRight":
1818
1818
  case "ArrowLeft": {
1819
+ if (editingCell != null) break;
1819
1820
  e.preventDefault();
1820
1821
  const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
1821
1822
  direction: e.key,
@@ -2932,9 +2933,10 @@ function useColumnResize(params) {
2932
2933
  [columnId]: { widthPx: latestWidth }
2933
2934
  });
2934
2935
  };
2936
+ const effectiveMinWidth = columnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : minWidth;
2935
2937
  const onMove = (moveEvent) => {
2936
2938
  const deltaX = moveEvent.clientX - startX;
2937
- latestWidth = Math.max(minWidth, startWidth + deltaX);
2939
+ latestWidth = Math.max(effectiveMinWidth, startWidth + deltaX);
2938
2940
  if (!rafId) {
2939
2941
  rafId = requestAnimationFrame(() => {
2940
2942
  rafId = 0;
@@ -3483,9 +3485,10 @@ function useInlineCellEditorState(params) {
3483
3485
  };
3484
3486
  }
3485
3487
  function useRichSelectState(params) {
3486
- const { values, formatValue, onCommit, onCancel } = params;
3488
+ const { values, formatValue, initialValue, onCommit, onCancel } = params;
3487
3489
  const searchText = ref("");
3488
- const highlightedIndex = ref(0);
3490
+ const initialIndex = values.findIndex((v) => String(v) === String(initialValue));
3491
+ const highlightedIndex = ref(Math.max(initialIndex, 0));
3489
3492
  const setSearchText = (text) => {
3490
3493
  searchText.value = text;
3491
3494
  };
@@ -4046,8 +4049,6 @@ function createDataGridTable(ui) {
4046
4049
  popoverAnchorEl ? h(CustomEditor, editorProps) : null
4047
4050
  ]);
4048
4051
  }
4049
- const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
4050
- const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
4051
4052
  const interactionProps2 = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
4052
4053
  const cellClasses = ["ogrid-cell-content"];
4053
4054
  if (col.type === "numeric") cellClasses.push("ogrid-cell-content--numeric");
@@ -4057,12 +4058,25 @@ function createDataGridTable(ui) {
4057
4058
  if (descriptor.isActive && descriptor.isInRange) cellClasses.push("ogrid-cell-content--active-in-range");
4058
4059
  if (descriptor.isInRange && !descriptor.isActive) cellClasses.push("ogrid-cell-in-range");
4059
4060
  if (descriptor.isInCutRange) cellClasses.push("ogrid-cell-cut");
4060
- const styledContent = cellStyle ? h("span", { style: cellStyle }, content) : content;
4061
+ let displayNode;
4062
+ if (descriptor.columnType === "boolean") {
4063
+ displayNode = h("input", {
4064
+ type: "checkbox",
4065
+ checked: !!descriptor.displayValue,
4066
+ disabled: true,
4067
+ style: "margin:0;pointer-events:none",
4068
+ "aria-label": descriptor.displayValue ? "True" : "False"
4069
+ });
4070
+ } else {
4071
+ const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
4072
+ const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
4073
+ displayNode = cellStyle ? h("span", { style: cellStyle }, content) : content;
4074
+ }
4061
4075
  return h("div", {
4062
4076
  ...interactionProps2,
4063
4077
  class: cellClasses.join(" ")
4064
4078
  }, [
4065
- styledContent,
4079
+ displayNode,
4066
4080
  ...descriptor.canEditAny && descriptor.isSelectionEndCell ? [
4067
4081
  h("div", {
4068
4082
  onMousedown: handleFillHandleMouseDown,
@@ -4204,32 +4218,46 @@ function createDataGridTable(ui) {
4204
4218
  })
4205
4219
  ] : [],
4206
4220
  // Row numbers header
4207
- ...rowIdx === headerRows.length - 1 && hasRowNumbersCol ? [
4208
- h("th", {
4221
+ ...rowIdx === headerRows.length - 1 && hasRowNumbersCol ? [(() => {
4222
+ const rnw = layout.columnSizingOverrides[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
4223
+ return h("th", {
4209
4224
  class: "ogrid-row-number-header",
4210
4225
  style: {
4211
- width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
4212
- minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
4213
- maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
4226
+ width: `${rnw}px`,
4227
+ minWidth: `${rnw}px`,
4228
+ maxWidth: `${rnw}px`,
4214
4229
  position: "sticky",
4215
4230
  left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
4216
4231
  zIndex: 3
4217
4232
  }
4218
- }, "#")
4219
- ] : [],
4233
+ }, [
4234
+ "#",
4235
+ h("div", {
4236
+ onMousedown: (e) => {
4237
+ setActiveCell(null);
4238
+ setSelectionRange(null);
4239
+ wrapperRef.value?.focus({ preventScroll: true });
4240
+ e.stopPropagation();
4241
+ handleResizeStart(e, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
4242
+ },
4243
+ class: "ogrid-resize-handle"
4244
+ })
4245
+ ]);
4246
+ })()] : [],
4220
4247
  // Row numbers spacer
4221
- ...rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol ? [
4222
- h("th", {
4248
+ ...rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol ? [(() => {
4249
+ const spacerRnw = layout.columnSizingOverrides[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
4250
+ return h("th", {
4223
4251
  rowSpan: headerRows.length - 1,
4224
4252
  class: "ogrid-row-number-spacer",
4225
4253
  style: {
4226
- width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
4254
+ width: `${spacerRnw}px`,
4227
4255
  position: "sticky",
4228
4256
  left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
4229
4257
  zIndex: 3
4230
4258
  }
4231
- })
4232
- ] : [],
4259
+ });
4260
+ })()] : [],
4233
4261
  // Header cells
4234
4262
  ...row.map((cell, cellIdx) => {
4235
4263
  if (cell.isGroup) {
@@ -4260,7 +4288,11 @@ function createDataGridTable(ui) {
4260
4288
  h("button", {
4261
4289
  onClick: (e) => {
4262
4290
  e.stopPropagation();
4263
- headerMenu.open(col.columnId, e.currentTarget);
4291
+ if (headerMenu.isOpen && headerMenu.openForColumn === col.columnId) {
4292
+ headerMenu.close();
4293
+ } else {
4294
+ headerMenu.open(col.columnId, e.currentTarget);
4295
+ }
4264
4296
  },
4265
4297
  "aria-label": "Column options",
4266
4298
  title: "Column options",
@@ -4335,20 +4367,21 @@ function createDataGridTable(ui) {
4335
4367
  )
4336
4368
  ] : [],
4337
4369
  // Row numbers cell
4338
- ...hasRowNumbersCol ? [
4339
- h("td", {
4370
+ ...hasRowNumbersCol ? [(() => {
4371
+ const rnw = layout.columnSizingOverrides[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
4372
+ return h("td", {
4340
4373
  class: "ogrid-row-number-cell",
4341
4374
  style: {
4342
- width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
4343
- minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
4344
- maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
4375
+ width: `${rnw}px`,
4376
+ minWidth: `${rnw}px`,
4377
+ maxWidth: `${rnw}px`,
4345
4378
  padding: "6px",
4346
4379
  position: "sticky",
4347
4380
  left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
4348
4381
  zIndex: 2
4349
4382
  }
4350
- }, String(rowNumberOffset2 + rowIndex + 1))
4351
- ] : [],
4383
+ }, String(rowNumberOffset2 + rowIndex + 1));
4384
+ })()] : [],
4352
4385
  // Left spacer for column virtualization
4353
4386
  ...leftSpacerWidth > 0 ? [
4354
4387
  h("td", { key: "__col-spacer-left", style: { width: `${leftSpacerWidth}px`, minWidth: `${leftSpacerWidth}px`, maxWidth: `${leftSpacerWidth}px`, padding: "0" } })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alaarab/ogrid-vue",
3
- "version": "2.4.0",
3
+ "version": "2.4.1",
4
4
  "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
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.4.0"
39
+ "@alaarab/ogrid-core": "2.4.1"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "vue": "^3.3.0"