UNPKG

@zeix/ui-element

Version:

UIElement - a HTML-first library for reactive Web Components

197 lines (190 loc) 21.3 kB
<module-tabgroup> <div role="tablist"> <button type="button" role="tab" id="trigger_form-checkbox.html" aria-controls="panel_form-checkbox.html" aria-selected="false" tabindex="-1" >HTML</button> <button type="button" role="tab" id="trigger_form-checkbox.css" aria-controls="panel_form-checkbox.css" aria-selected="false" tabindex="-1" >CSS</button> <button type="button" role="tab" id="trigger_form-checkbox.ts" aria-controls="panel_form-checkbox.ts" aria-selected="true" tabindex="0" >TypeScript</button> </div> <div role="tabpanel" id="panel_form-checkbox.html" aria-labelledby="trigger_form-checkbox.html" hidden> <module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"> <span class="file">form-checkbox.html</span> <span class="language">html</span> </p> <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">form-checkbox</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">input</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"checkbox"</span><span style="color:#F8F8F2"> /></span></span> <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"label"</span><span style="color:#F8F8F2">>Checkbox&#x3C;/</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"> &#x3C;/</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">form-checkbox</span><span style="color:#F8F8F2">></span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">form-checkbox</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"todo"</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">input</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"checkbox"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"visually-hidden"</span><span style="color:#F8F8F2"> /></span></span> <span class="line"><span style="color:#F8F8F2"> &#x3C;</span><span style="color:#F92672">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"label"</span><span style="color:#F8F8F2">>Task&#x3C;/</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"> &#x3C;/</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">form-checkbox</span><span style="color:#F8F8F2">></span></span> <span class="line"></span></code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> <span class="label">Copy</span> </button> </basic-button> </module-codeblock> </div> <div role="tabpanel" id="panel_form-checkbox.css" aria-labelledby="trigger_form-checkbox.css" hidden> <module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"> <span class="file">form-checkbox.css</span> <span class="language">css</span> </p> <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">form-checkbox</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> flex-grow</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;:focus-within {</span></span> <span class="line"><span style="color:#F8F8F2"> box-shadow: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-xxs) </span><span style="color:#AE81FF">2</span><span style="color:#F92672">px</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-selection);</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26; </span><span style="color:#F92672">input</span><span style="color:#A6E22E">:focus</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> outline</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> box-shadow</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26; </span><span style="color:#F92672">label</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-s);</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">.todo</span><span style="color:#F92672"> label</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">flex</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> gap</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> line-height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--input-height);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> cursor</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">pointer</span><span style="color:#F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;::before {</span></span> <span class="line"><span style="color:#F8F8F2"> display: </span><span style="color:#66D9EF">inline-block</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> box-sizing</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">border-box</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">""</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-l);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> text-align</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">center</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> width</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--input-height);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--input-height);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> border</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</span><span style="color:#F92672">px</span><span style="color:#66D9EF"> solid</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-border);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">100</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary);</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">:hover::before</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary-hover);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> opacity</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--opacity-solid);</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">:active::before</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary-active);</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">.todo</span><span style="color:#F8F8F2">[</span><span style="color:#A6E22E">checked</span><span style="color:#F8F8F2">] </span><span style="color:#F92672">label</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> opacity</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--opacity-translucent);</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26; </span><span style="color:#66D9EF;font-style:italic">span</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> text-decoration</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">line-through</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">::before</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text-inverted);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success-active);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> text-shadow</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-xs) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success-active);</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">"✓"</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">:hover::before</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success-hover);</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color:#F8F8F2"> &#x26;</span><span style="color:#A6E22E">:active::before</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-success-active);</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"><span style="color:#F8F8F2">}</span></span> <span class="line"></span></code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> <span class="label">Copy</span> </button> </basic-button> </module-codeblock> </div> <div role="tabpanel" id="panel_form-checkbox.ts" aria-labelledby="trigger_form-checkbox.ts"> <module-codeblock language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"> <span class="file">form-checkbox.ts</span> <span class="language">ts</span> </p> <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#F92672"> type</span><span style="color:#F8F8F2"> Component,</span></span> <span class="line"><span style="color:#F8F8F2"> RESET,</span></span> <span class="line"><span style="color:#F8F8F2"> asString,</span></span> <span class="line"><span style="color:#F8F8F2"> component,</span></span> <span class="line"><span style="color:#F8F8F2"> fromEvents,</span></span> <span class="line"><span style="color:#F8F8F2"> requireDescendant,</span></span> <span class="line"><span style="color:#F8F8F2"> setText,</span></span> <span class="line"><span style="color:#F8F8F2"> toggleAttribute,</span></span> <span class="line"><span style="color:#F8F8F2">} </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../../..'</span></span> <span class="line"></span> <span class="line"><span style="color:#F92672">export</span><span style="color:#66D9EF;font-style:italic"> type</span><span> </span><span style="color:#A6E22E;text-decoration:underline">FormCheckboxProps</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#F8F8F2"> checked</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> boolean</span></span> <span class="line"><span style="color:#F8F8F2"> label</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> string</span></span> <span class="line"><span style="color:#F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color:#F92672">export</span><span style="color:#F92672"> default</span><span style="color:#A6E22E"> component</span><span style="color:#F8F8F2">(</span></span> <span class="line"><span style="color:#E6DB74"> 'form-checkbox'</span><span style="color:#F8F8F2">,</span></span> <span class="line"><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#F8F8F2"> checked: </span><span style="color:#A6E22E">fromEvents</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">el</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'input'</span><span style="color:#F8F8F2">)?.checked, </span><span style="color:#E6DB74">'input'</span><span style="color:#F8F8F2">, {</span></span> <span class="line"><span style="color:#A6E22E"> change</span><span style="color:#F8F8F2">: ({ </span><span style="color:#FD971F;font-style:italic">target</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> target.checked,</span></span> <span class="line"><span style="color:#F8F8F2"> }),</span></span> <span class="line"><span style="color:#F8F8F2"> label: </span><span style="color:#A6E22E">asString</span><span style="color:#F8F8F2">(RESET),</span></span> <span class="line"><span style="color:#F8F8F2"> },</span></span> <span class="line"><span style="color:#F8F8F2"> (</span><span style="color:#FD971F;font-style:italic">el</span><span style="color:#F8F8F2">, { </span><span style="color:#FD971F;font-style:italic">first</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#A6E22E"> requireDescendant</span><span style="color:#F8F8F2">(el, </span><span style="color:#E6DB74">'input[type="checkbox"]'</span><span style="color:#F8F8F2">)</span></span> <span class="line"><span style="color:#A6E22E"> requireDescendant</span><span style="color:#F8F8F2">(el, </span><span style="color:#E6DB74">'.label'</span><span style="color:#F8F8F2">)</span></span> <span class="line"></span> <span class="line"><span style="color:#F92672"> return</span><span style="color:#F8F8F2"> [</span><span style="color:#A6E22E">toggleAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'checked'</span><span style="color:#F8F8F2">), </span><span style="color:#A6E22E">first</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.label'</span><span style="color:#F8F8F2">, </span><span style="color:#A6E22E">setText</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'label'</span><span style="color:#F8F8F2">))]</span></span> <span class="line"><span style="color:#F8F8F2"> },</span></span> <span class="line"><span style="color:#F8F8F2">)</span></span> <span class="line"></span> <span class="line"><span style="color:#F92672">declare</span><span style="color:#F8F8F2"> global {</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> interface</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElementTagNameMap</span><span style="color:#F8F8F2"> {</span></span> <span class="line"><span style="color:#E6DB74"> 'form-checkbox'</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">FormCheckboxProps</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"> }</span></span> <span class="line"><span style="color:#F8F8F2">}</span></span> <span class="line"></span></code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> <span class="label">Copy</span> </button> </basic-button> </module-codeblock> </div> </module-tabgroup>