@rivinia/toast 0.4.1 → 0.4.2
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 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ An Angular signal-based toast queue with timers, actions, deduplication, and
|
|
|
7
7
|
overflow handling. Core is headless; an optional standalone UI is available at
|
|
8
8
|
`@rivinia/toast/ui`.
|
|
9
9
|
|
|
10
|
-
-
|
|
10
|
+
- Package version: **0.4.2**
|
|
11
11
|
- Peer dependency: **`@angular/core` `^22.0.0`**
|
|
12
12
|
- No `tslib`, router, or HTTP peer dependency.
|
|
13
13
|
|
|
@@ -59,10 +59,7 @@ import { RiviniaToastList } from '@rivinia/toast/ui';
|
|
|
59
59
|
selector: 'app-notifications',
|
|
60
60
|
standalone: true,
|
|
61
61
|
imports: [RiviniaToastList],
|
|
62
|
-
|
|
63
|
-
<button type="button" (click)="save()">Save</button>
|
|
64
|
-
<rv-toast-list [manager]="toast" position="bottom-end" />
|
|
65
|
-
`,
|
|
62
|
+
templateUrl: './notifications.component.html',
|
|
66
63
|
})
|
|
67
64
|
export class NotificationsComponent {
|
|
68
65
|
readonly toast = injectRiviniaToast();
|
|
@@ -86,6 +83,12 @@ export class NotificationsComponent {
|
|
|
86
83
|
}
|
|
87
84
|
```
|
|
88
85
|
|
|
86
|
+
```html
|
|
87
|
+
<!-- src/app/notifications.component.html -->
|
|
88
|
+
<button type="button" (click)="save()">Save</button>
|
|
89
|
+
<rv-toast-list [manager]="toast" position="bottom-end" />
|
|
90
|
+
```
|
|
91
|
+
|
|
89
92
|
The standalone list renders the manager's `active()` signal, pauses timed
|
|
90
93
|
notifications on hover and keyboard focus, runs actions, and provides a
|
|
91
94
|
dismiss button by default. Its defaults are `position="bottom-end"`,
|
|
@@ -98,6 +101,7 @@ For snapshot-driven UIs, provide the snapshots and handle the emitted IDs
|
|
|
98
101
|
yourself:
|
|
99
102
|
|
|
100
103
|
```ts
|
|
104
|
+
// src/app/toast-snapshots.component.ts
|
|
101
105
|
import { Component } from '@angular/core';
|
|
102
106
|
import type { Toast } from '@rivinia/toast';
|
|
103
107
|
import { RiviniaToastList } from '@rivinia/toast/ui';
|
|
@@ -106,9 +110,7 @@ import { RiviniaToastList } from '@rivinia/toast/ui';
|
|
|
106
110
|
selector: 'app-toast-snapshots',
|
|
107
111
|
standalone: true,
|
|
108
112
|
imports: [RiviniaToastList],
|
|
109
|
-
|
|
110
|
-
<rv-toast-list [toasts]="items" (dismissed)="remove($event)" (actionPressed)="run($event)" />
|
|
111
|
-
`,
|
|
113
|
+
templateUrl: './toast-snapshots.component.html',
|
|
112
114
|
})
|
|
113
115
|
export class ToastSnapshotsComponent {
|
|
114
116
|
items: readonly Toast[] = [
|
|
@@ -136,6 +138,11 @@ export class ToastSnapshotsComponent {
|
|
|
136
138
|
}
|
|
137
139
|
```
|
|
138
140
|
|
|
141
|
+
```html
|
|
142
|
+
<!-- src/app/toast-snapshots.component.html -->
|
|
143
|
+
<rv-toast-list [toasts]="items" (dismissed)="remove($event)" (actionPressed)="run($event)" />
|
|
144
|
+
```
|
|
145
|
+
|
|
139
146
|
In this presentational mode your app owns timers, pause behavior, and action
|
|
140
147
|
handling. If both `manager` and `toasts` are supplied, the manager takes
|
|
141
148
|
precedence.
|
|
@@ -146,18 +153,14 @@ Core can be used without the UI. `active()` and `queue()` are readonly signals;
|
|
|
146
153
|
the active list is oldest-first. Timers begin only when a toast becomes active.
|
|
147
154
|
|
|
148
155
|
```ts
|
|
156
|
+
// src/app/save-status.component.ts
|
|
149
157
|
import { Component, inject } from '@angular/core';
|
|
150
158
|
import { resolveToastText, RiviniaToast } from '@rivinia/toast';
|
|
151
159
|
|
|
152
160
|
@Component({
|
|
153
161
|
selector: 'app-save-status',
|
|
154
162
|
standalone: true,
|
|
155
|
-
|
|
156
|
-
<button type="button" (click)="save()">Save</button>
|
|
157
|
-
@for (item of toast.active(); track item.id) {
|
|
158
|
-
<p [attr.data-kind]="item.kind">{{ resolveText(item.message) }}</p>
|
|
159
|
-
}
|
|
160
|
-
`,
|
|
163
|
+
templateUrl: './save-status.component.html',
|
|
161
164
|
})
|
|
162
165
|
export class SaveStatusComponent {
|
|
163
166
|
readonly toast = inject(RiviniaToast);
|
|
@@ -177,6 +180,14 @@ export class SaveStatusComponent {
|
|
|
177
180
|
}
|
|
178
181
|
```
|
|
179
182
|
|
|
183
|
+
```html
|
|
184
|
+
<!-- src/app/save-status.component.html -->
|
|
185
|
+
<button type="button" (click)="save()">Save</button>
|
|
186
|
+
@for (item of toast.active(); track item.id) {
|
|
187
|
+
<p [attr.data-kind]="item.kind">{{ resolveText(item.message) }}</p>
|
|
188
|
+
}
|
|
189
|
+
```
|
|
190
|
+
|
|
180
191
|
`message` and action `label` accept either a string or a reactive string
|
|
181
192
|
signal, so they can reflect language changes. For a custom outlet, use the exported
|
|
182
193
|
`resolveToastText(message)` utility to read either shape.
|