pakakeh.ts/input/example.ts, branch devWeb user interface components built with TypeScript.http://git.kilabit.info/pakakeh.ts/atom?h=dev2024-02-04T19:32:51Zinput: implement component for inputing file2024-02-04T19:32:51ZShulhanms@kilabit.info2024-02-04T18:09:49Zurn:sha1:7e0b412323db013e225cc8122c83cc765e561229all: fix all linter warnings from tsc and eslint2023-10-24T15:28:25ZShulhanms@kilabit.info2023-10-23T20:41:47Zurn:sha1:85c3fc0431e7e75a41894d4669f6a46bbda5440b
In this changes we introduce eslint as our linter for TypeScript and
update our tsconfig to be more strict.
The ".eslintrc.yaml" and "tsconfig.json" is taken from golang/website
repository [1].
[1]: https://cs.opensource.google/go/x/website
all: reformat all files2023-10-24T15:27:14ZShulhanms@kilabit.info2023-10-22T19:20:07Zurn:sha1:891a860299ac76739d59f46280cbed63ff07743e
I cannot remember how I reformat those files previously, probably without
any tools.
This changes reformat the TypeScript files using prettier and HTML files
using js-beautify.
all: re-licensing wui under GPL 3.0 or later2022-03-14T17:58:01ZShulhanms@kilabit.info2022-03-14T17:58:01Zurn:sha1:3aad4d9316e9011d4d55c877b4ee0689e682091d
See https://kilabit.info/journal/2022/gpl/ for more information.
input: add option "is_hint_toggled"2021-09-18T18:17:00ZShulhanms@kilabit.info2021-09-18T18:14:33Zurn:sha1:19994275a9f238dbbb2d73702bba355faaa12a0d
If the "is_hint_toggled" is true, the hint text will be displayed
by default on first render, instead of hidden.
While at it, add 2px to the top margin of the hint element to make it
separatable from the input element.
input: display the new value on changes inside the example2021-09-18T17:51:48ZShulhanms@kilabit.info2021-09-18T17:49:29Zurn:sha1:0db6b1d2f83b19a929889df2108de20f4d522066
Instead of printing the new value using console.log, display it as text
below the example.
input: implement input for checkboxes2021-09-05T12:57:35ZShulhanms@kilabit.info2021-09-05T12:52:15Zurn:sha1:897d8bbdd89034d8a9bdc781de07c5492b340f1f
The WuiInputCheckboxes class can create an HTML input for selecting one
or more item using checkbox.
The class require the following options: label, name, and options; and
optionally id, hint, is_disabled, and onChangeHandler.
The onChangeHandler receive all checked values.
input: implement class for input with select2021-09-05T11:36:42ZShulhanms@kilabit.info2021-09-05T11:36:22Zurn:sha1:b18cd3529299e03f5c14d9bf702f28c3f7acb4d0
The WuiInputSelect create an HTML input for selecting one more item.
input: implement class WuiInputString2021-09-05T11:36:42ZShulhanms@kilabit.info2021-09-05T09:09:55Zurn:sha1:2df99a87e652db2c82383b59307b6016ae2ba4f4
The WuiInputString create an HTML input for string with predefined
options.
The required options are "label" and "value".
input: implement class for input number2021-09-05T11:36:42ZShulhanms@kilabit.info2021-09-05T08:28:30Zurn:sha1:437cee56693f69b2a58f37f8a5ff5b931ea803a2
The WuiInputNumber create an HTML input that allow number only, with
optional max and min options.
The required options is "label" and "value".
Format of generated HTML output,
<div [id=${id}] class="${WUI_INPUT_NUMBER_CLASS}">
<div>
<label class="${WUI_INPUT_NUMBER_CLASS_LABEL}">${label}</label>
<input
class="${WUI_INPUT_NUMBER_CLASS_INPUT}"
[max=${max}]
[min=${min}]
[disabled=${is_disabled}]
value=${value}
>
<span class="${WUI_INPUT_NUMBER_CLASS_HINT_TOGGLER}">i </span>
</div>
<div class="${WUI_INPUT_NUMBER_CLASS_HINT}">${hint}</div>
</div>
User can set onChangeHandler to receive new value when the value
changes and valid; otherwise, if the value is invalid, the input
background will changes accordingly.