99 lines
1.9 KiB
Cheetah
99 lines
1.9 KiB
Cheetah
{{/* 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>
|