From 437cee56693f69b2a58f37f8a5ff5b931ea803a2 Mon Sep 17 00:00:00 2001
From: Shulhan <ms@kilabit.info>
Date: Sun, 5 Sep 2021 15:28:30 +0700
Subject: input: implement class for input number

The WuiInputNumber create an HTML input that allow number only, with
optional max and min options.
The required options is "label" and "value".

Format of generated HTML output,

  <div [id=${id}] class="${WUI_INPUT_NUMBER_CLASS}">
    <div>
      <label class="${WUI_INPUT_NUMBER_CLASS_LABEL}">${label}</label>
      <input
        class="${WUI_INPUT_NUMBER_CLASS_INPUT}"
        [max=${max}]
        [min=${min}]
        [disabled=${is_disabled}]
        value=${value}
      >
      <span class="${WUI_INPUT_NUMBER_CLASS_HINT_TOGGLER}">i </span>
    </div>
    <div class="${WUI_INPUT_NUMBER_CLASS_HINT}">${hint}</div>
  </div>

User can set onChangeHandler to receive new value when the value
changes and valid; otherwise, if the value is invalid, the input
background will changes accordingly.
---
 input/example.ts | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 input/example.ts

(limited to 'input/example.ts')

diff --git a/input/example.ts b/input/example.ts
new file mode 100644
index 0000000..3e68451
--- /dev/null
+++ b/input/example.ts
@@ -0,0 +1,69 @@
+import { WuiInputNumber, WuiInputNumberOpts } from "./number.js"
+
+function exampleInputNumber() {
+	let el_example = document.createElement("div")
+
+	let el_title = document.createElement("h3")
+	el_title.innerText = "Input number"
+	el_example.appendChild(el_title)
+
+	let opts: WuiInputNumberOpts = {
+		label: "Input number",
+		value: 100,
+		onChangeHandler: (val: number) => {
+			console.log("number changes to", val)
+		},
+	}
+	let input_num = new WuiInputNumber(opts)
+	el_example.appendChild(input_num.el)
+
+	opts = {
+		id: "my_input_number",
+		label: "Input number with ID",
+		value: 100,
+		hint: "The ID for this input is 'my_input_number'",
+		onChangeHandler: (val: number) => {
+			console.log("number changes to", val)
+		},
+	}
+	input_num = new WuiInputNumber(opts)
+	el_example.appendChild(input_num.el)
+
+	opts = {
+		label: "Input number disabled",
+		value: 100,
+		hint: "Input number with 'is_disabled' set to true",
+		is_disabled: true,
+		onChangeHandler: (val: number) => {
+			console.log("number changes to", val)
+		},
+	}
+	input_num = new WuiInputNumber(opts)
+	el_example.appendChild(input_num.el)
+
+	opts = {
+		label: "Input number with hint",
+		value: 100,
+		hint: "This is the <b>hint</b>",
+		onChangeHandler: (val: number) => {
+			console.log("number changes to", val)
+		},
+	}
+	input_num = new WuiInputNumber(opts)
+	el_example.appendChild(input_num.el)
+
+	opts = {
+		label: "Input number with max and min",
+		value: 10,
+		max: 12,
+		min: -20,
+		onChangeHandler: (val: number) => {
+			console.log("number changes to", val)
+		},
+	}
+	input_num = new WuiInputNumber(opts)
+	el_example.appendChild(input_num.el)
+	document.body.appendChild(el_example)
+}
+
+exampleInputNumber()
-- 
cgit v1.3