Redmage/views/devicesview/adddevice/slug_input.templ

67 lines
1.8 KiB
Plaintext
Raw Normal View History

2024-05-07 16:48:15 +07:00
package adddevice
import "github.com/tigorlazuardi/redmage/views/utils"
import "fmt"
type SlugInputData struct {
Error string
Value string
Valid string
HXSwapOOB bool
}
templ SlugInput(data SlugInputData) {
2024-05-07 20:51:00 +07:00
<label
id="slug-input-form"
class="form-control"
if data.HXSwapOOB {
hx-swap-oob="true"
}
>
2024-05-07 16:48:15 +07:00
<div class="label">
<span
class={ utils.CXX(
"label-text", true,
"text-error", data.Error != "",
"text-success", data.Valid != "",
) }
>Slug Identifier</span>
2024-05-07 16:48:15 +07:00
</div>
<input
id="slug-input-field"
x-data={ fmt.Sprintf(`{ init() { $el.setCustomValidity(%q) } }`, data.Error) }
name="slug"
type="text"
@change="$el.setCustomValidity('')"
class={ utils.CXX(
"input input-bordered", true,
"text-error", data.Error != "",
"text-success", data.Valid != "",
"input-error", data.Error != "",
"input-success", data.Valid != "",
) }
hx-post="/htmx/devices/add/validate/slug"
2024-05-07 20:51:00 +07:00
hx-trigger="change, input delay:2s"
2024-05-07 16:48:15 +07:00
hx-target="#slug-input-form"
hx-target-409="#slug-input-form"
hx-swap="outerHTML"
value={ data.Value }
placeholder="my-awesome-device"
2024-05-07 20:51:00 +07:00
title="Url Friendly Characters Only"
required
2024-05-07 16:48:15 +07:00
/>
<div class="label">
<span class={ utils.CXX("label-text", true, "text-error", data.Error != "", "text-success", data.Valid != "") }>
if data.Valid != "" {
{ data.Valid }
} else if data.Error != "" {
{ data.Error }
} else {
URL friendly Unique identifier for the device.
2024-05-07 20:51:00 +07:00
Value must be lowercase english alphabet and supported separator is only 'dash' (-) and 'underscores' (_).
2024-05-07 16:48:15 +07:00
}
</span>
</div>
</label>
}