refactor: new gropdown.Item api

indaco · Apr 30, 2024 · 29e8ea2 · 29e8ea2
1 parent 199e19f
commit 29e8ea2
Show file tree

Hide file tree

Showing 13 changed files with 239 additions and 70 deletions.
diff --git a/_examples/a-h-templ/home.templ b/_examples/a-h-templ/home.templ
@@ -47,12 +47,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>

diff --git a/_examples/custom-animations/home.templ b/_examples/custom-animations/home.templ
@@ -60,12 +60,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>

diff --git a/_examples/custom-button-icon/home.templ b/_examples/custom-button-icon/home.templ
@@ -51,12 +51,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu", gropdown.Icon(buttonIcon))
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>

diff --git a/_examples/go-html-template/demo.templ b/_examples/go-html-template/demo.templ
@@ -26,12 +26,33 @@ templ GropdownDemo() {
 	@gropdown.Root("demo") {
 		@gropdown.Button("Menu")
 		@gropdown.Content() {
-			@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-			@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+			@gropdown.Item("Profile",
+				gropdown.ItemOptions{
+					Href: "/profile",
+					Icon: profileIcon,
+				},
+			)
+			@gropdown.Item("Settings",
+				gropdown.ItemOptions{
+					Href: "/settings",
+					Icon: settingsIcon,
+				},
+			)
 			@gropdown.Divider()
-			@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+			@gropdown.Item("GitHub",
+				gropdown.ItemOptions{
+					Href:     "https://github.com",
+					External: true,
+					Icon:     globeIcon,
+				},
+			)
 			@gropdown.Divider()
-			@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+			@gropdown.Item("Button",
+				gropdown.ItemOptions{
+					Icon:  clickIcon,
+					Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+				},
+			)
 		}
 	}
 }
diff --git a/_examples/icon-only-button/home.templ b/_examples/icon-only-button/home.templ
@@ -47,12 +47,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>

diff --git a/_examples/positioning/home.templ b/_examples/positioning/home.templ
@@ -47,12 +47,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>

diff --git a/_examples/theming/home.templ b/_examples/theming/home.templ
@@ -51,12 +51,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>

diff --git a/gropdown-button.templ b/gropdown-button.templ
@@ -5,19 +5,8 @@ const defaultButtonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" v
 </svg>
 `
 
-// getIcon If icons are provided, use the first one; otherwise, empty ButtonIcon struct.
-func getIcon(icons []*ButtonIcon) *ButtonIcon {
-	var icon *ButtonIcon
-	if len(icons) > 0 {
-		icon = icons[0]
-	} else {
-		icon = &ButtonIcon{}
-	}
-	return icon
-}
-
 templ Button(label string, icons ...*ButtonIcon) {
-	@renderButton(label, getIcon(icons))
+	@renderButton(label, getButtonIcon(icons))
 }
 
 templ renderButton(label string, icon *ButtonIcon) {

diff --git a/gropdown-button_templ.go b/gropdown-button_templ.go
diff --git a/gropdown-content-item.templ b/gropdown-content-item.templ
@@ -2,17 +2,17 @@ package gropdown
 
 const defaultExternalLinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="0.875em" height="0.875em" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>`
 
-templ Item(item DropdownItem) {
+templ Item(label string, opts ...ItemOptions) {
 	<li role="none">
-		if item.Href != "" {
-			@linkItem(item)
+		if buildItemOptions(label, opts).Href != "" {
+			@linkItem(buildItemOptions(label, opts))
 		} else {
-			@buttonItem(item)
+			@buttonItem(buildItemOptions(label, opts))
 		}
 	</li>
 }
 
-templ linkItem(item DropdownItem) {
+templ linkItem(item *DropdownItem) {
 	<a
 		role="menuitem"
 		class="gdd_content_item"
@@ -35,7 +35,7 @@ templ linkItem(item DropdownItem) {
 	</a>
 }
 
-templ buttonItem(item DropdownItem) {
+templ buttonItem(item *DropdownItem) {
 	<button role="menuitem" class="gdd_content_item" { item.Attrs... }>
 		if item.Icon != "" {
 			<div class="gdd_content_item_icon">