ids and classes

README.md

@@ -1,6 +1,11 @@
-<h1 style="text-align:center;"><img src="assets/osui.png" width="170px"></img></h1>
+<div style="text-align: center;">
-<h1 style="text-align:center;"></img>A Component-based TUI library written in go</h1>
+    <img src="assets/osui.png" width="170px" />
-<p style="text-align:center;"><img src="assets/osui.gif"></img></p>
+    <h1>A Component-based TUI library written in Go</h1>
+    <img src="assets/osui.gif" />
+</div>
+
+
+
 
 
 # Hello World

example/main.go

@@ -1,54 +1,62 @@
 package main
 
 import (
-	"github.com/orus-dev/osui"
+    "github.com/orus-dev/osui"
-	"github.com/orus-dev/osui/colors"
+    "github.com/orus-dev/osui/colors"
-	. "github.com/orus-dev/osui/ui"
+    "github.com/orus-dev/osui/ui"
 )
 
 func main() {
-	screen := osui.NewScreen(App())
+    screen := osui.NewScreen(App())
-	screen.Run()
+    screen.Run()
 }
 
-func App() *PaginatorComponent {
+func App() *ui.PaginatorComponent {
-	w, h := osui.GetTerminalSize()
+    w, h := osui.GetTerminalSize()
-	return Paginator(
-		// Page 1
-		Div(
-			Text("Welcome to the example! The blue text on the bottom show the keybindings"),
-			WithPosition(0, h-2, Text(colors.Blue+"Next Page: Tab. Previous Page: shift + tab")),
-		),
     
-		// Page 2
+    var keybindings ui.Class[*ui.TextComponent]
-		Div(
+    keybindings.SetProperties(func(tc *ui.TextComponent) *ui.TextComponent {
-			WithPosition(0, 0, Text("This blue square is a div. A div stores multiple components into one")),
+        tc.Text = colors.Blue + tc.Text
-			WithPosition((w-30)/2, (h-4)/2,
+        tc.Data.Y = h - 2
-				WithSize(30, 5,
+        return tc
-					Div(WithPosition(4, 1, Button("Hello, World!").Params(BtnParams{Width: 19}))).Params(DivParams{Style: DivStyle{Outline: colors.Blue}}),
+    })
-				)),
-			WithPosition(0, h-2, Text(colors.Blue+"Navigate: Ctrl+(W/A/S/D)")),
-		),
 
-		// Page 3
+    return ui.Paginator(
-		Div(
+        // Page 1
-			WithPosition(0, 0, Text("This is a InputBox. It takes user input just like a GUI. "+colors.Red+colors.Bold+"NOTE: This InputBox is inside a div")),
+        ui.Div(
-			WithPosition((w-32)/2, (h-3)/2, InputBox(30)),
+            ui.Text("Welcome to the example! The blue text on the bottom show the keybindings"),
-			WithPosition(0, h-2, Text(colors.Blue+"Navigate: W/S. Select: Enter. Exit Menu: Q. ")),
+            keybindings.Class(ui.Text("Next Page: Tab. Previous Page: shift + tab")),
-		),
+        ),
 
-		// Page 4
+        // Page 2
-		Div(
+        ui.Div(
-			WithPosition(0, 0, Text("This is a Button. To click it press Enter. "+colors.Red+colors.Bold+"NOTE: This Button is inside a div")),
+            ui.WithPosition(0, 0, ui.Text("This blue square is a div. A div stores multiple components into one")),
-			WithPosition((w-20)/2, (h-3)/2, Button("This is a button")),
+            ui.WithPosition((w-30)/2, (h-4)/2,
-			WithPosition(0, h-2, Text(colors.Blue+"Navigate: Ctrl+(W/A/S/D). Click Button: Enter")),
+                ui.WithSize(30, 5,
-		),
+                    ui.Div(ui.WithPosition(4, 1, ui.Button("Hello, World!").Params(ui.ButtonParams{Width: 19}))).Params(ui.DivParams{Style: ui.DivStyle{Outline: colors.Blue}}),
+                )),
+            keybindings.Class(ui.Text("Navigate: Ctrl+(W/A/S/D)")),
+        ),
 
-		// Page 5
+        // Page 3
-		Div(
+        ui.Div(
-			WithPosition(0, 0, Text("This is a Menu. It prompts you to select a item. "+colors.Red+colors.Bold+"NOTE: This Menu is inside a div")),
+            ui.WithPosition(0, 0, ui.Text("This is a InputBox. It takes user input just like a GUI. "+colors.Red+colors.Bold+"NOTE: This InputBox is inside a div")),
-			WithPosition(0, 2, Menu("Item 1", "Item 2", "Item 3", "Item 4", "Item 5").Params(MenuParams{})),
+            ui.WithPosition((w-32)/2, (h-3)/2, ui.InputBox(30)),
-			WithPosition(0, h-2, Text(colors.Blue+"Navigate: Ctrl+(W/A/S/D). Navigate Menu: W/S. Select: Enter. Exit Menu: Q. ")),
+            keybindings.Class(ui.Text("Navigate: Ctrl+(W/A/S/D). Finish: Enter.")),
-		),
+        ),
-	)
+
+        // Page 4
+        ui.Div(
+            ui.WithPosition(0, 0, ui.Text("This is a Button. To click it press Enter. "+colors.Red+colors.Bold+"NOTE: This Button is inside a div")),
+            ui.WithPosition((w-20)/2, (h-3)/2, ui.Button("This is a button")),
+            keybindings.Class(ui.Text("Navigate: Ctrl+(W/A/S/D). Click Button: Enter")),
+        ),
+
+        // Page 5
+        ui.Div(
+            ui.WithPosition(0, 0, ui.Text("This is a Menu. It prompts you to select an item. "+colors.Red+colors.Bold+"NOTE: This Menu is inside a div")),
+            ui.WithPosition(0, 2, ui.Menu("Item 1", "Item 2", "Item 3", "Item 4", "Item 5").Params(ui.MenuParams{OnSelected: func(mc *ui.MenuComponent, b bool) {}})),
+            keybindings.Class(ui.Text("Navigate: Ctrl+(W/A/S/D). Navigate Menu: W/S. Select: Enter. Exit Menu: Q. ")),
+        ),
+    )
 }

go.mod

@@ -5,6 +5,6 @@ go 1.23.1
 require golang.org/x/term v0.24.0 // direct
 
 require (
-	github.com/nathan-fiscaletti/consolesize-go v0.0.0-20220204101620-317176b6684d // indirect
+	github.com/nathan-fiscaletti/consolesize-go v0.0.0-20220204101620-317176b6684d
 	golang.org/x/sys v0.25.0 // indirect
 )

ui/button.go

@@ -10,7 +10,7 @@ import (
 	"github.com/orus-dev/osui/isKey"
 )
 
-type BtnParams struct {
+type ButtonParams struct {
 	Style   ButtonStyle
 	Toggle  bool
 	OnClick func(*ButtonComponent) bool
@@ -92,7 +92,7 @@ func (b *ButtonComponent) GetComponentData() *osui.ComponentData {
 	return &b.Data
 }
 
-func (b *ButtonComponent) Params(param BtnParams) *ButtonComponent {
+func (b *ButtonComponent) Params(param ButtonParams) *ButtonComponent {
 	b.Style = osui.SetDefaults(&param.Style).(*ButtonStyle)
 	if param.OnClick != nil {
 		b.on_click = param.OnClick

ui/menu.go

@@ -27,7 +27,7 @@ type MenuComponent struct {
 	Style        *MenuStyle
 	Items        []string
 	SelectedItem int
-	onSelected   func(*MenuComponent, bool)
+	OnSelected   func(*MenuComponent, bool)
 }
 
 func (m *MenuComponent) GetComponentData() *osui.ComponentData {
@@ -70,10 +70,10 @@ func (m *MenuComponent) Update(key string) bool {
 			m.SelectedItem = len(m.Items) - 1
 		}
 	} else if isKey.Enter(key) {
-		m.onSelected(m, true)
+		m.OnSelected(m, true)
 		return true
 	} else if isKey.Char(key, "q") {
-		m.onSelected(m, false)
+		m.OnSelected(m, false)
 		return true
 	}
 	return false
@@ -81,6 +81,7 @@ func (m *MenuComponent) Update(key string) bool {
 
 func (b *MenuComponent) Params(param MenuParams) *MenuComponent {
 	b.Style = osui.SetDefaults(&param.Style).(*MenuStyle)
+	b.OnSelected = param.OnSelected
 	return b
 }
 

ui/utils.go

@@ -81,3 +81,35 @@ func findClosestComponent(a []osui.Component, i int, d string) int {
 
 	return closestIndex
 }
+
+type Id[T osui.Component] struct {
+	changer   func(T) T
+	Component T
+}
+
+func (i *Id[T]) Id(c T) T {
+	i.Component = c
+	if i.changer != nil {
+		return i.changer(i.Component)
+	}
+	return i.Component
+}
+
+func (i *Id[T]) SetProperties(c func(T) T) {
+	i.changer = c
+}
+
+type Class[T osui.Component] struct {
+	changer func(T) T
+}
+
+func (c *Class[T]) Class(co T) T {
+	if c.changer != nil {
+		return c.changer(co)
+	}
+	return co
+}
+
+func (c *Class[T]) SetProperties(ch func(T) T) {
+	c.changer = ch
+}

utils.go

@@ -174,6 +174,8 @@ func LogicValueInt(b bool, _if, _else int) int {
 	return _else
 }
 
+
+// Get the terminal size
 func GetTerminalSize() (int, int) {
 	return consolesize.GetConsoleSize()
 }