vue2-excel-grid 2.2.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.2.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/ExcelGrid.vue

@@ -1292,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
@@ -6098,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)
     },

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>