@htmlbricks/hb-dashboard-indicator 0.66.8 → 0.66.10
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 +47 -0
- package/manifest.json +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
## `hb-dashboard-indicator` — dashboard-indicator
|
|
2
|
+
|
|
3
|
+
**Category:** data | **Tags:** data, dashboard
|
|
4
|
+
|
|
5
|
+
### What it does
|
|
6
|
+
|
|
7
|
+
Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Icon in a green panel. When `link_label` is set, a footer strip is shown and clicks dispatch `dashboardIndicatorClick` with the component `id`.
|
|
8
|
+
|
|
9
|
+
### Custom element
|
|
10
|
+
|
|
11
|
+
`hb-dashboard-indicator`
|
|
12
|
+
|
|
13
|
+
### Attributes / props (snake_case)
|
|
14
|
+
|
|
15
|
+
| Property | Type | Notes |
|
|
16
|
+
| --- | --- | --- |
|
|
17
|
+
| `id` | string (optional) | Element identifier (used in click payload). |
|
|
18
|
+
| `style` | string (optional) | Inline style string. |
|
|
19
|
+
| `number` | number (required) | Main KPI value. |
|
|
20
|
+
| `text` | string (optional) | Caption under the number. |
|
|
21
|
+
| `icon` | string (required) | Bootstrap Icons name. |
|
|
22
|
+
| `link_label` | string (optional) | If set, shows footer and enables click dispatch. |
|
|
23
|
+
|
|
24
|
+
**CSS var:** `--hb--dashboard-indicator-background`. No slots or parts in metadata.
|
|
25
|
+
|
|
26
|
+
### Events (`CustomEvent` names)
|
|
27
|
+
|
|
28
|
+
- **`dashboardIndicatorClick`** — `{ id: string }`
|
|
29
|
+
|
|
30
|
+
### Usage notes
|
|
31
|
+
|
|
32
|
+
- Default panel color is controlled by `--hb--dashboard-indicator-background` (green in defaults).
|
|
33
|
+
- Icon name must match bootstrap-icons.
|
|
34
|
+
- Shadow DOM wraps the tile; pass `id` when using click events.
|
|
35
|
+
- No i18n in `docs.ts`.
|
|
36
|
+
|
|
37
|
+
### Minimal HTML example
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<hb-dashboard-indicator
|
|
41
|
+
id="kpi-sales"
|
|
42
|
+
number="128"
|
|
43
|
+
text="Orders today"
|
|
44
|
+
icon="cart-check"
|
|
45
|
+
link_label="View details"
|
|
46
|
+
></hb-dashboard-indicator>
|
|
47
|
+
```
|
package/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@htmlbricks/hb-dashboard-indicator",
|
|
3
|
-
"version": "0.66.
|
|
3
|
+
"version": "0.66.10",
|
|
4
4
|
"contributors": [],
|
|
5
5
|
"description": "Compact KPI tile: large `number`, caption `text`, and configurable Bootstrap Icon in a green panel. When `link_label` is set, a footer strip is shown and clicks dispatch `dashboardIndicatorClick` with the component `id`.",
|
|
6
6
|
"licenses": [
|