vue2-excel-grid 2.6.3 → 2.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "description": "Excel-style grid component for Vue 2.6.14 with virtual scrolling",
   "license": "MIT",
   "author": "Fozilbek Raimberdiyev",

package/src/components/ExcelGrid.vue

@@ -1273,10 +1273,13 @@ const ExcelGridComponent = {
      * shrinking columns illegibly thin.
      *
      * Highest-priority width control: overrides `col.width` as an absolute
-     * value, `autoWidth`, manual column resize (drag handle — disabled
-     * while this is on), and double-click auto-fit. Pinned columns count
-     * toward the fit too — the goal is the whole row fitting, regardless
-     * of pin state.
+     * value, `autoWidth`, and double-click auto-fit (still disabled while
+     * this is on). Manual column resize (drag handle) IS allowed — dragging
+     * a column's handle turns that column into a fixed px width, excluded
+     * from the fit; the rest keep scaling proportionally to fill what's
+     * left, which can reintroduce horizontal scroll if the fixed column(s)
+     * alone exceed the viewport. Pinned columns count toward the fit too —
+     * the goal is the whole row fitting, regardless of pin state.
      * @type {Boolean}
      * @default false
      * @example
@@ -1648,6 +1651,13 @@ const ExcelGridComponent = {
       // resized/auto-fit — see startColResize/autoFitColumn/_applyAutoWidth.
       relativeColSpecs: {},
 
+      // col.key → true, for columns manually resized while fitColumns is on.
+      // Such a column becomes a fixed px width (excluded from the proportional
+      // fit); the rest keep scaling among themselves to fill what's left — see
+      // _applyFitColumns(). Keyed by col.key (not flat index) so it survives
+      // column reorders, same convention as relativeColSpecs preservation.
+      fitColumnsOverrides: {},
+
       // Row heights (row index → px)
       rowHeights: {},
 
@@ -2438,6 +2448,7 @@ const ExcelGridComponent = {
 
     fitColumns(v) {
       if (v) {
+        this.fitColumnsOverrides = {}
         this._applyFitColumns()
       } else {
         // Back to normal per-column resolution (same as the columns
@@ -2452,6 +2463,7 @@ const ExcelGridComponent = {
         })
         this.colWidths = newColWidths
         this.relativeColSpecs = newRelativeSpecs
+        this.fitColumnsOverrides = {}
         this._applyAutoWidth()
       }
     },
@@ -2482,8 +2494,17 @@ const ExcelGridComponent = {
           // fitColumns is the highest-priority width control — it overrides
           // even remembered manual-resize widths (keyToWidth above), so it
           // deliberately does NOT participate in that preservation logic.
+          // fitColumnsOverrides (per-column fixed-width overrides set by
+          // manually resizing while fitColumns is on) IS preserved, by key,
+          // dropping any keys that no longer exist in the new column set.
           this.colWidths = {}
           this.relativeColSpecs = {}
+          const validKeys = new Set(this.leafCols.map(c => c.key))
+          const newOverrides = {}
+          Object.keys(this.fitColumnsOverrides).forEach(k => {
+            if (validKeys.has(k)) newOverrides[k] = true
+          })
+          this.fitColumnsOverrides = newOverrides
           this._applyFitColumns()
         } else {
           // Rebuild colWidths by new flat index, using col.key to look up saved widths
@@ -4055,6 +4076,10 @@ const ExcelGridComponent = {
       if (dc !== 0) farCol = this._extendAxis(anchor.col, farCol, dc, this.leafCols.length - 1)
       this.selectionRanges = [buildRange(anchor, { row: farRow, col: farCol })]
       this.emitSelectionChange()
+      // Unlike moveActive(), this doesn't move the active cell — but the newly
+      // extended (far) corner of the range must still be scrolled into view,
+      // exactly like moveActive() does for the active cell itself.
+      this.scrollToCell(farRow, farCol)
     },
 
     _extendAxis(anchorIdx, farIdx, delta, maxIdx) {
@@ -5917,9 +5942,12 @@ const ExcelGridComponent = {
     // RESIZE (3.5)
     // =========================================================
     startColResize(e, ci) {
-      // fitColumns owns column widths entirely — manual resize would break
-      // its "always fits, never scrolls" invariant.
-      if (this.internalLocked || this.fitColumns) return
+      // Under fitColumns, resizing a column turns IT into a fixed px
+      // override (see commitResize/_applyFitColumns) — the rest keep
+      // scaling proportionally to fill what's left, so this can reintroduce
+      // horizontal scroll. That's an accepted tradeoff for letting a column
+      // be pinned to an exact width while fitColumns is on.
+      if (this.internalLocked) return
       const rect = this.$refs.container.getBoundingClientRect()
       this.resizing = {
         active: true,
@@ -5991,6 +6019,11 @@ const ExcelGridComponent = {
       if (this.resizing.type === 'col') {
         this._cellStyleCache = Object.create(null)
         const newSize = this.colWidths[this.resizing.index]
+        if (this.fitColumns) {
+          const col = this.leafCols[this.resizing.index]
+          if (col) this.$set(this.fitColumnsOverrides, col.key, true)
+          this._applyFitColumns()
+        }
         this.$emit('column-resize', { index: this.resizing.index, newSize })
       } else {
         this._rowStyleCache = Object.create(null)
@@ -6042,6 +6075,13 @@ const ExcelGridComponent = {
     // naturalGridWidth's formula in reverse: that computed derives the
     // grid's natural width FROM the column widths; this derives the column
     // widths FROM the available width.
+    //
+    // Columns in fitColumnsOverrides (manually resized while fitColumns was
+    // on — see commitResize) are excluded from the scaling pool and keep
+    // their current colWidths px value untouched; the remaining columns
+    // scale to fill whatever space is left after subtracting the overrides'
+    // total width, which can go negative (horizontal scroll returns) if the
+    // overrides alone exceed the available width.
     _applyFitColumns() {
       if (!this.fitColumns || !this.leafCols.length) return
       const containerWidth = this._relativeWidthContainer
@@ -6052,15 +6092,22 @@ const ExcelGridComponent = {
 
       const visible = []
       let totalWeight = 0
+      let overriddenWidth = 0
       this.leafCols.forEach((col, ci) => {
         if (this.isColHidden(ci)) return
+        if (this.fitColumnsOverrides[col.key]) {
+          const w = this.colWidths[ci] !== undefined ? this.colWidths[ci] : this.resolveColWidth(col.width, containerWidth)
+          overriddenWidth += w
+          return
+        }
         const w = this.resolveColWidth(col.width, containerWidth)
         visible.push({ ci, weight: w })
         totalWeight += w
       })
       if (!visible.length || totalWeight <= 0) return
 
-      const scale = available / totalWeight
+      const remaining = available - overriddenWidth
+      const scale = remaining > 0 ? remaining / totalWeight : 0
       visible.forEach(({ ci, weight }) => {
         this.$set(this.colWidths, ci, Math.max(FIT_COLUMNS_MIN_WIDTH, weight * scale))
         this.$delete(this.relativeColSpecs, ci)