@zeix/ui-element

<module-tabgroup> <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> <module-codeblock 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> <form-spinbutton 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> </form-spinbutton> </div> <div class="columns"> <p>Number of columns:</p> <form-spinbutton 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> </form-spinbutton> </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> <basic-button class="copy"> <button type="button" class="secondary small"> Copy </button> </basic-button> </module-codeblock> </div> <div role="tabpanel" id="panel_calc-table.css" aria-labelledby="trigger_calc-table.css" hidden> <module-codeblock 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> <basic-button class="copy"> <button type="button" class="secondary small"> Copy </button> </basic-button> </module-codeblock> </div> <div role="tabpanel" id="panel_calc-table.ts" aria-labelledby="trigger_calc-table.ts"> <module-codeblock 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, asInteger, component, insertOrRemoveElement, on, setProperty, setText, state, } from '../../../' import { FormSpinbuttonProps } from '../form-spinbutton/form-spinbutton' export type CalcTableProps = { columns: number rows: number } export default component( 'calc-table', { columns: asInteger(), rows: asInteger(), }, (el, { all, first }) => { 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<FormSpinbuttonProps>>( '.rows form-spinbutton', )?.value, ), setProperty( 'columns', () => el.querySelector<Component<FormSpinbuttonProps>>( '.columns form-spinbutton', )?.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('td').length] cell.dataset['key'] = colKey return cell }, }, <