@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_input-field.html" aria-controls="panel_input-field.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_input-field.css" aria-controls="panel_input-field.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_input-field.ts" aria-controls="panel_input-field.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_input-field.html" aria-labelledby="trigger_input-field.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> input-field.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><input-field> <label for="name-input">Name</label> <div class="row"> <div class="group auto"> <input type="text" id="name-input" name="name" autocomplete="name" required> </div> </div> <p class="error" aria-live="assertive" id="name-error"></p> </input-field> <input-field integer> <label for="bday-year-input">Birthday Year</label> <div class="row"> <div class="group short"> <input type="number" id="bday-year-input" name="bday-year" autocomplete="bday-year" required minlength="4" maxlength="4" min="1900" max="2024" step="1"> </div> <div class="spinbutton" data-step="1"> <button type="button" class="decrement" aria-label="Decrement">−</button> <button type="button" class="increment" aria-label="Increment">+</button> </div> </div> <p class="error" aria-live="assertive" id="bday-year-error"></p> <p class="description" aria-live="polite" id="bday-year-description"></p> </input-field> <input-field validate="./examples/snippets/validate.html"> <label for="username-input">Username</label> <div class="row"> <div class="group auto"> <input type="text" id="username-input" name="username" autocomplete="username" aria-describedby="username-description" required minlength="4" maxlength="20"> </div> </div> <p class="error" aria-live="assertive" id="username-error"></p> <p class="description" aria-live="polite" id="username-description" data-remaining="${x} characters remaining">Max. 20 characters</p> </input-field></code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_input-field.css" aria-labelledby="trigger_input-field.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> input-field.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>input-field { width: 100%; &[value="0"] input { color: color-mix(in srgb, var(--color-text) 50%, transparent); } &:hover button { opacity: var(--opacity-translucent); &:not(:disabled) { opacity: var(--opacity-solid); cursor: pointer; } } &:focus-within { & label, & p, & span { opacity: var(--opacity-solid); } & button { opacity: var(--opacity-translucent); &:not(:disabled) { opacity: var(--opacity-solid); cursor: pointer; } } & input { color: var(--color-text); } } & label, & p, & span { opacity: var(--opacity-dimmed); transition: opacity var(--transition-short) var(--easing-inout); } & label { display: block; font-size: var(--font-size-s); color: var(--color-text); margin-bottom: var(--space-xxs); } .row { display: flex; gap: var(--space-s); } .group { display: flex; align-items: baseline; background: var(--color-input); border-bottom: 1px solid var(--color-border); width: 100%; &.short { width: 6rem; } .clear { border: 0; border-radius: 50%; color: var(--color-input); width: var(--space-m); height: var(--space-m); line-height: 1.1; align-self: center; text-align: center; padding: 0; margin: 0 var(--space-xxs); } .hidden { display: none; } & span:first-child { padding-left: var(--space-xs); } & span:last-child { padding-right: var(--space-xs); } } & input { flex-grow: 1; display: inline-block; box-sizing: border-box; background: var(--color-input); color: var(--color-text); border: 0; padding: var(--space-xs) var(--space-xxs); font-size: var(--font-size-m); height: 2rem; width: 100%; transition: color var(--transition-short) var(--easing-inout); &::placeholder { color: var(--color-text); opacity: var(--opacity-translucent); } } & input[type="number"] { text-align: right; } & input[aria-invalid="true"] { box-shadow: 0 0 var(--space-xxs) 2px var(--color-error); } & span { flex-grow: 0; } ::-webkit-textfield-decoration-container { height: 100%; } ::-webkit-inner-spin-button { appearance: none; } .spinbutton { display: flex; } & button { border: 1px solid var(--color-border); background-color: var(--color-secondary); color: var(--color-text); padding: var(--space-xs) var(--space-s); font-size: var(--font-size-s); line-height: var(--line-height-s); width: 2rem; height: 2rem; opacity: var(--opacity-transparent); transition: opacity var(--transition-short) var(--easing-inout); user-select: none; &:disabled { cursor: revert; background-color: var(--color-background); } &:not(:disabled) { &:hover { background-color: var(--color-secondary-hover); } &:active { background-color: var(--color-secondary-active); } } } .decrement { border-radius: var(--space-xs) 0 0 var(--space-xs); } .increment { border-radius: 0 var(--space-xs) var(--space-xs) 0; border-left: 0; } .error, .description { margin: var(--space-xs) 0 0; font-size: var(--font-size-xs); line-height: var(--line-height-s); &:empty { display: none; } } .error { color: color-mix(in srgb, var(--color-text) 50%, var(--color-error)); } .description { color: var(--color-text-soft); } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_input-field.ts" aria-labelledby="trigger_input-field.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> input-field.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type AttributeParser, type Component, type FxFunction, component, computed, emit, first, on, setAttribute, setProperty, setText, UNSET, } from "../../../"; /* === Type === */ export type InputFieldProps = { value: string | number; length: number; error: string; description: string; clear(): void; }; /* === Pure Functions === */ // Check if value is a number const isNumber = (num: unknown) => typeof num === "number"; // Parse a value as a number with optional integer flag and fallback value const parseNumber = (v: string | null, int = false, fallback = 0): number => { if (!v) return fallback; const temp = int ? parseInt(v, 10) : parseFloat(v); return Number.isFinite(temp) ? temp : fallback; }; // Count decimal places in a number const countDecimals = (value: number):<span style="color:#66D9EF;