input: implement input for checkboxes

The WuiInputCheckboxes class can create an HTML input for selecting one
or more item using checkbox.

The class require the following options: label, name, and options; and
optionally id, hint, is_disabled, and onChangeHandler.

The onChangeHandler receive all checked values.

1 files changed, 66 insertions, 0 deletions

diff --git a/input/example.ts b/input/example.ts
index f6a0647..1ca5736 100644
--- a/input/example.ts
+++ b/input/example.ts
@@ -1,6 +1,7 @@
 import { WuiInputString, WuiInputStringOpts } from "./string.js"
 import { WuiInputNumber, WuiInputNumberOpts } from "./number.js"
 import { WuiInputSelect, WuiInputSelectOpts } from "./select.js"
+import { WuiInputCheckboxes, WuiInputCheckboxesOpts } from "./checkboxes.js"
 
 function exampleInputString() {
 	let el_example = document.createElement("div")
@@ -149,6 +150,71 @@ function exampleInputSelect() {
 	el_example.appendChild(el_log)
 }
 
+function exampleInputCheckboxes() {
+	let el_example = document.createElement("div")
+	document.body.appendChild(el_example)
+
+	let el_title = document.createElement("h3")
+	el_title.innerText = "Input checkboxes"
+	el_example.appendChild(el_title)
+
+	let el_log = document.createElement("div")
+
+	let opts: WuiInputCheckboxesOpts = {
+		name: "my_fruits",
+		label: "Input checkboxes",
+		options: {
+			mango: {
+				value: "1000",
+				selected: false,
+			},
+			papaya: {
+				value: "200",
+				selected: false,
+			},
+			rambutan: {
+				value: "100",
+				selected: true,
+			},
+		},
+		hint: "Select fruits.",
+		onChangeHandler: (values: string[]) => {
+			el_log.innerText = `You are selecting ${values}`
+		},
+	}
+	let input = new WuiInputCheckboxes(opts)
+	el_example.appendChild(input.el)
+
+	opts = {
+		name: "my_fruits",
+		label: "Input checkboxes",
+		options: {
+			mango: {
+				value: "1000",
+				selected: false,
+			},
+			papaya: {
+				value: "200",
+				selected: false,
+			},
+			rambutan: {
+				value: "100",
+				selected: true,
+			},
+		},
+		hint: "Select fruits.",
+		is_disabled: true,
+		onChangeHandler: (values: string[]) => {
+			el_log.innerText = `You are selecting ${values}`
+		},
+	}
+	input = new WuiInputCheckboxes(opts)
+	el_example.appendChild(input.el)
+
+	el_example.appendChild(el_log)
+}
+
 exampleInputString()
 exampleInputNumber()
 exampleInputSelect()
+exampleInputCheckboxes()