input: implement class for input with select

The WuiInputSelect create an HTML input for selecting one more item.

1 files changed, 42 insertions, 3 deletions

diff --git a/input/example.ts b/input/example.ts
index aa26d2d..f6a0647 100644
--- a/input/example.ts
+++ b/input/example.ts
@@ -1,5 +1,6 @@
 import { WuiInputString, WuiInputStringOpts } from "./string.js"
 import { WuiInputNumber, WuiInputNumberOpts } from "./number.js"
+import { WuiInputSelect, WuiInputSelectOpts } from "./select.js"
 
 function exampleInputString() {
 	let el_example = document.createElement("div")
@@ -15,7 +16,7 @@ function exampleInputString() {
 		hint: "The input ID is 'my_input_string'",
 		onChangeHandler: (new_value: string) => {
 			console.log("input string new value: ", new_value)
-		}
+		},
 	}
 	let el_input_string = new WuiInputString(opts)
 	el_example.appendChild(el_input_string.el)
@@ -27,7 +28,7 @@ function exampleInputString() {
 		hint: "The input string is disabled",
 		onChangeHandler: (new_value: string) => {
 			console.log("input string new value: ", new_value)
-		}
+		},
 	}
 	el_input_string = new WuiInputString(opts)
 	el_example.appendChild(el_input_string.el)
@@ -37,7 +38,7 @@ function exampleInputString() {
 		value: "Hello, input string without hint",
 		onChangeHandler: (new_value: string) => {
 			console.log("input string without hint: new value: ", new_value)
-		}
+		},
 	}
 	el_input_string = new WuiInputString(opts)
 	el_example.appendChild(el_input_string.el)
@@ -111,5 +112,43 @@ function exampleInputNumber() {
 	document.body.appendChild(el_example)
 }
 
+function exampleInputSelect() {
+	let el_example = document.createElement("div")
+	document.body.appendChild(el_example)
+
+	let el_title = document.createElement("h3")
+	el_title.innerText = "Input select"
+	el_example.appendChild(el_title)
+
+	let el_log = document.createElement("div")
+
+	let opts: WuiInputSelectOpts = {
+		name: "my_fruit_price",
+		label: "Input select",
+		options: {
+			mango: {
+				value: "1000",
+				selected: false,
+			},
+			papaya: {
+				value: "200",
+				selected: false,
+			},
+			rambutan: {
+				value: "100",
+				selected: true,
+			},
+		},
+		hint: "Select on of the option to see the price.",
+		onChangeHandler: (key: string, value: string) => {
+			el_log.innerText = `The select input changes to '${key}' with price '${value}'`
+		},
+	}
+	let input = new WuiInputSelect(opts)
+	el_example.appendChild(input.el)
+	el_example.appendChild(el_log)
+}
+
 exampleInputString()
 exampleInputNumber()
+exampleInputSelect()