diff options
Diffstat (limited to 'input/example.ts')
| -rw-r--r-- | input/example.ts | 45 |
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() |
