87 lines
2.2 KiB
Text
87 lines
2.2 KiB
Text
// templui component checkbox - version: v1.2.0 installed by templui v1.2.0
|
|
// 📚 Documentation: https://templui.io/docs/components/checkbox
|
|
package checkbox
|
|
|
|
import (
|
|
"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
|
|
"git.juancwu.dev/juancwu/budgit/internal/utils"
|
|
)
|
|
|
|
type Props struct {
|
|
ID string
|
|
Class string
|
|
Attributes templ.Attributes
|
|
Name string
|
|
Value string
|
|
Disabled bool
|
|
Checked bool
|
|
Group string
|
|
GroupParent bool
|
|
Form string
|
|
Icon templ.Component
|
|
}
|
|
|
|
templ Checkbox(props ...Props) {
|
|
{{ var p Props }}
|
|
if len(props) > 0 {
|
|
{{ p = props[0] }}
|
|
}
|
|
<div class="relative inline-flex items-center">
|
|
<input
|
|
checked?={ p.Checked }
|
|
disabled?={ p.Disabled }
|
|
if p.ID != "" {
|
|
id={ p.ID }
|
|
}
|
|
if p.Name != "" {
|
|
name={ p.Name }
|
|
}
|
|
if p.Value != "" {
|
|
value={ p.Value }
|
|
} else {
|
|
value="on"
|
|
}
|
|
if p.Form != "" {
|
|
form={ p.Form }
|
|
}
|
|
if p.Group != "" {
|
|
data-tui-checkbox-group={ p.Group }
|
|
}
|
|
if p.GroupParent {
|
|
data-tui-checkbox-parent="true"
|
|
}
|
|
type="checkbox"
|
|
class={
|
|
utils.TwMerge(
|
|
"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs",
|
|
"focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring",
|
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
"checked:bg-primary checked:text-primary-foreground checked:border-primary",
|
|
"indeterminate:bg-primary indeterminate:text-primary-foreground indeterminate:border-primary",
|
|
"appearance-none cursor-pointer transition-shadow",
|
|
"relative",
|
|
p.Class,
|
|
),
|
|
}
|
|
{ p.Attributes... }
|
|
/>
|
|
<div
|
|
class="absolute inset-0 pointer-events-none flex items-center justify-center text-primary-foreground opacity-0 peer-checked:opacity-100"
|
|
>
|
|
if p.Icon != nil {
|
|
@p.Icon
|
|
} else {
|
|
@icon.Check(icon.Props{Size: 14})
|
|
}
|
|
</div>
|
|
<div
|
|
class="absolute inset-0 pointer-events-none flex items-center justify-center text-primary-foreground opacity-0 peer-indeterminate:opacity-100"
|
|
>
|
|
@icon.Minus(icon.Props{Size: 14})
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ Script() {
|
|
<script defer nonce={ templ.GetNonce(ctx) } src={ utils.ScriptURL("/assets/js/checkbox.min.js") }></script>
|
|
}
|