webawesome/docs/docs/components/cheatsheet.njk

---
title: Component Cheatsheet
layout: docs
---

<style>
table code {
	white-space: nowrap;
}
</style>

<p>
	This page lists every bit of syntax used by every Web Awesome component and which components share it.
	For these times when your memory is failing, or to simply explore the possibilities!
</p>

<fieldset id="name_search_group">
	<legend>Filter by name</legend>
	<wa-input type=search clearable id="name_search"></wa-input>
	<wa-checkbox id="name_search_i" checked>Case sensitive</wa-checkbox>
	<wa-checkbox id="name_search_regexp">Regular expression</wa-checkbox>
</fieldset>

<script>
{
	let url = new URL(location);
	if (url.searchParams.get("name")) {
		name_search.value = url.searchParams.get("name");
	}

	if (url.searchParams.get("match")) {
		let matcherId = url.searchParams.get("match");
		let caseSensitive = !matcherId.startsWith("i");
		let isRegexp = matcherId.endsWith("regexp");

		customElements.whenDefined("wa-checkbox").then(async () => {
			await Promise.all([
				name_search_i.updateComplete,
				name_search_regexp.updateComplete,
			]);
			name_search_i.checked = caseSensitive;
			name_search_regexp.checked = isRegexp;
		});
	}
}
</script>
<script type="module" src="/assets/scripts/cheatsheet.js"></script>

{% for type, all in componentsBy -%}
{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}
<h2 id="{{ typeTitle | slugify }}">
	All <span class="count">{{ (all | keys).length }}</span>
	{{ typeTitle }}
</h2>

<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Components</th>
		</tr>
	</thead>
	{% for name, thingComponents in all -%}
	<tr>
		<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
		<td>
			{% if thingComponents.length > 1 %}
				<details open>
					<summary><strong>{{ thingComponents.length }}</strong> components</summary>
			{% endif %}
			{% for component in thingComponents  %}
				<a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
			{%- endfor -%}
			{% if thingComponents.length > 1 %}
				</details>
			{% endif %}
		</td>
	</tr>
	{%- endfor %}
</table>

{%- endfor %}