@ngx-ui-sdk/core 0.0.1 → 0.1.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 +33 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# ngx-ui-sdk
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Angular directives for [ui-sdk](https://github.com/vercel-labs/ui). Built on `@ui-sdk/core` 0.1.0-beta.1, for Angular 22.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[Demo](https://efuturetoday.github.io/ui-sdk-angular/) · [Documentation](https://ui-sdk.dev/docs) · [npm](https://www.npmjs.com/package/@ngx-ui-sdk/core)
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
ui-sdk handles keyboard navigation, focus, dismissal, popups and ARIA. This package brings that to Angular. Each part of a component is a directive on your own element. You write the markup and the styles.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
The package is experimental. Expect breaking changes until 1.0.
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
## Getting started
|
|
12
12
|
|
|
13
|
-
Install
|
|
13
|
+
Install it with `@ui-sdk/core`:
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
16
|
npm install @ngx-ui-sdk/core @ui-sdk/core
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
Each component has its own entry point, like `@ngx-ui-sdk/core/dialog`, so your app only bundles what it imports. Import the directives into a standalone component:
|
|
20
20
|
|
|
21
21
|
```ts
|
|
22
22
|
import { Component, signal } from "@angular/core"
|
|
@@ -58,13 +58,15 @@ export class EditProfile {
|
|
|
58
58
|
}
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
+
No providers or configuration needed. The [ui-sdk documentation](https://ui-sdk.dev/docs) describes every component, its parts and options. The names are the same here: `DialogTrigger` is `uiDialogTrigger`.
|
|
62
|
+
|
|
61
63
|
## Styling
|
|
62
64
|
|
|
63
|
-
|
|
65
|
+
The directives add no styles. Style the parts with:
|
|
64
66
|
|
|
65
|
-
- **
|
|
66
|
-
- **`data-slot`** on every part, like `data-slot="dialog-content"
|
|
67
|
-
- **CSS variables**
|
|
67
|
+
- **State attributes**: `data-open`, `data-highlighted`, `data-selected`, `data-disabled`, and `data-starting-style` and `data-ending-style` for animations.
|
|
68
|
+
- **`data-slot`** on every part, like `data-slot="dialog-content"`.
|
|
69
|
+
- **CSS variables** on popups, like `--anchor-width` and `--available-height`.
|
|
68
70
|
|
|
69
71
|
```css
|
|
70
72
|
[data-slot="dialog-content"] {
|
|
@@ -77,22 +79,29 @@ Everything is unstyled. The directives set behavior and ARIA, never a color or a
|
|
|
77
79
|
}
|
|
78
80
|
```
|
|
79
81
|
|
|
80
|
-
###
|
|
82
|
+
### Default theme
|
|
81
83
|
|
|
82
|
-
The
|
|
84
|
+
The demo uses ui-sdk's example styles. They're available as a separate package:
|
|
83
85
|
|
|
84
86
|
```bash
|
|
85
87
|
npm install @ngx-ui-sdk/theme-default
|
|
86
88
|
```
|
|
87
89
|
|
|
90
|
+
Add it to `angular.json`:
|
|
91
|
+
|
|
88
92
|
```json
|
|
89
|
-
// angular.json
|
|
90
93
|
"styles": ["@ngx-ui-sdk/theme-default/all.css", "src/styles.css"]
|
|
91
94
|
```
|
|
92
95
|
|
|
93
|
-
|
|
96
|
+
The theme only styles elements inside `data-ui-theme`. To style the whole app, add it to `<body>`:
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<body data-ui-theme></body>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
To load less CSS, import `tokens.css`, `base.css` and only the components you use instead of `all.css`. Colors, radii and sizes are CSS variables you can override.
|
|
94
103
|
|
|
95
|
-
##
|
|
104
|
+
## Components
|
|
96
105
|
|
|
97
106
|
| Component | Supported |
|
|
98
107
|
| ----------------- | :-------: |
|
|
@@ -156,17 +165,17 @@ Then put `data-ui-theme` on `<body>`, or on the part of the page it should style
|
|
|
156
165
|
| Waterfall | ✅ |
|
|
157
166
|
| Agent tools | ❌ |
|
|
158
167
|
|
|
159
|
-
##
|
|
168
|
+
## Testing
|
|
160
169
|
|
|
161
|
-
This
|
|
170
|
+
This is not an official ui-sdk package. It runs ui-sdk's own end-to-end tests, unchanged: 268 Playwright spec files with more than 4,000 tests, the same ones the React, Vue, Svelte, Solid and web component adapters pass. They cover:
|
|
162
171
|
|
|
163
|
-
-
|
|
164
|
-
-
|
|
165
|
-
-
|
|
166
|
-
-
|
|
172
|
+
- keyboard, pointer and touch input, focus, dismissal, forms and controllers
|
|
173
|
+
- axe audits, screen reader announcements and WAI-ARIA patterns
|
|
174
|
+
- right-to-left layouts
|
|
175
|
+
- memory leaks across hundreds of mounts
|
|
167
176
|
|
|
168
|
-
|
|
177
|
+
ui-sdk's server rendering tests don't run yet. The demo examples and the adapter internals have their own tests. Everything runs in CI on every push.
|
|
169
178
|
|
|
170
179
|
## Source
|
|
171
180
|
|
|
172
|
-
|
|
181
|
+
[github.com/efuturetoday/ui-sdk-angular](https://github.com/efuturetoday/ui-sdk-angular)
|