Add select component

src/main/java/me/mrletsplay/nojs/_test/DynPage.java

@@ -21,10 +21,10 @@ public class DynPage implements Page {
 			new Form()
 				.action(Action.empty())
 				.layout(new InsetLayout(GridLayout.ofColumns(1), "10px"))
-				.add(new Button().text("Refresh")),
+				.add(new Button().text("Refresh"))
-			new Group()
+		).layout(new GridLayout()
-				.add(new Text().text("Your name is"))
+			.columns("max-content", "max-content")
-		).layout(GridLayout.ofColumns(1));
+			.vAlignment(GridLayout.VAlignment.CENTER));
 	}
 
 }

src/main/java/me/mrletsplay/nojs/_test/LinksPage.java

@@ -1,7 +1,7 @@
 package me.mrletsplay.nojs._test;
 
-import java.util.ArrayList;
+import java.util.LinkedHashMap;
-import java.util.List;
+import java.util.Map;
 
 import me.mrletsplay.nojs.action.Action;
 import me.mrletsplay.nojs.action.ActionData;
@@ -13,6 +13,7 @@ import me.mrletsplay.nojs.component.impl.Form;
 import me.mrletsplay.nojs.component.impl.Group;
 import me.mrletsplay.nojs.component.impl.Link;
 import me.mrletsplay.nojs.component.impl.Message;
+import me.mrletsplay.nojs.component.impl.Select;
 import me.mrletsplay.nojs.component.impl.Text;
 import me.mrletsplay.nojs.component.impl.TextInput;
 import me.mrletsplay.nojs.page.Page;
@@ -21,7 +22,7 @@ import me.mrletsplay.nojs.page.layout.HClampLayout;
 
 public class LinksPage implements Page {
 
-	private List<String> links = new ArrayList<>();
+	private Map<String, String> links = new LinkedHashMap<>();
 	private String error;
 
 	@Override
@@ -30,18 +31,18 @@ public class LinksPage implements Page {
 			.layout(GridLayout.ofColumns(1)
 				.gap("4px"));
 
-		for(String s : links) {
+		for(Map.Entry<String, String> s : links.entrySet()) {
 			linksGroup.add(
 				new Form().add(
 					new Link()
-						.href(s)
+						.href(s.getValue())
-						.text(s)
+						.text(s.getKey())
 						.target(Link.Target.BLANK),
 					new Button()
 						.text("Delete")
 				)
 				.action(new Action("removeLink")
-					.extraData(new ActionData().put("link", s)))
+					.extraData(new ActionData().put("link", s.getKey())))
 				.layout(new GridLayout()
 					.columns("1fr", "auto")
 					.gap("4px")
@@ -69,7 +70,8 @@ public class LinksPage implements Page {
 						new Group().add(
 							new TextInput("linkName").placeholder("Link Name"),
 							new TextInput("link").placeholder("Insert link here"),
-							new Button().text("Add Link")
+							new Button().text("Add Link"),
+							new Select().choice("Test", "Amogus")
 						)
 						.layout(GridLayout.ofColumns(1)
 							.gap("4px"))
@@ -85,13 +87,15 @@ public class LinksPage implements Page {
 
 	@ActionHandler("addLink")
 	public void addLink(ActionEvent event) {
+		String linkName = event.getData("linkName");
 		String link = event.getData("link");
-		if(link == null || link.isBlank() || (!link.startsWith("http://") && !link.startsWith("https://"))) {
+		if(link == null || link.isBlank() || (!link.startsWith("http://") && !link.startsWith("https://"))
+			|| linkName == null || linkName.isBlank()) {
 			error = "Invalid link";
 			return;
 		}
 
-		links.add(event.getData("link"));
+		links.put(linkName.trim(), link.trim());
 	}
 
 	@ActionHandler("removeLink")

src/main/java/me/mrletsplay/nojs/component/impl/Select.java

@@ -0,0 +1,87 @@
+package me.mrletsplay.nojs.component.impl;
+
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.List;
+import java.util.Map;
+
+import me.mrletsplay.nojs.component.Component;
+import me.mrletsplay.simplehttpserver.dom.html.HtmlElement;
+import me.mrletsplay.simplehttpserver.dom.html.element.HtmlSelect;
+
+public class Select implements Component {
+
+	private List<Choice> choices;
+
+	public Select() {
+		this.choices = new ArrayList<>();
+	}
+
+	public Select choice(Choice choice) {
+		this.choices.add(choice);
+		return this;
+	}
+
+	public Select choice(String value, String label) {
+		return choice(new Choice(value, label));
+	}
+
+	public Select choices(Choice... choices) {
+		for(Choice c : choices) {
+			if(c == null) continue;
+			this.choices.add(c);
+		}
+
+		return this;
+	}
+
+	public Select choices(Collection<Choice> choices) {
+		for(Choice c : choices) {
+			if(c == null) continue;
+			this.choices.add(c);
+		}
+
+		return this;
+	}
+
+	public Select choices(Map<String, String> valuesAndLabels) {
+		for(var entry : valuesAndLabels.entrySet()) {
+			choice(entry.getKey(), entry.getValue());
+		}
+
+		return this;
+	}
+
+	@Override
+	public HtmlElement toHtml() {
+		HtmlSelect select = HtmlElement.select();
+		select.addClass("select");
+
+		for(Choice c : choices) {
+			select.addOption(c.getLabel(), c.getValue());
+		}
+
+		return select;
+	}
+
+	public static class Choice {
+
+		private final String value;
+		private final String label;
+
+		public Choice(String value, String label) {
+			this.value = value;
+			this.label = label;
+		}
+
+		public String getValue() {
+			return value;
+		}
+
+		public String getLabel() {
+			return label;
+		}
+
+	}
+
+}

src/main/resources/style/base.css

@@ -39,7 +39,7 @@ body {
 	cursor: not-allowed;
 }
 
-.input {
+.input, .select {
 	background: #2c3444;
 	border: none;
 	color: var(--text);
@@ -47,7 +47,11 @@ body {
 	padding: 8px;
 }
 
-.input:focus, .button:focus, .link:focus {
+.select {
+	cursor: pointer;
+}
+
+.input:focus, .button:focus, .link:focus, .select:focus {
 	outline: 2px solid var(--accent);
 }