@ailuracode/alpine-toast 0.1.1 → 1.0.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 +52 -5
- package/dist/global.d.ts +18 -264
- package/dist/index.d.ts +392 -42
- package/dist/index.js +575 -395
- package/package.json +13 -8
- package/dist/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -4,22 +4,22 @@ Headless in-app toast queue for Alpine.js via the `$toast` magic.
|
|
|
4
4
|
|
|
5
5
|
**CSS-framework agnostic** — no markup, no styles. Only `default`, `bottom-right`, and `promise` are built into the API; you declare variants and positions your UI needs.
|
|
6
6
|
|
|
7
|
-
**[Full documentation →](../../docs/toast.md)**
|
|
7
|
+
**[Full documentation →](../../docs/plugins/toast.md)**
|
|
8
8
|
|
|
9
9
|
## Install
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
|
-
|
|
12
|
+
pnpm add @ailuracode/alpine-toast alpinejs
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## Quick example
|
|
16
16
|
|
|
17
|
-
```
|
|
17
|
+
```ts
|
|
18
18
|
import Alpine from "alpinejs";
|
|
19
|
-
import
|
|
19
|
+
import { toastPlugin, toastVariants, toastPositions } from "@ailuracode/alpine-toast";
|
|
20
20
|
|
|
21
21
|
Alpine.plugin(
|
|
22
|
-
|
|
22
|
+
toastPlugin({
|
|
23
23
|
variants: toastVariants(["success", "error", "loading"] as const),
|
|
24
24
|
positions: toastPositions(["top-center", "bottom-right"] as const),
|
|
25
25
|
defaultPosition: "bottom-right",
|
|
@@ -62,6 +62,53 @@ Also available on the store: `$store.toast.dismiss(id)`.
|
|
|
62
62
|
| **Queue** | `maxToasts` / `maxVisible` per timed or persistent stack |
|
|
63
63
|
| **UI** | Bring your own markup and CSS |
|
|
64
64
|
|
|
65
|
+
## Standalone usage (no Alpine)
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
import { createToastController } from "@ailuracode/alpine-toast";
|
|
69
|
+
|
|
70
|
+
const controller = createToastController({
|
|
71
|
+
maxToasts: 5,
|
|
72
|
+
maxVisible: 3,
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
controller.push({ content: "Hello!", variant: "default", position: "bottom-right" });
|
|
76
|
+
controller.dismissAll();
|
|
77
|
+
controller.destroy();
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Plugin options
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
toastPlugin({
|
|
84
|
+
variants?: string[], // toastVariants([...])
|
|
85
|
+
positions?: string[], // toastPositions([...])
|
|
86
|
+
defaultPosition?: string, // default: "bottom-right"
|
|
87
|
+
defaultDuration?: number, // default: 5000 (ms), false for persistent
|
|
88
|
+
maxToasts?: number, // max toasts per position
|
|
89
|
+
maxVisible?: number, // max visible per position
|
|
90
|
+
promise?: {
|
|
91
|
+
loadingVariant?: string,
|
|
92
|
+
successVariant?: string,
|
|
93
|
+
errorVariant?: string,
|
|
94
|
+
loadingMessages?: string[],
|
|
95
|
+
},
|
|
96
|
+
onDismiss?: (id: string) => void,
|
|
97
|
+
onChange?: (detail: ToastChangeDetail) => void,
|
|
98
|
+
});
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## Store API
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
$store.toast.items // active toast items
|
|
105
|
+
$store.toast.length // total count
|
|
106
|
+
$store.toast.push(payload) // add a toast, returns id
|
|
107
|
+
$store.toast.dismiss(id) // remove by id
|
|
108
|
+
$store.toast.dismissAt(position) // remove all at position
|
|
109
|
+
$store.toast.dismissAll() // remove all
|
|
110
|
+
```
|
|
111
|
+
|
|
65
112
|
## License
|
|
66
113
|
|
|
67
114
|
MIT
|
package/dist/global.d.ts
CHANGED
|
@@ -1,266 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
export type ToastVariant<TVariants extends readonly string[] = readonly []> =
|
|
19
|
-
| DefaultToastVariant
|
|
20
|
-
| TVariants[number];
|
|
21
|
-
|
|
22
|
-
export interface ToastAction {
|
|
23
|
-
label: string;
|
|
24
|
-
onClick?: () => void;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export interface ToastPayload<
|
|
28
|
-
TVariants extends readonly string[] = readonly [],
|
|
29
|
-
TPositions extends readonly string[] = readonly [],
|
|
30
|
-
TContent = unknown,
|
|
31
|
-
> {
|
|
32
|
-
content?: TContent | null;
|
|
33
|
-
title?: string | null;
|
|
34
|
-
description?: string | null;
|
|
35
|
-
variant?: ToastVariant<TVariants>;
|
|
36
|
-
position?: ToastPosition<TPositions>;
|
|
37
|
-
duration?: ToastDuration;
|
|
38
|
-
action?: ToastAction | null;
|
|
39
|
-
key?: string | null;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export interface ToastItem<
|
|
43
|
-
TVariants extends readonly string[] = readonly [],
|
|
44
|
-
TPositions extends readonly string[] = readonly [],
|
|
45
|
-
TContent = unknown,
|
|
46
|
-
> {
|
|
47
|
-
id: string;
|
|
48
|
-
key: string | null;
|
|
49
|
-
content: TContent | null;
|
|
50
|
-
title: string | null;
|
|
51
|
-
description: string | null;
|
|
52
|
-
variant: ToastVariant<TVariants>;
|
|
53
|
-
position: ToastPosition<TPositions>;
|
|
54
|
-
duration: ToastDuration;
|
|
55
|
-
action: ToastAction | null;
|
|
56
|
-
removed: boolean;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
export type ToastPayloadWithoutVariant<
|
|
60
|
-
TVariants extends readonly string[] = readonly [],
|
|
61
|
-
TPositions extends readonly string[] = readonly [],
|
|
62
|
-
TContent = unknown,
|
|
63
|
-
> = Omit<ToastPayload<TVariants, TPositions, TContent>, "variant">;
|
|
64
|
-
|
|
65
|
-
export interface ToastPromiseOptions<TVariants extends readonly string[] = readonly []> {
|
|
66
|
-
loading?: string;
|
|
67
|
-
error?: string;
|
|
68
|
-
duration?: ToastDuration;
|
|
69
|
-
loadingVariant?: ToastVariant<TVariants>;
|
|
70
|
-
successVariant?: ToastVariant<TVariants>;
|
|
71
|
-
errorVariant?: ToastVariant<TVariants>;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
export interface ToastPluginOptions<
|
|
75
|
-
TVariants extends readonly string[] = readonly [],
|
|
76
|
-
TPositions extends readonly string[] = readonly [],
|
|
77
|
-
_TContent = unknown,
|
|
78
|
-
> {
|
|
79
|
-
variants?: TVariants;
|
|
80
|
-
positions?: TPositions;
|
|
81
|
-
defaultPosition?: ToastPosition<TPositions>;
|
|
82
|
-
defaultDuration?: number;
|
|
83
|
-
promise?: ToastPromiseOptions<TVariants>;
|
|
84
|
-
maxToasts?: number;
|
|
85
|
-
maxVisible?: number;
|
|
86
|
-
listenToWindowEvents?: boolean;
|
|
87
|
-
storeKey?: ToastStoreKey;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
export interface ToastPromiseMessages<
|
|
91
|
-
T = unknown,
|
|
92
|
-
TVariant extends string = string,
|
|
93
|
-
TContent = unknown,
|
|
94
|
-
> {
|
|
95
|
-
loading?: string;
|
|
96
|
-
success?: string | ((data: T) => string);
|
|
97
|
-
error?: string;
|
|
98
|
-
loadingContent?: TContent;
|
|
99
|
-
successContent?: TContent | ((data: T) => TContent);
|
|
100
|
-
errorContent?: TContent;
|
|
101
|
-
loadingVariant?: TVariant;
|
|
102
|
-
successVariant?: TVariant;
|
|
103
|
-
errorVariant?: TVariant;
|
|
104
|
-
duration?: ToastDuration;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
export type ToastPromiseInput<T> = (() => Promise<T> | T) | Promise<T>;
|
|
1
|
+
/**
|
|
2
|
+
* Ambient type surface for `@ailuracode/alpine-toast`.
|
|
3
|
+
*
|
|
4
|
+
* Re-exports the {@link ToastStore} shape so consumers can include
|
|
5
|
+
* this file via the global.d.ts triple-slash directive and
|
|
6
|
+
* typecheck `$store.toast` / `$toast` references without pulling
|
|
7
|
+
* the runtime entrypoint.
|
|
8
|
+
*
|
|
9
|
+
* Per core's `global.d.ts` convention, this package does NOT
|
|
10
|
+
* augment external modules. The `Alpine.Stores` / `Alpine.Magics<T>`
|
|
11
|
+
* augmentation that earlier drafts proposed has been removed —
|
|
12
|
+
* consumers that need typed `$store.toast` access should declare
|
|
13
|
+
* the augmentation in their own `*.d.ts` (or use the typed
|
|
14
|
+
* `Alpine<{ toast: ToastStore }>` view from
|
|
15
|
+
* `@ailuracode/alpine-core` directly).
|
|
16
|
+
*/
|
|
108
17
|
|
|
109
|
-
|
|
110
|
-
TVariants extends readonly string[] = readonly [],
|
|
111
|
-
TPositions extends readonly string[] = readonly [],
|
|
112
|
-
TContent = unknown,
|
|
113
|
-
> = ToastPayload<TVariants, TPositions, TContent>;
|
|
114
|
-
|
|
115
|
-
export interface ToastStore<
|
|
116
|
-
TVariants extends readonly string[] = readonly [],
|
|
117
|
-
TPositions extends readonly string[] = readonly [],
|
|
118
|
-
TContent = unknown,
|
|
119
|
-
> {
|
|
120
|
-
defaultPosition: ToastPosition<TPositions>;
|
|
121
|
-
stackPositions: readonly ToastPosition<TPositions>[];
|
|
122
|
-
maxToasts: number;
|
|
123
|
-
maxVisible: number;
|
|
124
|
-
items: ToastItem<TVariants, TPositions, TContent>[];
|
|
125
|
-
push(payload?: ToastPayload<TVariants, TPositions, TContent>): string;
|
|
126
|
-
pushUnique(key: string, payload?: ToastPayload<TVariants, TPositions, TContent>): string;
|
|
127
|
-
update(id: string, payload?: Partial<ToastPayload<TVariants, TPositions, TContent>>): void;
|
|
128
|
-
dismiss(id: string): void;
|
|
129
|
-
dismissAt(position: ToastPosition<TPositions>): void;
|
|
130
|
-
dismissAll(): void;
|
|
131
|
-
destroy(): void;
|
|
132
|
-
itemsAt(position: ToastPosition<TPositions>): ToastItem<TVariants, TPositions, TContent>[];
|
|
133
|
-
timedItemsAt(position: ToastPosition<TPositions>): ToastItem<TVariants, TPositions, TContent>[];
|
|
134
|
-
persistentItemsAt(
|
|
135
|
-
position: ToastPosition<TPositions>
|
|
136
|
-
): ToastItem<TVariants, TPositions, TContent>[];
|
|
137
|
-
activeTimedItemsAt(
|
|
138
|
-
position: ToastPosition<TPositions>
|
|
139
|
-
): ToastItem<TVariants, TPositions, TContent>[];
|
|
140
|
-
activePersistentItemsAt(
|
|
141
|
-
position: ToastPosition<TPositions>
|
|
142
|
-
): ToastItem<TVariants, TPositions, TContent>[];
|
|
143
|
-
isVisibleAt(position: ToastPosition<TPositions>, index: number): boolean;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
export type ToastVariantMethods<
|
|
147
|
-
TVariants extends readonly string[],
|
|
148
|
-
TPositions extends readonly string[] = readonly [],
|
|
149
|
-
TContent = unknown,
|
|
150
|
-
> = {
|
|
151
|
-
[K in TVariants[number]]: (
|
|
152
|
-
titleOrPayload: string | ToastPayloadWithoutVariant<TVariants, TPositions, TContent>,
|
|
153
|
-
options?: Omit<ToastPayloadWithoutVariant<TVariants, TPositions, TContent>, "title" | "content">
|
|
154
|
-
) => string;
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
export type ToastMagic<
|
|
158
|
-
TVariants extends readonly string[] = readonly [],
|
|
159
|
-
TPositions extends readonly string[] = readonly [],
|
|
160
|
-
TContent = unknown,
|
|
161
|
-
> = {
|
|
162
|
-
(title: string, options?: Omit<ToastPayload<TVariants, TPositions, TContent>, "title">): string;
|
|
163
|
-
(payload: ToastPayload<TVariants, TPositions, TContent>): string;
|
|
164
|
-
promise<T>(
|
|
165
|
-
factoryOrPromise: ToastPromiseInput<T>,
|
|
166
|
-
messages?: ToastPromiseMessages<T, ToastVariant<TVariants>, TContent>
|
|
167
|
-
): Promise<T>;
|
|
168
|
-
dismiss(id: string): void;
|
|
169
|
-
update(id: string, payload?: Partial<ToastPayload<TVariants, TPositions, TContent>>): void;
|
|
170
|
-
dismissAt(position: ToastPosition<TPositions>): void;
|
|
171
|
-
dismissAll(): void;
|
|
172
|
-
pushUnique(key: string, payload?: ToastPayload<TVariants, TPositions, TContent>): string;
|
|
173
|
-
fromPayload(payload?: ToastEventPayload<TVariants, TPositions, TContent>): string;
|
|
174
|
-
} & ToastVariantMethods<TVariants, TPositions, TContent>;
|
|
175
|
-
|
|
176
|
-
export type ResolvedPromiseConfig<TVariants extends readonly string[] = readonly []> = {
|
|
177
|
-
loading: string;
|
|
178
|
-
error: string;
|
|
179
|
-
duration: ToastDuration;
|
|
180
|
-
loadingVariant: ToastVariant<TVariants>;
|
|
181
|
-
successVariant: ToastVariant<TVariants>;
|
|
182
|
-
errorVariant: ToastVariant<TVariants>;
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
export type ResolvedToastPluginConfig<
|
|
186
|
-
TVariants extends readonly string[] = readonly [],
|
|
187
|
-
TPositions extends readonly string[] = readonly [],
|
|
188
|
-
> = {
|
|
189
|
-
defaultPosition: ToastPosition<TPositions>;
|
|
190
|
-
defaultDuration: number;
|
|
191
|
-
maxToasts: number;
|
|
192
|
-
maxVisible: number;
|
|
193
|
-
listenToWindowEvents: boolean;
|
|
194
|
-
storeKey: ToastStoreKey;
|
|
195
|
-
variants: TVariants;
|
|
196
|
-
positions: TPositions;
|
|
197
|
-
promise: ResolvedPromiseConfig<TVariants>;
|
|
198
|
-
};
|
|
199
|
-
|
|
200
|
-
export declare function resolveToastPluginConfig<
|
|
201
|
-
const TVariants extends readonly string[] = readonly [],
|
|
202
|
-
const TPositions extends readonly string[] = readonly [],
|
|
203
|
-
>(
|
|
204
|
-
options?: ToastPluginOptions<TVariants, TPositions>
|
|
205
|
-
): ResolvedToastPluginConfig<TVariants, TPositions>;
|
|
206
|
-
|
|
207
|
-
export declare function toastOptions<
|
|
208
|
-
const TVariants extends readonly string[] = readonly [],
|
|
209
|
-
const TPositions extends readonly string[] = readonly [],
|
|
210
|
-
TContent = unknown,
|
|
211
|
-
>(
|
|
212
|
-
options: ToastPluginOptions<TVariants, TPositions, TContent>
|
|
213
|
-
): ToastPluginOptions<TVariants, TPositions, TContent>;
|
|
214
|
-
|
|
215
|
-
export declare function toastVariants<const T extends readonly string[]>(variants: T): T;
|
|
216
|
-
|
|
217
|
-
export declare function toastPositions<const T extends readonly string[]>(positions: T): T;
|
|
218
|
-
|
|
219
|
-
export interface CreateToastStoreOptions<TPositions extends readonly string[] = readonly []> {
|
|
220
|
-
defaultPosition?: ToastPosition<TPositions>;
|
|
221
|
-
positions?: TPositions;
|
|
222
|
-
defaultDuration?: number;
|
|
223
|
-
maxToasts?: number;
|
|
224
|
-
maxVisible?: number;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
export declare function resolveStackPositions<TPositions extends readonly string[]>(
|
|
228
|
-
defaultPosition: ToastPosition<TPositions>,
|
|
229
|
-
positions?: TPositions
|
|
230
|
-
): readonly ToastPosition<TPositions>[];
|
|
231
|
-
|
|
232
|
-
export declare function createToastStore<
|
|
233
|
-
const TPositions extends readonly string[] = readonly [],
|
|
234
|
-
TContent = unknown,
|
|
235
|
-
>(options?: CreateToastStoreOptions<TPositions>): ToastStore<readonly [], TPositions, TContent>;
|
|
236
|
-
|
|
237
|
-
export declare function createToastMagic<
|
|
238
|
-
const TVariants extends readonly string[],
|
|
239
|
-
const TPositions extends readonly string[] = readonly [],
|
|
240
|
-
TContent = unknown,
|
|
241
|
-
>(
|
|
242
|
-
config: ResolvedToastPluginConfig<TVariants, TPositions>,
|
|
243
|
-
getStore: () => ToastStore<TVariants, TPositions, TContent>
|
|
244
|
-
): ToastMagic<TVariants, TPositions, TContent>;
|
|
245
|
-
|
|
246
|
-
declare function toastPlugin<
|
|
247
|
-
const TVariants extends readonly string[] = readonly [],
|
|
248
|
-
const TPositions extends readonly string[] = readonly [],
|
|
249
|
-
TContent = unknown,
|
|
250
|
-
>(
|
|
251
|
-
options?: ToastPluginOptions<TVariants, TPositions, TContent>
|
|
252
|
-
): (Alpine: import("alpinejs").Alpine) => void;
|
|
253
|
-
declare function toastPlugin(Alpine: import("alpinejs").Alpine): void;
|
|
254
|
-
|
|
255
|
-
export default toastPlugin;
|
|
18
|
+
/// <reference types="@types/alpinejs" />
|
|
256
19
|
|
|
257
|
-
|
|
258
|
-
namespace Alpine {
|
|
259
|
-
interface Stores {
|
|
260
|
-
toast: ToastStore;
|
|
261
|
-
}
|
|
262
|
-
interface Magics<T> {
|
|
263
|
-
$toast: ToastMagic;
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
}
|
|
20
|
+
export type { ToastStore };
|