@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_calc-table.html" aria-controls="panel_calc-table.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_calc-table.css" aria-controls="panel_calc-table.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_calc-table.ts" aria-controls="panel_calc-table.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_calc-table.html" aria-labelledby="trigger_calc-table.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> calc-table.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><calc-table rows="3" columns="3"> <div class="rows"> <p>Number of rows:</p> <spin-button value="3" zero-label="Add Row" increment-label="Increment"> <button type="button" class="decrement" aria-label="Decrement"> − </button> <p class="value">3</p> <button type="button" class="increment" aria-label="Increment"> + </button> </spin-button> </div> <div class="columns"> <p>Number of columns:</p> <spin-button value="3" zero-label="Add Column" increment-label="Increment" > <button type="button" class="decrement" aria-label="Decrement"> − </button> <p class="value">3</p> <button type="button" class="increment" aria-label="Increment"> + </button> </spin-button> </div> <table> <thead> <tr> <th scope="col">Row</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th scope="row">Sum</th> </tr> </tfoot> </table> <template class="calc-table-row"> <tr> <th scope="row"><slot></slot></th> </tr> </template> <template class="calc-table-colhead"> <th scope="col"><slot></slot></th> </template> <template class="calc-table-cell"> <td> <label> <span class="visually-hidden"><slot></slot></span> <input type="number" min="0" max="100" step="1" value="" /> </label> </td> </template> </calc-table> </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_calc-table.css" aria-labelledby="trigger_calc-table.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> calc-table.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>calc-table { display: inline-block; .rows, .columns { display: flex; gap: var(--space-m); justify-content: space-between; margin-block-end: var(--space-m); & p { margin: 0; } } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_calc-table.ts" aria-labelledby="trigger_calc-table.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> calc-table.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type Component, type State, all, asInteger, component, first, insertOrRemoveElement, on, setProperty, setText, state, } from "../../../"; import { SpinButtonProps } from "../spin-button/spin-button"; export type CalcTableProps = { columns: number; rows: number; }; export default component( "calc-table", { columns: asInteger(), rows: asInteger(), }, (el) => { const colHeads = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const rowTemplate = el.querySelector<HTMLTemplateElement>(".calc-table-row"); const colheadTemplate = el.querySelector<HTMLTemplateElement>( ".calc-table-colhead", ); const cellTemplate = el.querySelector<HTMLTemplateElement>(".calc-table-cell"); if (!rowTemplate || !colheadTemplate || !cellTemplate) throw new Error("Missing template elements"); const colSums = new Map<string, State<number>>(); for (let i = 0; i < el.columns; i++) { colSums.set(colHeads[i], state(0)); } const calcColumnSum = (rowKey: string): number => { return Array.from( el.querySelectorAll<HTMLInputElement>( `tbody input[data-key="${rowKey}"]`, ), ) .map((input) => Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : 0, ) .reduce((acc, val) => acc + val, 0); }; return [ /* Control number of rows / columns */ setProperty( "rows", () => el.querySelector<Component<SpinButtonProps>>( ".rows spin-button", )?.value, ), setProperty( "columns", () => el.querySelector<Component<SpinButtonProps>>( ".columns spin-button", )?.value, ), /* Create rows */ first( "tbody", insertOrRemoveElement( (target) => el.rows - target.querySelectorAll("tr").length, { position: "beforeend", create: (parent) => { const row = document.importNode( rowTemplate.content, true, ).firstElementChild; if (!(row instanceof HTMLTableRowElement)) throw new Error( `Expected <tr> as root in table row template, got ${row}`, ); const rowKey = String( parent.querySelectorAll("tr").length + 1, ); row.dataset["key"] = rowKey; row .querySelector("slot") ?.replaceWith(document.createTextNode(rowKey)); return row; }, resolve: () => { for (const [colKey, colSum] of colSums) { colSum.set(calcColumnSum(colKey)); } }, }, ), ), /* Create column headers */ first( "thead tr", insertOrRemoveElement( (target) => el.columns - (target.querySelectorAll("th").length - 1), { position: "beforeend", create: (parent) => { const cell = document.importNode( colheadTemplate.content, true, ).firstElementChild; if (!(cell instanceof HTMLTableCellElement)) throw new Error( `Expected <th> as root in column header template, got ${cell}`, ); const colKey = colHeads[ parent.querySelectorAll("th").length - 1 ]; colSums.set(colKey, state(0)); cell .querySelector("slot") ?.replaceWith(document.createTextNode(colKey)); return cell; }, }, ), ), /* Create input cells for each row */ all( "tbody tr", insertOrRemoveElement( (target) => el.columns - target.querySelectorAll("td").length, { position: "beforeend", create: (parent: HTMLElement) => { const cell = document.importNode( cellTemplate.content, true, ).firstElementChild; if (!(cell instanceof HTMLTableCellElement)) throw new Error( `Expected <td> as root in cell template, got ${cell}`, ); const rowKey = parent.dataset["key"]; const colKey = colHeads[parent.querySelectorAll("td").length]; const input = cell.querySelector("input"); if (!input) throw new Error( "No input found in cell template", ); input.dataset["key"] = colKey; cell .querySelector("slot") ?.replaceWith( document.createTextNode( `${colKey}${rowKey}`, ), ); return cell; }, }, ), ), /* Create empty cells for column sums */ first( "tfoot tr", insertOrRemoveElement( (target) => el.columns - target.querySelectorAll("td").length, { position: "beforeend", create: (parent) => { const cell = document.createElement("td"); const colKey = colHeads[parent.querySelectorAll<spa