216 lines
8.9 KiB
JavaScript
216 lines
8.9 KiB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
};
|
|
import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
|
|
import { html } from "lit";
|
|
import { customElement, property, state } from "lit/decorators.js";
|
|
import * as XLSX from "xlsx";
|
|
import { i18n } from "../../utils/i18n.js";
|
|
import { ArtifactElement } from "./ArtifactElement.js";
|
|
let ExcelArtifact = class ExcelArtifact extends ArtifactElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this._content = "";
|
|
this.error = null;
|
|
}
|
|
get content() {
|
|
return this._content;
|
|
}
|
|
set content(value) {
|
|
this._content = value;
|
|
this.error = null;
|
|
this.requestUpdate();
|
|
}
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.style.display = "block";
|
|
this.style.height = "100%";
|
|
}
|
|
base64ToArrayBuffer(base64) {
|
|
// Remove data URL prefix if present
|
|
let base64Data = base64;
|
|
if (base64.startsWith("data:")) {
|
|
const base64Match = base64.match(/base64,(.+)/);
|
|
if (base64Match) {
|
|
base64Data = base64Match[1];
|
|
}
|
|
}
|
|
const binaryString = atob(base64Data);
|
|
const bytes = new Uint8Array(binaryString.length);
|
|
for (let i = 0; i < binaryString.length; i++) {
|
|
bytes[i] = binaryString.charCodeAt(i);
|
|
}
|
|
return bytes.buffer;
|
|
}
|
|
decodeBase64() {
|
|
let base64Data = this._content;
|
|
if (this._content.startsWith("data:")) {
|
|
const base64Match = this._content.match(/base64,(.+)/);
|
|
if (base64Match) {
|
|
base64Data = base64Match[1];
|
|
}
|
|
}
|
|
const binaryString = atob(base64Data);
|
|
const bytes = new Uint8Array(binaryString.length);
|
|
for (let i = 0; i < binaryString.length; i++) {
|
|
bytes[i] = binaryString.charCodeAt(i);
|
|
}
|
|
return bytes;
|
|
}
|
|
getMimeType() {
|
|
const ext = this.filename.split(".").pop()?.toLowerCase();
|
|
if (ext === "xls")
|
|
return "application/vnd.ms-excel";
|
|
return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
|
}
|
|
getHeaderButtons() {
|
|
return html `
|
|
<div class="flex items-center gap-1">
|
|
${DownloadButton({
|
|
content: this.decodeBase64(),
|
|
filename: this.filename,
|
|
mimeType: this.getMimeType(),
|
|
title: i18n("Download"),
|
|
})}
|
|
</div>
|
|
`;
|
|
}
|
|
async updated(changedProperties) {
|
|
super.updated(changedProperties);
|
|
if (changedProperties.has("_content") && this._content && !this.error) {
|
|
await this.renderExcel();
|
|
}
|
|
}
|
|
async renderExcel() {
|
|
const container = this.querySelector("#excel-container");
|
|
if (!container || !this._content)
|
|
return;
|
|
try {
|
|
const arrayBuffer = this.base64ToArrayBuffer(this._content);
|
|
const workbook = XLSX.read(arrayBuffer, { type: "array" });
|
|
container.innerHTML = "";
|
|
const wrapper = document.createElement("div");
|
|
wrapper.className = "overflow-auto h-full flex flex-col";
|
|
container.appendChild(wrapper);
|
|
// Create tabs for multiple sheets
|
|
if (workbook.SheetNames.length > 1) {
|
|
const tabContainer = document.createElement("div");
|
|
tabContainer.className = "flex gap-2 mb-4 border-b border-border sticky top-0 bg-background z-10";
|
|
const sheetContents = [];
|
|
workbook.SheetNames.forEach((sheetName, index) => {
|
|
// Create tab button
|
|
const tab = document.createElement("button");
|
|
tab.textContent = sheetName;
|
|
tab.className =
|
|
index === 0
|
|
? "px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary"
|
|
: "px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-b-2 hover:border-border transition-colors";
|
|
// Create sheet content
|
|
const sheetDiv = document.createElement("div");
|
|
sheetDiv.style.display = index === 0 ? "flex" : "none";
|
|
sheetDiv.className = "flex-1 overflow-auto";
|
|
sheetDiv.appendChild(this.renderExcelSheet(workbook.Sheets[sheetName], sheetName));
|
|
sheetContents.push(sheetDiv);
|
|
// Tab click handler
|
|
tab.onclick = () => {
|
|
// Update tab styles
|
|
tabContainer.querySelectorAll("button").forEach((btn, btnIndex) => {
|
|
if (btnIndex === index) {
|
|
btn.className = "px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary";
|
|
}
|
|
else {
|
|
btn.className =
|
|
"px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-b-2 hover:border-border transition-colors";
|
|
}
|
|
});
|
|
// Show/hide sheets
|
|
sheetContents.forEach((content, contentIndex) => {
|
|
content.style.display = contentIndex === index ? "flex" : "none";
|
|
});
|
|
};
|
|
tabContainer.appendChild(tab);
|
|
});
|
|
wrapper.appendChild(tabContainer);
|
|
sheetContents.forEach((content) => {
|
|
wrapper.appendChild(content);
|
|
});
|
|
}
|
|
else {
|
|
// Single sheet
|
|
const sheetName = workbook.SheetNames[0];
|
|
wrapper.appendChild(this.renderExcelSheet(workbook.Sheets[sheetName], sheetName));
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error("Error rendering Excel:", error);
|
|
this.error = error?.message || i18n("Failed to load spreadsheet");
|
|
}
|
|
}
|
|
renderExcelSheet(worksheet, sheetName) {
|
|
const sheetDiv = document.createElement("div");
|
|
// Generate HTML table
|
|
const htmlTable = XLSX.utils.sheet_to_html(worksheet, { id: `sheet-${sheetName}` });
|
|
const tempDiv = document.createElement("div");
|
|
tempDiv.innerHTML = htmlTable;
|
|
// Find and style the table
|
|
const table = tempDiv.querySelector("table");
|
|
if (table) {
|
|
table.className = "w-full border-collapse text-foreground";
|
|
// Style all cells
|
|
table.querySelectorAll("td, th").forEach((cell) => {
|
|
const cellEl = cell;
|
|
cellEl.className = "border border-border px-3 py-2 text-sm text-left";
|
|
});
|
|
// Style header row
|
|
const headerCells = table.querySelectorAll("thead th, tr:first-child td");
|
|
if (headerCells.length > 0) {
|
|
headerCells.forEach((th) => {
|
|
const thEl = th;
|
|
thEl.className =
|
|
"border border-border px-3 py-2 text-sm font-semibold bg-muted text-foreground sticky top-0";
|
|
});
|
|
}
|
|
// Alternate row colors
|
|
table.querySelectorAll("tbody tr:nth-child(even)").forEach((row) => {
|
|
const rowEl = row;
|
|
rowEl.className = "bg-muted/30";
|
|
});
|
|
sheetDiv.appendChild(table);
|
|
}
|
|
return sheetDiv;
|
|
}
|
|
render() {
|
|
if (this.error) {
|
|
return html `
|
|
<div class="h-full flex items-center justify-center bg-background p-4">
|
|
<div class="bg-destructive/10 border border-destructive text-destructive p-4 rounded-lg max-w-2xl">
|
|
<div class="font-medium mb-1">${i18n("Error loading spreadsheet")}</div>
|
|
<div class="text-sm opacity-90">${this.error}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
return html `
|
|
<div class="h-full flex flex-col bg-background overflow-auto">
|
|
<div id="excel-container" class="flex-1 overflow-auto"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
__decorate([
|
|
property({ type: String })
|
|
], ExcelArtifact.prototype, "_content", void 0);
|
|
__decorate([
|
|
state()
|
|
], ExcelArtifact.prototype, "error", void 0);
|
|
ExcelArtifact = __decorate([
|
|
customElement("excel-artifact")
|
|
], ExcelArtifact);
|
|
export { ExcelArtifact };
|
|
//# sourceMappingURL=ExcelArtifact.js.map
|