@gravionlabs/helix-ui 22.1.29 → 22.2.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 +6 -6
- package/fesm2022/gravionlabs-helix-ui.mjs +6950 -5320
- package/fesm2022/gravionlabs-helix-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles.css +349 -12
- package/tokens.css +3 -2
- package/types/gravionlabs-helix-ui.d.ts +647 -65
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @gravionlabs/helix-ui
|
|
2
2
|
|
|
3
3
|
Vanilla Angular components on the Helix design tokens: standalone, signal-based, plain CSS, no runtime
|
|
4
|
-
styling engine
|
|
5
|
-
|
|
4
|
+
styling engine. It replaced the vendored PrimeNG fork `@gravionlabs/helix-core`
|
|
5
|
+
(see [ADR 0001](../../docs/adr/0001-styling-foundation.md) and [ADR 0002](../../docs/adr/0002-retire-helix-core.md)).
|
|
6
6
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
@@ -13,7 +13,7 @@ npm install @gravionlabs/helix-ui
|
|
|
13
13
|
```css
|
|
14
14
|
/* the components */
|
|
15
15
|
@import "@gravionlabs/helix-ui/styles.css";
|
|
16
|
-
/* the tokens the components read; load them in every app
|
|
16
|
+
/* the tokens the components read; load them in every app */
|
|
17
17
|
@import "@gravionlabs/helix-ui/tokens.css";
|
|
18
18
|
```
|
|
19
19
|
|
|
@@ -33,6 +33,8 @@ Dark mode: tokens switch under the `app-dark` class on `<html>`, as in `helix-sh
|
|
|
33
33
|
| `HxAvatar`, `HxAvatarGroup` | `hx-avatar`, `hx-avatar-group` | picture, icon or initials; sizes, shapes; the group overlaps its avatars |
|
|
34
34
|
| `HxBadge`, `HxOverlayBadge` | `hx-badge`, `hx-overlay-badge` | count or dot marker, severities and sizes; the overlay variant sits on a corner of the wrapped element |
|
|
35
35
|
| `HxBreadcrumb` | `hx-breadcrumb` | router links, home item |
|
|
36
|
+
| `HxDataTable`, `HxColumn`, `HxCell`, `HxTableHeader`, `HxTableBody`, `HxTableFooter`, `HxTableCaption`, `HxRowExpansion` | `hx-data-table` … | column model, cell and row templates, sorting (single or multiple), paging, lazy loading, selection (checkbox, single, meta key), global and column filters, row expansion, caption, empty and loading state, scrolling body with a sticky header |
|
|
37
|
+
| `HxPaginator` | `hx-paginator` | first/previous/page links/next/last, rows per page, current page report; `first` and `rows` models |
|
|
36
38
|
| `HxIconField`, `HxInputIcon` | `hx-icon-field`, `[hx-input-icon]` | icon on the start or end edge of a text field |
|
|
37
39
|
| `HxFloatLabel` | `hx-float-label` | a label that sits in the field and floats up on focus or a value (`over`, `in`, `on`) |
|
|
38
40
|
| `HxInputGroup`, `HxInputGroupAddon` | `hx-input-group`, `hx-input-group-addon` | joins fields, selects, buttons and addons |
|
|
@@ -74,9 +76,7 @@ Dark mode: tokens switch under the `app-dark` class on `<html>`, as in `helix-sh
|
|
|
74
76
|
| `HxSelectButton` | `hx-select-button` | single or multiple, all three forms APIs |
|
|
75
77
|
| `HxSwitch` | `input[hx-switch]` | native checkbox with `role="switch"` |
|
|
76
78
|
|
|
77
|
-
Selectors, inputs and classes use the prefix `hx` (`hx-button`)
|
|
78
|
-
in an app that uses both while migrating. Both libraries read the same `--h-*` tokens, so a page mixes them
|
|
79
|
-
without a visible seam.
|
|
79
|
+
Selectors, inputs and classes use the prefix `hx` (`hx-button`); the custom properties keep the prefix `--h-`.
|
|
80
80
|
|
|
81
81
|
## Rules of this package
|
|
82
82
|
|