input: implement class WuiInputString

The WuiInputString create an HTML input for string with predefined
options.
The required options are "label" and "value".

1 files changed, 46 insertions, 0 deletions

diff --git a/input/example.ts b/input/example.ts
index 3e68451..aa26d2d 100644
--- a/input/example.ts
+++ b/input/example.ts
@@ -1,5 +1,50 @@
+import { WuiInputString, WuiInputStringOpts } from "./string.js"
 import { WuiInputNumber, WuiInputNumberOpts } from "./number.js"
 
+function exampleInputString() {
+	let el_example = document.createElement("div")
+
+	let el_title = document.createElement("h3")
+	el_title.innerText = "Input string"
+	el_example.appendChild(el_title)
+
+	let opts: WuiInputStringOpts = {
+		id: "my_input_string",
+		label: "Input string with ID",
+		value: "Hello, input string",
+		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)
+
+	opts = {
+		label: "Input string disabled",
+		value: "Hello, disabled input string",
+		is_disabled: true,
+		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)
+
+	opts = {
+		label: "Input string without hint",
+		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)
+
+	document.body.appendChild(el_example)
+}
+
 function exampleInputNumber() {
 	let el_example = document.createElement("div")
 
@@ -66,4 +111,5 @@ function exampleInputNumber() {
 	document.body.appendChild(el_example)
 }
 
+exampleInputString()
 exampleInputNumber()