budgit/internal/ui/components/collapsible/collapsible.templ
2026-01-18 22:23:21 +00:00

86 lines
1.7 KiB
Text

// templui component collapsible - version: v1.2.0 installed by templui v1.2.0
// 📚 Documentation: https://templui.io/docs/components/collapsible
package collapsible
import "git.juancwu.dev/juancwu/budgit/internal/utils"
type Props struct {
ID string
Class string
Attributes templ.Attributes
Open bool
}
type TriggerProps struct {
ID string
Class string
Attributes templ.Attributes
}
type ContentProps struct {
ID string
Class string
Attributes templ.Attributes
}
templ Collapsible(props ...Props) {
{{ var p Props }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.ID == "" {
{{ p.ID = utils.RandomID() }}
}
<div
id={ p.ID }
class={ utils.TwMerge("", p.Class) }
data-tui-collapsible="root"
data-tui-collapsible-state={ utils.IfElse(p.Open, "open", "closed") }
{ p.Attributes... }
>
{ children... }
</div>
}
templ Trigger(props ...TriggerProps) {
{{ var p TriggerProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
<div
if p.ID != "" {
id={ p.ID }
}
class={ utils.TwMerge("", p.Class) }
data-tui-collapsible="trigger"
{ p.Attributes... }
>
{ children... }
</div>
}
templ Content(props ...ContentProps) {
{{ var p ContentProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
<div
if p.ID != "" {
id={ p.ID }
}
class={ utils.TwMerge(
"grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 ease-out [&.tui-collapsible-open]:grid-rows-[1fr]",
p.Class,
) }
data-tui-collapsible="content"
{ p.Attributes... }
>
<div class="overflow-hidden">
{ children... }
</div>
</div>
}
templ Script() {
<script defer nonce={ templ.GetNonce(ctx) } src={ utils.ScriptURL("/assets/js/collapsible.min.js") }></script>
}