feat: add cascading select example

internal/server/routes.go

@@ -7,6 +7,7 @@ import (
 	"github.com/gofs-cli/template/internal/server/handlers"
 	activesearch "github.com/gofs-cli/template/internal/ui/pages/active-search"
 	bulkupdate "github.com/gofs-cli/template/internal/ui/pages/bulk-update"
+	cascadingselect "github.com/gofs-cli/template/internal/ui/pages/cascading-select"
 	clicktoedit "github.com/gofs-cli/template/internal/ui/pages/click-to-edit"
 	clicktoload "github.com/gofs-cli/template/internal/ui/pages/click-to-load"
 	deleterow "github.com/gofs-cli/template/internal/ui/pages/delete-row"
@@ -56,6 +57,10 @@ func (s *Server) Routes() {
 	routesMux.Handle("GET /active-search", activesearch.Index())
 	routesMux.Handle("POST /active-search/search", activesearch.Search())
 
+	// cascading select example
+	routesMux.Handle("GET /cascading-select", cascadingselect.Index())
+	routesMux.Handle("GET /cascading-select/models", cascadingselect.Models())
+
 	routesMux.Handle("GET /modal", home.Modal())
 
 	routesMux.Handle("GET /page1", page1.Index())

internal/ui/pages/cascading-select/handlers.go

@@ -0,0 +1,22 @@
+package cascadingselect
+
+import (
+	"net/http"
+
+	"github.com/a-h/templ"
+	"github.com/gofs-cli/template/internal/ui"
+	"github.com/gofs-cli/template/internal/ui/components/header"
+)
+
+func Index() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		templ.Handler(ui.IndexPage(layout(header.Header(), body()))).ServeHTTP(w, r)
+	})
+}
+
+func Models() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		make := r.URL.Query().Get("make")
+		templ.Handler(modelOptions(make)).ServeHTTP(w, r)
+	})
+}

internal/ui/pages/cascading-select/index.templ

@@ -0,0 +1,54 @@
+package cascadingselect
+
+css classLayout() {
+	display: grid;
+}
+
+templ layout(header, body templ.Component) {
+	<main class={ classLayout() }>
+		<div>
+			@header
+		</div>
+		<div>
+			@body
+		</div>
+	</main>
+}
+
+templ body() {
+	<h2>Cascading Select:</h2>
+	<div style="margin-bottom: 8px;">
+		<label>Make: </label>
+		<select name="make" hx-get="/cascading-select/models" hx-target="#models" hx-indicator=".htmx-indicator">
+			<option value="audi">Audi</option>
+			<option value="toyota">Toyota</option>
+			<option value="bmw">BMW</option>
+		</select>
+	</div>
+	<div>
+		<label>Model: </label>
+		<select id="models" name="model">
+			<option value="a1">A1</option>
+			<option value="a3">A3</option>
+			<option value="a6">A6</option>
+		</select>
+		<img class="htmx-indicator" width="20" src="/img/bars.svg"/>
+	</div>
+}
+
+templ modelOptions(make string) {
+	switch make {
+		case "audi":
+			<option value="a1">A1</option>
+			<option value="a3">A3</option>
+			<option value="a6">A6</option>
+		case "bmw":
+			<option value="325i">325i</option>
+			<option value="325ix">325ix</option>
+			<option value="X5">X5</option>
+		case "toyota":
+			<option value="landcruiser">Landcruiser</option>
+			<option value="tacoma">Tacoma</option>
+			<option value="yaris">Yaris</option>
+	}
+}

internal/ui/pages/home/index.templ

@@ -57,7 +57,7 @@ templ body() {
 			<a href="/progress-bar">Progress Bar</a>
 		</li>
 		<li>
-			<a href="/value-select">Value Select</a>
+			<a href="/cascading-select">Value Select</a>
 		</li>
 		<li>
 			<a href="/animations">Animations</a>