@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_todo-app.html" aria-controls="panel_todo-app.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_todo-app.css" aria-controls="panel_todo-app.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_todo-app.ts" aria-controls="panel_todo-app.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_todo-app.html" aria-labelledby="trigger_todo-app.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> todo-app.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><todo-app> <form action="#"> <input-field> <label for="add-todo">What needs to be done?</label> <div class="row"> <div class="group auto"> <input id="add-todo" type="text" value="" required> </div> </div> </input-field> <input-button class="submit"> <button type="submit" class="constructive" disabled>Add Todo</button> </input-button> </form> <ol filter="all"></ol> <template> <li> <input-checkbox class="todo"> <label> <input type="checkbox" class="visually-hidden" /> <span class="label"><slot></slot></span> </label> </input-checkbox> <input-button class="delete"> <button type="button" class="destructive small">Delete</button> </input-button> </li> </template> <footer> <div class="todo-count"> <p class="all-done">Well done, all done!</p> <p class="remaining"> <span class="count"></span> <span class="singular">task</span> <span class="plural">tasks</span> remaining </p> </div> <input-radiogroup value="all" class="split-button"> <fieldset> <legend class="visually-hidden">Filter</legend> <label class="selected"> <input type="radio" class="visually-hidden" name="filter" value="all" checked> <span>All</span> </label> <label> <input type="radio" class="visually-hidden" name="filter" value="active"> <span>Active</span> </label> <label> <input type="radio" class="visually-hidden" name="filter" value="completed"> <span>Completed</span> </label> </fieldset> </input-radiogroup> <input-button class="clear-completed"> <button type="button" class="destructive"> <span class="label">Clear Completed</span> <span class="badge"></span> </button> </input-button> </footer> </todo-app></code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_todo-app.css" aria-labelledby="trigger_todo-app.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> todo-app.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>todo-app { display: flex; flex-direction: column; gap: var(--space-l); container-type: inline-size; & form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); justify-content: space-between; } & ol { display: flex; flex-direction: column; gap: var(--space-m); list-style: none; margin: 0; padding: 0; & li { display: flex; justify-content: space-between; gap: var(--space-m); margin: 0; padding: 0; } &[filter="completed"] li:not(:has([checked])) { display: none; } &[filter="active"] li:has([checked]) { display: none; } } & footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: var(--space-m); margin: 0; .todo-count { justify-self: start; & p { font-size: var(--font-size-s); margin: 0; } } .clear-completed { justify-self: end; } } } @container (width > 32rem) { todo-app form { flex-direction: row; align-items: flex-end; } }</code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_todo-app.ts" aria-labelledby="trigger_todo-app.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> todo-app.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type Component, type SignalProducer, component, first, on, selection, setAttribute, setProperty, setText, } from "../../../"; import type { InputButtonProps } from "../input-button/input-button"; import type { InputCheckboxProps } from "../input-checkbox/input-checkbox"; import type { InputFieldProps } from "../input-field/input-field"; import type { InputRadiogroupProps } from "../input-radiogroup/input-radiogroup"; export type TodoAppProps = { active: Component<InputCheckboxProps>[]; completed: Component<InputCheckboxProps>[]; }; export default component( "todo-app", { active: ((el) => selection<Component<InputCheckboxProps>>( el, "input-checkbox:not([checked])", )) as SignalProducer<HTMLElement, Component<InputCheckboxProps>[]>, completed: ((el) => selection<Component<InputCheckboxProps>>( el, "input-checkbox[checked]", )) as SignalProducer<HTMLElement, Component<InputCheckboxProps>[]>, }, (el) => { const input = el.querySelector<Component<InputFieldProps>>("input-field"); if (!input) throw new Error("No input field found"); const template = el.querySelector("template"); if (!template) throw new Error("No template found"); const list = el.querySelector("ol"); if (!list) throw new Error("No list found"); return [ // Control todo input form first<TodoAppProps, Component<InputButtonProps>>( ".submit", setProperty("disabled", () => !input.length), ), first( "form", on("submit", (e: Event) => { e.preventDefault(); queueMicrotask(() => { const value = input.value.toString().trim(); if (!value) return; const li = document.importNode( template.content, true, ).firstElementChild; if (!(li instanceof HTMLLIElement)) throw new Error( "Invalid template for list item; expected <li>", ); li .querySelector("slot") ?.replaceWith(String(input.value)); list.append(li); input.clear(); }); }), ), // Control todo list first( "ol", setAttribute( "filter", () => el.querySelector<Component<InputRadiogroupProps>>( "input-radiogroup", )?.value ?? "all", ), on("click", (e: Event) => { const target = e.target as HTMLElement; if (target.localName === "button") target.closest("li")!.remove(); }), ), // Update count elements first( ".count", setText(() => String(el.active.length)), ), first<TodoAppProps, HTMLElement>( ".singular", setProperty("hidden", () => el.active.length > 1), ), first<TodoAppProps, HTMLElement>( ".plural", setProperty("hidden", () => el.active.length === 1), ), first<TodoAppProps, HTMLElement>( ".remaining", setProperty("hidden", () => !el.active.length), ), first<TodoAppProps, HTMLElement>(