1package snippets
 2
 3import (
 4	"github.com/maddalax/htmgo/framework/h"
 5	"github.com/maddalax/htmgo/framework/hx"
 6	"github.com/maddalax/htmgo/framework/js"
 7	"time"
 8)
 9
10func FormExample(ctx *h.RequestContext) *h.Partial {
11	return h.NewPartial(
12		h.Form(
13			h.TriggerChildren(),
14			h.PostPartial(SubmitForm),
15			h.Class("flex flex-col gap-2 max-w-[300px] mx-auto"),
16			h.LabelFor("name", "Your Name"),
17			h.Input(
18				"text",
19				h.Required(),
20				h.Class("p-4 rounded-md border border-slate-200"),
21				h.Name("name"),
22				h.Placeholder("Name"),
23				h.OnEvent(
24					hx.KeyDownEvent,
25					js.SubmitFormOnEnter(),
26				),
27			),
28			SubmitButton(),
29		),
30	)
31}
32
33func SubmitButton() *h.Element {
34	buttonClasses := "rounded items-center px-3 py-2 bg-slate-800 text-white w-full text-center"
35	return h.Div(
36		h.HxBeforeRequest(
37			js.RemoveClassOnChildren(".loading", "hidden"),
38			js.SetClassOnChildren(".submit", "hidden"),
39		),
40		h.HxAfterRequest(
41			js.SetClassOnChildren(".loading", "hidden"),
42			js.RemoveClassOnChildren(".submit", "hidden"),
43		),
44		h.Class("flex gap-2 justify-center"),
45		h.Button(
46			h.Class("loading hidden relative text-center", buttonClasses),
47			Spinner(),
48			h.Disabled(),
49			h.Text("Submitting..."),
50		),
51		h.Button(
52			h.Type("submit"),
53			h.Class("submit", buttonClasses),
54			h.Text("Submit"),
55		),
56	)
57}
58
59func Spinner(children ...h.Ren) *h.Element {
60	return h.Div(
61		h.Children(children...),
62		h.Class("absolute left-1 spinner spinner-border animate-spin "+
63			"inline-block w-6 h-6 border-4 rounded-full border-slate-200 border-t-transparent"),
64		h.Attribute("role", "status"),
65	)
66}
67
68func SubmitForm(ctx *h.RequestContext) *h.Partial {
69	name := ctx.FormValue("name")
70	time.Sleep(time.Second * 2)
71	return h.NewPartial(
72		h.Div(
73			h.TextF("Form submitted with name: %s", name),
74		),
75	)
76}