diff options
| -rw-r--r-- | input/number.d.ts | 2 | ||||
| -rw-r--r-- | input/number.ts | 14 | ||||
| -rw-r--r-- | input/select.d.ts | 2 | ||||
| -rw-r--r-- | input/select.ts | 13 | ||||
| -rw-r--r-- | input/string.d.ts | 2 | ||||
| -rw-r--r-- | input/string.ts | 13 |
6 files changed, 40 insertions, 6 deletions
diff --git a/input/number.d.ts b/input/number.d.ts index 654b7e3..217e12c 100644 --- a/input/number.d.ts +++ b/input/number.d.ts @@ -5,6 +5,8 @@ export interface WuiInputNumberOpts { hint?: string; max?: number; min?: number; + class_label?: string; + class_input?: string; is_disabled?: boolean; onChangeHandler: (new_value: number) => void; } diff --git a/input/number.ts b/input/number.ts index e2d1bc5..990d94a 100644 --- a/input/number.ts +++ b/input/number.ts @@ -5,6 +5,8 @@ export interface WuiInputNumberOpts { hint?: string max?: number min?: number + class_label?: string // Additional CSS class for label. + class_input?: string // Additional CSS class for input. is_disabled?: boolean onChangeHandler: (new_value: number) => void } @@ -24,11 +26,11 @@ 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 class="${WUI_INPUT_NUMBER_CLASS_LABEL} [${class_label}]"> // ${label} | HTMLElement // </label> // <input -// class="${WUI_INPUT_NUMBER_CLASS_INPUT}" +// class="${WUI_INPUT_NUMBER_CLASS_INPUT} [${class_input}]" // [max=${max}] // [min=${min}] // [disabled=${is_disabled}] @@ -77,6 +79,10 @@ export class WuiInputNumber { private generateLabel(wrapper: HTMLElement) { this.el_label = document.createElement("label") this.el_label.classList.add(WUI_INPUT_NUMBER_CLASS_LABEL) + if (this.opts.class_label) { + this.el_label.classList.add(this.opts.class_label) + } + if (typeof this.opts.label === "string") { this.el_label.innerHTML = `${this.opts.label} ` } else { @@ -90,6 +96,10 @@ export class WuiInputNumber { "input", ) as HTMLInputElement this.el_input.classList.add(WUI_INPUT_NUMBER_CLASS_INPUT) + if (this.opts.class_input) { + this.el_input.classList.add(this.opts.class_input) + } + this.el_input.type = "number" this.el_input.value = "" + this.opts.value diff --git a/input/select.d.ts b/input/select.d.ts index 88f1faa..4707838 100644 --- a/input/select.d.ts +++ b/input/select.d.ts @@ -11,6 +11,8 @@ export interface WuiInputSelectOpts { options: WuiKeySelectOption; id?: string; hint?: string; + class_label?: string; + class_input?: string; is_disabled?: boolean; onChangeHandler?: (key: string, value: string) => void; } diff --git a/input/select.ts b/input/select.ts index df6f450..4882448 100644 --- a/input/select.ts +++ b/input/select.ts @@ -14,6 +14,8 @@ export interface WuiInputSelectOpts { options: WuiKeySelectOption id?: string hint?: string + class_label?: string // Additional CSS class for label. + class_input?: string // Additional CSS class for input. is_disabled?: boolean onChangeHandler?: (key: string, value: string) => void } @@ -31,12 +33,12 @@ const WUI_INPUT_SELECT_CLASS_LABEL = "wui_input_select_label" // // <div [id=${id}] class="${WUI_INPUT_SELECT_CLASS}"> // <div> -// <label class="${WUI_INPUT_SELECT_CLASS_LABEL}"> +// <label class="${WUI_INPUT_SELECT_CLASS_LABEL} [${class_label}]"> // ${label} | HTMLElement // </label> // <select // name=${name} -// class="${WUI_INPUT_SELECT_CLASS_INPUT}" +// class="${WUI_INPUT_SELECT_CLASS_INPUT} [${class_input}]" // [disabled=${is_disabled}] // > // <option value="${options[key].value}">${key in options}</option> @@ -85,6 +87,10 @@ export class WuiInputSelect { private generateLabel(wrapper: HTMLElement) { this.el_label = document.createElement("label") this.el_label.classList.add(WUI_INPUT_SELECT_CLASS_LABEL) + if (this.opts.class_label) { + this.el_label.classList.add(this.opts.class_label) + } + if (typeof this.opts.label === "string") { this.el_label.innerHTML = `${this.opts.label} ` } else { @@ -97,6 +103,9 @@ export class WuiInputSelect { this.el_input = document.createElement("select") this.el_input.name = this.opts.name this.el_input.classList.add(WUI_INPUT_SELECT_CLASS_INPUT) + if (this.opts.class_input) { + this.el_input.classList.add(this.opts.class_input) + } for (let key in this.opts.options) { let option = this.opts.options[key] diff --git a/input/string.d.ts b/input/string.d.ts index a47f90d..8159f66 100644 --- a/input/string.d.ts +++ b/input/string.d.ts @@ -3,6 +3,8 @@ export interface WuiInputStringOpts { value: string; id?: string; hint?: string; + class_label?: string; + class_input?: string; is_disabled?: boolean; onChangeHandler?: (new_value: string) => void; } diff --git a/input/string.ts b/input/string.ts index 680c3a4..1faa3cb 100644 --- a/input/string.ts +++ b/input/string.ts @@ -3,6 +3,8 @@ export interface WuiInputStringOpts { value: string id?: string hint?: string + class_label?: string // Additional CSS class for label. + class_input?: string // Additional CSS class for input. is_disabled?: boolean onChangeHandler?: (new_value: string) => void } @@ -21,11 +23,11 @@ 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 class="${WUI_INPUT_STRING_CLASS_LABEL} [${class_label}]"> // ${label} | HTMLElement // </label> // <input -// class="${WUI_INPUT_STRING_CLASS_INPUT}" +// class="${WUI_INPUT_STRING_CLASS_INPUT} [${class_input}]" // [disabled=${is_disabled}] // value=${value} // > @@ -74,6 +76,9 @@ export class WuiInputString { private generateLabel(wrapper: HTMLElement) { this.el_label = document.createElement("label") this.el_label.classList.add(WUI_INPUT_STRING_CLASS_LABEL) + if (this.opts.class_label) { + this.el_label.classList.add(this.opts.class_label) + } if (typeof this.opts.label === "string") { this.el_label.innerHTML = `${this.opts.label} ` @@ -88,6 +93,10 @@ export class WuiInputString { "input", ) as HTMLInputElement this.el_input.classList.add(WUI_INPUT_STRING_CLASS_INPUT) + if (this.opts.class_input) { + this.el_input.classList.add(this.opts.class_input) + } + this.el_input.value = "" + this.opts.value if (this.opts.is_disabled) { |