update templui components

This commit is contained in:
juancwu 2026-01-18 22:07:40 +00:00
commit 78047c7ee8
52 changed files with 162 additions and 123 deletions

View file

@ -1,4 +1,4 @@
// templui component checkbox - version: v0.101.0 installed by templui v0.101.0
// templui component checkbox - version: v1.2.0 installed by templui v1.2.0
// 📚 Documentation: https://templui.io/docs/components/checkbox
package checkbox
@ -8,15 +8,17 @@ import (
)
type Props struct {
ID string
Class string
Attributes templ.Attributes
Name string
Value string
Disabled bool
Checked bool
Form string
Icon templ.Component
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) {
@ -42,6 +44,12 @@ templ Checkbox(props ...Props) {
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(
@ -49,6 +57,7 @@ templ Checkbox(props ...Props) {
"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,
@ -57,7 +66,7 @@ templ Checkbox(props ...Props) {
{ p.Attributes... }
/>
<div
class="absolute left-0 top-0 h-4 w-4 pointer-events-none flex items-center justify-center text-primary-foreground opacity-0 peer-checked:opacity-100"
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
@ -65,5 +74,14 @@ templ Checkbox(props ...Props) {
@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>
}