74 lines
1.5 KiB
Text
74 lines
1.5 KiB
Text
// templui component toggle - version: v0.84.0 installed by templui v0.84.0
|
|
package toggle
|
|
|
|
import "git.jmbit.de/jmb/scanfile/server/web/templui/utils"
|
|
|
|
type Props struct {
|
|
ID string
|
|
Class string
|
|
Attributes templ.Attributes
|
|
Name string
|
|
Disabled bool
|
|
Checked bool
|
|
}
|
|
|
|
templ Toggle(props ...Props) {
|
|
{{ var p Props }}
|
|
if len(props) > 0 {
|
|
{{ p = props[0] }}
|
|
}
|
|
if p.ID == "" {
|
|
{{ p.ID = utils.RandomID() }}
|
|
}
|
|
<label
|
|
for={ p.ID }
|
|
class={ utils.TwMerge(
|
|
"inline-flex cursor-pointer items-center gap-2",
|
|
utils.If(p.Disabled, "cursor-not-allowed"),
|
|
) }
|
|
>
|
|
<!-- Actual checkbox toggle -->
|
|
<input
|
|
x-ref={ p.ID }
|
|
id={ p.ID }
|
|
if p.Name != "" {
|
|
name={ p.Name }
|
|
}
|
|
type="checkbox"
|
|
value="true"
|
|
checked?={ p.Checked }
|
|
disabled?={ p.Disabled }
|
|
class="peer hidden"
|
|
role="switch"
|
|
{ p.Attributes... }
|
|
/>
|
|
<!-- Hidden fallback value to ensure "false" is sent when not checked -->
|
|
<input
|
|
type="hidden"
|
|
if p.Name != "" {
|
|
name={ p.Name }
|
|
}
|
|
value="false"
|
|
/>
|
|
<!-- Visual toggle UI -->
|
|
<div
|
|
class={
|
|
utils.TwMerge(
|
|
"relative h-6 w-10",
|
|
"after:absolute after:left-0.5 after:top-0.5",
|
|
"after:h-5 after:w-5",
|
|
"rounded-full bg-neutral-200",
|
|
"after:rounded-full after:bg-muted-foreground",
|
|
"after:content-['']",
|
|
"after:transition-all",
|
|
"peer-checked:bg-primary",
|
|
"peer-checked:after:translate-x-[16px]",
|
|
"peer-checked:after:bg-secondary",
|
|
"peer-disabled:opacity-50",
|
|
p.Class,
|
|
),
|
|
}
|
|
aria-hidden="true"
|
|
></div>
|
|
</label>
|
|
}
|