add goshipit a component library fro templ

2026-02-03 13:13:27 +01:00
parent 0da33876e1
commit 7333d5eb2b
12 changed files with 1703 additions and 1 deletions
--- a/pkg/web/components/base/range.templ
+++ b/pkg/web/components/base/range.templ
@@ -0,0 +1,98 @@
+package base
+
+import "fmt"
+
+type RangeProps struct {
+	ID    string
+	Label string
+	Name  string
+	Value int
+	Min   int
+	Max   int
+	Step  int
+	Class string
+	Size  string
+}
+
+// Note: usage requires alpine.js
+templ Range(props RangeProps) {
+	<div class="form-control">
+		<label
+			class="label space-x-1"
+			x-data={ fmt.Sprintf("{ value: %d }", props.Value) }
+		>
+			if props.Label != "" {
+				<span
+					class={
+						templ.KV("text-xs", props.Size == "xs"),
+						templ.KV("text-sm", props.Size == "sm"),
+						templ.KV("text-lg", props.Size == "lg"),
+						templ.KV("text-xl", props.Size == "xl"),
+					}
+				>{ props.Label }</span>
+			}
+			<input
+				type="range"
+				if props.ID != "" {
+					id={ props.ID }
+				}
+				name={ props.Name }
+				min={ fmt.Sprintf("%d", props.Min) }
+				max={ fmt.Sprintf("%d", props.Max) }
+				x-model="value"
+				class={
+					"range", props.Class,
+					templ.KV("range-xs", props.Size == "xs"),
+					templ.KV("range-sm", props.Size == "sm"),
+					templ.KV("range-lg", props.Size == "lg"),
+					templ.KV("range-xl", props.Size == "xl"),
+				}
+				step={ fmt.Sprintf("%d", props.Step) }
+			/>
+			<div x-text="value" class="w-full max-w-7"></div>
+		</label>
+	</div>
+}
+
+// Note: usage requires datastar.js
+templ DatastarRange(props RangeProps) {
+	<div class="form-control">
+		<label
+			class="label space-x-1"
+			data-signals={ fmt.Sprintf("{value: %d}", props.Value) }
+		>
+			if props.Label != "" {
+				<span
+					class={
+						templ.KV("text-xs", props.Size == "xs"),
+						templ.KV("text-sm", props.Size == "sm"),
+						templ.KV("text-lg", props.Size == "lg"),
+						templ.KV("text-xl", props.Size == "xl"),
+					}
+				>{ props.Label }</span>
+			}
+			<input
+				type="range"
+				if props.ID != "" {
+					id={ props.ID }
+				}
+				name={ props.Name }
+				min={ fmt.Sprintf("%d", props.Min) }
+				max={ fmt.Sprintf("%d", props.Max) }
+				class={
+					"range", props.Class,
+					templ.KV("range-xs", props.Size == "xs"),
+					templ.KV("range-sm", props.Size == "sm"),
+					templ.KV("range-lg", props.Size == "lg"),
+					templ.KV("range-xl", props.Size == "xl"),
+				}
+				step={ fmt.Sprintf("%d", props.Step) }
+				data-bind-value
+			/>
+			<div
+				class="w-full max-w-7"
+				data-text="$value"
+			></div>
+		</label>
+	</div>
+}