@htmlbricks/hb-dashboard-indicator 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 +17 -3
- package/main.iife.js +112 -4
- package/main.iife.js.map +1 -1
- package/manifest.json +61 -6
- package/package.json +2 -2
- package/types/webcomponent.type.d.json +16 -0
- package/types/webcomponent.type.d.ts +15 -0
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
### What it does
|
|
6
6
|
|
|
7
|
-
Compact KPI tile: large `number`, caption `text`,
|
|
7
|
+
Compact KPI tile: large `number`, caption `text`, configurable Bootstrap Icon, and `karma` accent from Bulma semantic colors. When `link_label` is set, a footer strip is shown and clicks dispatch `dashboardIndicatorClick` with the component `id`.
|
|
8
8
|
|
|
9
9
|
### Custom element
|
|
10
10
|
|
|
@@ -20,8 +20,9 @@ Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Ico
|
|
|
20
20
|
| `text` | string (optional) | Caption under the number. |
|
|
21
21
|
| `icon` | string (required) | Bootstrap Icons name. |
|
|
22
22
|
| `link_label` | string (optional) | If set, shows footer and enables click dispatch. |
|
|
23
|
+
| `karma` | string (optional) | Accent: Bulma semantics `success`, `danger`, `warning`, `primary`, `secondary`, `info` (`secondary` uses Bulma’s `dark` palette), or `none` to use the host CSS variable below. Default `success`. |
|
|
23
24
|
|
|
24
|
-
**CSS var:** `--hb--dashboard-indicator-background`. No slots or parts in metadata.
|
|
25
|
+
**CSS var (with `karma="none"`):** `--hb--dashboard-indicator-background` — header background and footer accent (any valid CSS color). If omitted while `karma` is `none`, falls back to Bulma `success`. With any other `karma`, this variable is ignored. No slots or parts in metadata.
|
|
25
26
|
|
|
26
27
|
### Events (`CustomEvent` names)
|
|
27
28
|
|
|
@@ -29,7 +30,7 @@ Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Ico
|
|
|
29
30
|
|
|
30
31
|
### Usage notes
|
|
31
32
|
|
|
32
|
-
-
|
|
33
|
+
- With Bulma `karma` values, accent comes from `--bulma-*` tokens on `:host`. With `karma="none"`, set `--hb--dashboard-indicator-background` on `hb-dashboard-indicator` (e.g. `style="--hb--dashboard-indicator-background: #6366f1"`).
|
|
33
34
|
- Icon name must match bootstrap-icons.
|
|
34
35
|
- Shadow DOM wraps the tile; pass `id` when using click events.
|
|
35
36
|
- No i18n in `docs.ts`.
|
|
@@ -43,5 +44,18 @@ Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Ico
|
|
|
43
44
|
text="Orders today"
|
|
44
45
|
icon="cart-check"
|
|
45
46
|
link_label="View details"
|
|
47
|
+
karma="success"
|
|
48
|
+
></hb-dashboard-indicator>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Custom color (`karma="none"`)
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<hb-dashboard-indicator
|
|
55
|
+
karma="none"
|
|
56
|
+
style="--hb--dashboard-indicator-background: #6366f1"
|
|
57
|
+
number="12"
|
|
58
|
+
text="Custom"
|
|
59
|
+
icon="stars"
|
|
46
60
|
></hb-dashboard-indicator>
|
|
47
61
|
```
|