diff options
Diffstat (limited to 'input')
| -rw-r--r-- | input/checkboxes.d.ts | 1 | ||||
| -rw-r--r-- | input/checkboxes.ts | 8 | ||||
| -rw-r--r-- | input/example.ts | 8 | ||||
| -rw-r--r-- | input/number.d.ts | 1 | ||||
| -rw-r--r-- | input/number.ts | 10 | ||||
| -rw-r--r-- | input/select.d.ts | 1 | ||||
| -rw-r--r-- | input/select.ts | 8 | ||||
| -rw-r--r-- | input/string.d.ts | 1 | ||||
| -rw-r--r-- | input/string.ts | 8 |
9 files changed, 39 insertions, 7 deletions
diff --git a/input/checkboxes.d.ts b/input/checkboxes.d.ts index 89a35d3..dde0476 100644 --- a/input/checkboxes.d.ts +++ b/input/checkboxes.d.ts @@ -12,6 +12,7 @@ export interface WuiInputCheckboxesOpts { id?: string; hint?: string; is_disabled?: boolean; + is_hint_toggled?: boolean; onChangeHandler?: (values: string[]) => void; } export declare class WuiInputCheckboxes { diff --git a/input/checkboxes.ts b/input/checkboxes.ts index 3da7335..0edd832 100644 --- a/input/checkboxes.ts +++ b/input/checkboxes.ts @@ -15,6 +15,7 @@ export interface WuiInputCheckboxesOpts { id?: string hint?: string is_disabled?: boolean + is_hint_toggled?: boolean onChangeHandler?: (values: string[]) => void } @@ -141,10 +142,15 @@ export class WuiInputCheckboxes { this.el_hint = document.createElement("div") this.el_hint.classList.add(WUI_INPUT_CHECKBOXES_CLASS_HINT) this.el_hint.innerHTML = this.opts.hint || "" - this.el_hint.style.display = "none" + if (this.opts.is_hint_toggled) { + this.el_hint.style.display = "block" + } else { + this.el_hint.style.display = "none" + } this.el_hint.style.backgroundColor = "gainsboro" this.el_hint.style.borderRadius = "2px" this.el_hint.style.padding = "4px" + this.el_hint.style.marginTop = "2px" this.el.appendChild(this.el_hint) } diff --git a/input/example.ts b/input/example.ts index 3855347..d0ea9c4 100644 --- a/input/example.ts +++ b/input/example.ts @@ -29,6 +29,7 @@ function exampleInputString() { value: "Hello, disabled input string", is_disabled: true, hint: "The input string is disabled", + is_hint_toggled: true, onChangeHandler: (v: string) => { el_out.innerText = v }, @@ -90,6 +91,7 @@ function exampleInputNumber() { value: 1000, hint: "Input number with 'is_disabled' set to true", is_disabled: true, + is_hint_toggled: true, onChangeHandler: (val: number) => { el_out.innerText = ""+val }, @@ -155,7 +157,8 @@ function exampleInputSelect() { selected: true, }, }, - hint: "Select on of the option to see the price.", + 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}'` }, @@ -217,8 +220,9 @@ function exampleInputCheckboxes() { selected: true, }, }, - hint: "Select fruits.", + hint: "Input select with 'is_disabled' and 'is_hint_toggled' is set to 'true'.", is_disabled: true, + is_hint_toggled: true, onChangeHandler: (values: string[]) => { el_log.innerText = `You are selecting ${values}` }, diff --git a/input/number.d.ts b/input/number.d.ts index 29caeea..34b4cf5 100644 --- a/input/number.d.ts +++ b/input/number.d.ts @@ -8,6 +8,7 @@ export interface WuiInputNumberOpts { class_label?: string; class_input?: string; is_disabled?: boolean; + is_hint_toggled?: boolean; onChangeHandler: (new_value: number) => void; } export declare class WuiInputNumber { diff --git a/input/number.ts b/input/number.ts index 4f37eb7..f00e99c 100644 --- a/input/number.ts +++ b/input/number.ts @@ -8,6 +8,7 @@ export interface WuiInputNumberOpts { class_label?: string // Additional CSS class for label. class_input?: string // Additional CSS class for input. is_disabled?: boolean + is_hint_toggled?: boolean // If true, the hint will be displayed first instead of hidden. onChangeHandler: (new_value: number) => void } @@ -156,10 +157,15 @@ export class WuiInputNumber { this.el_hint = document.createElement("div") this.el_hint.classList.add(WUI_INPUT_NUMBER_CLASS_HINT) this.el_hint.innerHTML = hint - this.el_hint.style.display = "none" + if (this.opts.is_hint_toggled) { + this.el_hint.style.display = "block" + } else { + this.el_hint.style.display = "none" + } this.el_hint.style.backgroundColor = "gainsboro" this.el_hint.style.borderRadius = "2px" this.el_hint.style.padding = "4px" + this.el_hint.style.marginTop = "2px" this.el.appendChild(this.el_hint) } @@ -198,6 +204,6 @@ export class WuiInputNumber { // Set the input value. Set(v: number) { - this.el_input.value = ""+ v + this.el_input.value = "" + v } } diff --git a/input/select.d.ts b/input/select.d.ts index 4a5b9d7..e92d82d 100644 --- a/input/select.d.ts +++ b/input/select.d.ts @@ -14,6 +14,7 @@ export interface WuiInputSelectOpts { class_label?: string; class_input?: string; is_disabled?: boolean; + is_hint_toggled?: boolean; onChangeHandler?: (key: string, value: string) => void; } export declare class WuiInputSelect { diff --git a/input/select.ts b/input/select.ts index 7fc42c5..67b0349 100644 --- a/input/select.ts +++ b/input/select.ts @@ -17,6 +17,7 @@ export interface WuiInputSelectOpts { class_label?: string // Additional CSS class for label. class_input?: string // Additional CSS class for input. is_disabled?: boolean + is_hint_toggled?: boolean onChangeHandler?: (key: string, value: string) => void } @@ -158,10 +159,15 @@ export class WuiInputSelect { this.el_hint = document.createElement("div") this.el_hint.classList.add(WUI_INPUT_SELECT_CLASS_HINT) this.el_hint.innerHTML = this.opts.hint || "" - this.el_hint.style.display = "none" + if (this.opts.is_hint_toggled) { + this.el_hint.style.display = "block" + } else { + this.el_hint.style.display = "none" + } this.el_hint.style.backgroundColor = "gainsboro" this.el_hint.style.borderRadius = "2px" this.el_hint.style.padding = "4px" + this.el_hint.style.marginTop = "2px" this.el.appendChild(this.el_hint) } diff --git a/input/string.d.ts b/input/string.d.ts index 0d585e5..747c4c6 100644 --- a/input/string.d.ts +++ b/input/string.d.ts @@ -6,6 +6,7 @@ export interface WuiInputStringOpts { class_label?: string; class_input?: string; is_disabled?: boolean; + is_hint_toggled?: boolean; onChangeHandler?: (new_value: string) => void; } export declare class WuiInputString { diff --git a/input/string.ts b/input/string.ts index 84e7539..961220b 100644 --- a/input/string.ts +++ b/input/string.ts @@ -6,6 +6,7 @@ export interface WuiInputStringOpts { class_label?: string // Additional CSS class for label. class_input?: string // Additional CSS class for input. is_disabled?: boolean + is_hint_toggled?: boolean // If true, the hint will be displayed first instead of hidden. onChangeHandler?: (new_value: string) => void } @@ -143,10 +144,15 @@ export class WuiInputString { this.el_hint = document.createElement("div") this.el_hint.classList.add(WUI_INPUT_STRING_CLASS_HINT) this.el_hint.innerHTML = this.opts.hint || "" - this.el_hint.style.display = "none" + if (this.opts.is_hint_toggled) { + this.el_hint.style.display = "block" + } else { + this.el_hint.style.display = "none" + } this.el_hint.style.backgroundColor = "gainsboro" this.el_hint.style.borderRadius = "2px" this.el_hint.style.padding = "4px" + this.el_hint.style.marginTop = "2px" this.el.appendChild(this.el_hint) } |