diff --git a/internal/web/component/enums.go b/internal/web/component/enums.go index 758621e..d7e0fcb 100644 --- a/internal/web/component/enums.go +++ b/internal/web/component/enums.go @@ -2,27 +2,10 @@ package component import "github.com/orsinium-labs/enum" -type color enum.Member[string] type size enum.Member[string] -type buttonType enum.Member[string] -type inputType enum.Member[string] var ( - ColorBlack = color{"black"} - ColorRed = color{"red"} - SizeSm = size{"sm"} SizeMd = size{"md"} SizeLg = size{"lg"} - - ButtonTypeSubmit = buttonType{"submit"} - ButtonTypeButton = buttonType{"button"} - ButtonTypeReset = buttonType{"reset"} - - InputTypeText = inputType{"text"} - InputTypePassword = inputType{"password"} - InputTypeEmail = inputType{"email"} - InputTypeNumber = inputType{"number"} - InputTypeTel = inputType{"tel"} - InputTypeUrl = inputType{"url"} ) diff --git a/internal/web/component/hx_loading.go b/internal/web/component/hx_loading.go index f04eb5b..b23693a 100644 --- a/internal/web/component/hx_loading.go +++ b/internal/web/component/hx_loading.go @@ -22,22 +22,6 @@ func HxLoadingLg(centered bool, id ...string) gomponents.Node { } func hxLoading(centered bool, size size, id ...string) gomponents.Node { - style := func() string { - styleSm := "width: 15px; height: 15px;" - styleMd := "width: 25px; height: 25px;" - styleLg := "width: 40px; height: 40px;" - - switch size { - case SizeSm: - return styleSm - case SizeMd: - return styleMd - case SizeLg: - return styleLg - default: - return styleMd - } - }() pickedID := "" if len(id) > 0 { @@ -55,15 +39,7 @@ func hxLoading(centered bool, size size, id ...string) gomponents.Node { "flex justify-center items-center": centered, "w-full h-full": true, }, - html.Div( - html.Style(style), - gcomponents.Classes{ - "border-black border-t-transparent animate-spin rounded-full": true, - "border-[2px]": size == SizeSm, - "border-[3px]": size == SizeMd, - "border-[5px]": size == SizeLg, - }, - ), + spinner(size), ), ) } diff --git a/internal/web/component/input.go b/internal/web/component/input.go deleted file mode 100644 index 98fa887..0000000 --- a/internal/web/component/input.go +++ /dev/null @@ -1,72 +0,0 @@ -package component - -import ( - "github.com/maragudk/gomponents" - "github.com/maragudk/gomponents/components" - "github.com/maragudk/gomponents/html" -) - -type InputParams struct { - // Name is the name attribute of the input. - Name string - // Type is the type attribute of the input. Default is "text". - Type inputType - // Placeholder is the placeholder attribute of the input. - Placeholder string - // Class is the additional class name(s) for the input. - Class string - // Default is neutral. - Color color - // Block makes the input 100% width. Default is false. - Block bool - // Children are the contents of the input. - Children []gomponents.Node -} - -func Input(props InputParams) gomponents.Node { - color := ColorBlack - if props.Color.Value != "" { - color = props.Color - } - - colorClasses := inputColorClasses(color) - - return html.Input( - components.Classes{ - "disabled:cursor-not-allowed": true, - "rounded bg-white": true, - "placeholder:text-black placeholder:text-opacity-70": true, - "focus:ring focus:ring-opacity-50": true, - "w-full": props.Block, - colorClasses: true, - props.Class: props.Class != "", - }, - gomponents.If( - props.Name != "", - html.Name(props.Name), - ), - gomponents.If( - props.Type.Value != "", - html.Type(props.Type.Value), - ), - gomponents.If( - props.Placeholder != "", - html.Placeholder(props.Placeholder), - ), - gomponents.Group(props.Children), - ) -} - -func inputColorClasses(color color) string { - blackClasses := "border-black focus:border-black focus:ring-black" - redClasses := "border-red-500 focus:border-red-500 focus:ring-red-500" - - switch color { - case ColorBlack: - return blackClasses - case ColorRed: - return redClasses - default: - return blackClasses - } -} diff --git a/internal/web/component/input_control.go b/internal/web/component/input_control.go deleted file mode 100644 index 3ec878a..0000000 --- a/internal/web/component/input_control.go +++ /dev/null @@ -1,96 +0,0 @@ -package component - -import ( - "github.com/google/uuid" - "github.com/maragudk/gomponents" - "github.com/maragudk/gomponents/components" - "github.com/maragudk/gomponents/html" -) - -// InputControlParams is the properties for the InputControl component. -type InputControlParams struct { - // ID is the HTML id attribute value for the input control. - ID string - // Name is the HTML name attribute value for the input control. - Name string - // Type is the type attribute of the input. Default is "text". - Type inputType - // Title is the text label associated with the input control. - Title string - // Placeholder is the HTML placeholder attribute value, displayed when the input is empty. - Placeholder string - // HelpText is additional text displayed below the input, usually providing guidance. - HelpText string - // Color is the color class applied to the input control for styling. - Color color - // Required, when true, indicates that the input is mandatory for form submission. - Required bool - // Error, when true, applies error styling to the input control. - Error bool - // Children are additional HTML nodes to be included inside the input element. - Children []gomponents.Node -} - -// InputControl is a component that renders a group of nodes -// that are used to present a form input control. -func InputControl(props InputControlParams) gomponents.Node { - id := props.ID - if id == "" { - id = "input-" + uuid.NewString() - } - - hasHelperText := props.HelpText != "" - describedById := id + "-help-text" - - color := props.Color - if props.Error { - color = ColorRed - } - - return html.Label( - components.Classes{ - "input-control-container block space-y-1": true, - }, - html.For(id), - - html.Span( - components.Classes{ - "input-control-label block": true, - "text-error": props.Error, - }, - - gomponents.If( - props.Title != "", - gomponents.Text(props.Title), - ), - - gomponents.If(props.Required, html.Span( - html.Class("text-error"), - gomponents.Text(" *"), - )), - ), - Input(InputParams{ - Color: color, - Block: true, - Name: props.Name, - Type: props.Type, - Placeholder: props.Placeholder, - Children: []gomponents.Node{ - html.ID(id), - gomponents.If(props.Required, html.Required()), - gomponents.If(hasHelperText, html.Aria("describedby", describedById)), - gomponents.Group(props.Children), - }, - }), - gomponents.If(hasHelperText, - html.Span( - components.Classes{ - "input-control-help-text block text-sm": true, - "text-error": props.Error, - }, - html.ID(describedById), - gomponents.Text(props.HelpText), - ), - ), - ) -} diff --git a/internal/web/page/index_editor_icon.go b/internal/web/page/index_editor_icon.go index 63fe66c..1c18ed5 100644 --- a/internal/web/page/index_editor_icon.go +++ b/internal/web/page/index_editor_icon.go @@ -27,19 +27,16 @@ func indexEditorIconPicker() gomponents.Node { html.Div( html.Class("space-y-4 h-full"), - component.Input(component.InputParams{ - Name: "q", - Type: component.InputTypeText, - Color: component.ColorBlack, - Placeholder: "Search for an icon", - Block: true, - Children: []gomponents.Node{ - htmx.HxGet("/icons"), - htmx.HxTrigger("input changed delay:500ms, search"), - htmx.HxTarget("#icon-picker-results"), - htmx.HxIndicator("#icon-picker-indicator"), - }, - }), + html.Input( + html.Class("input input-bordered w-full"), + html.Type("text"), + html.Name("q"), + html.Placeholder("Search for an icon"), + htmx.HxGet("/icons"), + htmx.HxTrigger("input changed delay:500ms, search"), + htmx.HxTarget("#icon-picker-results"), + htmx.HxIndicator("#icon-picker-indicator"), + ), html.Div( html.ID("icon-picker-results"),