123 lines
3.3 KiB
Text
123 lines
3.3 KiB
Text
// templui component input - version: v0.84.0 installed by templui v0.84.0
|
|
package input
|
|
|
|
import (
|
|
"git.jmbit.de/jmb/scanfile/server/web/templui/components/button"
|
|
"git.jmbit.de/jmb/scanfile/server/web/templui/components/icon"
|
|
"git.jmbit.de/jmb/scanfile/server/web/templui/utils"
|
|
)
|
|
|
|
type Type string
|
|
|
|
const (
|
|
TypeText Type = "text"
|
|
TypePassword Type = "password"
|
|
TypeEmail Type = "email"
|
|
TypeNumber Type = "number"
|
|
TypeTel Type = "tel"
|
|
TypeURL Type = "url"
|
|
TypeSearch Type = "search"
|
|
TypeDate Type = "date"
|
|
TypeTime Type = "time"
|
|
TypeFile Type = "file"
|
|
)
|
|
|
|
type Props struct {
|
|
ID string
|
|
Class string
|
|
Attributes templ.Attributes
|
|
Name string
|
|
Type Type
|
|
Placeholder string
|
|
Value string
|
|
Disabled bool
|
|
Readonly bool
|
|
Required bool
|
|
FileAccept string
|
|
HasError bool
|
|
NoTogglePassword bool
|
|
}
|
|
|
|
templ Input(props ...Props) {
|
|
{{ var p Props }}
|
|
if len(props) > 0 {
|
|
{{ p = props[0] }}
|
|
}
|
|
if p.Type == "" {
|
|
{{ p.Type = TypeText }}
|
|
}
|
|
if p.ID == "" {
|
|
{{ p.ID = utils.RandomID() }}
|
|
}
|
|
<div class="relative w-full">
|
|
<input
|
|
id={ p.ID }
|
|
type={ string(p.Type) }
|
|
if p.Name != "" {
|
|
name={ p.Name }
|
|
}
|
|
if p.Placeholder != "" {
|
|
placeholder={ p.Placeholder }
|
|
}
|
|
if p.Value != "" {
|
|
value={ p.Value }
|
|
}
|
|
if p.Type == TypeFile && p.FileAccept != "" {
|
|
accept={ p.FileAccept }
|
|
}
|
|
disabled?={ p.Disabled }
|
|
readonly?={ p.Readonly }
|
|
required?={ p.Required }
|
|
if p.HasError {
|
|
aria-invalid="true"
|
|
}
|
|
class={
|
|
utils.TwMerge(
|
|
// Base styles
|
|
"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
|
|
// Dark mode background
|
|
"dark:bg-input/30",
|
|
// Selection styles
|
|
"selection:bg-primary selection:text-primary-foreground",
|
|
// Placeholder
|
|
"placeholder:text-muted-foreground",
|
|
// File input styles
|
|
"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
|
|
// Focus styles
|
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
// Disabled styles
|
|
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
// Error/Invalid styles
|
|
"aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40",
|
|
utils.If(p.HasError, "border-destructive ring-destructive/20 dark:ring-destructive/40"),
|
|
utils.If(p.Type == TypePassword && !p.NoTogglePassword, "pr-8"),
|
|
p.Class,
|
|
),
|
|
}
|
|
{ p.Attributes... }
|
|
/>
|
|
if p.Type == TypePassword && !p.NoTogglePassword {
|
|
@button.Button(button.Props{
|
|
Size: button.SizeIcon,
|
|
Variant: button.VariantGhost,
|
|
Class: "absolute right-0 top-1/2 -translate-y-1/2 opacity-50 cursor-pointer",
|
|
Attributes: templ.Attributes{"data-toggle-password": p.ID},
|
|
}) {
|
|
<span class="icon-open block">
|
|
@icon.Eye(icon.Props{
|
|
Size: 18,
|
|
})
|
|
</span>
|
|
<span class="icon-closed hidden">
|
|
@icon.EyeOff(icon.Props{
|
|
Size: 18,
|
|
})
|
|
</span>
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ Script() {
|
|
<script defer src="/assets/js/input.min.js"></script>
|
|
}
|