From 49ef97508db9152bda70456656a75401577a6d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Fri, 8 Nov 2024 15:21:23 -0800 Subject: [PATCH] style spreadsheet cells properly --- demo/spreadsheet.html | 11 ++----- src/spreadsheet/spreadsheet.ts | 55 +++++++++++++++++++++++++++++----- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/demo/spreadsheet.html b/demo/spreadsheet.html index 09dfd74..c7ac377 100644 --- a/demo/spreadsheet.html +++ b/demo/spreadsheet.html @@ -14,15 +14,10 @@ position: relative; margin: 0; } - - s-table { - height: 100%; - width: 100%; - } - + @@ -129,12 +124,10 @@ diff --git a/src/spreadsheet/spreadsheet.ts b/src/spreadsheet/spreadsheet.ts index 69af4a7..fe73d24 100644 --- a/src/spreadsheet/spreadsheet.ts +++ b/src/spreadsheet/spreadsheet.ts @@ -90,6 +90,7 @@ s-columns, s-rows, s-body { } ::slotted(s-cell) { + box-sizing: border-box; align-items: center; background-color: rgb(255, 255, 255); display: flex; @@ -140,10 +141,18 @@ export function templateCells(numberOfRows: number, numberOfColumns: number, exp return cells.join('\n'); } +declare global { + interface HTMLElementTagNameMap { + 's-table': SpreadsheetTable; + } +} + export class SpreadsheetTable extends HTMLElement { static tagName = 's-table'; static register() { + SpreadsheetCell.register(); + SpreadsheetHeader.register(); customElements.define(this.tagName, this); } @@ -168,14 +177,33 @@ export class SpreadsheetTable extends HTMLElement { connectedCallback() { this.#shadow.textContent = ''; - const cells = this.querySelector('s-cell'); + const columnNames = new Set(); + const rowNames = new Set(); - const columnHeaders = Array.from({ length: 10 }) - .map((_, i) => `${getColumnName(i)}`) - .join(''); - const rowHeaders = Array.from({ length: 10 }) - .map((_, i) => `${i + 1}`) - .join(''); + const cells = this.querySelectorAll('s-cell'); + + cells.forEach((cell) => { + columnNames.add(cell.column); + rowNames.add(cell.row); + }); + + const columns = Array.from({ length: columnNames.size }).map((_, i) => getColumnName(i)); + const rows = Array.from({ length: rowNames.size }).map((_, i) => i + 1); + + const columnHeaders = columns.map((column) => `${column}`).join('\n'); + const rowHeaders = rows.map((row) => `${row}`).join('\n'); + + const style = ``; this.#shadow.innerHTML = ` @@ -183,6 +211,7 @@ export class SpreadsheetTable extends HTMLElement { ${rowHeaders} + ${style} `; this.#textarea = this.#shadow.querySelector('textarea')!; @@ -300,6 +329,12 @@ export class SpreadsheetTable extends HTMLElement { } } +declare global { + interface HTMLElementTagNameMap { + 's-header': SpreadsheetHeader; + } +} + export class SpreadsheetHeader extends HTMLElement { static tagName = 's-header'; @@ -324,6 +359,12 @@ export class SpreadsheetHeader extends HTMLElement { } } +declare global { + interface HTMLElementTagNameMap { + 's-cell': SpreadsheetCell; + } +} + export class SpreadsheetCell extends HTMLElement { static tagName = 's-cell';