diff options
Diffstat (limited to 'input/string.ts')
| -rw-r--r-- | input/string.ts | 33 |
1 files changed, 25 insertions, 8 deletions
diff --git a/input/string.ts b/input/string.ts index d8faf36..680c3a4 100644 --- a/input/string.ts +++ b/input/string.ts @@ -1,5 +1,5 @@ export interface WuiInputStringOpts { - label: string + label: string | HTMLElement value: string id?: string hint?: string @@ -21,7 +21,9 @@ const WUI_INPUT_STRING_CLASS_LABEL = "wui_input_string_label" // // <div [id=${id}] class="${WUI_INPUT_STRING_CLASS}"> // <div> -// <label class="${WUI_INPUT_STRING_CLASS_LABEL}">${label}</label> +// <label class="${WUI_INPUT_STRING_CLASS_LABEL}"> +// ${label} | HTMLElement +// </label> // <input // class="${WUI_INPUT_STRING_CLASS_INPUT}" // [disabled=${is_disabled}] @@ -72,12 +74,19 @@ export class WuiInputString { private generateLabel(wrapper: HTMLElement) { this.el_label = document.createElement("label") this.el_label.classList.add(WUI_INPUT_STRING_CLASS_LABEL) - this.el_label.innerHTML = `${this.opts.label} ` + + if (typeof this.opts.label === "string") { + this.el_label.innerHTML = `${this.opts.label} ` + } else { + this.el_label.appendChild(this.opts.label) + } wrapper.appendChild(this.el_label) } private generateInput(wrapper: HTMLElement) { - this.el_input = document.createElement("input") as HTMLInputElement + this.el_input = document.createElement( + "input", + ) as HTMLInputElement this.el_input.classList.add(WUI_INPUT_STRING_CLASS_INPUT) this.el_input.value = "" + this.opts.value @@ -89,9 +98,15 @@ export class WuiInputString { console.log("register onchange") this.el_input.onkeyup = (ev: Event) => { if (this.opts.onChangeHandler) { - if (this.value !== this.el_input.value) { - this.opts.onChangeHandler(this.el_input.value) - this.value = this.el_input.value + if ( + this.value !== + this.el_input.value + ) { + this.opts.onChangeHandler( + this.el_input.value, + ) + this.value = + this.el_input.value } } } @@ -102,7 +117,9 @@ export class WuiInputString { private generateHintToggler(wrapper: HTMLElement) { this.el_hint_toggler = document.createElement("span") - this.el_hint_toggler.classList.add(WUI_INPUT_STRING_CLASS_HINT_TOGGLER) + this.el_hint_toggler.classList.add( + WUI_INPUT_STRING_CLASS_HINT_TOGGLER, + ) this.el_hint_toggler.innerHTML = " ℹ" this.el_hint_toggler.onmouseover = () => { |