@alaarab/ogrid-vue 2.4.0 → 2.4.2

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-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';
+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';
 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';
@@ -1816,6 +1816,7 @@ function useKeyboardNavigation(params) {
       case "ArrowUp":
       case "ArrowRight":
       case "ArrowLeft": {
+        if (editingCell != null) break;
         e.preventDefault();
         const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
           direction: e.key,
@@ -2932,9 +2933,10 @@ function useColumnResize(params) {
         [columnId]: { widthPx: latestWidth }
       });
     };
+    const effectiveMinWidth = columnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : minWidth;
     const onMove = (moveEvent) => {
       const deltaX = moveEvent.clientX - startX;
-      latestWidth = Math.max(minWidth, startWidth + deltaX);
+      latestWidth = Math.max(effectiveMinWidth, startWidth + deltaX);
       if (!rafId) {
         rafId = requestAnimationFrame(() => {
           rafId = 0;
@@ -3483,9 +3485,10 @@ function useInlineCellEditorState(params) {
   };
 }
 function useRichSelectState(params) {
-  const { values, formatValue, onCommit, onCancel } = params;
+  const { values, formatValue, initialValue, onCommit, onCancel } = params;
   const searchText = ref("");
-  const highlightedIndex = ref(0);
+  const initialIndex = values.findIndex((v) => String(v) === String(initialValue));
+  const highlightedIndex = ref(Math.max(initialIndex, 0));
   const setSearchText = (text) => {
     searchText.value = text;
   };
@@ -4046,8 +4049,6 @@ function createDataGridTable(ui) {
               popoverAnchorEl ? h(CustomEditor, editorProps) : null
             ]);
           }
-          const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
-          const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
           const interactionProps2 = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
           const cellClasses = ["ogrid-cell-content"];
           if (col.type === "numeric") cellClasses.push("ogrid-cell-content--numeric");
@@ -4057,12 +4058,25 @@ function createDataGridTable(ui) {
           if (descriptor.isActive && descriptor.isInRange) cellClasses.push("ogrid-cell-content--active-in-range");
           if (descriptor.isInRange && !descriptor.isActive) cellClasses.push("ogrid-cell-in-range");
           if (descriptor.isInCutRange) cellClasses.push("ogrid-cell-cut");
-          const styledContent = cellStyle ? h("span", { style: cellStyle }, content) : content;
+          let displayNode;
+          if (descriptor.columnType === "boolean") {
+            displayNode = h("input", {
+              type: "checkbox",
+              checked: !!descriptor.displayValue,
+              disabled: true,
+              style: "margin:0;pointer-events:none",
+              "aria-label": descriptor.displayValue ? "True" : "False"
+            });
+          } else {
+            const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
+            const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
+            displayNode = cellStyle ? h("span", { style: cellStyle }, content) : content;
+          }
           return h("div", {
             ...interactionProps2,
             class: cellClasses.join(" ")
           }, [
-            styledContent,
+            displayNode,
             ...descriptor.canEditAny && descriptor.isSelectionEndCell ? [
               h("div", {
                 onMousedown: handleFillHandleMouseDown,
@@ -4204,32 +4218,46 @@ function createDataGridTable(ui) {
                             })
                           ] : [],
                           // Row numbers header
-                          ...rowIdx === headerRows.length - 1 && hasRowNumbersCol ? [
-                            h("th", {
+                          ...rowIdx === headerRows.length - 1 && hasRowNumbersCol ? [(() => {
+                            const rnw = layout.columnSizingOverrides[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
+                            return h("th", {
                               class: "ogrid-row-number-header",
                               style: {
-                                width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                width: `${rnw}px`,
+                                minWidth: `${rnw}px`,
+                                maxWidth: `${rnw}px`,
                                 position: "sticky",
                                 left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
                                 zIndex: 3
                               }
-                            }, "#")
-                          ] : [],
+                            }, [
+                              "#",
+                              h("div", {
+                                onMousedown: (e) => {
+                                  setActiveCell(null);
+                                  setSelectionRange(null);
+                                  wrapperRef.value?.focus({ preventScroll: true });
+                                  e.stopPropagation();
+                                  handleResizeStart(e, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
+                                },
+                                class: "ogrid-resize-handle"
+                              })
+                            ]);
+                          })()] : [],
                           // Row numbers spacer
-                          ...rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol ? [
-                            h("th", {
+                          ...rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol ? [(() => {
+                            const spacerRnw = layout.columnSizingOverrides[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
+                            return h("th", {
                               rowSpan: headerRows.length - 1,
                               class: "ogrid-row-number-spacer",
                               style: {
-                                width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                width: `${spacerRnw}px`,
                                 position: "sticky",
                                 left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
                                 zIndex: 3
                               }
-                            })
-                          ] : [],
+                            });
+                          })()] : [],
                           // Header cells
                           ...row.map((cell, cellIdx) => {
                             if (cell.isGroup) {
@@ -4260,7 +4288,11 @@ function createDataGridTable(ui) {
                                 h("button", {
                                   onClick: (e) => {
                                     e.stopPropagation();
-                                    headerMenu.open(col.columnId, e.currentTarget);
+                                    if (headerMenu.isOpen && headerMenu.openForColumn === col.columnId) {
+                                      headerMenu.close();
+                                    } else {
+                                      headerMenu.open(col.columnId, e.currentTarget);
+                                    }
                                   },
                                   "aria-label": "Column options",
                                   title: "Column options",
@@ -4335,20 +4367,21 @@ function createDataGridTable(ui) {
                               )
                             ] : [],
                             // Row numbers cell
-                            ...hasRowNumbersCol ? [
-                              h("td", {
+                            ...hasRowNumbersCol ? [(() => {
+                              const rnw = layout.columnSizingOverrides[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
+                              return h("td", {
                                 class: "ogrid-row-number-cell",
                                 style: {
-                                  width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                  minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                  maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                  width: `${rnw}px`,
+                                  minWidth: `${rnw}px`,
+                                  maxWidth: `${rnw}px`,
                                   padding: "6px",
                                   position: "sticky",
                                   left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
                                   zIndex: 2
                                 }
-                              }, String(rowNumberOffset2 + rowIndex + 1))
-                            ] : [],
+                              }, String(rowNumberOffset2 + rowIndex + 1));
+                            })()] : [],
                             // Left spacer for column virtualization
                             ...leftSpacerWidth > 0 ? [
                               h("td", { key: "__col-spacer-left", style: { width: `${leftSpacerWidth}px`, minWidth: `${leftSpacerWidth}px`, maxWidth: `${leftSpacerWidth}px`, padding: "0" } })
@@ -4519,17 +4552,32 @@ function createInlineCellEditor(options) {
           dropdown.style.top = `${rect.bottom}px`;
         }
       };
+      let scrollCleanup = null;
       onMounted(() => {
         nextTick(() => {
           if (selectWrapperRef.value) {
             selectWrapperRef.value.focus();
             positionDropdown();
+            const wrapper = selectWrapperRef.value;
+            const scrollParent = wrapper.closest(".ogrid-table-wrapper") ?? wrapper.closest('[style*="overflow"]');
+            const handleScroll = () => {
+              if (props.onCancel) props.onCancel();
+            };
+            if (scrollParent) scrollParent.addEventListener("scroll", handleScroll, { passive: true });
+            window.addEventListener("scroll", handleScroll, { passive: true });
+            scrollCleanup = () => {
+              if (scrollParent) scrollParent.removeEventListener("scroll", handleScroll);
+              window.removeEventListener("scroll", handleScroll);
+            };
             return;
           }
           inputRef.value?.focus();
           inputRef.value?.select();
         });
       });
+      onUnmounted(() => {
+        scrollCleanup?.();
+      });
       watch(() => props.value, (v) => {
         localValue.value = v;
       });

package/package.json

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