aboutsummaryrefslogtreecommitdiff
path: root/input
diff options
context:
space:
mode:
Diffstat (limited to 'input')
-rw-r--r--input/checkboxes.d.ts48
-rw-r--r--input/checkboxes.ts42
-rw-r--r--input/example.ts132
-rw-r--r--input/number.d.ts52
-rw-r--r--input/number.ts8
-rw-r--r--input/option.d.ts4
-rw-r--r--input/select.d.ts56
-rw-r--r--input/select.ts29
-rw-r--r--input/string.d.ts46
-rw-r--r--input/string.ts4
10 files changed, 210 insertions, 211 deletions
diff --git a/input/checkboxes.d.ts b/input/checkboxes.d.ts
index dde0476..e0cced0 100644
--- a/input/checkboxes.d.ts
+++ b/input/checkboxes.d.ts
@@ -1,33 +1,33 @@
import { WuiInputOption } from "./option.js";
export interface WuiKeyValue {
- [key: string]: string;
+ [key: string]: string;
}
export interface WuiKeySelectOption {
- [key: string]: WuiInputOption;
+ [key: string]: WuiInputOption;
}
export interface WuiInputCheckboxesOpts {
- label: string;
- name: string;
- options: WuiKeySelectOption;
- id?: string;
- hint?: string;
- is_disabled?: boolean;
- is_hint_toggled?: boolean;
- onChangeHandler?: (values: string[]) => void;
+ label: string;
+ name: string;
+ options: WuiKeySelectOption;
+ id?: string;
+ hint?: string;
+ is_disabled?: boolean;
+ is_hint_toggled?: boolean;
+ onChangeHandler?: (values: string[]) => void;
}
export declare class WuiInputCheckboxes {
- opts: WuiInputCheckboxesOpts;
- el: HTMLElement;
- private el_label;
- private el_fieldset;
- private el_hint;
- private el_hint_toggler;
- private values;
- constructor(opts: WuiInputCheckboxesOpts);
- private generateLabel;
- private generateInput;
- private generateHintToggler;
- private generateHint;
- private onClickHintToggler;
- private onClickCheckbox;
+ opts: WuiInputCheckboxesOpts;
+ el: HTMLElement;
+ private el_label;
+ private el_fieldset;
+ private el_hint;
+ private el_hint_toggler;
+ private values;
+ constructor(opts: WuiInputCheckboxesOpts);
+ private generateLabel;
+ private generateInput;
+ private generateHintToggler;
+ private generateHint;
+ private onClickHintToggler;
+ private onClickCheckbox;
}
diff --git a/input/checkboxes.ts b/input/checkboxes.ts
index 72d3da8..7226a7d 100644
--- a/input/checkboxes.ts
+++ b/input/checkboxes.ts
@@ -59,7 +59,7 @@ const WUI_INPUT_CHECKBOXES_CLASS_LABEL = "wui_input_checkboxes_label";
//
export class WuiInputCheckboxes {
el: HTMLElement;
- private el_label!: HTMLElement;
+ private elLabel!: HTMLElement;
private el_fieldset!: HTMLFieldSetElement;
private el_hint!: HTMLElement;
private el_hint_toggler!: HTMLElement;
@@ -85,41 +85,39 @@ export class WuiInputCheckboxes {
}
private generateLabel(wrapper: HTMLElement) {
- this.el_label = document.createElement("label");
- this.el_label.classList.add(WUI_INPUT_CHECKBOXES_CLASS_LABEL);
- this.el_label.innerHTML = `${this.opts.label} `;
- wrapper.appendChild(this.el_label);
+ this.elLabel = document.createElement("label");
+ this.elLabel.classList.add(WUI_INPUT_CHECKBOXES_CLASS_LABEL);
+ this.elLabel.innerHTML = `${this.opts.label} `;
+ wrapper.appendChild(this.elLabel);
}
private generateInput(wrapper: HTMLElement) {
this.el_fieldset = document.createElement("fieldset");
this.el_fieldset.classList.add(WUI_INPUT_CHECKBOXES_CLASS_INPUT);
- for (let key in this.opts.options) {
- let option = this.opts.options[key];
- let value = option.value;
+ Object.entries(this.opts.options).forEach(([key, option]) => {
+ const value = option.value;
+ const wrapper = document.createElement("div");
- let wrapper = document.createElement("div");
-
- let el_cb = document.createElement("input");
- el_cb.type = "checkbox";
- el_cb.name = this.opts.name;
- el_cb.value = option.value;
+ const elCb = document.createElement("input");
+ elCb.type = "checkbox";
+ elCb.name = this.opts.name;
+ elCb.value = option.value;
if (option.selected) {
- el_cb.checked = true;
+ elCb.checked = true;
this.values.push(value);
}
- el_cb.onclick = () => {
- this.onClickCheckbox(el_cb.value, el_cb.checked);
+ elCb.onclick = () => {
+ this.onClickCheckbox(elCb.value, elCb.checked);
};
- wrapper.appendChild(el_cb);
+ wrapper.appendChild(elCb);
- let el_label = document.createElement("label");
- el_label.innerHTML = key;
- wrapper.appendChild(el_label);
+ const elLabel = document.createElement("label");
+ elLabel.innerHTML = key;
+ wrapper.appendChild(elLabel);
this.el_fieldset.appendChild(wrapper);
- }
+ });
if (this.opts.is_disabled) {
this.el_fieldset.disabled = true;
diff --git a/input/example.ts b/input/example.ts
index 660ea20..2fbd5ad 100644
--- a/input/example.ts
+++ b/input/example.ts
@@ -7,13 +7,13 @@ import { WuiInputSelect, WuiInputSelectOpts } from "./select.js";
import { WuiInputCheckboxes, WuiInputCheckboxesOpts } from "./checkboxes.js";
function exampleInputString() {
- let el_example = document.createElement("div");
+ const elExample = document.createElement("div");
- let el_title = document.createElement("h3");
- el_title.innerText = "Input string";
- el_example.appendChild(el_title);
+ const elTitle = document.createElement("h3");
+ elTitle.innerText = "Input string";
+ elExample.appendChild(elTitle);
- let el_out = document.createElement("span");
+ const elOut = document.createElement("span");
let opts: WuiInputStringOpts = {
id: "my_input_string",
@@ -21,11 +21,11 @@ function exampleInputString() {
value: "Hello, input string",
hint: "The input ID is 'my_input_string'",
onChangeHandler: (v: string) => {
- el_out.innerText = v;
+ elOut.innerText = v;
},
};
- let el_input_string = new WuiInputString(opts);
- el_example.appendChild(el_input_string.el);
+ let elInputString = new WuiInputString(opts);
+ elExample.appendChild(elInputString.el);
opts = {
label: "Input string disabled",
@@ -34,48 +34,48 @@ function exampleInputString() {
hint: "The input string is disabled",
is_hint_toggled: true,
onChangeHandler: (v: string) => {
- el_out.innerText = v;
+ elOut.innerText = v;
},
};
- el_input_string = new WuiInputString(opts);
- el_example.appendChild(el_input_string.el);
+ elInputString = new WuiInputString(opts);
+ elExample.appendChild(elInputString.el);
opts = {
label: "Input string without hint",
value: "Hello, input string without hint",
onChangeHandler: (v: string) => {
- el_out.innerText = v;
+ elOut.innerText = v;
},
};
- el_input_string = new WuiInputString(opts);
- el_example.appendChild(el_input_string.el);
+ elInputString = new WuiInputString(opts);
+ elExample.appendChild(elInputString.el);
- let el_out_label = document.createElement("div");
- el_out_label.innerText = "Input string changes to ";
- el_out_label.appendChild(el_out);
- el_example.appendChild(el_out_label);
+ const elOutLabel = document.createElement("div");
+ elOutLabel.innerText = "Input string changes to ";
+ elOutLabel.appendChild(elOut);
+ elExample.appendChild(elOutLabel);
- document.body.appendChild(el_example);
+ document.body.appendChild(elExample);
}
function exampleInputNumber() {
- let el_example = document.createElement("div");
+ const elExample = document.createElement("div");
- let el_title = document.createElement("h3");
- el_title.innerText = "Input number";
- el_example.appendChild(el_title);
+ const elTitle = document.createElement("h3");
+ elTitle.innerText = "Input number";
+ elExample.appendChild(elTitle);
- let el_out = document.createElement("span");
+ const elOut = document.createElement("span");
let opts: WuiInputNumberOpts = {
label: "Input number",
value: 1,
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- let input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ let inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
opts = {
id: "my_input_number",
@@ -83,11 +83,11 @@ function exampleInputNumber() {
value: 10,
hint: "The ID for this input is 'my_input_number'",
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
opts = {
label: "Input number disabled",
@@ -96,22 +96,22 @@ function exampleInputNumber() {
is_disabled: true,
is_hint_toggled: true,
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ 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: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
opts = {
label: "Input number with max and min",
@@ -119,31 +119,31 @@ function exampleInputNumber() {
max: 12,
min: -20,
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
- let el_out_label = document.createElement("div");
- el_out_label.innerText = "Input number changes to ";
- el_out_label.appendChild(el_out);
- el_example.appendChild(el_out_label);
+ const elOutLabel = document.createElement("div");
+ elOutLabel.innerText = "Input number changes to ";
+ elOutLabel.appendChild(elOut);
+ elExample.appendChild(elOutLabel);
- document.body.appendChild(el_example);
+ document.body.appendChild(elExample);
}
function exampleInputSelect() {
- let el_example = document.createElement("div");
- document.body.appendChild(el_example);
+ const elExample = document.createElement("div");
+ document.body.appendChild(elExample);
- let el_title = document.createElement("h3");
- el_title.innerText = "Input select";
- el_example.appendChild(el_title);
+ const elTitle = document.createElement("h3");
+ elTitle.innerText = "Input select";
+ elExample.appendChild(elTitle);
- let el_log = document.createElement("div");
+ const elLog = document.createElement("div");
- let opts: WuiInputSelectOpts = {
+ const opts: WuiInputSelectOpts = {
name: "my_fruit_price",
label: "Input select",
options: {
@@ -163,23 +163,23 @@ function exampleInputSelect() {
hint: "Select one of the option to see the price.",
is_hint_toggled: true,
onChangeHandler: (key: string, value: string) => {
- el_log.innerText = `The select input changes to '${key}' with price '${value}'`;
+ elLog.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);
+ const input = new WuiInputSelect(opts);
+ elExample.appendChild(input.el);
+ elExample.appendChild(elLog);
}
function exampleInputCheckboxes() {
- let el_example = document.createElement("div");
- document.body.appendChild(el_example);
+ const elExample = document.createElement("div");
+ document.body.appendChild(elExample);
- let el_title = document.createElement("h3");
- el_title.innerText = "Input checkboxes";
- el_example.appendChild(el_title);
+ const elTitle = document.createElement("h3");
+ elTitle.innerText = "Input checkboxes";
+ elExample.appendChild(elTitle);
- let el_log = document.createElement("div");
+ const elLog = document.createElement("div");
let opts: WuiInputCheckboxesOpts = {
name: "my_fruits",
@@ -200,11 +200,11 @@ function exampleInputCheckboxes() {
},
hint: "Select fruits.",
onChangeHandler: (values: string[]) => {
- el_log.innerText = `You are selecting ${values}`;
+ elLog.innerText = `You are selecting ${values}`;
},
};
let input = new WuiInputCheckboxes(opts);
- el_example.appendChild(input.el);
+ elExample.appendChild(input.el);
opts = {
name: "my_fruits",
@@ -227,13 +227,13 @@ function exampleInputCheckboxes() {
is_disabled: true,
is_hint_toggled: true,
onChangeHandler: (values: string[]) => {
- el_log.innerText = `You are selecting ${values}`;
+ elLog.innerText = `You are selecting ${values}`;
},
};
input = new WuiInputCheckboxes(opts);
- el_example.appendChild(input.el);
+ elExample.appendChild(input.el);
- el_example.appendChild(el_log);
+ elExample.appendChild(elLog);
}
exampleInputString();
diff --git a/input/number.d.ts b/input/number.d.ts
index 34b4cf5..885f1cb 100644
--- a/input/number.d.ts
+++ b/input/number.d.ts
@@ -1,30 +1,30 @@
export interface WuiInputNumberOpts {
- label: string | HTMLElement;
- value: number;
- id?: string;
- hint?: string;
- max?: number;
- min?: number;
- class_label?: string;
- class_input?: string;
- is_disabled?: boolean;
- is_hint_toggled?: boolean;
- onChangeHandler: (new_value: number) => void;
+ label: string | HTMLElement;
+ value: number;
+ id?: string;
+ hint?: string;
+ max?: number;
+ min?: number;
+ class_label?: string;
+ class_input?: string;
+ is_disabled?: boolean;
+ is_hint_toggled?: boolean;
+ onChangeHandler: (new_value: number) => void;
}
export declare class WuiInputNumber {
- opts: WuiInputNumberOpts;
- el: HTMLElement;
- private el_label;
- private el_input;
- private el_hint;
- private el_hint_toggler;
- private value;
- constructor(opts: WuiInputNumberOpts);
- private generateLabel;
- private generateInput;
- private generateHintToggler;
- private generateHint;
- private onClickHintToggler;
- private onKeyUp;
- Set(v: number): void;
+ opts: WuiInputNumberOpts;
+ el: HTMLElement;
+ private el_label;
+ private el_input;
+ private el_hint;
+ private el_hint_toggler;
+ private value;
+ constructor(opts: WuiInputNumberOpts);
+ private generateLabel;
+ private generateInput;
+ private generateHintToggler;
+ private generateHint;
+ private onClickHintToggler;
+ private onKeyUp;
+ Set(v: number): void;
}
diff --git a/input/number.ts b/input/number.ts
index 0b59dbe..e5c22a1 100644
--- a/input/number.ts
+++ b/input/number.ts
@@ -67,7 +67,7 @@ export class WuiInputNumber {
this.el.classList.add(WUI_INPUT_NUMBER_CLASS);
this.el.style.padding = "2px";
- let wrapper = document.createElement("div");
+ const wrapper = document.createElement("div");
this.generateLabel(wrapper);
this.generateInput(wrapper);
if (opts.hint) {
@@ -151,7 +151,7 @@ export class WuiInputNumber {
}
private generateHint() {
- let hint = this.opts.hint || "";
+ const hint = this.opts.hint || "";
this.el_hint = document.createElement("div");
this.el_hint.classList.add(WUI_INPUT_NUMBER_CLASS_HINT);
@@ -176,10 +176,10 @@ export class WuiInputNumber {
}
private onKeyUp(ev: KeyboardEvent) {
- let target = ev.target as HTMLInputElement;
+ const target = ev.target as HTMLInputElement;
ev.preventDefault();
- let newValue = +target.value;
+ const newValue = +target.value;
if (newValue === null) {
this.el_input.style.backgroundColor = "lightsalmon";
return false;
diff --git a/input/option.d.ts b/input/option.d.ts
index ac723d2..8077182 100644
--- a/input/option.d.ts
+++ b/input/option.d.ts
@@ -1,4 +1,4 @@
export interface WuiInputOption {
- value: string;
- selected: boolean;
+ value: string;
+ selected: boolean;
}
diff --git a/input/select.d.ts b/input/select.d.ts
index e92d82d..3f39184 100644
--- a/input/select.d.ts
+++ b/input/select.d.ts
@@ -1,37 +1,37 @@
import { WuiInputOption } from "./option.js";
export interface WuiKeyValue {
- [key: string]: string;
+ [key: string]: string;
}
export interface WuiKeySelectOption {
- [key: string]: WuiInputOption;
+ [key: string]: WuiInputOption;
}
export interface WuiInputSelectOpts {
- label: string | HTMLElement;
- name: string;
- options: WuiKeySelectOption;
- id?: string;
- hint?: string;
- class_label?: string;
- class_input?: string;
- is_disabled?: boolean;
- is_hint_toggled?: boolean;
- onChangeHandler?: (key: string, value: string) => void;
+ label: string | HTMLElement;
+ name: string;
+ options: WuiKeySelectOption;
+ id?: string;
+ hint?: string;
+ class_label?: string;
+ class_input?: string;
+ is_disabled?: boolean;
+ is_hint_toggled?: boolean;
+ onChangeHandler?: (key: string, value: string) => void;
}
export declare class WuiInputSelect {
- opts: WuiInputSelectOpts;
- el: HTMLElement;
- private el_label;
- private el_input;
- private el_hint;
- private el_hint_toggler;
- private value_key;
- private value;
- constructor(opts: WuiInputSelectOpts);
- private generateLabel;
- private generateInput;
- private generateHintToggler;
- private generateHint;
- private onClickHintToggler;
- private onClickInput;
- Set(v: string): void;
+ opts: WuiInputSelectOpts;
+ el: HTMLElement;
+ private el_label;
+ private el_input;
+ private el_hint;
+ private el_hint_toggler;
+ private value_key;
+ private value;
+ constructor(opts: WuiInputSelectOpts);
+ private generateLabel;
+ private generateInput;
+ private generateHintToggler;
+ private generateHint;
+ private onClickHintToggler;
+ private onClickInput;
+ Set(v: string): void;
}
diff --git a/input/select.ts b/input/select.ts
index 6bf4810..e874a29 100644
--- a/input/select.ts
+++ b/input/select.ts
@@ -73,7 +73,7 @@ export class WuiInputSelect {
this.el.classList.add(WUI_INPUT_SELECT_CLASS);
this.el.style.padding = "2px";
- let wrapper = document.createElement("div");
+ const wrapper = document.createElement("div");
this.generateLabel(wrapper);
this.generateInput(wrapper);
if (opts.hint) {
@@ -109,21 +109,19 @@ export class WuiInputSelect {
this.el_input.classList.add(this.opts.class_input);
}
- for (let key in this.opts.options) {
- let option = this.opts.options[key];
-
- let el_option = document.createElement("option");
- el_option.value = option.value;
- el_option.innerHTML = key;
+ Object.entries(this.opts.options).forEach(([key, option]) => {
+ const elOption = document.createElement("option");
+ elOption.value = option.value;
+ elOption.innerHTML = key;
if (option.selected) {
- el_option.selected = true;
+ elOption.selected = true;
}
- this.el_input.appendChild(el_option);
+ this.el_input.appendChild(elOption);
this.value_key[option.value] = key;
- }
+ });
if (this.opts.is_disabled) {
this.el_input.disabled = true;
@@ -182,12 +180,15 @@ export class WuiInputSelect {
return false;
}
- let value = this.el_input.value;
- let key = this.value_key[value];
+ const value = this.el_input.value;
if (this.value !== value) {
- this.opts.onChangeHandler(key, value);
- this.value = value;
+ const key = this.value_key[value];
+ if (key) {
+ this.opts.onChangeHandler(key, value);
+ this.value = value;
+ }
}
+ return true;
}
// Set the input value.
diff --git a/input/string.d.ts b/input/string.d.ts
index 747c4c6..e1b73ff 100644
--- a/input/string.d.ts
+++ b/input/string.d.ts
@@ -1,27 +1,27 @@
export interface WuiInputStringOpts {
- label: string | HTMLElement;
- value: string;
- id?: string;
- hint?: string;
- class_label?: string;
- class_input?: string;
- is_disabled?: boolean;
- is_hint_toggled?: boolean;
- onChangeHandler?: (new_value: string) => void;
+ label: string | HTMLElement;
+ value: string;
+ id?: string;
+ hint?: string;
+ class_label?: string;
+ class_input?: string;
+ is_disabled?: boolean;
+ is_hint_toggled?: boolean;
+ onChangeHandler?: (new_value: string) => void;
}
export declare class WuiInputString {
- opts: WuiInputStringOpts;
- el: HTMLElement;
- private el_label;
- private el_input;
- private el_hint;
- private el_hint_toggler;
- private value;
- constructor(opts: WuiInputStringOpts);
- private generateLabel;
- private generateInput;
- private generateHintToggler;
- private generateHint;
- private onClickHintToggler;
- Set(v: string): void;
+ opts: WuiInputStringOpts;
+ el: HTMLElement;
+ private el_label;
+ private el_input;
+ private el_hint;
+ private el_hint_toggler;
+ private value;
+ constructor(opts: WuiInputStringOpts);
+ private generateLabel;
+ private generateInput;
+ private generateHintToggler;
+ private generateHint;
+ private onClickHintToggler;
+ Set(v: string): void;
}
diff --git a/input/string.ts b/input/string.ts
index d428c32..f37a68f 100644
--- a/input/string.ts
+++ b/input/string.ts
@@ -62,7 +62,7 @@ export class WuiInputString {
this.el.classList.add(WUI_INPUT_STRING_CLASS);
this.el.style.padding = "2px";
- let wrapper = document.createElement("div");
+ const wrapper = document.createElement("div");
this.generateLabel(wrapper);
this.generateInput(wrapper);
if (opts.hint) {
@@ -104,7 +104,7 @@ export class WuiInputString {
}
if (this.opts.onChangeHandler) {
- this.el_input.onkeyup = (ev: Event) => {
+ this.el_input.onkeyup = () => {
if (this.opts.onChangeHandler) {
if (this.value !== this.el_input.value) {
this.opts.onChangeHandler(this.el_input.value);
generated by cgit v1.3 (git 2.53.0) at 2026-04-15 03:07:31 +0000