vue2-excel-grid 2.1.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "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"
     />
@@ -1290,6 +1292,19 @@ const ExcelGridComponent = {
     /** Extra custom toolbar buttons: [{ key, icon, title, onClick(event, gridApi) }] */
     toolbarButtons: { type: Array, default: () => [] },
 
+    /**
+     * Print (`printGrid()`/toolbar "Print" tugmasi) chiqishida jadval tepasida,
+     * markazda ko'rinadigan sarlavha. `null` (standart) — sarlavha umuman
+     * render qilinmaydi.
+     * @property {String} title - sarlavha matni (bo'sh/undefined bo'lsa render qilinmaydi)
+     * @property {Object} [style] - Vue :style uslubidagi obyekt (camelCase),
+     *   standart markazlashtirilgan/qalin uslub USTIGA qo'shiladi
+     * @property {String} [class] - qo'shimcha CSS klass nomi(lari)
+     * @example
+     * <excel-grid :print-title="{ title: 'Talabalar ro\'yxati', style: { color: '#1a73e8' } }" />
+     */
+    printTitle: { type: Object, default: null },
+
     /**
      * Locks the entire grid: blocks all edits (typing, paste, fill, delete,
      * checkbox, select/treeSelect) and structural changes (resize, column
@@ -4298,7 +4313,8 @@ const ExcelGridComponent = {
         rawOptions: this.resolveOptionsArray(col, ri, ci),
         currentValue,
         rect: rectObj,
-        enableSearch: !!col.enableSearch
+        enableSearch: !!col.enableSearch,
+        clearable: col.clearable !== false
       }
     },
 
@@ -4330,7 +4346,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
@@ -6092,7 +6111,8 @@ const ExcelGridComponent = {
           return String(this.getCellDisplayValue(ci, this.getCellValue(ri, ci), ri))
         },
         showFooter: this.hasFooter,
-        getFooterText: ci => this.getColumnTotalDisplay(ci)
+        getFooterText: ci => this.getColumnTotalDisplay(ci),
+        printTitle: this.printTitle
       })
       this._openPrintFrame(html)
     },
@@ -8268,6 +8288,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

package/src/utils/printTable.js

@@ -14,6 +14,15 @@ function escapeHtml(value) {
     .replace(/"/g, '"')
 }
 
+// Serializes a Vue :style-shaped object (camelCase keys) into a CSS string —
+// this file builds a raw HTML document, so there's no Vue runtime here to do
+// the :style -> style="" conversion automatically.
+function styleObjToCss(styleObj) {
+  return Object.entries(styleObj)
+    .map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}:${v}`)
+    .join(';')
+}
+
 // Above this many visible columns, a portrait page can't fit them without
 // crushing every column to near-zero width — switch to landscape instead.
 const LANDSCAPE_COL_THRESHOLD = 6
@@ -38,6 +47,8 @@ function sizeTierFor(colCount) {
  * @param {(rowIndex:number, colIndex:number) => string} opts.getCellText
  * @param {boolean} opts.showFooter
  * @param {(colIndex:number) => string} opts.getFooterText
+ * @param {Object} [opts.printTitle] - { title, style, class } — rendered centered above the
+ *   table when `title` is non-empty; omitted (or empty title) renders nothing
  * @returns {string} full HTML document
  */
 export function buildPrintTableHtml({
@@ -49,7 +60,8 @@ export function buildPrintTableHtml({
   colWidths,
   getCellText,
   showFooter = false,
-  getFooterText
+  getFooterText,
+  printTitle = null
 }) {
   const exportCols = leafCols.filter((col, idx) => !hiddenColSet.has(idx))
   const exportKeySet = new Set(exportCols.map(c => c.key))
@@ -161,6 +173,15 @@ export function buildPrintTableHtml({
   const totalWidth = adjustedWidths.reduce((sum, w) => sum + w, 0) || 1
   const colgroupHtml = '<colgroup>' + adjustedWidths.map(w => `<col style="width:${(w / totalWidth * 100).toFixed(3)}%">`).join('') + '</colgroup>'
 
+  // ── Optional host-supplied title, centered above the table. The default
+  // .eg-print-title rule (below) sets the centered/bold look; a host style
+  // object is serialized as this element's OWN inline style, which wins over
+  // the stylesheet rule per normal CSS cascade — so it only overrides what
+  // the host actually specifies, the rest of the default look stays. ────────
+  const titleHtml = (printTitle && printTitle.title)
+    ? `<div class="eg-print-title${printTitle.class ? ' ' + escapeHtml(printTitle.class) : ''}"${printTitle.style ? ` style="${escapeHtml(styleObjToCss(printTitle.style))}"` : ''}>${escapeHtml(printTitle.title)}</div>`
+    : ''
+
   return `<!DOCTYPE html>
 <html>
 <head>
@@ -188,10 +209,12 @@ th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 td { word-break: normal; overflow-wrap: break-word; }
 thead th { background: #f0f0f0; font-weight: bold; text-align: center; }
 tfoot td { font-weight: bold; background: #f7f7f7; }
+.eg-print-title { text-align: center; font-weight: bold; font-size: 20px; margin-bottom: 12px; }
 @page { size: ${orientation}; margin: 12mm; }
 </style>
 </head>
 <body>
+${titleHtml}
 <table>
 ${colgroupHtml}
 <thead>${theadRowsHtml}</thead>