vue2-excel-grid 1.0.0

package/src/index.js

@@ -0,0 +1,9 @@
+import ExcelGrid from './components/ExcelGrid.vue'
+
+export { ExcelGrid }
+
+export default {
+  install(Vue) {
+    Vue.component('ExcelGrid', ExcelGrid)
+  }
+}

package/src/utils/clipboard.js

@@ -0,0 +1,141 @@
+/**
+ * Clipboard utilities: TSV serialization/deserialization
+ */
+
+/**
+ * Serialize a 2D array of values to TSV (tab-separated values) string
+ * @param {Array<Array>} matrix
+ * @returns {string}
+ */
+export function matrixToTSV(matrix) {
+  return matrix
+    .map(row => row.map(cell => {
+      const s = cell == null ? '' : String(cell)
+      // Escape tabs and newlines
+      return s.replace(/\t/g, ' ').replace(/\r?\n/g, ' ')
+    }).join('\t'))
+    .join('\n')
+}
+
+/**
+ * Parse a TSV string into a 2D array
+ * @param {string} tsv
+ * @returns {Array<Array<string>>}
+ */
+export function tsvToMatrix(tsv) {
+  if (!tsv) return [['']]
+  return tsv.split('\n').map(row => row.split('\t'))
+}
+
+/**
+ * Extract a 2D matrix from grid data for a given range.
+ *
+ * @param {Array} data       - rows array of plain objects
+ * @param {Array} leafCols   - flat leaf columns (with .key)
+ * @param {Object} range     - { startRow, endRow, startCol, endCol }
+ * @param {boolean} rawOnly  - always use raw value (for copy/export)
+ * @returns {Array<Array>}
+ */
+export function extractMatrix(data, leafCols, range) {
+  const matrix = []
+  for (let r = range.startRow; r <= range.endRow; r++) {
+    const row = []
+    for (let c = range.startCol; c <= range.endCol; c++) {
+      const col = leafCols[c]
+      const val = col && data[r] ? data[r][col.key] : ''
+      row.push(val !== undefined ? val : '')
+    }
+    matrix.push(row)
+  }
+  return matrix
+}
+
+/**
+ * Transpose a 2D matrix (rows ↔ cols)
+ */
+export function transposeMatrix(matrix) {
+  if (!matrix || matrix.length === 0) return []
+  const rows = matrix.length
+  const cols = matrix[0].length
+  return Array.from({ length: cols }, (_, c) =>
+    Array.from({ length: rows }, (_, r) => matrix[r][c])
+  )
+}
+
+/**
+ * Tile a matrix to fill a larger target area — Excel-style paste broadcast.
+ *
+ * The target dimensions must be exact multiples of the source dimensions,
+ * otherwise the original matrix is returned unchanged (caller decides fallback).
+ *
+ * Examples:
+ *   tileMatrix([[1]], 3, 3)          → [[1,1,1],[1,1,1],[1,1,1]]   (1×1 → 3×3)
+ *   tileMatrix([[1,2]], 2, 4)        → [[1,2,1,2],[1,2,1,2]]       (1×2 → 2×4)
+ *   tileMatrix([[1],[2]], 4, 2)      → [[1,1],[2,2],[1,1],[2,2]]   (2×1 → 4×2)
+ *
+ * @param {Array<Array>} matrix      - source matrix
+ * @param {number}       targetRows  - desired row count
+ * @param {number}       targetCols  - desired col count
+ * @returns {Array<Array>}
+ */
+export function tileMatrix(matrix, targetRows, targetCols) {
+  const srcRows = matrix.length
+  const srcCols = matrix[0] ? matrix[0].length : 0
+  if (!srcRows || !srcCols) return matrix
+  if (targetRows % srcRows !== 0 || targetCols % srcCols !== 0) return matrix
+
+  const result = []
+  for (let r = 0; r < targetRows; r++) {
+    const row = []
+    for (let c = 0; c < targetCols; c++) {
+      row.push(matrix[r % srcRows][c % srcCols])
+    }
+    result.push(row)
+  }
+  return result
+}
+
+/**
+ * Apply a 2D matrix of values into a data array starting at (targetRow, targetCol).
+ * Returns a new data array (immutable update).
+ *
+ * @param {Array} data
+ * @param {Array} leafCols
+ * @param {number} targetRow
+ * @param {number} targetCol
+ * @param {Array<Array>} matrix
+ * @param {string} mode  - 'all' | 'values' | 'formats'
+ * @param {Function|null} isEditable - (row, col) => boolean
+ * @param {Function|null} isValid    - (row, col, value) => boolean — false skips the cell (kept in `skipped`)
+ * @returns {{ newData, affectedRange, skipped }}
+ */
+export function applyMatrix(data, leafCols, targetRow, targetCol, matrix, mode = 'all', isEditable = null, isValid = null) {
+  const newData = data.slice()  // O(n) pointer copy — only affected rows get new objects
+  const endRow = Math.min(targetRow + matrix.length - 1, data.length - 1)
+  const endCol = Math.min(targetCol + (matrix[0] ? matrix[0].length - 1 : 0), leafCols.length - 1)
+  const skipped = []
+
+  for (let r = targetRow; r <= endRow; r++) {
+    const matRow = matrix[r - targetRow]
+    if (!matRow) continue
+    let rowCopy = null
+    for (let c = targetCol; c <= endCol; c++) {
+      const col = leafCols[c]
+      if (!col) continue
+      if (isEditable ? !isEditable(r, c) : col.editable === false) continue
+      if (mode === 'all' || mode === 'values') {
+        const val = matRow[c - targetCol]
+        const v = val !== undefined ? val : ''
+        if (isValid && !isValid(r, c, v)) { skipped.push({ row: r, col: c, value: v }); continue }
+        if (!rowCopy) { rowCopy = { ...(data[r] || {}) }; newData[r] = rowCopy }
+        rowCopy[col.key] = v
+      }
+    }
+  }
+
+  return {
+    newData,
+    affectedRange: { startRow: targetRow, endRow, startCol: targetCol, endCol },
+    skipped
+  }
+}

package/src/utils/excelExport.js

@@ -0,0 +1,144 @@
+/**
+ * Excel export utility using SheetJS (xlsx)
+ */
+import * as XLSX from 'xlsx'
+import { flattenColumns, buildHeaderRows, columnTreeDepth, columnTotalWidth } from './headerTree.js'
+import { normalizeRange } from './selection.js'
+
+/**
+ * Export grid data to .xlsx and trigger browser download.
+ *
+ * @param {Object} opts
+ * @param {Array}  opts.data           - rows array of plain objects
+ * @param {Array}  opts.columns        - column config (may be nested)
+ * @param {Array}  opts.leafCols       - flat leaf columns
+ * @param {Array}  opts.merges         - merge descriptors { startRow, startCol, endRow, endCol }
+ * @param {Set}    opts.hiddenColSet   - Set of hidden flat col indices
+ * @param {Set}    opts.hiddenRowSet   - Set of hidden row indices
+ * @param {Object} opts.range          - { startRow, endRow, startCol, endCol } for 'selection' scope
+ * @param {string} opts.filename
+ * @param {string} opts.sheetName
+ * @param {'all'|'selection'} opts.scope
+ * @param {boolean} opts.includeHidden
+ */
+export function exportToExcel(opts) {
+  const {
+    data,
+    columns,
+    leafCols,
+    merges = [],
+    hiddenColSet = new Set(),
+    hiddenRowSet = new Set(),
+    range = null,
+    filename = 'export.xlsx',
+    sheetName = 'Sheet1',
+    scope = 'all',
+    includeHidden = false
+  } = opts
+
+  // Determine which leaf columns to export
+  const exportCols = leafCols.filter((col, idx) => {
+    if (!includeHidden && hiddenColSet.has(idx)) return false
+    if (scope === 'selection' && range) {
+      const r = normalizeRange(range)
+      if (idx < r.startCol || idx > r.endCol) return false
+    }
+    return true
+  })
+
+  // Determine which rows to export
+  let rowStart = 0
+  let rowEnd = data.length - 1
+  if (scope === 'selection' && range) {
+    const r = normalizeRange(range)
+    rowStart = r.startRow
+    rowEnd = r.endRow
+  }
+  const exportRows = []
+  for (let i = rowStart; i <= rowEnd; i++) {
+    if (!includeHidden && hiddenRowSet.has(i)) continue
+    exportRows.push({ rowIndex: i, data: data[i] })
+  }
+
+  // Build header rows for multi-level headers
+  const totalDepth = columnTreeDepth(columns)
+  const headerRows = buildHeaderRows(columns, totalDepth)
+
+  // Create workbook
+  const wb = XLSX.utils.book_new()
+  const wsData = []
+
+  // Header rows
+  for (let hi = 0; hi < headerRows.length; hi++) {
+    const hRow = []
+    for (const cell of headerRows[hi]) {
+      if (cell.isGroup) {
+        // Group header — find which export cols fall under this group
+        const groupLeaves = flattenColumns(cell.column.children || [])
+        const relevantLeaves = groupLeaves.filter(l => exportCols.some(ec => ec.key === l.key))
+        if (relevantLeaves.length === 0) continue
+        hRow.push(cell.column.title || '')
+        for (let i = 1; i < relevantLeaves.length; i++) hRow.push(null) // merged cells placeholders
+      } else {
+        // Leaf header
+        if (!exportCols.some(ec => ec.key === cell.column.key)) continue
+        if (cell.rowspan > 1) {
+          // Push placeholder for sub-rows
+          hRow.push(cell.column.title || '')
+        } else {
+          hRow.push(cell.column.title || '')
+        }
+      }
+    }
+    wsData.push(hRow)
+  }
+
+  // Data rows
+  for (const { data: rowData } of exportRows) {
+    const row = exportCols.map(col => {
+      const v = rowData ? rowData[col.key] : ''
+      return v !== undefined ? v : ''
+    })
+    wsData.push(row)
+  }
+
+  const ws = XLSX.utils.aoa_to_sheet(wsData)
+
+  // Apply column widths (pixel → character width approximation: 1 char ≈ 7px)
+  ws['!cols'] = exportCols.map(col => ({ wch: Math.round((col.width || 100) / 7) }))
+
+  // Apply merges (offset by header rows)
+  const sheetMerges = []
+  for (const m of merges) {
+    const nm = normalizeRange(m)
+    const r = scope === 'selection' && range ? normalizeRange(range) : { startRow: 0, startCol: 0 }
+    if (scope === 'selection') {
+      if (nm.startRow < r.startRow || nm.endRow > r.endRow) continue
+      if (nm.startCol < r.startCol || nm.endCol > r.endCol) continue
+    }
+    // Find export col positions
+    const startColExport = exportCols.findIndex(c => {
+      const li = leafCols.indexOf(c)
+      return li === nm.startCol
+    })
+    const endColExport = exportCols.findIndex(c => {
+      const li = leafCols.indexOf(c)
+      return li === nm.endCol
+    })
+    if (startColExport < 0 || endColExport < 0) continue
+
+    // Row offset: header rows + rows before startRow that were exported
+    const rowsBefore = exportRows.filter(er => er.rowIndex < nm.startRow).length
+    const rowsBeforeEnd = exportRows.filter(er => er.rowIndex <= nm.endRow).length
+    sheetMerges.push({
+      s: { r: totalDepth + rowsBefore, c: startColExport },
+      e: { r: totalDepth + rowsBeforeEnd - 1, c: endColExport }
+    })
+  }
+  if (sheetMerges.length) ws['!merges'] = sheetMerges
+
+  XLSX.utils.book_append_sheet(wb, ws, sheetName)
+
+  // Trigger download
+  XLSX.writeFile(wb, filename)
+}

package/src/utils/excelExportWorker.worker.js

@@ -0,0 +1,140 @@
+/**
+ * Web Worker — Excel export.
+ * Builds the XLSX workbook off the main thread and returns a raw ArrayBuffer.
+ * The main thread receives it and triggers the browser download (DOM required).
+ *
+ * Protocol:
+ *   IN  postMessage({ data, columns, leafCols, merges,
+ *                     hiddenCols, hiddenRows, range,
+ *                     filename, sheetName, scope, includeHidden })
+ *   OUT postMessage({ type: 'result', buffer: ArrayBuffer, filename })  [transferred]
+ *   OUT postMessage({ type: 'error',  message: '' })
+ */
+import * as XLSX from 'xlsx'
+import { flattenColumns, buildHeaderRows, columnTreeDepth } from './headerTree.js'
+
+function normalizeRange(range) {
+  const r = range || {}
+  const sr = r.startRow == null ? 0 : r.startRow
+  const er = r.endRow   == null ? 0 : r.endRow
+  const sc = r.startCol == null ? 0 : r.startCol
+  const ec = r.endCol   == null ? 0 : r.endCol
+  return {
+    startRow: Math.min(sr, er),
+    endRow:   Math.max(sr, er),
+    startCol: Math.min(sc, ec),
+    endCol:   Math.max(sc, ec)
+  }
+}
+
+self.onmessage = function (e) {
+  const {
+    data       = [],
+    columns    = [],
+    leafCols   = [],
+    merges     = [],
+    hiddenCols = [],
+    hiddenRows = [],
+    range      = null,
+    filename   = 'export.xlsx',
+    sheetName  = 'Sheet1',
+    scope      = 'all',
+    includeHidden = false
+  } = e.data
+
+  try {
+    const hiddenColSet = new Set(hiddenCols)
+    const hiddenRowSet = new Set(hiddenRows)
+
+    // --- columns to export ---
+    const exportCols = leafCols.filter((col, idx) => {
+      if (!includeHidden && hiddenColSet.has(idx)) return false
+      if (scope === 'selection' && range) {
+        const r = normalizeRange(range)
+        if (idx < r.startCol || idx > r.endCol) return false
+      }
+      return true
+    })
+
+    // --- rows to export ---
+    let rowStart = 0
+    let rowEnd   = data.length - 1
+    if (scope === 'selection' && range) {
+      const r = normalizeRange(range)
+      rowStart = r.startRow
+      rowEnd   = r.endRow
+    }
+    const exportRows = []
+    for (let i = rowStart; i <= rowEnd; i++) {
+      if (!includeHidden && hiddenRowSet.has(i)) continue
+      exportRows.push({ rowIndex: i, data: data[i] })
+    }
+
+    // --- multi-level header rows ---
+    const totalDepth = columnTreeDepth(columns)
+    const headerRows = buildHeaderRows(columns, totalDepth)
+
+    const wsData = []
+
+    for (const hRow of headerRows) {
+      const row = []
+      for (const cell of hRow) {
+        if (cell.isGroup) {
+          const groupLeaves = flattenColumns(cell.column.children || [])
+          const relevant   = groupLeaves.filter(l => exportCols.some(ec => ec.key === l.key))
+          if (relevant.length === 0) continue
+          row.push(cell.column.title || '')
+          for (let i = 1; i < relevant.length; i++) row.push(null)
+        } else {
+          if (!exportCols.some(ec => ec.key === cell.column.key)) continue
+          row.push(cell.column.title || '')
+        }
+      }
+      wsData.push(row)
+    }
+
+    for (const { data: rowData } of exportRows) {
+      wsData.push(exportCols.map(col => {
+        const v = rowData ? rowData[col.key] : ''
+        return v !== undefined ? v : ''
+      }))
+    }
+
+    const ws = XLSX.utils.aoa_to_sheet(wsData)
+    ws['!cols'] = exportCols.map(col => ({ wch: Math.round((col.width || 100) / 7) }))
+
+    // --- merge cells ---
+    const sheetMerges = []
+    for (const m of merges) {
+      const nm = normalizeRange(m)
+      const selR = scope === 'selection' && range ? normalizeRange(range) : { startRow: 0, startCol: 0 }
+      if (scope === 'selection') {
+        if (nm.startRow < selR.startRow || nm.endRow > selR.endRow) continue
+        if (nm.startCol < selR.startCol || nm.endCol > selR.endCol) continue
+      }
+      const startC = exportCols.findIndex(c => leafCols.indexOf(c) === nm.startCol)
+      const endC   = exportCols.findIndex(c => leafCols.indexOf(c) === nm.endCol)
+      if (startC < 0 || endC < 0) continue
+
+      const rowsBefore    = exportRows.filter(er => er.rowIndex < nm.startRow).length
+      const rowsBeforeEnd = exportRows.filter(er => er.rowIndex <= nm.endRow).length
+      sheetMerges.push({
+        s: { r: totalDepth + rowsBefore,      c: startC },
+        e: { r: totalDepth + rowsBeforeEnd - 1, c: endC }
+      })
+    }
+    if (sheetMerges.length) ws['!merges'] = sheetMerges
+
+    const wb = XLSX.utils.book_new()
+    XLSX.utils.book_append_sheet(wb, ws, sheetName)
+
+    // XLSX.write returns Uint8Array with type:'array'; transfer its buffer.
+    const uint8  = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
+    // Slice to get an independent ArrayBuffer so we can transfer it safely.
+    const buffer = uint8.buffer.slice(uint8.byteOffset, uint8.byteOffset + uint8.byteLength)
+
+    self.postMessage({ type: 'result', buffer, filename }, [buffer])
+  } catch (err) {
+    self.postMessage({ type: 'error', message: err.message })
+  }
+}

package/src/utils/excelImport.js

@@ -0,0 +1,118 @@
+/**
+ * Excel/CSV import utility using SheetJS (xlsx)
+ */
+import * as XLSX from 'xlsx'
+import { flatLeaves, detectImportBounds, buildNestedColumns } from './excelImportCore.js'
+
+const CHUNK_SIZE = 2000
+
+function yieldToUI() {
+  return new Promise(resolve => setTimeout(resolve, 0))
+}
+
+/**
+ * Parse a File object and return grid-compatible data.
+ *
+ * @param {File} file
+ * @param {Array} existingColumns
+ * @param {Object} options
+ *   - sheetName {string}    — target sheet (default: first sheet)
+ *   - headerRow {number}    — 0-based index of first header row (overrides auto-detect)
+ *   - headerEndRow {number} — last header row for multi-row headers (overrides auto-detect)
+ *   - dataStartRow {number} — 0-based index of first data row (overrides auto-detect)
+ * @param {Function} onProgress — (percent: 0-100, message: string) => void
+ * @returns {Promise<{ data, columns, merges }>}
+ */
+export async function importFromFile(file, existingColumns, options = {}, onProgress) {
+  const report = (pct, msg) => onProgress && onProgress(pct, msg)
+
+  report(5, 'Fayl o\'qilmoqda...')
+  await yieldToUI()
+
+  const buffer = await file.arrayBuffer()
+
+  report(20, 'Excel tahlil qilinmoqda...')
+  await yieldToUI()
+
+  let workbook
+  try {
+    workbook = XLSX.read(buffer, { type: 'array', cellDates: true })
+  } catch (e) {
+    throw new Error('Excel fayl o\'qib bo\'lmadi: ' + e.message)
+  }
+
+  const { sheetName } = options
+  let sheet
+  if (sheetName) {
+    sheet = workbook.Sheets[sheetName]
+    if (!sheet) throw new Error(`Sheet "${sheetName}" topilmadi`)
+  } else {
+    const firstName = workbook.SheetNames[0]
+    if (!firstName) throw new Error('Workbook bo\'sh')
+    sheet = workbook.Sheets[firstName]
+  }
+
+  report(40, 'Ma\'lumotlar tayyorlanmoqda...')
+  await yieldToUI()
+
+  const aoa = XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false, defval: '' })
+  if (!aoa || aoa.length === 0) throw new Error('Sheet bo\'sh')
+
+  // `sheet['!merges']` row/col indices are sheet-absolute, but `aoa` is relative
+  // to the sheet's used range (e.g. starts at A2 instead of A1). Normalize merges
+  // to aoa-relative coordinates so they line up with header/data row indices below.
+  const usedRange = XLSX.utils.decode_range(sheet['!ref'] || 'A1:A1')
+  const rowOffset = usedRange.s.r
+  const colOffset = usedRange.s.c
+  const merges = (sheet['!merges'] || []).map(m => ({
+    s: { r: m.s.r - rowOffset, c: m.s.c - colOffset },
+    e: { r: m.e.r - rowOffset, c: m.e.c - colOffset }
+  }))
+
+  const detected = detectImportBounds(aoa, merges)
+  const headerRowIdx    = options.headerRow    != null ? options.headerRow    : detected.headerRow
+  const headerEndRowIdx = options.headerEndRow != null ? options.headerEndRow : detected.headerEndRow
+  const dataStartRowIdx = options.dataStartRow != null ? options.dataStartRow : detected.dataStartRow
+
+  const existingLeaves = flatLeaves(existingColumns)
+  const usedSlugs = new Set()
+
+  const { columns: newColumns, colMap } = buildNestedColumns(
+    aoa, headerRowIdx, headerEndRowIdx, merges,
+    existingLeaves, usedSlugs
+  )
+
+  const totalDataRows = Math.max(aoa.length - dataStartRowIdx, 0)
+  report(55, `Qatorlar qayta ishlanmoqda (0 / ${totalDataRows})...`)
+  await yieldToUI()
+
+  const data = []
+  for (let i = dataStartRowIdx; i < aoa.length; i += CHUNK_SIZE) {
+    const end = Math.min(i + CHUNK_SIZE, aoa.length)
+    for (let r = i; r < end; r++) {
+      const rowArr = aoa[r]
+      const obj = {}
+      for (const { key, colIndex } of colMap) {
+        obj[key] = rowArr[colIndex] !== undefined ? rowArr[colIndex] : ''
+      }
+      data.push(obj)
+    }
+    const processed = Math.min(end - dataStartRowIdx, totalDataRows)
+    const pct = 55 + Math.round(40 * processed / Math.max(totalDataRows, 1))
+    report(pct, `Qatorlar: ${processed} / ${totalDataRows}`)
+    await yieldToUI()
+  }
+
+  const dataMerges = merges
+    .filter(m => m.s.r >= dataStartRowIdx)
+    .map(m => ({
+      startRow: m.s.r - dataStartRowIdx,
+      startCol: m.s.c,
+      endRow:   m.e.r - dataStartRowIdx,
+      endCol:   m.e.c
+    }))
+    .filter(m => m.startRow >= 0 && m.startCol >= 0)
+
+  report(100, 'Tayyor!')
+  return { data, columns: newColumns, merges: dataMerges }
+}