vue2-excel-grid 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "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
@@ -3635,46 +3648,57 @@ const ExcelGridComponent = {
         return
       }
       const key = e.key
-
-      if ((e.ctrlKey || e.metaKey) && key === 'z' && !e.shiftKey) {
+      // Layout-independent letter for the Ctrl/Cmd shortcuts below (z/y/a/c/x/v/d/r).
+      // e.key reports the character a layout PRODUCES — on a non-Latin layout
+      // (Cyrillic, etc.) the physical C key can report e.key: 'с' (Cyrillic es)
+      // even with Ctrl held and the physical key/position unchanged, silently
+      // breaking `key === 'c'`. e.code is the physical key position and is
+      // immune to layout, so it's used here instead wherever available;
+      // falls back to e.key when e.code is missing (e.g. synthetic events in
+      // tests that don't set it).
+      const shortcutKey = (e.code && e.code.length === 4 && e.code.slice(0, 3) === 'Key')
+        ? e.code.charAt(3).toLowerCase()
+        : key
+
+      if ((e.ctrlKey || e.metaKey) && shortcutKey === 'z' && !e.shiftKey) {
         e.preventDefault()
         this.undo()
         return
       }
-      if ((e.ctrlKey || e.metaKey) && (key === 'y' || (key === 'z' && e.shiftKey))) {
+      if ((e.ctrlKey || e.metaKey) && (shortcutKey === 'y' || (shortcutKey === 'z' && e.shiftKey))) {
         e.preventDefault()
         this.redo()
         return
       }
 
-      if (key === 'a' && (e.ctrlKey || e.metaKey)) {
+      if (shortcutKey === 'a' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault()
         this.selectAll()
         return
       }
 
-      if (key === 'c' && (e.ctrlKey || e.metaKey)) {
+      if (shortcutKey === 'c' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault()
         this.copySelection()
         return
       }
-      if (key === 'x' && (e.ctrlKey || e.metaKey)) {
+      if (shortcutKey === 'x' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault()
         this.cutSelection()
         return
       }
-      if (key === 'v' && (e.ctrlKey || e.metaKey)) {
+      if (shortcutKey === 'v' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault()
         this.pasteAt(this.activeCell.row, this.activeCell.col)
         return
       }
 
-      if (key === 'd' && (e.ctrlKey || e.metaKey)) {
+      if (shortcutKey === 'd' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault()
         this.fillDown()
         return
       }
-      if (key === 'r' && (e.ctrlKey || e.metaKey)) {
+      if (shortcutKey === 'r' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault()
         this.fillRight()
         return
@@ -6098,7 +6122,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>