vue2-excel-grid 2.0.2 → 2.2.0

package/package.json

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

package/src/components/EgSelect.vue

@@ -57,6 +57,9 @@
         {{ opt.label }}
       </div>
       <div v-if="!filteredOptions.length" class="eg-select-empty">{{ t.noOptions }}</div>
+      <div v-if="clearable && selectedOpt" class="eg-select-footer">
+        <button class="eg-select-btn eg-select-btn--clear" tabindex="-1" @mousedown.prevent="pickClear">{{ t.clear }}</button>
+      </div>
     </template>
 
     <!-- Options panel in standalone mode (floating dropdown below trigger) -->
@@ -97,6 +100,9 @@
         {{ opt.label }}
       </div>
       <div v-if="!filteredOptions.length" class="eg-select-empty">{{ t.noOptions }}</div>
+      <div v-if="clearable && selectedOpt" class="eg-select-footer">
+        <button class="eg-select-btn eg-select-btn--clear" tabindex="-1" @mousedown.prevent="pickClear">{{ t.clear }}</button>
+      </div>
     </div>
 
     <div v-if="hoverTooltip" class="eg-option-tooltip" :style="hoverTooltipStyle">{{ hoverTooltip.text }}</div>
@@ -129,7 +135,8 @@ export default {
     dropdownOnly: { type: Boolean, default: false },
     triggerRect: { type: Object, default: null },
     size: { type: String, default: 'middle' },
-    locale: { type: String, default: 'en' }
+    locale: { type: String, default: 'en' },
+    clearable: { type: Boolean, default: true }
   },
   data() {
     return {
@@ -239,6 +246,11 @@ export default {
         this.highlight = -1
       }
     },
+    // Reuses pickOption's write path (same input/select emit + dropdown-close
+    // handling) — a clear is just "pick the empty option", not a separate flow.
+    pickClear() {
+      this.pickOption({ value: '', label: '' })
+    },
     onSearch(e) {
       this._hideTooltip()
       this.searchQuery = e.target.value
@@ -535,6 +547,29 @@ export default {
   margin-top: 3px;
 }
 
+/* "Clear" footer — same recipe as EgDatePicker.vue's .eg-dp-footer/.eg-dp-btn,
+   just a single right-aligned button (no "Today" equivalent here). Also
+   duplicated in ExcelGrid.vue's own <style> — see the comment above
+   .eg-select-wrapper there for why, and keep both copies token-identical. */
+.eg-select-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 6px 6px;
+  border-top: 1px solid var(--eg-color-border, var(--eg-color-border-default));
+}
+.eg-select-btn {
+  background: none;
+  border: 1px solid var(--eg-color-border, var(--eg-color-border-default));
+  border-radius: var(--eg-radius, var(--eg-radius-default));
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--eg-color-text, var(--eg-color-text-default));
+}
+.eg-select-btn:hover { background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default)); }
+.eg-select-btn--clear { color: var(--eg-color-danger, #c62828); border-color: var(--eg-color-danger, #f1b0b0); }
+.eg-select-btn--clear:hover { background: #fff0f0; }
+
 /* Themed option/trigger tooltip — same recipe as .eg-select-dropdown
    (cell-bg/border/radius) plus .eg-validation-tooltip's shadow, so it reads
    as part of the grid's own chrome in every built-in theme instead of a

package/src/components/EgTreeSelect.vue

@@ -63,6 +63,9 @@
         {{ opt.label }}
       </div>
       <div v-if="!filteredOptions.length" class="eg-select-empty">{{ t.noOptions }}</div>
+      <div v-if="clearable && selectedLabel != null" class="eg-select-footer">
+        <button class="eg-select-btn eg-select-btn--clear" tabindex="-1" @mousedown.prevent="pickClear">{{ t.clear }}</button>
+      </div>
     </template>
 
     <!-- Options panel in standalone mode -->
@@ -110,6 +113,9 @@
         {{ opt.label }}
       </div>
       <div v-if="!filteredOptions.length" class="eg-select-empty">{{ t.noOptions }}</div>
+      <div v-if="clearable && selectedLabel != null" class="eg-select-footer">
+        <button class="eg-select-btn eg-select-btn--clear" tabindex="-1" @mousedown.prevent="pickClear">{{ t.clear }}</button>
+      </div>
     </div>
 
     <div v-if="hoverTooltip" class="eg-option-tooltip" :style="hoverTooltipStyle">{{ hoverTooltip.text }}</div>
@@ -140,7 +146,8 @@ export default {
     dropdownOnly: { type: Boolean, default: false },
     triggerRect: { type: Object, default: null },
     size: { type: String, default: 'middle' },
-    locale: { type: String, default: 'en' }
+    locale: { type: String, default: 'en' },
+    clearable: { type: Boolean, default: true }
   },
   data() {
     return {
@@ -269,6 +276,11 @@ export default {
         this.highlight = -1
       }
     },
+    // Reuses pickOption's write path (same input/select emit + dropdown-close
+    // handling) — a clear is just "pick the empty option", not a separate flow.
+    pickClear() {
+      this.pickOption({ value: '', label: '' })
+    },
     toggleNode(idx) {
       const opt = this.flatOptions[idx]
       if (!opt || !opt.hasChildren) return

package/src/components/ExcelGrid.vue

@@ -854,6 +854,7 @@
       :dropdown-only="true"
       :size="internalSize"
       :locale="locale"
+      :clearable="selectDropdown.clearable"
       @select="onComponentSelect"
       @close="closeSelectDropdown"
     />
@@ -871,6 +872,7 @@
       :dropdown-only="true"
       :size="internalSize"
       :locale="locale"
+      :clearable="selectDropdown.clearable"
       @select="onComponentSelect"
       @close="closeSelectDropdown"
     />
@@ -3667,6 +3669,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()
@@ -4287,7 +4300,8 @@ const ExcelGridComponent = {
         rawOptions: this.resolveOptionsArray(col, ri, ci),
         currentValue,
         rect: rectObj,
-        enableSearch: !!col.enableSearch
+        enableSearch: !!col.enableSearch,
+        clearable: col.clearable !== false
       }
     },
 
@@ -4319,7 +4333,10 @@ const ExcelGridComponent = {
       const { row, col } = this.selectDropdown
       const colDef = this.leafCols[col]
       if (colDef) {
-        if (!this.isCellValueValid(row, col, value)) {
+        // Clearing (value === '') always goes through, same as onDatePick()'s
+        // empty-string bypass — "no selection" is a valid state regardless of
+        // what cellValidator requires of a real picked value.
+        if (value !== '' && !this.isCellValueValid(row, col, value)) {
           this._showInvalidCell(row, col, value)
           this.closeSelectDropdown()
           return
@@ -5051,6 +5068,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)
     // =========================================================
@@ -8156,6 +8274,24 @@ export default ExcelGridComponent
   word-break: break-word;
   z-index: 10000;
 }
+.eg-select-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 6px 6px;
+  border-top: 1px solid var(--eg-color-border, var(--eg-color-border-default));
+}
+.eg-select-btn {
+  background: none;
+  border: 1px solid var(--eg-color-border, var(--eg-color-border-default));
+  border-radius: var(--eg-radius, var(--eg-radius-default));
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--eg-color-text, var(--eg-color-text-default));
+}
+.eg-select-btn:hover { background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default)); }
+.eg-select-btn--clear { color: var(--eg-color-danger, #c62828); border-color: var(--eg-color-danger, #f1b0b0); }
+.eg-select-btn--clear:hover { background: #fff0f0; }
 /* Grid `size` overrides — must live in this *unscoped* style block, not the
    scoped one above: .eg-select-option is rendered by the separate EgSelect /
    EgTreeSelect components, so Vue's scoped-CSS attribute (added only to this