1 files changed, 224 insertions, 0 deletions
diff --git a/input/example.js b/input/example.js
new file mode 100644
index 0000000..92abba9
--- /dev/null
+++ b/input/example.js
@@ -0,0 +1,224 @@
+// SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info>
+// SPDX-License-Identifier: GPL-3.0-or-later
+import { WuiInputFile } from "./file.js";
+import { WuiInputString } from "./string.js";
+import { WuiInputNumber } from "./number.js";
+import { WuiInputSelect } from "./select.js";
+import { WuiInputCheckboxes } from "./checkboxes.js";
+function exampleInputFile() {
+    const inputFile = new WuiInputFile();
+    inputFile.label = "Input file";
+    inputFile.hint = "Select file to be uploaded.";
+    inputFile.accept = "image/*";
+    inputFile.onChange = (file) => {
+        console.log(`Uploading ${file.name} with size ${file.size}, type ${file.type}, and last modified at ${file.lastModified}.`);
+    };
+    document.body.appendChild(inputFile.element());
+}
+function exampleInputString() {
+    const elExample = document.createElement("div");
+    const elTitle = document.createElement("h3");
+    elTitle.innerText = "Input string";
+    elExample.appendChild(elTitle);
+    const elOut = document.createElement("span");
+    let opts = {
+        id: "my_input_string",
+        label: "Input string with ID",
+        value: "Hello, input string",
+        hint: "The input ID is 'my_input_string'",
+        onChangeHandler: (v) => {
+            elOut.innerText = v;
+        },
+    };
+    let elInputString = new WuiInputString(opts);
+    elExample.appendChild(elInputString.el);
+    opts = {
+        label: "Input string disabled",
+        value: "Hello, disabled input string",
+        is_disabled: true,
+        hint: "The input string is disabled",
+        is_hint_toggled: true,
+        onChangeHandler: (v) => {
+            elOut.innerText = v;
+        },
+    };
+    elInputString = new WuiInputString(opts);
+    elExample.appendChild(elInputString.el);
+    opts = {
+        label: "Input string without hint",
+        value: "Hello, input string without hint",
+        onChangeHandler: (v) => {
+            elOut.innerText = v;
+        },
+    };
+    elInputString = new WuiInputString(opts);
+    elExample.appendChild(elInputString.el);
+    const elOutLabel = document.createElement("div");
+    elOutLabel.innerText = "Input string changes to ";
+    elOutLabel.appendChild(elOut);
+    elExample.appendChild(elOutLabel);
+    document.body.appendChild(elExample);
+}
+function exampleInputNumber() {
+    const elExample = document.createElement("div");
+    const elTitle = document.createElement("h3");
+    elTitle.innerText = "Input number";
+    elExample.appendChild(elTitle);
+    const elOut = document.createElement("span");
+    let opts = {
+        label: "Input number",
+        value: 1,
+        onChangeHandler: (val) => {
+            elOut.innerText = "" + val;
+        },
+    };
+    let inputNum = new WuiInputNumber(opts);
+    elExample.appendChild(inputNum.el);
+    opts = {
+        id: "my_input_number",
+        label: "Input number with ID",
+        value: 10,
+        hint: "The ID for this input is 'my_input_number'",
+        onChangeHandler: (val) => {
+            elOut.innerText = "" + val;
+        },
+    };
+    inputNum = new WuiInputNumber(opts);
+    elExample.appendChild(inputNum.el);
+    opts = {
+        label: "Input number disabled",
+        value: 1000,
+        hint: "Input number with 'is_disabled' set to true",
+        is_disabled: true,
+        is_hint_toggled: true,
+        onChangeHandler: (val) => {
+            elOut.innerText = "" + val;
+        },
+    };
+    inputNum = new WuiInputNumber(opts);
+    elExample.appendChild(inputNum.el);
+    opts = {
+        label: "Input number with hint",
+        value: 10000,
+        hint: "This is the <b>hint</b>",
+        onChangeHandler: (val) => {
+            elOut.innerText = "" + val;
+        },
+    };
+    inputNum = new WuiInputNumber(opts);
+    elExample.appendChild(inputNum.el);
+    opts = {
+        label: "Input number with max and min",
+        value: 10,
+        max: 12,
+        min: -20,
+        onChangeHandler: (val) => {
+            elOut.innerText = "" + val;
+        },
+    };
+    inputNum = new WuiInputNumber(opts);
+    elExample.appendChild(inputNum.el);
+    const elOutLabel = document.createElement("div");
+    elOutLabel.innerText = "Input number changes to ";
+    elOutLabel.appendChild(elOut);
+    elExample.appendChild(elOutLabel);
+    document.body.appendChild(elExample);
+}
+function exampleInputSelect() {
+    const elExample = document.createElement("div");
+    document.body.appendChild(elExample);
+    const elTitle = document.createElement("h3");
+    elTitle.innerText = "Input select";
+    elExample.appendChild(elTitle);
+    const elLog = document.createElement("div");
+    const opts = {
+        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 one of the option to see the price.",
+        is_hint_toggled: true,
+        onChangeHandler: (key, value) => {
+            elLog.innerText = `The select input changes to '${key}' with price '${value}'`;
+        },
+    };
+    const input = new WuiInputSelect(opts);
+    elExample.appendChild(input.el);
+    elExample.appendChild(elLog);
+}
+function exampleInputCheckboxes() {
+    const elExample = document.createElement("div");
+    document.body.appendChild(elExample);
+    const elTitle = document.createElement("h3");
+    elTitle.innerText = "Input checkboxes";
+    elExample.appendChild(elTitle);
+    const elLog = document.createElement("div");
+    let 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.",
+        onChangeHandler: (values) => {
+            elLog.innerText = `You are selecting ${values}`;
+        },
+    };
+    let input = new WuiInputCheckboxes(opts);
+    elExample.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: "Input select with 'is_disabled' and 'is_hint_toggled' is set to 'true'.",
+        is_disabled: true,
+        is_hint_toggled: true,
+        onChangeHandler: (values) => {
+            elLog.innerText = `You are selecting ${values}`;
+        },
+    };
+    input = new WuiInputCheckboxes(opts);
+    elExample.appendChild(input.el);
+    elExample.appendChild(elLog);
+}
+exampleInputFile();
+exampleInputString();
+exampleInputNumber();
+exampleInputSelect();
+exampleInputCheckboxes();