@zeix/ui-element

<module-tabgroup> <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> <module-codeblock 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> <basic-button class="copy"> <button type="button" class="secondary small"> Copy </button> </basic-button> </module-codeblock> </div> <div role="tabpanel" id="panel_rating-stars.css" aria-labelledby="trigger_rating-stars.css" hidden> <module-codeblock 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> <basic-button class="copy"> <button type="button" class="secondary small"> Copy </button> </basic-button> </module-codeblock> </div> <div role="tabpanel" id="panel_rating-stars.ts" aria-labelledby="trigger_rating-stars.ts"> <module-codeblock 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, asInteger, component, emitEvent, on, setProperty, setText, } from '../../../' export type RatingStarsProps = { value: number } export default component( 'rating-stars', { value: asInteger(), }, (el, { all }) => { const getKey = (element: HTMLElement): number => parseInt(element.dataset['key'] || '0') return [ emitEvent('change-rating', 'value'), all( 'input', setProperty('checked', target => el.value === getKey(target)), on('change', e => { e.stopPropagation() const value = parseInt((e.currentTarget as HTMLInputElement)?.value) el.value = value + 1 }), ), all( '.label', setText(target => (getKey(target) <= el.value ? '★' : '☆')), ), ] }, ) declare global { interface HTMLElementTagNameMap { 'rating-stars': Component<RatingStarsProps> } interface HTMLElementEventMap { 'change-rating': CustomEvent<number> } } </code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> Copy </button> </basic-button> </module-codeblock> </div> </module-tabgroup>