htmgo/htmgo-site/partials/snippets/form.go
2024-10-28 10:32:50 -05:00

76 lines
1.8 KiB
Go

package snippets
import (
"github.com/maddalax/htmgo/framework/h"
"github.com/maddalax/htmgo/framework/hx"
"github.com/maddalax/htmgo/framework/js"
"time"
)
func FormExample(ctx *h.RequestContext) *h.Partial {
return h.NewPartial(
h.Form(
h.TriggerChildren(),
h.PostPartial(SubmitForm),
h.Class("flex flex-col gap-2 max-w-[300px] mx-auto"),
h.LabelFor("name", "Your Name"),
h.Input(
"text",
h.Required(),
h.Class("p-4 rounded-md border border-slate-200"),
h.Name("name"),
h.Placeholder("Name"),
h.OnEvent(
hx.KeyDownEvent,
js.SubmitFormOnEnter(),
),
),
SubmitButton(),
),
)
}
func SubmitButton() *h.Element {
buttonClasses := "rounded items-center px-3 py-2 bg-slate-800 text-white w-full text-center"
return h.Div(
h.HxBeforeRequest(
js.RemoveClassOnChildren(".loading", "hidden"),
js.SetClassOnChildren(".submit", "hidden"),
),
h.HxAfterRequest(
js.SetClassOnChildren(".loading", "hidden"),
js.RemoveClassOnChildren(".submit", "hidden"),
),
h.Class("flex gap-2 justify-center"),
h.Button(
h.Class("loading hidden relative text-center", buttonClasses),
Spinner(),
h.Disabled(),
h.Text("Submitting..."),
),
h.Button(
h.Type("submit"),
h.Class("submit", buttonClasses),
h.Text("Submit"),
),
)
}
func Spinner(children ...h.Ren) *h.Element {
return h.Div(
h.Children(children...),
h.Class("absolute left-1 spinner spinner-border animate-spin "+
"inline-block w-6 h-6 border-4 rounded-full border-slate-200 border-t-transparent"),
h.Attribute("role", "status"),
)
}
func SubmitForm(ctx *h.RequestContext) *h.Partial {
name := ctx.FormValue("name")
time.Sleep(time.Second * 2)
return h.NewPartial(
h.Div(
h.TextF("Form submitted with name: %s", name),
),
)
}