@zeix/ui-element/docs/examples/basic-status.html

UIElement - a HTML-first library for reactive Web Components

<module-tabgroup>
	<div role="tablist">
		
			<button
				type="button"
				role="tab"
				id="trigger_basic-status.ts"
				aria-controls="panel_basic-status.ts"
				aria-selected="true"
				tabindex="0"
			>TypeScript</button>
	</div>
	
<div role="tabpanel" id="panel_basic-status.ts" aria-labelledby="trigger_basic-status.ts">
	<module-codeblock language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">basic-status.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">	asEnum,</span></span>
<span class="line"><span style="color:#F8F8F2">	component,</span></span>
<span class="line"><span style="color:#F8F8F2">	setText,</span></span>
<span class="line"><span style="color:#F8F8F2">	toggleClass,</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">BasicStatusProps</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">	status</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:#66D9EF;font-style:italic">const</span><span style="color:#F8F8F2"> STATUS_OPTIONS</span><span style="color:#F92672">:</span><span style="color:#F8F8F2"> [</span><span style="color:#66D9EF;font-style:italic">string</span><span style="color:#F8F8F2">, </span><span style="color:#F92672">...</span><span style="color:#66D9EF;font-style:italic">string</span><span style="color:#F8F8F2">[]] </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> [</span><span style="color:#E6DB74">'success'</span><span style="color:#F8F8F2">, </span><span style="color:#E6DB74">'warning'</span><span style="color:#F8F8F2">, </span><span style="color:#E6DB74">'error'</span><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">	'basic-status'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	{</span></span>
<span class="line"><span style="color:#F8F8F2">		status: </span><span style="color:#A6E22E">asEnum</span><span style="color:#F8F8F2">(STATUS_OPTIONS),</span></span>
<span class="line"><span style="color:#F8F8F2">	},</span></span>
<span class="line"><span style="color:#FD971F;font-style:italic">	el</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> [</span></span>
<span class="line"><span style="color:#A6E22E">		setText</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'status'</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#F92672">		...</span><span style="color:#F8F8F2">STATUS_OPTIONS.</span><span style="color:#A6E22E">map</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">status</span><span style="color:#66D9EF;font-style:italic"> =></span></span>
<span class="line"><span style="color:#A6E22E">			toggleClass</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">BasicStatusProps</span><span style="color:#F8F8F2">>(status, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> el.status </span><span style="color:#F92672">===</span><span style="color:#F8F8F2"> status),</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>
<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">		'basic-status'</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">BasicStatusProps</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>