updated templater library; added accordion component

templates/components/accordion.html.tmpl

@@ -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>

templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/add-listing-button.html.tmpl

@@ -7,7 +7,8 @@
 	"HXSwap" "none"
 	"HXSelect" "#accounts-acct-id-inventory-sync-groups-mock-draft-table"
 	"ID" "sync-groups-mock-draft-table-add-listing-button"
-	"Class" "mt-[1em] mb-[1em]"
+	"Class" ""
+	"Style" ""
 	"Text" "Add Listing"
 	"_" `
 		on click

templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/index.html.tmpl

@@ -2,17 +2,23 @@
 
 
 {{- $acctID := .PathParams.acctID }}
+{{- $listings := .Accounts.GetMockSyncGroupListingDrafts $acctID }}
 
 
 <table
 	id="accounts-acct-id-inventory-sync-groups-mock-draft-table"
-	class="max-w-full overflow-x-auto"
+	class="
+		max-w-full overflow-x-auto
+
+		grid-table-6
+		max-h-[50vh]
+	"
 	hx-get="{{ printf "/ui/accounts/%d/inventory/sync-groups/mock/draft/table" $acctID }}"
 	hx-trigger="sse:{{ printf "accounts_%d_inventory_sync-groups_mock_draft" $acctID }},sse:{{ printf "accounts_%d_inventory_sync-groups_mock_draft_listings" $acctID }}"
 	hx-select="#accounts-acct-id-inventory-sync-groups-mock-draft-table"
 	hx-swap="morph:outerHTML"
 >
-	<thead>
+	<thead class="sticky top-0">
 		<tr>
 			<th>
 				Shop
@@ -58,14 +64,14 @@
 				send setDisabled(disabled: not allRowsFilledOut or numRows < 2) to #create-mock-sync-group-button
 		"
 	>
-		{{- $listings := .Accounts.GetMockSyncGroupListingDrafts $acctID }}
 		{{- range $listing := $listings }}
 			{{- component (printf "accounts/%d/inventory/sync-groups/mock/draft/listings/%d" $acctID $listing.OrderIndex)
 				"Listings" $listings
 			}}
 		{{- end }}
 	</tbody>
-	<tfoot>
+{{- if gt (len $listings) 5 }}
+	<tfoot class="sticky bottom-0 outline-1 outline-(--table-tfoot)">
 		<tr>
 			<th>
 				Shop
@@ -87,6 +93,7 @@
 			</th>
 		</tr>
 	</tfoot>
+{{- end }}
 </table>
 
 {{/*

templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/save-sync-group-button.html.tmpl

@@ -18,8 +18,9 @@
 
 {{ component "button"
 	"ID" "create-mock-sync-group-button"
-	"Class" "mt-[1em] mb-[1em]"
 	"Text" "Save Sync Group"
+	"Class" ""
+	"Style" ""
 	"Disabled" (or (not $enoughListings) (not $allCompleted))
 	"_" `
 		on setDisabled(disabled)

templates/components/button.html.tmpl

@@ -14,7 +14,7 @@
 		disabled:bg-accent-secondary
 		disabled:cursor-not-allowed
 		disabled:no-underline
-		{{.Class}}
+		{{if .Class}}{{.Class}}{{end}}
 	"
 	{{- if .ID }}
 		id="{{.ID}}"