91 lines
2.0 KiB
Plaintext
91 lines
2.0 KiB
Plaintext
package base
|
|
|
|
type InputProps struct {
|
|
// common
|
|
Name string
|
|
Label string
|
|
Type string // defaults to "text"
|
|
Value string
|
|
Class string
|
|
Placeholder string
|
|
Description string
|
|
Error string
|
|
DisabledMessage string
|
|
Size string // xs sm lg xl, default: md
|
|
Required bool
|
|
Icon templ.Component
|
|
Attrs templ.Attributes
|
|
|
|
// text input
|
|
MinLength string
|
|
MaxLength string
|
|
Pattern string
|
|
ValidatorHint string
|
|
|
|
// integer/decimal input
|
|
Min string
|
|
Max string
|
|
|
|
// decimal input
|
|
Step string
|
|
}
|
|
|
|
templ Input(props InputProps) {
|
|
<fieldset class="fieldset">
|
|
if props.Label != "" {
|
|
<legend class="fieldset-legend">{ props.Label }</legend>
|
|
}
|
|
<div
|
|
class={
|
|
"input validator tooltip tooltip-top", props.Class,
|
|
templ.KV("tooltip tooltip-top", props.DisabledMessage != ""),
|
|
templ.KV("input-xs", props.Size == "xs"),
|
|
templ.KV("input-sm", props.Size == "sm"),
|
|
templ.KV("input-lg", props.Size == "lg"),
|
|
templ.KV("input-xl", props.Size == "xl"),
|
|
}
|
|
if props.DisabledMessage != "" {
|
|
data-tip={ props.DisabledMessage }
|
|
}
|
|
>
|
|
if props.Icon != nil {
|
|
@props.Icon
|
|
}
|
|
<input
|
|
id={ props.Name }
|
|
name={ props.Name }
|
|
aria-label={ props.Label }
|
|
if props.Type == "" {
|
|
type="text"
|
|
} else {
|
|
type={ props.Type }
|
|
}
|
|
value={ props.Value }
|
|
placeholder={ props.Placeholder }
|
|
if props.Required {
|
|
required
|
|
}
|
|
if props.Pattern != "" {
|
|
pattern={ props.Pattern }
|
|
}
|
|
if props.ValidatorHint != "" {
|
|
title={ props.ValidatorHint }
|
|
}
|
|
if props.DisabledMessage != "" {
|
|
disabled
|
|
}
|
|
{ props.Attrs... }
|
|
/>
|
|
</div>
|
|
if props.Description != "" {
|
|
<div class="label">{ props.Description }</div>
|
|
}
|
|
if props.Error != "" {
|
|
<p class="text-xs text-error max-w-xs">{ props.Error }</p>
|
|
}
|
|
if props.ValidatorHint != "" {
|
|
<p class="validator-hint hidden text-xs max-w-xs mt-0!">{ props.ValidatorHint }</p>
|
|
}
|
|
</fieldset>
|
|
}
|