aboutsummaryrefslogtreecommitdiff
path: root/input/example.ts
diff options
context:
space:
mode:
Diffstat (limited to 'input/example.ts')
-rw-r--r--input/example.ts45
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()