diff options
| author | Shulhan <ms@kilabit.info> | 2021-09-11 00:02:13 +0700 |
|---|---|---|
| committer | Shulhan <ms@kilabit.info> | 2021-09-11 00:02:13 +0700 |
| commit | af17111480d41f4770c7129733817e0dfd2d4f7c (patch) | |
| tree | 1e23764116048c9a9b57a5a5958e2b4d8dfe98a2 /input/number.ts | |
| parent | e3da79cf1adfb6dc2d9fed2e982bcde7fe7a7161 (diff) | |
| download | pakakeh.ts-af17111480d41f4770c7129733817e0dfd2d4f7c.tar.xz | |
input: allow label to be HTMLElement instead of only string
A label on input can be a string or another HTMLElement.
Diffstat (limited to 'input/number.ts')
| -rw-r--r-- | input/number.ts | 20 |
1 files changed, 15 insertions, 5 deletions
diff --git a/input/number.ts b/input/number.ts index 11e561b..e2d1bc5 100644 --- a/input/number.ts +++ b/input/number.ts @@ -1,5 +1,5 @@ export interface WuiInputNumberOpts { - label: string + label: string | HTMLElement value: number id?: string hint?: string @@ -24,7 +24,9 @@ const WUI_INPUT_NUMBER_CLASS_LABEL = "wui_input_number_label" // // <div [id=${id}] class="${WUI_INPUT_NUMBER_CLASS}"> // <div> -// <label class="${WUI_INPUT_NUMBER_CLASS_LABEL}">${label}</label> +// <label class="${WUI_INPUT_NUMBER_CLASS_LABEL}"> +// ${label} | HTMLElement +// </label> // <input // class="${WUI_INPUT_NUMBER_CLASS_INPUT}" // [max=${max}] @@ -75,12 +77,18 @@ export class WuiInputNumber { private generateLabel(wrapper: HTMLElement) { this.el_label = document.createElement("label") this.el_label.classList.add(WUI_INPUT_NUMBER_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_NUMBER_CLASS_INPUT) this.el_input.type = "number" this.el_input.value = "" + this.opts.value @@ -117,7 +125,9 @@ export class WuiInputNumber { private generateHintToggler(wrapper: HTMLElement) { this.el_hint_toggler = document.createElement("span") - this.el_hint_toggler.classList.add(WUI_INPUT_NUMBER_CLASS_HINT_TOGGLER) + this.el_hint_toggler.classList.add( + WUI_INPUT_NUMBER_CLASS_HINT_TOGGLER, + ) this.el_hint_toggler.innerHTML = " ℹ" this.el_hint_toggler.onmouseover = () => { |