@htmlbricks/hb-input-range 0.66.26 → 0.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -44
- package/main.iife.js +35 -72
- package/main.iife.js.map +1 -1
- package/manifest.json +9 -5
- package/package.json +2 -2
- package/types/webcomponent.type.d.ts +1 -1
- package/types/webcomponent_events.type.d.json +1 -2
package/README.md
CHANGED
|
@@ -1,59 +1,40 @@
|
|
|
1
|
-
|
|
1
|
+
## `hb-input-range` — input-range
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Category:** inputs
|
|
4
|
+
**Tags:** inputs
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
### What it does
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
Range slider (`type="range"`) whose bounds come from `schemaentry.params.min` and/or `max` when those keys exist. Parses stringified `schemaentry` when needed and enforces required / min / max on the numeric value. Dispatches `setVal` with `{ value, valid, id }` and shows `validationTip` as Bulma `help is-danger` when `show_validation` is `yes` and the field is invalid.
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
export type FormSchemaEntry = {
|
|
11
|
-
/**
|
|
12
|
-
* This will be both the key of the object when submitting the form's data,
|
|
13
|
-
* and also the id in the DOM.
|
|
14
|
-
*/
|
|
15
|
-
id: string;
|
|
10
|
+
### Styling (Bulma)
|
|
16
11
|
|
|
17
|
-
|
|
18
|
-
* The descriptive label that will show alongside the form control.
|
|
19
|
-
*/
|
|
20
|
-
label?: string;
|
|
12
|
+
Shadow bundle: `form/shared`, `form/input-textarea`, `form/tools`. The native range uses `accent-color` mapped to Bulma link / success / danger via `--bulma-*` on `:host` (not the text `input` class, which does not suit range controls).
|
|
21
13
|
|
|
22
|
-
|
|
23
|
-
* Optional default value.
|
|
24
|
-
*/
|
|
25
|
-
value?: number;
|
|
14
|
+
### Custom element
|
|
26
15
|
|
|
27
|
-
|
|
16
|
+
`hb-input-range`
|
|
28
17
|
|
|
29
|
-
|
|
30
|
-
* This doesn't matter if the dependencies requirements aren't met.
|
|
31
|
-
*/
|
|
32
|
-
required?: boolean;
|
|
18
|
+
### Attributes (snake_case; use string values in HTML)
|
|
33
19
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
validationTip?: string;
|
|
20
|
+
- `id` — optional string
|
|
21
|
+
- `style` — optional string
|
|
22
|
+
- `schemaentry` — required string (JSON: `id`, `label?`, `required?`, `value?` (number), `validationTip?`, `params.min` / `params.max`, …)
|
|
23
|
+
- `show_validation` — optional `"yes"` | `"no"`
|
|
39
24
|
|
|
40
|
-
|
|
25
|
+
### Events
|
|
41
26
|
|
|
42
|
-
|
|
43
|
-
* Other parameters that may be specific to a certain kind of form control.
|
|
44
|
-
*/
|
|
45
|
-
params?: Record<string, any>;
|
|
46
|
-
};
|
|
27
|
+
- `setVal` — `{ value: number; valid: boolean; id: string }`
|
|
47
28
|
|
|
48
|
-
|
|
49
|
-
id?: string;
|
|
50
|
-
style?: string;
|
|
29
|
+
### Usage notes
|
|
51
30
|
|
|
52
|
-
|
|
53
|
-
schemaentry: FormSchemaEntry | undefined;
|
|
54
|
-
};
|
|
31
|
+
CSS parts: `input`, `invalid-feedback`.
|
|
55
32
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
33
|
+
### Minimal HTML example
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<hb-input-range
|
|
37
|
+
schemaentry="{"id":"volume","required":true,"params":{"min":0,"max":100},"value":50}"
|
|
38
|
+
show_validation="no"
|
|
39
|
+
></hb-input-range>
|
|
59
40
|
```
|