vue2-excel-grid 2.0.1 → 2.1.0

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -2402,7 +2402,20 @@ const ExcelGridComponent = {
     naturalGridWidth() {
       if (this.widthMode === 'auto') this.$nextTick(this.syncHeaderViewportWidth)
     },
-    widthMode() { this.$nextTick(this.syncHeaderViewportWidth) }
+    widthMode() { this.$nextTick(this.syncHeaderViewportWidth) },
+
+    // localSyncKey feature — mounted() only calls _loadLocalVersionsOnMount()
+    // once, at mount time. Without this watcher, a key that starts empty (a
+    // host conditionally passing `:local-sync-key="ready ? id : null"`, or
+    // one only known after an async load) and later becomes truthy would
+    // never load its version list, never promote a leftover buffer, and
+    // never show the toolbar badge — the feature would look "broken" for the
+    // rest of that page's lifetime even though everything else works.
+    localSyncKey(newKey, oldKey) {
+      if (newKey === oldKey) return
+      this.localSyncAvailable = false
+      if (newKey) this._loadLocalVersionsOnMount()
+    }
   },
 
   created() {
@@ -3654,6 +3667,17 @@ const ExcelGridComponent = {
         return
       }
 
+      if (key === 'd' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault()
+        this.fillDown()
+        return
+      }
+      if (key === 'r' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault()
+        this.fillRight()
+        return
+      }
+
       if (key === 'Delete' || key === 'Backspace') {
         e.preventDefault()
         this.clearSelection()
@@ -5038,6 +5062,107 @@ const ExcelGridComponent = {
       if (skipped.length > 0) this._emitBulkValidationError(skipped, false)
     },
 
+    // =========================================================
+    // Ctrl+D / Ctrl+R — Excel's standard fill-down/fill-right (3.96)
+    // =========================================================
+    // Plain copy, NOT the fill-handle's series continuation (generateFillValues,
+    // 1,2,3->4,5,6) — matches real Excel: Ctrl+D/Ctrl+R just duplicates a row/
+    // column's values, it never extrapolates a pattern.
+    async _fillAxis(direction) {
+      if (this.internalLocked) return
+      if (!this.selectionRanges.length) return
+      const oldData = this.data
+      const newData = oldData.slice()
+      const skipped = []
+      const appliedRanges = []
+
+      for (const range of this.selectionRanges) {
+        const r = normalizeRange(range)
+        if (direction === 'down') {
+          let srcRow, firstTargetRow, lastTargetRow
+          if (r.startRow === r.endRow) {
+            // Single-row selection: Excel fills from the row directly above.
+            srcRow = r.startRow - 1
+            if (srcRow < 0) continue
+            firstTargetRow = r.startRow
+            lastTargetRow = r.startRow
+          } else {
+            srcRow = r.startRow
+            firstTargetRow = r.startRow + 1
+            lastTargetRow = r.endRow
+          }
+          for (let ci = r.startCol; ci <= r.endCol; ci++) {
+            const col = this.leafCols[ci]
+            if (!col) continue
+            const srcVal = oldData[srcRow] ? oldData[srcRow][col.key] : ''
+            for (let ri = firstTargetRow; ri <= lastTargetRow; ri++) {
+              if (!this.isCellEditable(ri, ci)) continue
+              const v = this._coerceCellValue(ci, this._applyColMask(ci, srcVal))
+              if (!this.isCellValueValid(ri, ci, v)) { skipped.push({ row: ri, col: ci, value: v }); continue }
+              if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }
+              newData[ri][col.key] = v
+            }
+          }
+          appliedRanges.push({
+            sourceRange: { startRow: srcRow, endRow: srcRow, startCol: r.startCol, endCol: r.endCol },
+            targetRange: { startRow: firstTargetRow, endRow: lastTargetRow, startCol: r.startCol, endCol: r.endCol }
+          })
+        } else {
+          let srcCol, firstTargetCol, lastTargetCol
+          if (r.startCol === r.endCol) {
+            // Single-column selection: Excel fills from the column directly to the left.
+            srcCol = r.startCol - 1
+            if (srcCol < 0) continue
+            firstTargetCol = r.startCol
+            lastTargetCol = r.startCol
+          } else {
+            srcCol = r.startCol
+            firstTargetCol = r.startCol + 1
+            lastTargetCol = r.endCol
+          }
+          const srcColDef = this.leafCols[srcCol]
+          for (let ri = r.startRow; ri <= r.endRow; ri++) {
+            const srcVal = srcColDef && oldData[ri] ? oldData[ri][srcColDef.key] : ''
+            for (let ci = firstTargetCol; ci <= lastTargetCol; ci++) {
+              const col = this.leafCols[ci]
+              if (!col || !this.isCellEditable(ri, ci)) continue
+              const v = this._coerceCellValue(ci, this._applyColMask(ci, srcVal))
+              if (!this.isCellValueValid(ri, ci, v)) { skipped.push({ row: ri, col: ci, value: v }); continue }
+              if (newData[ri] === oldData[ri]) newData[ri] = { ...oldData[ri] }
+              newData[ri][col.key] = v
+            }
+          }
+          appliedRanges.push({
+            sourceRange: { startRow: r.startRow, endRow: r.endRow, startCol: srcCol, endCol: srcCol },
+            targetRange: { startRow: r.startRow, endRow: r.endRow, startCol: firstTargetCol, endCol: lastTargetCol }
+          })
+        }
+      }
+
+      if (!appliedRanges.length) return
+
+      if (this.strictBulkValidation && skipped.length > 0) {
+        this._emitBulkValidationError(skipped, true)
+        return
+      }
+
+      this._emitDataChange(oldData, newData)
+      for (const ar of appliedRanges) {
+        this.$emit('fill', { sourceRange: ar.sourceRange, targetRange: ar.targetRange, values: newData })
+      }
+      if (skipped.length > 0) this._emitBulkValidationError(skipped, false)
+
+      // See pasteAt's/commitFillDrag's _fireCellCallbacksForRange call — same
+      // nextTick deferral reasoning (col.onInput/onSelect after the DOM settles).
+      await this.$nextTick()
+      for (const ar of appliedRanges) {
+        this._fireCellCallbacksForRange(oldData, newData, ar.targetRange.startRow, ar.targetRange.endRow, ar.targetRange.startCol, ar.targetRange.endCol)
+      }
+    },
+
+    fillDown() { return this._fillAxis('down') },
+    fillRight() { return this._fillAxis('right') },
+
     // =========================================================
     // COPY / PASTE (3.4)
     // =========================================================
@@ -6308,14 +6433,18 @@ const ExcelGridComponent = {
     // turns it into a real version next time the grid mounts.
     _scheduleBufferWrite(data) {
       if (!this.localSyncKey) return
+      const key = this.localSyncKey // captured now, not re-read 800ms later —
+      // a host that swaps localSyncKey mid-edit (rare, but now reactive, see
+      // the localSyncKey watcher above) must not have this land under the
+      // NEW key with the OLD key's data.
       clearTimeout(this._bufferWriteTimer)
-      this._bufferWriteTimer = setTimeout(() => { this._writeBufferNow(data) }, 800)
+      this._bufferWriteTimer = setTimeout(() => { this._writeBufferNow(key, data) }, 800)
     },
 
-    async _writeBufferNow(data) {
-      if (!this.localSyncKey) return
+    async _writeBufferNow(key, data) {
+      if (!key) return
       try {
-        await putBuffer(this.localSyncKey, data)
+        await putBuffer(key, data)
       } catch (error) {
         this.$emit('local-sync-error', { action: 'save', error })
       }
@@ -6405,7 +6534,7 @@ const ExcelGridComponent = {
       // the version-store write below is best-effort on top of it, reliable
       // for the common case (tab switch/background, page stays alive).
       clearTimeout(this._bufferWriteTimer)
-      this._writeBufferNow(data)
+      this._writeBufferNow(this.localSyncKey, data)
       try {
         const hash = sync ? hashRows(data) : await hashRowsAsync(data)
         if (this.data !== data) return // data changed again mid-hash — a later flush will catch it