@alaarab/ogrid-vue 2.1.13 → 2.1.15

package/dist/esm/index.js

@@ -71,8 +71,8 @@ var MarchingAntsOverlay = defineComponent({
     return () => {
       if (!selRect.value && !clipRect.value) return null;
       return h("div", { style: { position: "relative" } }, [
-        // Selection range: solid green border (hidden when clipboard range overlaps)
-        selRect.value && !clipRangeMatchesSel.value ? h("svg", {
+        // Selection range: solid green border (hidden when clipboard range overlaps or single-cell — CSS outline handles that)
+        selRect.value && !clipRangeMatchesSel.value && !(props.selectionRange && props.selectionRange.startRow === props.selectionRange.endRow && props.selectionRange.startCol === props.selectionRange.endCol) ? h("svg", {
           style: {
             position: "absolute",
             top: `${selRect.value.top}px`,
@@ -151,7 +151,10 @@ var StatusBar = defineComponent({
           display: "flex",
           alignItems: "center",
           gap: "16px",
-          fontSize: "0.875rem"
+          fontSize: "0.875rem",
+          lineHeight: "20px",
+          minHeight: "33px",
+          boxSizing: "border-box"
         }
       }, parts.map(
         (p, i) => h("span", {
@@ -961,15 +964,17 @@ function useCellSelection(params) {
       }
     }
     if (!cellIndex) cellIndex = buildCellIndex(wrapperRef.value);
+    let rebuilt = false;
     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) {
+        if (el && !el.isConnected && !rebuilt) {
+          rebuilt = true;
           cellIndex = buildCellIndex(wrapperRef.value);
           el = cellIndex?.get(key);
         }
-        if (el) {
+        if (el && el.isConnected) {
           styleCellInRange(el, r, c, minR, maxR, minC, maxC, anchor);
         }
       }
@@ -1097,10 +1102,13 @@ function useCellSelection(params) {
       const finalRange = liveDragRange;
       if (finalRange) {
         setSelectionRange(finalRange);
-        setActiveCell({
-          rowIndex: finalRange.endRow,
-          columnIndex: finalRange.endCol + getColOffset()
-        });
+        const anchor = dragStart;
+        if (anchor) {
+          setActiveCell({
+            rowIndex: anchor.row,
+            columnIndex: anchor.col + getColOffset()
+          });
+        }
       }
     }
     clearDragAttrs();
@@ -1607,7 +1615,7 @@ function useFillHandle(params) {
         norm.endRow = Math.min(norm.endRow, vr.endIndex);
       }
       setSelectionRange(norm);
-      setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + getColOffset() });
+      setActiveCell({ rowIndex: drag.startRow, columnIndex: drag.startCol + getColOffset() });
       const currentItems = items.value;
       const currentCols = visibleCols.value;
       const callback = onCellValueChanged.value;
@@ -2426,10 +2434,23 @@ function useColumnResize(params) {
     document.addEventListener("mouseup", onUp);
     cleanupFn = cleanup;
   };
+  const handleResizeDoubleClick = (e, col) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const columnId = col.columnId;
+    const thEl = e.currentTarget.closest("th") ?? e.currentTarget.parentElement;
+    const container = thEl?.closest("table")?.parentElement ?? void 0;
+    const idealWidth = measureColumnContentWidth(columnId, minWidth, container);
+    setColumnSizingOverrides({
+      ...columnSizingOverrides.value,
+      [columnId]: { widthPx: idealWidth }
+    });
+    onColumnResized?.(columnId, idealWidth);
+  };
   const getColumnWidth = (col) => {
     return columnSizingOverrides.value[col.columnId]?.widthPx ?? col.idealWidth ?? col.defaultWidth ?? defaultWidth;
   };
-  return { handleResizeStart, getColumnWidth };
+  return { handleResizeStart, handleResizeDoubleClick, getColumnWidth };
 }
 function useDebounce(value, delayMs) {
   const debouncedValue = ref(value.value);
@@ -3244,7 +3265,7 @@ function createDataGridTable(ui) {
         columnReorder: { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown: handleReorderMouseDown },
         virtualScroll: { containerRef: vsContainerRef, visibleRange, totalHeight: _totalHeight, scrollToRow: _scrollToRow },
         virtualScrollEnabled,
-        columnResize: { handleResizeStart, getColumnWidth }
+        columnResize: { handleResizeStart, handleResizeDoubleClick, getColumnWidth }
       } = useDataGridTableSetup({ props: propsRef });
       const onWrapperMousedown = (e) => {
         lastMouseShift.value = e.shiftKey;
@@ -3417,8 +3438,8 @@ function createDataGridTable(ui) {
           if (col.type === "numeric") cellClasses.push("ogrid-cell-content--numeric");
           else if (col.type === "boolean") cellClasses.push("ogrid-cell-content--boolean");
           if (descriptor.canEditAny) cellClasses.push("ogrid-cell-content--editable");
-          if (descriptor.isActive && !descriptor.isInRange) cellClasses.push("ogrid-cell-content--active");
-          if (descriptor.isInRange) cellClasses.push("ogrid-cell-in-range");
+          if (descriptor.isActive) cellClasses.push("ogrid-cell-content--active");
+          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;
           return h("div", {
@@ -3610,6 +3631,7 @@ function createDataGridTable(ui) {
                                   e.stopPropagation();
                                   handleResizeStart(e, col);
                                 },
+                                onDblclick: (e) => handleResizeDoubleClick(e, col),
                                 class: "ogrid-resize-handle"
                               })
                             ]);

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

@@ -13,6 +13,7 @@ export interface UseColumnResizeParams {
 }
 export interface UseColumnResizeResult<T> {
     handleResizeStart: (e: MouseEvent, col: IColumnDef<T>) => void;
+    handleResizeDoubleClick: (e: MouseEvent, col: IColumnDef<T>) => void;
     getColumnWidth: (col: IColumnDef<T>) => number;
 }
 /**

package/package.json

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