diff --git a/attrs/README.md b/attrs/README.md index c2ae491..10f0f3c 100644 --- a/attrs/README.md +++ b/attrs/README.md @@ -9,6 +9,9 @@ The `attrs` subpackage within `elem-go` offers a comprehensive set of constants - [Available HTML Attributes](#available-html-attributes) - [Using `Props` Type](#using-props-type) - [Examples](#examples) +- [Utilities](#utilities) + - [`Merge`](#merge) + - [`DataAttr`](#dataattr) ## Introduction @@ -54,4 +57,46 @@ buttonAttrs := attrs.Props{ button := elem.Button(buttonAttrs, elem.Text("Submit")) ``` -In this example, attributes for the button element are defined using the attrs.Props map with attrs constants. \ No newline at end of file +In this example, attributes for the button element are defined using the attrs.Props map with attrs constants. + +## Utilities + +The `attrs` subpackage also includes utility functions to enhance the attribute manipulation process. + +### `Merge` + +The `Merge` function allows you to merge multiple `attrs.Props` maps into a single map. This is useful when you want to combine attribute maps for an element. Note that if there are conflicting keys, the last map's value will override the previous ones. + +#### Usage + +```go +defaultButtonAttrs := attrs.Props{ + attrs.Class: "btn", + attrs.Type: "button", +} + +primaryButtonAttrs := attrs.Props{ + attrs.Class: "btn btn-primary", // Overrides the Class attribute from defaultButtonAttrs + attrs.ID: "submitBtn", +} + +mergedButtonAttrs := attrs.Merge(defaultButtonAttrs, primaryButtonAttrs) + +button := elem.Button(mergedButtonAttrs, elem.Text("Submit")) +``` + +In this example, the `Merge` function is used to combine the default button attributes with the primary button attributes. The `Class` attribute from the `primaryButtonAttrs` map overrides the `Class` attribute from the `defaultButtonAttrs` map. + +### `DataAttr` + +The `DataAttr` function is a convenient way to define `data-*` attributes for HTML elements. It takes the attribute name and value as arguments and returns a map of `data-*` attributes. + +#### Usage + +```go +dataAttrs := attrs.DataAttr("foobar") // Outputs "data-foobar" +``` + +In this example, the `DataAttr` function is used to define a `data-foobar` attribute key for an HTML element. + +By using the `attrs` subpackage, you can ensure type safety and correctness when working with HTML attributes in Go, making your development process smoother and more efficient. \ No newline at end of file diff --git a/attrs/utils.go b/attrs/utils.go index 83054f7..9aeb340 100644 --- a/attrs/utils.go +++ b/attrs/utils.go @@ -2,10 +2,21 @@ package attrs import "strings" -// DataAttr returns the name for a data attribute +// DataAttr returns the name for a data attribute. func DataAttr(name string) string { var builder strings.Builder builder.WriteString(DataPrefix) builder.WriteString(name) return builder.String() } + +// Merge merges multiple attribute maps into a single map, with later maps overriding earlier ones. +func Merge(attrMaps ...Props) Props { + mergedAttrs := Props{} + for _, attrMap := range attrMaps { + for key, value := range attrMap { + mergedAttrs[key] = value + } + } + return mergedAttrs +} diff --git a/attrs/utils_test.go b/attrs/utils_test.go index 2889a0f..2521e20 100644 --- a/attrs/utils_test.go +++ b/attrs/utils_test.go @@ -11,3 +11,25 @@ func TestDataAttr(t *testing.T) { expected := "data-foobar" assert.Equal(t, expected, actual) } + +func TestMerge(t *testing.T) { + baseStyle := Props{ + "Width": "100px", + "Color": "blue", + } + + additionalStyle := Props{ + "Color": "red", // This should override the blue color in baseStyle + "BackgroundColor": "yellow", + } + + expectedMergedStyle := Props{ + "Width": "100px", + "Color": "red", + "BackgroundColor": "yellow", + } + + mergedStyle := Merge(baseStyle, additionalStyle) + + assert.Equal(t, expectedMergedStyle, mergedStyle) +}