robot-toast 2.0.0-beta.3 → 2.0.1
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 +18 -14
- package/dist/index.d.mts +16 -13
- package/dist/index.d.ts +16 -13
- package/dist/index.js +83 -90
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +83 -90
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,8 +39,7 @@ A lightweight, zero-dependency, framework-agnostic toast notification library fe
|
|
|
39
39
|
|
|
40
40
|
- **36% smaller core bundle** (61 KB → 39 KB). Robots moved to a tree-shakeable subpath — only the ones you import end up in your bundle.
|
|
41
41
|
- **Opt-in robots.** Omitting `robotVariant` renders *no robot* now. Pass `'default'` or import from `robot-toast/robots` to bring one back.
|
|
42
|
-
- **
|
|
43
|
-
- **Native-feel mobile layout.** On viewports ≤ 600 px the toast stretches edge-to-edge with a 16 px gutter, matching how iOS/Android system toasts behave. Drag is suppressed there since it would fight the layout.
|
|
42
|
+
- **Inline buttons.** Pass a `buttons` array for Undo / Retry / Cancel-style inline CTAs — rendered in array order, optional `className` per button for custom visual hierarchy.
|
|
44
43
|
- **`toast.promise()`** — attach loading/success/error toasts to any promise.
|
|
45
44
|
- **React subpath.** `useRobotToast()` + `useToastOnMount()` as optional ergonomic bindings.
|
|
46
45
|
- **ARIA roles.** `role="alert"` for `error`/`warning`, `role="status"` elsewhere, plus `aria-atomic` and a labeled close button.
|
|
@@ -118,26 +117,32 @@ Prefer the built-in inline SVG with no extra import?
|
|
|
118
117
|
toast({ message: 'Hello', robotVariant: 'default' });
|
|
119
118
|
```
|
|
120
119
|
|
|
121
|
-
##
|
|
120
|
+
## Inline buttons
|
|
122
121
|
|
|
123
|
-
Add
|
|
122
|
+
Add inline buttons for patterns like Undo, Retry, or Confirm / Cancel. They render in array order — the caller controls the visual hierarchy:
|
|
124
123
|
|
|
125
124
|
```ts
|
|
126
|
-
// Undo pattern —
|
|
125
|
+
// Undo pattern — one button
|
|
127
126
|
toast({
|
|
128
127
|
message: 'File deleted',
|
|
129
|
-
|
|
128
|
+
buttons: [
|
|
129
|
+
{ label: 'Undo', onClick: () => restoreFile() },
|
|
130
|
+
],
|
|
130
131
|
});
|
|
131
132
|
|
|
132
|
-
// Confirm + cancel
|
|
133
|
+
// Confirm + cancel — cancel on the left, primary CTA on the right
|
|
133
134
|
toast({
|
|
134
|
-
message: '
|
|
135
|
-
|
|
136
|
-
|
|
135
|
+
message: 'Send this email to 1,200 people?',
|
|
136
|
+
buttons: [
|
|
137
|
+
{ label: 'Cancel', onClick: () => abort() },
|
|
138
|
+
{ label: 'Send', onClick: () => send(), className: 'my-primary' },
|
|
139
|
+
],
|
|
137
140
|
});
|
|
138
141
|
```
|
|
139
142
|
|
|
140
|
-
Clicking
|
|
143
|
+
Clicking any button fires its `onClick` and then closes the toast automatically. A callback that throws is logged and the toast still closes, so a bad handler can't strand the toast on screen.
|
|
144
|
+
|
|
145
|
+
All buttons get a neutral outline style by default. Pass a custom `className` on any button to override — e.g. mark one as a filled CTA via your own CSS, or use Tailwind utility classes directly.
|
|
141
146
|
|
|
142
147
|
## Promise lifecycle
|
|
143
148
|
|
|
@@ -273,8 +278,7 @@ toast.success({ message: 'Deployed!', theme: 'colored', position: 'top-center',
|
|
|
273
278
|
| `rtl` | `boolean` | `false` | Right-to-left layout |
|
|
274
279
|
| `limit` | `number` | `0` | Max toasts visible at once. `0` = unlimited. Excess is queued |
|
|
275
280
|
| `newestOnTop` | `boolean` | `false` | Stack newest toasts above older ones |
|
|
276
|
-
| `
|
|
277
|
-
| `cancel` | `{ label: string; onClick: (e: MouseEvent) => void }` | — | Secondary inline button (e.g. "Cancel"). Fires `onClick` then closes the toast. |
|
|
281
|
+
| `buttons` | `Array<{ label: string; onClick: (e: MouseEvent) => void; className?: string }>` | — | Inline buttons rendered in array order. Each click fires `onClick` then closes the toast. |
|
|
278
282
|
| `onOpen` | `() => void` | — | Callback fired when the toast finishes its entrance |
|
|
279
283
|
| `onClose` | `() => void` | — | Callback fired after the toast fully exits |
|
|
280
284
|
|
|
@@ -363,7 +367,7 @@ When `draggable` is on (default):
|
|
|
363
367
|
- `touch-action: none` prevents the browser from fighting the drag, and rect dimensions are cached on pointerdown to eliminate layout-thrash jank on low-end devices.
|
|
364
368
|
- Use the **close button**, an **action button**, or `toast.closeById()` / `toast.closeAll()` to dismiss programmatically.
|
|
365
369
|
|
|
366
|
-
**On viewports ≤ 600 px** the toast
|
|
370
|
+
**On viewports ≤ 600 px** the toast shrinks slightly (tighter gutters, smaller robot, smaller font) but keeps its configured position preset. Drag still works everywhere.
|
|
367
371
|
|
|
368
372
|
---
|
|
369
373
|
|
package/dist/index.d.mts
CHANGED
|
@@ -19,21 +19,28 @@ type ToastTheme = typeof TOAST_THEMES[number];
|
|
|
19
19
|
/** Type derived from TOAST_TRANSITIONS constant */
|
|
20
20
|
type TransitionType = typeof TOAST_TRANSITIONS[number];
|
|
21
21
|
/**
|
|
22
|
-
* A button rendered inside the toast.
|
|
22
|
+
* A button rendered inside the toast. Pass an array of these as `buttons`
|
|
23
|
+
* to add inline CTAs like "Undo" / "Retry" / "Cancel":
|
|
23
24
|
*
|
|
24
25
|
* toast({
|
|
25
26
|
* message: 'File deleted',
|
|
26
|
-
*
|
|
27
|
+
* buttons: [
|
|
28
|
+
* { label: 'Undo', onClick: () => restore() },
|
|
29
|
+
* ],
|
|
27
30
|
* });
|
|
28
31
|
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
32
|
+
* Buttons render in array order. Clicking any of them fires its `onClick`
|
|
33
|
+
* and then closes the toast. Visual hierarchy is up to you — pass a custom
|
|
34
|
+
* `className` to override the default neutral style (e.g. to mark the
|
|
35
|
+
* primary CTA as filled/bold and a secondary as muted).
|
|
31
36
|
*/
|
|
32
|
-
interface
|
|
37
|
+
interface ToastButton {
|
|
33
38
|
/** Visible button text. Keep it short (1–2 words). */
|
|
34
39
|
label: string;
|
|
35
40
|
/** Fired before the toast closes. Receives the click event. */
|
|
36
41
|
onClick: (event: MouseEvent) => void;
|
|
42
|
+
/** Optional extra class appended to the button element for custom styling. */
|
|
43
|
+
className?: string;
|
|
37
44
|
}
|
|
38
45
|
interface RobotToastOptions {
|
|
39
46
|
/** The message text to display in the toast */
|
|
@@ -96,15 +103,11 @@ interface RobotToastOptions {
|
|
|
96
103
|
/** Entry / exit transition style. Default: 'bounce' */
|
|
97
104
|
transition?: TransitionType;
|
|
98
105
|
/**
|
|
99
|
-
*
|
|
100
|
-
*
|
|
106
|
+
* Inline buttons to render inside the toast (e.g. Undo, Retry, Cancel).
|
|
107
|
+
* Rendered in array order. Each click fires the button's `onClick` and
|
|
108
|
+
* then closes the toast automatically.
|
|
101
109
|
*/
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* Secondary dismiss-style button (e.g. "Cancel"). Clicking fires `onClick`
|
|
105
|
-
* then closes the toast. Rendered to the left of `action` when both exist.
|
|
106
|
-
*/
|
|
107
|
-
cancel?: ToastAction;
|
|
110
|
+
buttons?: ToastButton[];
|
|
108
111
|
/** Called when the toast finishes its enter animation and is fully visible. */
|
|
109
112
|
onOpen?: () => void;
|
|
110
113
|
/** Called after the toast has fully exited the screen. */
|
package/dist/index.d.ts
CHANGED
|
@@ -19,21 +19,28 @@ type ToastTheme = typeof TOAST_THEMES[number];
|
|
|
19
19
|
/** Type derived from TOAST_TRANSITIONS constant */
|
|
20
20
|
type TransitionType = typeof TOAST_TRANSITIONS[number];
|
|
21
21
|
/**
|
|
22
|
-
* A button rendered inside the toast.
|
|
22
|
+
* A button rendered inside the toast. Pass an array of these as `buttons`
|
|
23
|
+
* to add inline CTAs like "Undo" / "Retry" / "Cancel":
|
|
23
24
|
*
|
|
24
25
|
* toast({
|
|
25
26
|
* message: 'File deleted',
|
|
26
|
-
*
|
|
27
|
+
* buttons: [
|
|
28
|
+
* { label: 'Undo', onClick: () => restore() },
|
|
29
|
+
* ],
|
|
27
30
|
* });
|
|
28
31
|
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
32
|
+
* Buttons render in array order. Clicking any of them fires its `onClick`
|
|
33
|
+
* and then closes the toast. Visual hierarchy is up to you — pass a custom
|
|
34
|
+
* `className` to override the default neutral style (e.g. to mark the
|
|
35
|
+
* primary CTA as filled/bold and a secondary as muted).
|
|
31
36
|
*/
|
|
32
|
-
interface
|
|
37
|
+
interface ToastButton {
|
|
33
38
|
/** Visible button text. Keep it short (1–2 words). */
|
|
34
39
|
label: string;
|
|
35
40
|
/** Fired before the toast closes. Receives the click event. */
|
|
36
41
|
onClick: (event: MouseEvent) => void;
|
|
42
|
+
/** Optional extra class appended to the button element for custom styling. */
|
|
43
|
+
className?: string;
|
|
37
44
|
}
|
|
38
45
|
interface RobotToastOptions {
|
|
39
46
|
/** The message text to display in the toast */
|
|
@@ -96,15 +103,11 @@ interface RobotToastOptions {
|
|
|
96
103
|
/** Entry / exit transition style. Default: 'bounce' */
|
|
97
104
|
transition?: TransitionType;
|
|
98
105
|
/**
|
|
99
|
-
*
|
|
100
|
-
*
|
|
106
|
+
* Inline buttons to render inside the toast (e.g. Undo, Retry, Cancel).
|
|
107
|
+
* Rendered in array order. Each click fires the button's `onClick` and
|
|
108
|
+
* then closes the toast automatically.
|
|
101
109
|
*/
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* Secondary dismiss-style button (e.g. "Cancel"). Clicking fires `onClick`
|
|
105
|
-
* then closes the toast. Rendered to the left of `action` when both exist.
|
|
106
|
-
*/
|
|
107
|
-
cancel?: ToastAction;
|
|
110
|
+
buttons?: ToastButton[];
|
|
108
111
|
/** Called when the toast finishes its enter animation and is fully visible. */
|
|
109
112
|
onOpen?: () => void;
|
|
110
113
|
/** Called after the toast has fully exited the screen. */
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,this.injectCSS());}injectCSS(){let t="robot-toast-styles";if(document.getElementById(t))return;let o=`
|
|
2
2
|
/* RobotToast v2 - CSS Styles */
|
|
3
3
|
|
|
4
4
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
width: fit-content;
|
|
130
130
|
min-width: 120px;
|
|
131
131
|
max-width: min(400px, calc(100vw - 120px));
|
|
132
|
-
padding:
|
|
132
|
+
padding: 10px 40px 0 14px;
|
|
133
133
|
border-radius: 8px;
|
|
134
134
|
margin: 0;
|
|
135
135
|
opacity: 0;
|
|
@@ -290,85 +290,94 @@
|
|
|
290
290
|
}
|
|
291
291
|
|
|
292
292
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
293
|
-
/*
|
|
293
|
+
/* INLINE BUTTONS \u2014 render via buttons: [{label, onClick, className?}, ...] */
|
|
294
|
+
/* Buttons render in array order. Default style is neutral; consumers layer */
|
|
295
|
+
/* their own visual hierarchy by passing a className. */
|
|
294
296
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
295
297
|
|
|
296
298
|
.robot-toast-actions {
|
|
297
299
|
display: flex;
|
|
298
|
-
gap:
|
|
300
|
+
gap: 6px;
|
|
299
301
|
justify-content: flex-end;
|
|
300
302
|
align-items: center;
|
|
301
|
-
margin-top:
|
|
302
|
-
padding-bottom:
|
|
303
|
+
margin-top: 4px;
|
|
304
|
+
padding-bottom: 8px;
|
|
303
305
|
flex-wrap: wrap;
|
|
304
306
|
}
|
|
305
307
|
|
|
306
|
-
.robot-toast-
|
|
307
|
-
.robot-toast-cancel {
|
|
308
|
+
.robot-toast-btn {
|
|
308
309
|
appearance: none;
|
|
309
310
|
font: inherit;
|
|
310
|
-
font-size:
|
|
311
|
-
font-weight:
|
|
311
|
+
font-size: 12px;
|
|
312
|
+
font-weight: 500;
|
|
312
313
|
line-height: 1;
|
|
313
|
-
padding:
|
|
314
|
-
border-radius:
|
|
314
|
+
padding: 5px 10px;
|
|
315
|
+
border-radius: 5px;
|
|
315
316
|
cursor: pointer;
|
|
316
317
|
transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
|
|
317
318
|
white-space: nowrap;
|
|
319
|
+
background: transparent;
|
|
320
|
+
color: #52525b;
|
|
321
|
+
border: 1px solid #e4e4e7;
|
|
318
322
|
}
|
|
319
|
-
.robot-toast-
|
|
320
|
-
.robot-toast-
|
|
323
|
+
.robot-toast-btn:hover { background: #f4f4f5; color: #18181b; }
|
|
324
|
+
.robot-toast-btn:active { transform: scale(0.97); }
|
|
321
325
|
|
|
322
|
-
/*
|
|
323
|
-
|
|
326
|
+
/*
|
|
327
|
+
* When there's only one button, it's implicitly the primary CTA \u2014 style it
|
|
328
|
+
* filled so it feels decisive (matches the Undo / Retry UX). As soon as a
|
|
329
|
+
* second button appears, both drop back to the neutral outline look and the
|
|
330
|
+
* caller distinguishes them with a custom className on the primary.
|
|
331
|
+
*/
|
|
332
|
+
.robot-toast-actions .robot-toast-btn:only-child {
|
|
324
333
|
background: #18181b;
|
|
325
334
|
color: #fafafa;
|
|
326
|
-
border:
|
|
335
|
+
border-color: #18181b;
|
|
336
|
+
font-weight: 600;
|
|
327
337
|
}
|
|
328
|
-
.robot-toast-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
background: transparent;
|
|
333
|
-
color: #52525b;
|
|
334
|
-
border: 1px solid #e4e4e7;
|
|
338
|
+
.robot-toast-actions .robot-toast-btn:only-child:hover {
|
|
339
|
+
background: #000;
|
|
340
|
+
border-color: #000;
|
|
341
|
+
color: #fafafa;
|
|
335
342
|
}
|
|
336
|
-
.robot-toast-cancel:hover { background: #f4f4f5; color: #18181b; }
|
|
337
343
|
|
|
338
|
-
/* Dark theme
|
|
339
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-
|
|
344
|
+
/* Dark theme \u2014 inverted neutral */
|
|
345
|
+
.robot-toast-message.robot-toast-theme-dark .robot-toast-btn {
|
|
346
|
+
color: #a1a1aa;
|
|
347
|
+
border-color: #3f3f46;
|
|
348
|
+
}
|
|
349
|
+
.robot-toast-message.robot-toast-theme-dark .robot-toast-btn:hover {
|
|
350
|
+
background: #27272a;
|
|
351
|
+
color: #fafafa;
|
|
352
|
+
}
|
|
353
|
+
.robot-toast-message.robot-toast-theme-dark .robot-toast-actions .robot-toast-btn:only-child {
|
|
340
354
|
background: #fafafa;
|
|
341
355
|
color: #18181b;
|
|
342
356
|
border-color: #fafafa;
|
|
343
357
|
}
|
|
344
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-
|
|
358
|
+
.robot-toast-message.robot-toast-theme-dark .robot-toast-actions .robot-toast-btn:only-child:hover {
|
|
345
359
|
background: #e4e4e7;
|
|
346
360
|
border-color: #e4e4e7;
|
|
347
|
-
|
|
348
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-cancel {
|
|
349
|
-
color: #a1a1aa;
|
|
350
|
-
border-color: #3f3f46;
|
|
351
|
-
}
|
|
352
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-cancel:hover {
|
|
353
|
-
background: #27272a;
|
|
354
|
-
color: #fafafa;
|
|
361
|
+
color: #18181b;
|
|
355
362
|
}
|
|
356
363
|
|
|
357
364
|
/* Colored theme \u2014 translucent whites keep contrast on any gradient */
|
|
358
|
-
.robot-toast-message.robot-toast-theme-colored .robot-toast-
|
|
365
|
+
.robot-toast-message.robot-toast-theme-colored .robot-toast-btn {
|
|
366
|
+
color: rgba(255, 255, 255, 0.9);
|
|
367
|
+
border-color: rgba(255, 255, 255, 0.35);
|
|
368
|
+
}
|
|
369
|
+
.robot-toast-message.robot-toast-theme-colored .robot-toast-btn:hover {
|
|
370
|
+
background: rgba(255, 255, 255, 0.15);
|
|
371
|
+
color: #fff;
|
|
372
|
+
}
|
|
373
|
+
.robot-toast-message.robot-toast-theme-colored .robot-toast-actions .robot-toast-btn:only-child {
|
|
359
374
|
background: rgba(255, 255, 255, 0.95);
|
|
360
375
|
color: #18181b;
|
|
361
376
|
border-color: transparent;
|
|
362
377
|
}
|
|
363
|
-
.robot-toast-message.robot-toast-theme-colored .robot-toast-
|
|
378
|
+
.robot-toast-message.robot-toast-theme-colored .robot-toast-actions .robot-toast-btn:only-child:hover {
|
|
364
379
|
background: #fff;
|
|
365
|
-
|
|
366
|
-
.robot-toast-message.robot-toast-theme-colored .robot-toast-cancel {
|
|
367
|
-
color: rgba(255, 255, 255, 0.92);
|
|
368
|
-
border-color: rgba(255, 255, 255, 0.42);
|
|
369
|
-
}
|
|
370
|
-
.robot-toast-message.robot-toast-theme-colored .robot-toast-cancel:hover {
|
|
371
|
-
background: rgba(255, 255, 255, 0.15);
|
|
380
|
+
color: #18181b;
|
|
372
381
|
}
|
|
373
382
|
|
|
374
383
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
@@ -626,52 +635,49 @@
|
|
|
626
635
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
627
636
|
|
|
628
637
|
/*
|
|
629
|
-
*
|
|
630
|
-
*
|
|
631
|
-
*
|
|
632
|
-
*
|
|
633
|
-
*
|
|
638
|
+
* Small-viewport tweaks. No !important / edge-to-edge override here \u2014 the
|
|
639
|
+
* wrapper keeps its configured position preset and the message box stays
|
|
640
|
+
* content-sized (just capped by max-width so it doesn't overflow). Drag
|
|
641
|
+
* still works everywhere because no stylesheet rule competes with the
|
|
642
|
+
* inline position the drag handler writes.
|
|
634
643
|
*/
|
|
635
644
|
@media (max-width: 600px) {
|
|
636
645
|
.robot-toast-wrapper {
|
|
637
|
-
gap:
|
|
638
|
-
|
|
639
|
-
right: 16px !important;
|
|
640
|
-
width: auto !important;
|
|
641
|
-
max-width: none !important;
|
|
642
|
-
transform: none !important;
|
|
646
|
+
gap: 8px;
|
|
647
|
+
max-width: calc(100vw - 24px);
|
|
643
648
|
}
|
|
644
649
|
|
|
645
650
|
.robot-toast-wrapper.robot-toast-top-right,
|
|
651
|
+
.robot-toast-wrapper.robot-toast-bottom-right { right: 12px; }
|
|
646
652
|
.robot-toast-wrapper.robot-toast-top-left,
|
|
647
|
-
.robot-toast-wrapper.robot-toast-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
}
|
|
653
|
+
.robot-toast-wrapper.robot-toast-bottom-left { left: 12px; }
|
|
654
|
+
.robot-toast-wrapper.robot-toast-top-right,
|
|
655
|
+
.robot-toast-wrapper.robot-toast-top-left,
|
|
656
|
+
.robot-toast-wrapper.robot-toast-top-center { top: 12px; }
|
|
651
657
|
.robot-toast-wrapper.robot-toast-bottom-right,
|
|
652
658
|
.robot-toast-wrapper.robot-toast-bottom-left,
|
|
659
|
+
.robot-toast-wrapper.robot-toast-bottom-center { bottom: 12px; }
|
|
660
|
+
|
|
661
|
+
.robot-toast-wrapper.robot-toast-top-center,
|
|
653
662
|
.robot-toast-wrapper.robot-toast-bottom-center {
|
|
654
|
-
|
|
655
|
-
|
|
663
|
+
width: calc(100vw - 24px);
|
|
664
|
+
justify-content: center;
|
|
656
665
|
}
|
|
657
666
|
|
|
658
667
|
.robot-toast-robot {
|
|
659
668
|
width: 48px;
|
|
660
669
|
height: 52px;
|
|
661
|
-
flex-shrink: 0;
|
|
662
670
|
}
|
|
663
671
|
|
|
664
|
-
/* The message box expands to fill the remaining wrapper width */
|
|
665
672
|
.robot-toast-message {
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
padding: 12px 36px 0 14px;
|
|
673
|
+
min-width: 100px;
|
|
674
|
+
max-width: calc(100vw - 48px - 24px - 8px);
|
|
675
|
+
font-size: 13px;
|
|
676
|
+
padding: 10px 36px 0 12px;
|
|
671
677
|
}
|
|
672
678
|
|
|
673
679
|
.robot-toast-text {
|
|
674
|
-
font-size:
|
|
680
|
+
font-size: 13px;
|
|
675
681
|
padding-bottom: 10px;
|
|
676
682
|
}
|
|
677
683
|
|
|
@@ -680,31 +686,18 @@
|
|
|
680
686
|
height: 24px;
|
|
681
687
|
font-size: 20px;
|
|
682
688
|
}
|
|
683
|
-
|
|
684
|
-
/* Actions get full horizontal space and larger tap targets */
|
|
685
|
-
.robot-toast-actions {
|
|
686
|
-
gap: 10px;
|
|
687
|
-
margin-top: 12px;
|
|
688
|
-
}
|
|
689
|
-
.robot-toast-action,
|
|
690
|
-
.robot-toast-cancel {
|
|
691
|
-
padding: 8px 14px;
|
|
692
|
-
font-size: 14px;
|
|
693
|
-
}
|
|
694
689
|
}
|
|
695
690
|
|
|
696
691
|
@media (max-width: 360px) {
|
|
697
|
-
.robot-toast-wrapper {
|
|
698
|
-
left: 12px !important;
|
|
699
|
-
right: 12px !important;
|
|
700
|
-
gap: 8px;
|
|
701
|
-
}
|
|
702
692
|
.robot-toast-robot {
|
|
703
|
-
width:
|
|
704
|
-
height:
|
|
693
|
+
width: 40px;
|
|
694
|
+
height: 44px;
|
|
695
|
+
}
|
|
696
|
+
.robot-toast-message {
|
|
697
|
+
max-width: calc(100vw - 40px - 20px - 8px);
|
|
705
698
|
}
|
|
706
699
|
}
|
|
707
|
-
`,e=document.createElement("style");e.id=t,e.textContent=o,document.head.appendChild(e);}};h.injected=false;var u=h,T=u;var k=600,R=1;function L(){return R++}var O=16,y=class{constructor(t,o,e){this.progressBar=null;this.timerStart=null;this.closeTimeout=null;this.isDragging=false;this.dragOffsetX=0;this.dragOffsetY=0;this.dragWidth=0;this.dragHeight=0;this.isHovered=false;this.isFocusLost=false;this.isClosed=false;this.cleanupFns=[];this.id=t,this.onRemove=e;let r={message:o.message,autoClose:o.autoClose??5e3,position:o.position??"bottom-right",type:o.type??"default",theme:o.theme??"light",style:o.style,typeSpeed:o.typeSpeed??30,robotVariant:o.robotVariant??"",hideProgressBar:o.hideProgressBar??false,pauseOnFocusLoss:o.pauseOnFocusLoss??true,draggable:o.draggable??true,nearScreen:o.nearScreen??true,pauseOnHover:o.pauseOnHover??true,rtl:o.rtl??false,transition:o.transition??"bounce",action:o.action,cancel:o.cancel,onOpen:o.onOpen,onClose:o.onClose};this.options=r;let s=r.position.includes("left"),i;r.nearScreen?i=s?"left":"right":i=s?"right":"left",this.currentRobotSide=i,this.autoCloseDuration=typeof r.autoClose=="number"?r.autoClose:r.autoClose?5e3:0,this.remainingTime=this.autoCloseDuration,this.wrapper=this.buildWrapper(),this.robotEl=this.buildRobot(),this.messageBox=this.buildMessageBox(),this.messageText=this.messageBox.querySelector(".robot-toast-text"),this.progressBar=this.messageBox.querySelector(".robot-toast-progress-bar"),r.message===""&&this.messageBox.classList.add("robot-toast-empty"),this.assembleLayout(),document.body.appendChild(this.wrapper),r.draggable&&this.initDrag(),r.pauseOnFocusLoss&&this.initFocusWatcher(),r.pauseOnHover&&this.initHoverWatcher(),requestAnimationFrame(()=>this.playEntrance());}close(){this.isClosed||(this.isClosed=true,this.cancelTimer(),this.cleanupFns.forEach(t=>t()),this.cleanupFns=[],this.playExit(()=>{this.wrapper.parentNode&&this.wrapper.parentNode.removeChild(this.wrapper),this.options.onClose?.(),this.onRemove(this.id);}));}shiftVertical(t){this.options.position.startsWith("bottom")?this.wrapper.style.bottom=`${t}px`:this.wrapper.style.top=`${t}px`;}getWrapperHeight(){return this.wrapper.getBoundingClientRect().height||90}buildWrapper(){let t=document.createElement("div"),o=["robot-toast-wrapper",`robot-toast-${this.options.position}`];this.options.rtl&&o.push("robot-toast-rtl"),t.className=o.join(" ");let e=this.options.type==="error"||this.options.type==="warning";return t.setAttribute("role",e?"alert":"status"),t.setAttribute("aria-live",e?"assertive":"polite"),t.setAttribute("aria-atomic","true"),t}resolveVariant(){let t=this.options.robotVariant;if(!t||t==="none")return "hidden";if(t==="default")return "default";let o=[".svg",".png",".jpg",".jpeg",".gif",".webp"];return t.startsWith("data:")||o.some(s=>t.toLowerCase().endsWith(s))?"image":"hidden"}buildRobot(){let t=document.createElement("div");t.className="robot-toast-robot";let o=this.resolveVariant();if(o==="hidden")return t.style.display="none",t;if(o==="default")return t.innerHTML=this.getBuiltinSVG(),t;let e=document.createElement("img");return e.src=this.options.robotVariant,e.alt="Robot",e.setAttribute("width","65"),e.setAttribute("height","70"),e.style.cssText="width:100%;height:100%;object-fit:contain;display:block;",e.onerror=()=>{t.innerHTML=this.getBuiltinSVG();},t.appendChild(e),t}buildMessageBox(){let t=document.createElement("div"),o=["robot-toast-message",`robot-toast-type-${this.options.type}`,`robot-toast-theme-${this.options.theme}`].filter(Boolean);t.className=o.join(" "),t.style.cursor=this.options.draggable?"grab":"default",this.options.style&&Object.entries(this.options.style).forEach(([n,c])=>{let m=n.replace(/-([a-z])/g,b=>b[1].toUpperCase());t.style[m]=c;});let e=document.createElement("button");e.className="robot-toast-close",e.innerHTML="×",e.title="Dismiss",e.type="button",e.setAttribute("aria-label","Dismiss notification"),e.addEventListener("click",n=>{n.stopPropagation(),this.close();}),t.appendChild(e);let r=document.createElement("div");if(r.className="robot-toast-text",t.appendChild(r),this.options.action||this.options.cancel){let n=document.createElement("div");n.className="robot-toast-actions",this.options.cancel&&n.appendChild(this.buildActionButton(this.options.cancel,"cancel")),this.options.action&&n.appendChild(this.buildActionButton(this.options.action,"action")),t.appendChild(n);}let s=document.createElement("div");s.className="robot-toast-progress-container",this.options.hideProgressBar&&(s.style.display="none");let i=document.createElement("div");return i.className="robot-toast-progress-bar",s.appendChild(i),t.appendChild(s),t}buildActionButton(t,o){let e=document.createElement("button");return e.type="button",e.className=`robot-toast-${o}`,e.textContent=t.label,e.addEventListener("click",r=>{r.stopPropagation();try{t.onClick(r);}catch(s){console.error("[robot-toast] action onClick threw:",s);}this.close();}),e}assembleLayout(){let{rtl:t}=this.options;this.wrapper.innerHTML="",(t?this.currentRobotSide==="right":this.currentRobotSide==="left")?(this.wrapper.appendChild(this.robotEl),this.wrapper.appendChild(this.messageBox)):(this.wrapper.appendChild(this.messageBox),this.wrapper.appendChild(this.robotEl));}playEntrance(){this.wrapper.classList.add("robot-toast-visible");let t=this.resolveVariant()==="hidden",o=this.options.message==="",e=()=>{if(o){this.options.onOpen?.(),this.afterTypingComplete();return}let r=this.options.transition==="bounce"?"message-enter":`message-enter-${this.options.transition}`;this.messageBox.classList.add(r);let s=()=>{this.messageBox.removeEventListener("animationend",s),this.messageBox.classList.remove(r),this.messageBox.style.opacity="1",this.messageBox.style.transform="none",this.options.onOpen?.(),this.startTyping();};this.messageBox.addEventListener("animationend",s,{once:true});};if(t)e();else {let r=this.currentRobotSide==="left"?"left":"right",s=this.options.transition!=="bounce"?`-${this.options.transition}`:"",i=`robot-enter-${r}${s}`;this.robotEl.classList.add(i);let n=()=>{this.robotEl.removeEventListener("animationend",n),this.robotEl.style.opacity="1",this.robotEl.classList.remove(i),this.robotEl.classList.add("robot-idle"),e();};this.robotEl.addEventListener("animationend",n,{once:true});}}playExit(t){let o=this.resolveVariant()==="hidden",e=this.options.message==="",r=()=>{if(this.messageBox.removeEventListener("animationend",r),o)this.wrapper.classList.remove("robot-toast-visible"),setTimeout(t,260);else {this.robotEl.classList.remove("robot-idle","robot-snap-left","robot-snap-right");let s=this.currentRobotSide==="left"?"left":"right",i=this.options.transition!=="bounce"?`-${this.options.transition}`:"",n=`robot-exit-${s}${i}`;this.robotEl.classList.add(n);let c=()=>{this.robotEl.removeEventListener("animationend",c),this.wrapper.classList.remove("robot-toast-visible"),setTimeout(t,260);};this.robotEl.addEventListener("animationend",c,{once:true});}};e?r():(this.messageBox.classList.add("message-exit"),this.messageBox.addEventListener("animationend",r,{once:true}));}startTyping(){let{message:t,typeSpeed:o}=this.options,e=this.messageText;if(o===0){e.textContent=t,this.afterTypingComplete();return}let r=0,s=true;this.cleanupFns.push(()=>{s=false;});let i=()=>{s&&(r<t.length?(e.textContent+=t.charAt(r++),setTimeout(i,o)):this.afterTypingComplete());};i();}afterTypingComplete(){this.autoCloseDuration>0&&!this.options.hideProgressBar&&this.progressBar&&(this.progressBar.style.animationDuration=`${this.autoCloseDuration}ms`,this.progressBar.offsetWidth,this.progressBar.classList.add("robot-toast-progress-auto"),(this.isHovered||this.isFocusLost)&&this.progressBar.classList.add("robot-toast-progress-paused")),!this.isHovered&&!this.isFocusLost&&this.startTimer();}startTimer(){this.autoCloseDuration<=0||this.remainingTime<=0||(this.timerStart=Date.now(),this.closeTimeout=setTimeout(()=>this.close(),this.remainingTime));}pauseTimer(){if(this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null,this.timerStart!==null)){let t=Date.now()-this.timerStart;this.remainingTime=Math.max(0,this.remainingTime-t),this.timerStart=null;}this.progressBar?.classList.add("robot-toast-progress-paused");}resumeTimer(){this.isHovered||this.isFocusLost||this.isDragging||(this.progressBar?.classList.remove("robot-toast-progress-paused"),this.startTimer());}cancelTimer(){this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null);}initHoverWatcher(){let t=()=>{this.isHovered=true,this.pauseTimer();},o=()=>{this.isHovered=false,this.resumeTimer();};this.wrapper.addEventListener("mouseenter",t),this.wrapper.addEventListener("mouseleave",o),this.cleanupFns.push(()=>{this.wrapper.removeEventListener("mouseenter",t),this.wrapper.removeEventListener("mouseleave",o);});}initFocusWatcher(){let t=()=>{this.isFocusLost=true,this.pauseTimer();},o=()=>{this.isFocusLost=false,this.resumeTimer();};window.addEventListener("blur",t),window.addEventListener("focus",o),this.cleanupFns.push(()=>{window.removeEventListener("blur",t),window.removeEventListener("focus",o);});}initDrag(){this.messageBox.style.cursor="grab";let t=r=>{if(r.target.closest(".robot-toast-close, .robot-toast-action, .robot-toast-cancel")||r.button!==void 0&&r.button!==0||typeof window<"u"&&window.innerWidth<=k)return;r.preventDefault(),this.isDragging=true,this.pauseTimer();let s=this.wrapper.getBoundingClientRect();this.wrapper.classList.add("robot-toast-dragging"),this.wrapper.style.top=`${s.top}px`,this.wrapper.style.left=`${s.left}px`,this.wrapper.style.right="auto",this.wrapper.style.bottom="auto",this.wrapper.style.transform="none",this.dragWidth=s.width,this.dragHeight=s.height,this.dragOffsetX=r.clientX-s.left,this.dragOffsetY=r.clientY-s.top,this.messageBox.style.cursor="grabbing",this.wrapper.setPointerCapture(r.pointerId);},o=r=>{if(!this.isDragging)return;r.preventDefault();let s=window.innerWidth-this.dragWidth,i=window.innerHeight-this.dragHeight,n=Math.max(0,Math.min(r.clientX-this.dragOffsetX,s)),c=Math.max(0,Math.min(r.clientY-this.dragOffsetY,i));this.wrapper.style.left=`${n}px`,this.wrapper.style.top=`${c}px`;},e=r=>{if(!this.isDragging)return;this.isDragging=false,this.wrapper.classList.remove("robot-toast-dragging"),this.messageBox.style.cursor="grab";let s=parseFloat(this.wrapper.style.left)||0,i=parseFloat(this.wrapper.style.top)||0,n=s+this.dragWidth/2,c=window.innerWidth/2,m=n<c,b=this.options.nearScreen?m?"left":"right":m?"right":"left",v=m?20:window.innerWidth-this.dragWidth-20,E=Math.max(20,Math.min(i,window.innerHeight-this.dragHeight-20));if(this.wrapper.style.transition="left 0.45s cubic-bezier(0.34,1.56,0.64,1), top 0.4s cubic-bezier(0.34,1.56,0.64,1)",this.wrapper.style.left=`${v}px`,this.wrapper.style.top=`${E}px`,b!==this.currentRobotSide){this.currentRobotSide=b;let x=b==="left";this.robotEl.style.order=x?"0":"1",this.messageBox.style.order=x?"1":"0";let w=b==="left"?"robot-snap-left":"robot-snap-right";this.robotEl.classList.remove("robot-idle","robot-snap-left","robot-snap-right"),this.robotEl.classList.add(w),this.robotEl.addEventListener("animationend",()=>{this.robotEl.style.opacity="1",this.robotEl.classList.remove(w),this.robotEl.classList.add("robot-idle");},{once:true});}setTimeout(()=>{this.wrapper.style.transition="";},500),this.resumeTimer();};this.wrapper.addEventListener("pointerdown",t),this.wrapper.addEventListener("pointermove",o),this.wrapper.addEventListener("pointerup",e),this.wrapper.addEventListener("pointercancel",e),this.cleanupFns.push(()=>{this.wrapper.removeEventListener("pointerdown",t),this.wrapper.removeEventListener("pointermove",o),this.wrapper.removeEventListener("pointerup",e),this.wrapper.removeEventListener("pointercancel",e);});}getBuiltinSVG(){return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120"
|
|
700
|
+
`,e=document.createElement("style");e.id=t,e.textContent=o,document.head.appendChild(e);}};m.injected=false;var g=m,T=g;var E=1;function R(){return E++}var L=16,y=class{constructor(t,o,e){this.progressBar=null;this.timerStart=null;this.closeTimeout=null;this.isDragging=false;this.dragOffsetX=0;this.dragOffsetY=0;this.dragWidth=0;this.dragHeight=0;this.isHovered=false;this.isFocusLost=false;this.isClosed=false;this.cleanupFns=[];this.id=t,this.onRemove=e;let s={message:o.message,autoClose:o.autoClose??5e3,position:o.position??"bottom-right",type:o.type??"default",theme:o.theme??"light",style:o.style,typeSpeed:o.typeSpeed??30,robotVariant:o.robotVariant??"",hideProgressBar:o.hideProgressBar??false,pauseOnFocusLoss:o.pauseOnFocusLoss??true,draggable:o.draggable??true,nearScreen:o.nearScreen??true,pauseOnHover:o.pauseOnHover??true,rtl:o.rtl??false,transition:o.transition??"bounce",buttons:o.buttons,onOpen:o.onOpen,onClose:o.onClose};this.options=s;let r=s.position.includes("left"),i;s.nearScreen?i=r?"left":"right":i=r?"right":"left",this.currentRobotSide=i,this.autoCloseDuration=typeof s.autoClose=="number"?s.autoClose:s.autoClose?5e3:0,this.remainingTime=this.autoCloseDuration,this.wrapper=this.buildWrapper(),this.robotEl=this.buildRobot(),this.messageBox=this.buildMessageBox(),this.messageText=this.messageBox.querySelector(".robot-toast-text"),this.progressBar=this.messageBox.querySelector(".robot-toast-progress-bar"),s.message===""&&this.messageBox.classList.add("robot-toast-empty"),this.assembleLayout(),document.body.appendChild(this.wrapper),s.draggable&&this.initDrag(),s.pauseOnFocusLoss&&this.initFocusWatcher(),s.pauseOnHover&&this.initHoverWatcher(),requestAnimationFrame(()=>this.playEntrance());}close(){this.isClosed||(this.isClosed=true,this.cancelTimer(),this.cleanupFns.forEach(t=>t()),this.cleanupFns=[],this.playExit(()=>{this.wrapper.parentNode&&this.wrapper.parentNode.removeChild(this.wrapper),this.options.onClose?.(),this.onRemove(this.id);}));}shiftVertical(t){this.options.position.startsWith("bottom")?this.wrapper.style.bottom=`${t}px`:this.wrapper.style.top=`${t}px`;}getWrapperHeight(){return this.wrapper.getBoundingClientRect().height||90}buildWrapper(){let t=document.createElement("div"),o=["robot-toast-wrapper",`robot-toast-${this.options.position}`];this.options.rtl&&o.push("robot-toast-rtl"),t.className=o.join(" ");let e=this.options.type==="error"||this.options.type==="warning";return t.setAttribute("role",e?"alert":"status"),t.setAttribute("aria-live",e?"assertive":"polite"),t.setAttribute("aria-atomic","true"),t}resolveVariant(){let t=this.options.robotVariant;if(!t||t==="none")return "hidden";if(t==="default")return "default";let o=[".svg",".png",".jpg",".jpeg",".gif",".webp"];return t.startsWith("data:")||o.some(r=>t.toLowerCase().endsWith(r))?"image":"hidden"}buildRobot(){let t=document.createElement("div");t.className="robot-toast-robot";let o=this.resolveVariant();if(o==="hidden")return t.style.display="none",t;if(o==="default")return t.innerHTML=this.getBuiltinSVG(),t;let e=document.createElement("img");return e.src=this.options.robotVariant,e.alt="Robot",e.setAttribute("width","65"),e.setAttribute("height","70"),e.style.cssText="width:100%;height:100%;object-fit:contain;display:block;",e.onerror=()=>{t.innerHTML=this.getBuiltinSVG();},t.appendChild(e),t}buildMessageBox(){let t=document.createElement("div"),o=["robot-toast-message",`robot-toast-type-${this.options.type}`,`robot-toast-theme-${this.options.theme}`].filter(Boolean);t.className=o.join(" "),t.style.cursor=this.options.draggable?"grab":"default",this.options.style&&Object.entries(this.options.style).forEach(([n,c])=>{let h=n.replace(/-([a-z])/g,d=>d[1].toUpperCase());t.style[h]=c;});let e=document.createElement("button");e.className="robot-toast-close",e.innerHTML="×",e.title="Dismiss",e.type="button",e.setAttribute("aria-label","Dismiss notification"),e.addEventListener("click",n=>{n.stopPropagation(),this.close();}),t.appendChild(e);let s=document.createElement("div");if(s.className="robot-toast-text",t.appendChild(s),this.options.buttons&&this.options.buttons.length>0){let n=document.createElement("div");n.className="robot-toast-actions",this.options.buttons.forEach(c=>n.appendChild(this.buildButton(c))),t.appendChild(n);}let r=document.createElement("div");r.className="robot-toast-progress-container",this.options.hideProgressBar&&(r.style.display="none");let i=document.createElement("div");return i.className="robot-toast-progress-bar",r.appendChild(i),t.appendChild(r),t}buildButton(t){let o=document.createElement("button");return o.type="button",o.className=t.className?`robot-toast-btn ${t.className}`:"robot-toast-btn",o.textContent=t.label,o.addEventListener("click",e=>{e.stopPropagation();try{t.onClick(e);}catch(s){console.error("[robot-toast] button onClick threw:",s);}this.close();}),o}assembleLayout(){let{rtl:t}=this.options;this.wrapper.innerHTML="",(t?this.currentRobotSide==="right":this.currentRobotSide==="left")?(this.wrapper.appendChild(this.robotEl),this.wrapper.appendChild(this.messageBox)):(this.wrapper.appendChild(this.messageBox),this.wrapper.appendChild(this.robotEl));}playEntrance(){this.wrapper.classList.add("robot-toast-visible");let t=this.resolveVariant()==="hidden",o=this.options.message==="",e=()=>{if(o){this.options.onOpen?.(),this.afterTypingComplete();return}let s=this.options.transition==="bounce"?"message-enter":`message-enter-${this.options.transition}`;this.messageBox.classList.add(s);let r=()=>{this.messageBox.removeEventListener("animationend",r),this.messageBox.classList.remove(s),this.messageBox.style.opacity="1",this.messageBox.style.transform="none",this.options.onOpen?.(),this.startTyping();};this.messageBox.addEventListener("animationend",r,{once:true});};if(t)e();else {let s=this.currentRobotSide==="left"?"left":"right",r=this.options.transition!=="bounce"?`-${this.options.transition}`:"",i=`robot-enter-${s}${r}`;this.robotEl.classList.add(i);let n=()=>{this.robotEl.removeEventListener("animationend",n),this.robotEl.style.opacity="1",this.robotEl.classList.remove(i),this.robotEl.classList.add("robot-idle"),e();};this.robotEl.addEventListener("animationend",n,{once:true});}}playExit(t){let o=this.resolveVariant()==="hidden",e=this.options.message==="",s=()=>{if(this.messageBox.removeEventListener("animationend",s),o)this.wrapper.classList.remove("robot-toast-visible"),setTimeout(t,260);else {this.robotEl.classList.remove("robot-idle","robot-snap-left","robot-snap-right");let r=this.currentRobotSide==="left"?"left":"right",i=this.options.transition!=="bounce"?`-${this.options.transition}`:"",n=`robot-exit-${r}${i}`;this.robotEl.classList.add(n);let c=()=>{this.robotEl.removeEventListener("animationend",c),this.wrapper.classList.remove("robot-toast-visible"),setTimeout(t,260);};this.robotEl.addEventListener("animationend",c,{once:true});}};e?s():(this.messageBox.classList.add("message-exit"),this.messageBox.addEventListener("animationend",s,{once:true}));}startTyping(){let{message:t,typeSpeed:o}=this.options,e=this.messageText;if(o===0){e.textContent=t,this.afterTypingComplete();return}let s=0,r=true;this.cleanupFns.push(()=>{r=false;});let i=()=>{r&&(s<t.length?(e.textContent+=t.charAt(s++),setTimeout(i,o)):this.afterTypingComplete());};i();}afterTypingComplete(){this.autoCloseDuration>0&&!this.options.hideProgressBar&&this.progressBar&&(this.progressBar.style.animationDuration=`${this.autoCloseDuration}ms`,this.progressBar.offsetWidth,this.progressBar.classList.add("robot-toast-progress-auto"),(this.isHovered||this.isFocusLost)&&this.progressBar.classList.add("robot-toast-progress-paused")),!this.isHovered&&!this.isFocusLost&&this.startTimer();}startTimer(){this.autoCloseDuration<=0||this.remainingTime<=0||(this.timerStart=Date.now(),this.closeTimeout=setTimeout(()=>this.close(),this.remainingTime));}pauseTimer(){if(this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null,this.timerStart!==null)){let t=Date.now()-this.timerStart;this.remainingTime=Math.max(0,this.remainingTime-t),this.timerStart=null;}this.progressBar?.classList.add("robot-toast-progress-paused");}resumeTimer(){this.isHovered||this.isFocusLost||this.isDragging||(this.progressBar?.classList.remove("robot-toast-progress-paused"),this.startTimer());}cancelTimer(){this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null);}initHoverWatcher(){let t=()=>{this.isHovered=true,this.pauseTimer();},o=()=>{this.isHovered=false,this.resumeTimer();};this.wrapper.addEventListener("mouseenter",t),this.wrapper.addEventListener("mouseleave",o),this.cleanupFns.push(()=>{this.wrapper.removeEventListener("mouseenter",t),this.wrapper.removeEventListener("mouseleave",o);});}initFocusWatcher(){let t=()=>{this.isFocusLost=true,this.pauseTimer();},o=()=>{this.isFocusLost=false,this.resumeTimer();};window.addEventListener("blur",t),window.addEventListener("focus",o),this.cleanupFns.push(()=>{window.removeEventListener("blur",t),window.removeEventListener("focus",o);});}initDrag(){this.messageBox.style.cursor="grab";let t=s=>{if(s.target.closest(".robot-toast-close, .robot-toast-btn")||s.button!==void 0&&s.button!==0)return;s.preventDefault(),this.isDragging=true,this.pauseTimer();let r=this.wrapper.getBoundingClientRect();this.wrapper.classList.add("robot-toast-dragging"),this.wrapper.style.top=`${r.top}px`,this.wrapper.style.left=`${r.left}px`,this.wrapper.style.right="auto",this.wrapper.style.bottom="auto",this.wrapper.style.transform="none",this.dragWidth=r.width,this.dragHeight=r.height,this.dragOffsetX=s.clientX-r.left,this.dragOffsetY=s.clientY-r.top,this.messageBox.style.cursor="grabbing",this.wrapper.setPointerCapture(s.pointerId);},o=s=>{if(!this.isDragging)return;s.preventDefault();let r=window.innerWidth-this.dragWidth,i=window.innerHeight-this.dragHeight,n=Math.max(0,Math.min(s.clientX-this.dragOffsetX,r)),c=Math.max(0,Math.min(s.clientY-this.dragOffsetY,i));this.wrapper.style.left=`${n}px`,this.wrapper.style.top=`${c}px`;},e=s=>{if(!this.isDragging)return;this.isDragging=false,this.wrapper.classList.remove("robot-toast-dragging"),this.messageBox.style.cursor="grab";let r=parseFloat(this.wrapper.style.left)||0,i=parseFloat(this.wrapper.style.top)||0,n=r+this.dragWidth/2,c=window.innerWidth/2,h=n<c,d=this.options.nearScreen?h?"left":"right":h?"right":"left",v=h?20:window.innerWidth-this.dragWidth-20,k=Math.max(20,Math.min(i,window.innerHeight-this.dragHeight-20));if(this.wrapper.style.transition="left 0.45s cubic-bezier(0.34,1.56,0.64,1), top 0.4s cubic-bezier(0.34,1.56,0.64,1)",this.wrapper.style.left=`${v}px`,this.wrapper.style.top=`${k}px`,d!==this.currentRobotSide){this.currentRobotSide=d;let x=d==="left";this.robotEl.style.order=x?"0":"1",this.messageBox.style.order=x?"1":"0";let w=d==="left"?"robot-snap-left":"robot-snap-right";this.robotEl.classList.remove("robot-idle","robot-snap-left","robot-snap-right"),this.robotEl.classList.add(w),this.robotEl.addEventListener("animationend",()=>{this.robotEl.style.opacity="1",this.robotEl.classList.remove(w),this.robotEl.classList.add("robot-idle");},{once:true});}setTimeout(()=>{this.wrapper.style.transition="";},500),this.resumeTimer();};this.wrapper.addEventListener("pointerdown",t),this.wrapper.addEventListener("pointermove",o),this.wrapper.addEventListener("pointerup",e),this.wrapper.addEventListener("pointercancel",e),this.cleanupFns.push(()=>{this.wrapper.removeEventListener("pointerdown",t),this.wrapper.removeEventListener("pointermove",o),this.wrapper.removeEventListener("pointerup",e),this.wrapper.removeEventListener("pointercancel",e);});}getBuiltinSVG(){return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120"
|
|
708
701
|
width="100%" height="100%" role="img" aria-label="Robot">
|
|
709
702
|
<defs>
|
|
710
703
|
<linearGradient id="rtGrad${this.id}" x1="0" y1="0" x2="1" y2="1">
|
|
@@ -752,5 +745,5 @@
|
|
|
752
745
|
fill="url(#rtAccent${this.id})" stroke="#2B3A55" stroke-width="1.5"/>
|
|
753
746
|
<rect x="54" y="110" width="16" height="10" rx="5"
|
|
754
747
|
fill="url(#rtAccent${this.id})" stroke="#2B3A55" stroke-width="1.5"/>
|
|
755
|
-
</svg>`}},
|
|
748
|
+
</svg>`}},b=class b{constructor(){this.activeToasts=[];this.queue=[];this.globalLimit=0;new T;}static getInstance(){return b._instance||(b._instance=new b),b._instance}show(t){if(typeof document>"u")return -1;let o=R(),e=t.limit??this.globalLimit;return e>0&&this.activeToasts.length>=e?(this.queue.push({options:t,id:o}),o):(this.spawnToast(t,o),o)}closeAll(){this.queue=[],[...this.activeToasts].forEach(t=>t.close());}closeById(t){let o=this.activeToasts.find(e=>e.id===t);o&&o.close(),this.queue=this.queue.filter(e=>e.id!==t);}spawnToast(t,o){let e=new y(o,t,r=>this.handleRemoved(r));t.newestOnTop??false?this.activeToasts.unshift(e):this.activeToasts.push(e),this.restack();}handleRemoved(t){if(this.activeToasts=this.activeToasts.filter(o=>o.id!==t),this.restack(),this.queue.length>0){let o=this.queue.shift();setTimeout(()=>this.spawnToast(o.options,o.id),120);}}restack(){let t={};this.activeToasts.forEach(o=>{let e=o.options.position;t[e]||(t[e]=[]),t[e].push(o);}),Object.keys(t).forEach(o=>{let e=t[o],s=20;e.forEach(r=>{r.shiftVertical(s),s+=r.getWrapperHeight()+L;});});}};b._instance=null;var p=b;function u(a=5e3){return new Promise((t,o)=>{if(typeof window>"u"){o(new Error("[RobotToast] Cannot run outside of a browser environment."));return}if(window.RobotToast){t(window.RobotToast);return}let e=Date.now(),s=setInterval(()=>{if(window.RobotToast){clearInterval(s),t(window.RobotToast);return}Date.now()-e>=a&&(clearInterval(s),o(new Error(`[RobotToast] Failed to load within ${a}ms.`)));},80);})}async function B(a){try{return (await u()).show(a)}catch(t){return console.error("[RobotToast] showRobotToast failed:",t),-1}}async function O(){try{(await u()).closeAll();}catch(a){console.error("[RobotToast] closeAllRobotToasts failed:",a);}}async function S(){return u()}var A=["top-right","top-left","top-center","bottom-right","bottom-left","bottom-center"],I=["default","info","success","warning","error"],C=["light","dark","colored"],P=["bounce","slide","zoom","flip"];function f(a){return typeof a=="string"?{message:a}:a}function l(a){return typeof window>"u"?-1:p.getInstance().show(f(a))}l.success=a=>l({...f(a),type:"success"});l.error=a=>l({...f(a),type:"error"});l.info=a=>l({...f(a),type:"info"});l.warning=a=>l({...f(a),type:"warning"});l.closeAll=()=>{typeof window>"u"||p.getInstance().closeAll();};l.closeById=a=>{typeof window>"u"||p.getInstance().closeById(a);};l.promise=(a,t)=>{if(typeof window>"u")return a;let o=typeof t.loading=="string"?{message:t.loading}:{message:"",...t.loading},e=l({autoClose:false,hideProgressBar:true,...o,typeSpeed:o.typeSpeed??0}),s=(r,i)=>{let n=typeof r=="string"?{message:r}:{message:"",...r};return {type:i,...n}};return a.then(r=>{l.closeById(e);let i=typeof t.success=="function"?t.success(r):t.success;return l(s(i,"success")),r},r=>{l.closeById(e);let i=typeof t.error=="function"?t.error(r):t.error;throw l(s(i,"error")),r})};function Y(){if(typeof window>"u"||window.__robotToastLoaded)return;window.__robotToastLoaded=true;let a={show:t=>p.getInstance().show(t),closeAll:()=>p.getInstance().closeAll(),closeById:t=>p.getInstance().closeById(t),getInstance:()=>p.getInstance()};window.RobotToast=a;}Y();exports.RobotToast=p;exports.RobotToastManager=p;exports.TOAST_POSITIONS=A;exports.TOAST_THEMES=C;exports.TOAST_TRANSITIONS=P;exports.TOAST_TYPES=I;exports.closeAllRobotToasts=O;exports.ensureRobotToastReady=u;exports.getRobotToastInstance=S;exports.showRobotToast=B;exports.toast=l;//# sourceMappingURL=index.js.map
|
|
756
749
|
//# sourceMappingURL=index.js.map
|