updated templater library; added accordion component

2026-02-14 01:29:28 -07:00
parent 95ef64ce18
commit 6838d13c7a
11 changed files with 382 additions and 199 deletions
@@ -0,0 +1,98 @@
+{{/* Templates: */}}
+{{/* details-header */}}
+{{/* details-body */}}
+
+{{/* Props: */}}
+{{/*
+	Open: bool
+	GroupName: for doing 'open' css state styles
+
+	Class, Style,
+	SummaryClass, SummaryStyle
+*/}}
+{{/* TODO: find a way to not have to hardcode the tailwind classes for the group-open styles */}}
+{{/* TODO: rename this component to 'accordion' */}}
+
+
+{{- $groupSuffix := "" }}
+{{- if .GroupName }}
+	{{- $groupSuffix = printf "/%s" .GroupName }}
+{{- end }}
+
+
+<details
+	class="
+		group{{$groupSuffix}}
+
+		flex
+		flex-col
+		items-stretch
+
+		rounded-lg
+		open:bg-card
+
+		details-content:flex
+		details-content:flex-col
+		details-content:items-center
+		details-content:px-[1em]
+
+		open:details-content:p-[1em]
+
+		details-content:opacity-[0]
+		open:details-content:opacity-[1]
+
+		details-content:transform-[translate(0px,-2em)]
+		open:details-content:transform-[translate(0px,0px)]
+
+		details-content:transition-[opacity_transform]
+
+		{{.Class}}
+	"
+	style="{{.Style}}"
+	{{if .Open}}open{{end}}
+	hx-preserve
+>
+{{/*	TODO: old border style - delete when sure
+		details-content:border-transparent
+		open:details-content:border-dotted
+		open:details-content:border-x-[0px]
+		open:details-content:border-x-transparent
+		open:details-content:border-b-[0px]
+		open:details-content:border-b-transparent
+		open:details-content:border-t-background
+		open:details-content:border-t-[0.25rem]
+		details-content:outline-transparent
+		*/}}
+
+	<summary
+		class="
+			flex
+			items-center
+			justify-center
+			gap-[1em]
+
+			w-full
+			p-[1em]
+			bg-accent
+			rounded-lg
+
+			list-none
+			cursor-pointer
+
+			after:content-['+']
+			after:absolute
+			after:right-[0.5em]
+			after:font-bold
+			after:text-[2em]
+			after:leading-[1em]
+			group-open{{$groupSuffix}}:after:content-['-']
+
+			{{.SummaryClass}}
+		"
+		style="contain: layout; {{.SummaryStyle}}"
+	>
+		{{ slot "accordion-header" }}
+	</summary>
+
+	{{ slot "accordion-body" }}
+</details>