From 8c804957fae32518d83fe75de44a6c0a56d2aec8 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 2 Dec 2024 19:37:29 -0500
Subject: [PATCH] [reference] Add filter input, add counts

---
 docs/.eleventy.js                  |  1 +
 docs/docs/components/reference.njk | 34 +++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 22c8dc27b..4026acc68 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -39,6 +39,7 @@ export default function (eleventyConfig) {
     // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
     return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
   });
+  eleventyConfig.addFilter('keys', obj => Object.keys(obj));
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
diff --git a/docs/docs/components/reference.njk b/docs/docs/components/reference.njk
index cf7b333c4..8d3779130 100644
--- a/docs/docs/components/reference.njk
+++ b/docs/docs/components/reference.njk
@@ -9,8 +9,40 @@ table code {
 }
 </style>
 
+<wa-input type=search label="Filter by name:" clearable id="name_search"></wa-input>
+<script>
+name_search.addEventListener("wa-input", e => {
+	let value = e.target.value;
+
+	if (value) {
+		for (let th of document.querySelectorAll("table tbody th:first-child")) {
+			let tr = th.parentNode;
+			tr.toggleAttribute("hidden", !th.textContent.includes(value));
+		}
+	}
+	else {
+		for (let tr of document.querySelectorAll("table tbody tr[hidden]")) {
+			tr.removeAttribute("hidden");
+		}
+	}
+
+	// Update heading counts
+	for (let h2 of document.querySelectorAll("h2:has(+ table)")) {
+		let count = h2.querySelector(".count");
+		if (!count) continue;
+		let table = h2.nextElementSibling;
+		let visibleRows = table.querySelectorAll("tbody tr:not([hidden])").length;
+		count.textContent = visibleRows;
+	}
+});
+</script>
+
 {% for type, all in componentsBy -%}
-<h2>All {{ "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") }}</h2>
+{% 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>