@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_rating-stars.html" aria-controls="panel_rating-stars.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_rating-stars.css" aria-controls="panel_rating-stars.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_rating-stars.ts" aria-controls="panel_rating-stars.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_rating-stars.html" aria-labelledby="trigger_rating-stars.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> rating-stars.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><rating-stars> <fieldset> <legend class="visually-hidden">Rate</legend> <label data-key="1"> <input type="radio" class="visually-hidden" name="rating" value="1"> <span class="label">☆</span> </label> <label data-key="2"> <input type="radio" class="visually-hidden" name="rating" value="2"> <span class="label">☆</span> </label> <label data-key="3"> <input type="radio" class="visually-hidden" name="rating" value="3"> <span class="label">☆</span> </label> <label data-key="4"> <input type="radio" class="visually-hidden" name="rating" value="4"> <span class="label">☆</span> </label> <label data-key="5"> <input type="radio" class="visually-hidden" name="rating" value="5"> <span class="label">☆</span> </label> </fieldset> </rating-stars></code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_rating-stars.css" aria-labelledby="trigger_rating-stars.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> rating-stars.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>rating-stars { display: inline-block; & fieldset { display: flex; border: none; margin: 0; padding: 0; justify-content: center; } & label { display: block; cursor: pointer; width: var(--input-height); height: var(--input-height); color: var(--color-primary); font-size: var(--font-size-l); border-radius: var(--space-xs); text-align: center; &:hover, &:focus-within { color: var(--color-primary-hover); background-color: rgba(0, 0, 0, 0.05); } &:active { color: var(--color-primary-active); background-color: rgba(0, 0, 0, 0.1); } } }</code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_rating-stars.ts" aria-labelledby="trigger_rating-stars.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> rating-stars.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type Component, all, asInteger, component, emit, on, setProperty, setText, } from "../../../"; export type RatingStarsProps = { value: number; }; export default component( "rating-stars", { value: asInteger(), }, (el) => { const getKey = (element: HTMLElement): number => parseInt(element.dataset["key"] || "0"); return [ all<RatingStarsProps, HTMLInputElement>( "input", setProperty("checked", (target) => el.value === getKey(target)), on("change", (e) => { e.stopPropagation(); const value = parseInt((e.currentTarget as HTMLInputElement)?.value) + 1; el.value = value; emit("change-rating", value)(el); }), ), all<RatingStarsProps, HTMLElement>( ".label", setText((target) => (getKey(target) <= el.value ? "★" : "☆")), ), ]; }, ); declare global { interface HTMLElementTagNameMap { "rating-stars": Component<RatingStarsProps>; } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> </tab-group>