@zeix/ui-element/docs/examples/module-catalog.html

UIElement - a HTML-first library for reactive Web Components

<module-tabgroup>
	<div role="tablist">
		
			<button
				type="button"
				role="tab"
				id="trigger_module-catalog.html"
				aria-controls="panel_module-catalog.html"
				aria-selected="false"
				tabindex="-1"
			>HTML</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_module-catalog.css"
				aria-controls="panel_module-catalog.css"
				aria-selected="false"
				tabindex="-1"
			>CSS</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_module-catalog.ts"
				aria-controls="panel_module-catalog.ts"
				aria-selected="true"
				tabindex="0"
			>TypeScript</button>
	</div>
	
<div role="tabpanel" id="panel_module-catalog.html" aria-labelledby="trigger_module-catalog.html" hidden>
	<module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">module-catalog.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">module-catalog</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">header</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">>Shop&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">basic-button</span><span style="color:#A6E22E"> disabled</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> disabled</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">>🛒 Shopping Cart&#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">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"badge"</span><span style="color:#F8F8F2">>&#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">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">basic-button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">header</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">ul</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">>Product 1&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">form-spinbutton</span></span>
<span class="line"><span style="color:#A6E22E">				value</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"0"</span></span>
<span class="line"><span style="color:#A6E22E">				zero-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Add to Cart"</span></span>
<span class="line"><span style="color:#A6E22E">				increment-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Increment"</span></span>
<span class="line"><span style="color:#F8F8F2">			></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">button</span></span>
<span class="line"><span style="color:#A6E22E">					type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span></span>
<span class="line"><span style="color:#A6E22E">					class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"decrement"</span></span>
<span class="line"><span style="color:#A6E22E">					aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Decrement"</span></span>
<span class="line"><span style="color:#A6E22E">					hidden</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">				&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">p</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"value"</span><span style="color:#A6E22E"> hidden</span><span style="color:#F8F8F2">>0&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"increment"</span><span style="color:#F8F8F2">>Add to Cart&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">form-spinbutton</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">>Product 2&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">form-spinbutton</span></span>
<span class="line"><span style="color:#A6E22E">				value</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"0"</span></span>
<span class="line"><span style="color:#A6E22E">				zero-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Add to Cart"</span></span>
<span class="line"><span style="color:#A6E22E">				increment-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Increment"</span></span>
<span class="line"><span style="color:#F8F8F2">			></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">button</span></span>
<span class="line"><span style="color:#A6E22E">					type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span></span>
<span class="line"><span style="color:#A6E22E">					class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"decrement"</span></span>
<span class="line"><span style="color:#A6E22E">					aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Decrement"</span></span>
<span class="line"><span style="color:#A6E22E">					hidden</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">				&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">p</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"value"</span><span style="color:#A6E22E"> hidden</span><span style="color:#F8F8F2">>0&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"increment"</span><span style="color:#F8F8F2">>Add to Cart&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">form-spinbutton</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">>Product 3&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">form-spinbutton</span></span>
<span class="line"><span style="color:#A6E22E">				value</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"0"</span></span>
<span class="line"><span style="color:#A6E22E">				zero-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Add to Cart"</span></span>
<span class="line"><span style="color:#A6E22E">				increment-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Increment"</span></span>
<span class="line"><span style="color:#F8F8F2">			></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">button</span></span>
<span class="line"><span style="color:#A6E22E">					type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span></span>
<span class="line"><span style="color:#A6E22E">					class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"decrement"</span></span>
<span class="line"><span style="color:#A6E22E">					aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Decrement"</span></span>
<span class="line"><span style="color:#A6E22E">					hidden</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">				&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">p</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"value"</span><span style="color:#A6E22E"> hidden</span><span style="color:#F8F8F2">>0&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"increment"</span><span style="color:#F8F8F2">>Add to Cart&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">form-spinbutton</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">ul</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">module-catalog</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_module-catalog.css" aria-labelledby="trigger_module-catalog.css" hidden>
	<module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">module-catalog.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">module-catalog</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">	flex-direction</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">column</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-l);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	> </span><span style="color:#66D9EF;font-style:italic">header</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	p {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</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">ul</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		padding</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</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">header</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F92672">	li</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-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		justify-content</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">space-between</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>

<div role="tabpanel" id="panel_module-catalog.ts" aria-labelledby="trigger_module-catalog.ts">
	<module-codeblock language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">module-catalog.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"> { component, pass, reduced } </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:#F92672"> default</span><span style="color:#A6E22E"> component</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'module-catalog'</span><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:#66D9EF;font-style:italic">	const</span><span style="color:#F8F8F2"> total </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> reduced</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">		el,</span></span>
<span class="line"><span style="color:#E6DB74">		'form-spinbutton'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">		(</span><span style="color:#FD971F;font-style:italic">sum</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">item</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> sum </span><span style="color:#F92672">+</span><span style="color:#F8F8F2"> item.value,</span></span>
<span class="line"><span style="color:#AE81FF">		0</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:#F92672">	return</span><span style="color:#F8F8F2"> [</span></span>
<span class="line"><span style="color:#A6E22E">		first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">			'basic-button'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">			pass</span><span style="color:#F8F8F2">({</span></span>
<span class="line"><span style="color:#A6E22E">				badge</span><span style="color:#F8F8F2">: () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> (total.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">() </span><span style="color:#F92672">></span><span style="color:#AE81FF"> 0</span><span style="color:#F92672"> ?</span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(total.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">()) </span><span style="color:#F92672">:</span><span style="color:#E6DB74"> ''</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#A6E22E">				disabled</span><span style="color:#F8F8F2">: () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F92672"> !</span><span style="color:#F8F8F2">total.</span><span style="color:#A6E22E">get</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 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>