diff options
| author | Shulhan <ms@kilabit.info> | 2021-09-11 00:31:23 +0700 |
|---|---|---|
| committer | Shulhan <ms@kilabit.info> | 2021-09-11 00:31:23 +0700 |
| commit | 42ebec89d615989a95019f7d1234a79e415bc207 (patch) | |
| tree | 006f18e8a4d1e6ffd7d6b6e690f27fa15f97e7df /input/select.ts | |
| parent | af17111480d41f4770c7129733817e0dfd2d4f7c (diff) | |
| download | pakakeh.ts-42ebec89d615989a95019f7d1234a79e415bc207.tar.xz | |
input: add options to add custom CSS class to label and input
The input options for string, number, and select now have two additional
options: "class_label" and "class_input".
The "class_label" option will add custom CSS class to the input label.
The "class_input" option will add custom CSS class to the input group.
Diffstat (limited to 'input/select.ts')
| -rw-r--r-- | input/select.ts | 13 |
1 files changed, 11 insertions, 2 deletions
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] |