@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_spin-button.html" aria-controls="panel_spin-button.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_spin-button.css" aria-controls="panel_spin-button.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_spin-button.ts" aria-controls="panel_spin-button.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_spin-button.html" aria-labelledby="trigger_spin-button.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> spin-button.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><spin-button value="0" zero-label="Add to Cart" increment-label="Increment"> <button type="button" class="decrement" aria-label="Decrement" hidden>−</button> <p class="value" hidden>0</p> <button type="button" class="increment primary">Add to Cart</button> </spin-button></code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_spin-button.css" aria-labelledby="trigger_spin-button.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> spin-button.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>spin-button { display: inline-flex; max-width: 7rem; .value { box-sizing: border-box; margin: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); height: var(--input-height); min-width: 2rem; max-width: 3rem; text-align: center; font-size: var(--font-size-s); padding: 0 var(--space-s); line-height: 2; flex-grow: 1; } > button { flex-grow: 0; box-sizing: border-box; height: var(--input-height); min-width: var(--input-height); border: 1px solid var(--color-border); background-color: var(--color-secondary); color: var(--color-text); padding: 0 var(--space-s); font-size: var(--font-size-s); line-height: var(--line-height-s); white-space: nowrap; cursor: pointer; transition: all var(--transition-shorter) var(--easing-inout); &:disabled { opacity: var(--opacity-translucent); } &:not(:disabled) { cursor: pointer; opacity: var(--opacity-solid); &:hover { background-color: var(--color-secondary-hover); } &:active { background-color: var(--color-secondary-active); } } &:first-child { border-radius: var(--space-xs) 0 0 var(--space-xs); } &:last-child { border-radius: 0 var(--space-xs) var(--space-xs) 0; } } [hidden] + button { flex-grow: 1; border-radius: var(--space-xs); color: var(--color-text-inverted); background-color: var(--color-primary); border-color: var(--color-primary-active); &:hover { background-color: var(--color-primary-hover); } &:active { background-color: var(--color-primary-active); } } }</code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_spin-button.ts" aria-labelledby="trigger_spin-button.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> spin-button.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type Component, all, asInteger, component, first, on, setProperty, setText, } from "../../../"; export type SpinButtonProps = { value: number; }; export default component( "spin-button", { value: asInteger(), }, (el) => { const zeroLabel = el.getAttribute("zero-label") || "Add to Cart"; const incrementLabel = el.getAttribute("increment-label") || "Increment"; const max = asInteger(9)(el, el.getAttribute("max")); const isZero = () => el.value === 0; return [ first<SpinButtonProps, HTMLButtonElement>( ".value", setText("value"), setProperty("hidden", isZero), ), first<SpinButtonProps, HTMLButtonElement>( ".decrement", setProperty("hidden", isZero), on("click", () => { el.value--; }), ), first<SpinButtonProps, HTMLButtonElement>( ".increment", setText(() => (isZero() ? zeroLabel : "+")), setProperty("ariaLabel", () => isZero() ? zeroLabel : incrementLabel, ), setProperty("disabled", () => el.value >= max), on("click", () => { el.value++; }), ), all( "button", on("keydown", (e: Event) => { const { key } = e as KeyboardEvent; if (["ArrowUp", "ArrowDown", "-", "+"].includes(key)) { e.stopPropagation(); e.preventDefault(); if (key === "ArrowDown" || key === "-") el.value--; if (key === "ArrowUp" || key === "+") el.value++; } }), ), ]; }, ); declare global { interface HTMLElementTagNameMap { "spin-button": Component<SpinButtonProps>; } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> </tab-group>