all: commit all generate JavaScript files

This is to simplify development on third party where they can
clone and include the file directly without installing or running
anything to build the files.

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();