vue2-excel-grid 2.5.1 → 2.6.0

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -992,6 +992,7 @@ const SIZE_CONFIG = {
 const ROW_HEADER_WIDTH = 50
 const DEFAULT_COL_WIDTH = 100
 const OUTLINE_GUTTER = 20
+const FIT_COLUMNS_MIN_WIDTH = 40
 
 // Classifies a col.width spec so resolveColWidth() knows how to turn it into a
 // concrete px number. Plain numbers/px strings resolve instantly with no DOM
@@ -1257,6 +1258,29 @@ const ExcelGridComponent = {
     /** Auto-fit all column widths to content (same as double-clicking each resize handle). Re-applies on data/columns change. */
     autoWidth: { type: Boolean, default: false },
 
+    /**
+     * Forces every visible leaf column to fit within a single viewport —
+     * no horizontal scroll. Column widths are still resolved (`col.width`,
+     * `%`/`px`/other CSS lengths, `DEFAULT_COL_WIDTH` when omitted) but only
+     * as RELATIVE WEIGHTS: all resolved widths are scaled by one shared
+     * factor so their sum exactly fills the available width, keeping each
+     * column's proportion to the others. Each column still gets at least
+     * `40px` — if there are enough columns that even that minimum doesn't
+     * fit, horizontal scroll returns for that (rare) case rather than
+     * 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.
+     * @type {Boolean}
+     * @default false
+     * @example
+     * <excel-grid :columns="columns" v-model="data" fit-columns />
+     */
+    fitColumns: { type: Boolean, default: false },
+
     /**
      * Allow columns to be reordered by dragging their headers.
      * On drop, emits 'update:columns' (compatible with .sync) and 'column-reorder'.
@@ -2409,6 +2433,26 @@ const ExcelGridComponent = {
       if (v) this._applyAutoWidth()
     },
 
+    fitColumns(v) {
+      if (v) {
+        this._applyFitColumns()
+      } else {
+        // Back to normal per-column resolution (same as the columns
+        // watcher's non-fit branch, without keyToWidth — fitColumns already
+        // discarded any remembered manual-resize widths when it turned on).
+        const newColWidths = {}
+        const newRelativeSpecs = {}
+        this.leafCols.forEach(col => {
+          newColWidths[col._flatIndex] = this.resolveColWidth(col.width, this._relativeWidthContainer)
+          const parsed = parseColWidthSpec(col.width)
+          if (parsed.type !== 'px') newRelativeSpecs[col._flatIndex] = col.width
+        })
+        this.colWidths = newColWidths
+        this.relativeColSpecs = newRelativeSpecs
+        this._applyAutoWidth()
+      }
+    },
+
     columns: {
       immediate: true,
       handler(cols) {
@@ -2431,21 +2475,30 @@ const ExcelGridComponent = {
         this.headerRows = buildHeaderRows(cols, this.headerDepth)
         this._maskCache = {}
 
-        // Rebuild colWidths by new flat index, using col.key to look up saved widths
-        const newColWidths = {}
-        const newRelativeSpecs = {}
-        this.leafCols.forEach(col => {
-          if (keyToWidth[col.key] !== undefined) {
-            newColWidths[col._flatIndex] = keyToWidth[col.key]
-            if (keyToSpec[col.key] !== undefined) newRelativeSpecs[col._flatIndex] = keyToSpec[col.key]
-          } else {
-            newColWidths[col._flatIndex] = this.resolveColWidth(col.width, this._relativeWidthContainer)
-            const parsed = parseColWidthSpec(col.width)
-            if (parsed.type !== 'px') newRelativeSpecs[col._flatIndex] = col.width
-          }
-        })
-        this.colWidths = newColWidths
-        this.relativeColSpecs = newRelativeSpecs
+        if (this.fitColumns) {
+          // 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.
+          this.colWidths = {}
+          this.relativeColSpecs = {}
+          this._applyFitColumns()
+        } else {
+          // Rebuild colWidths by new flat index, using col.key to look up saved widths
+          const newColWidths = {}
+          const newRelativeSpecs = {}
+          this.leafCols.forEach(col => {
+            if (keyToWidth[col.key] !== undefined) {
+              newColWidths[col._flatIndex] = keyToWidth[col.key]
+              if (keyToSpec[col.key] !== undefined) newRelativeSpecs[col._flatIndex] = keyToSpec[col.key]
+            } else {
+              newColWidths[col._flatIndex] = this.resolveColWidth(col.width, this._relativeWidthContainer)
+              const parsed = parseColWidthSpec(col.width)
+              if (parsed.type !== 'px') newRelativeSpecs[col._flatIndex] = col.width
+            }
+          })
+          this.colWidths = newColWidths
+          this.relativeColSpecs = newRelativeSpecs
+        }
 
         this.computeColumnTotals()
         this._recomputeRowFilters()
@@ -2799,7 +2852,8 @@ const ExcelGridComponent = {
         const pw = this.$el.parentElement.clientWidth
         if (pw !== this.hostContainerWidth && this._widthSyncChainOk()) {
           this.hostContainerWidth = pw
-          this._resolveRelativeColWidths()
+          if (this.fitColumns) this._applyFitColumns()
+          else this._resolveRelativeColWidths()
         }
       }
       const sbw = el.offsetWidth - el.clientWidth
@@ -5780,7 +5834,9 @@ const ExcelGridComponent = {
     // RESIZE (3.5)
     // =========================================================
     startColResize(e, ci) {
-      if (this.internalLocked) return
+      // fitColumns owns column widths entirely — manual resize would break
+      // its "always fits, never scrolls" invariant.
+      if (this.internalLocked || this.fitColumns) return
       const rect = this.$refs.container.getBoundingClientRect()
       this.resizing = {
         active: true,
@@ -5865,6 +5921,7 @@ const ExcelGridComponent = {
     },
 
     autoFitColumn(ci) {
+      if (this.fitColumns) return
       const col = this.leafCols[ci]
       if (!col) return
       let maxLen = (col.title || '').length
@@ -5880,7 +5937,8 @@ const ExcelGridComponent = {
     },
 
     _applyAutoWidth() {
-      if (!this.autoWidth || !this.leafCols.length) return
+      // fitColumns is the higher-priority width control — see its own JSDoc.
+      if (!this.autoWidth || this.fitColumns || !this.leafCols.length) return
       this.leafCols.forEach((col, ci) => {
         let maxLen = (col.title || '').length
         for (let ri = 0; ri < Math.min(this.totalRows, 500); ri++) {
@@ -5893,6 +5951,40 @@ const ExcelGridComponent = {
       this._cellStyleCache = Object.create(null)
     },
 
+    // fitColumns prop — ignores col.width as an absolute value, using it only
+    // as a relative WEIGHT so every visible leaf column (pinned or not)
+    // scales by one shared factor to exactly fill _relativeWidthContainer
+    // (the same circular-dependency-safe reference %/CSS-length widths
+    // already resolve against — see its declaration comment). Mirrors
+    // 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.
+    _applyFitColumns() {
+      if (!this.fitColumns || !this.leafCols.length) return
+      const containerWidth = this._relativeWidthContainer
+      if (!containerWidth) return // not measured yet — re-run once hostContainerWidth arrives
+      const outlineW = this.rowGroups.length ? OUTLINE_GUTTER : 0
+      const available = containerWidth - ROW_HEADER_WIDTH - outlineW - this.vScrollbarW - this.shellBorderW
+      if (available <= 0) return
+
+      const visible = []
+      let totalWeight = 0
+      this.leafCols.forEach((col, ci) => {
+        if (this.isColHidden(ci)) 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
+      visible.forEach(({ ci, weight }) => {
+        this.$set(this.colWidths, ci, Math.max(FIT_COLUMNS_MIN_WIDTH, weight * scale))
+        this.$delete(this.relativeColSpecs, ci)
+      })
+      this._cellStyleCache = Object.create(null)
+    },
+
     ctxHideRow() {
       const targetRow = this.contextMenu.row
       // Row header: row >= 0 AND col = -1 (no column context)