robot-toast 2.0.0-beta.3 → 2.0.0-beta.4
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 +46 -90
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +46 -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,7 +290,9 @@
|
|
|
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 {
|
|
@@ -298,13 +300,12 @@
|
|
|
298
300
|
gap: 8px;
|
|
299
301
|
justify-content: flex-end;
|
|
300
302
|
align-items: center;
|
|
301
|
-
margin-top:
|
|
303
|
+
margin-top: 8px;
|
|
302
304
|
padding-bottom: 10px;
|
|
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
311
|
font-size: 13px;
|
|
@@ -315,61 +316,32 @@
|
|
|
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: #fff;
|
|
320
|
+
color: #18181b;
|
|
321
|
+
border: 1px solid #e4e4e7;
|
|
318
322
|
}
|
|
319
|
-
.robot-toast-
|
|
320
|
-
.robot-toast-
|
|
323
|
+
.robot-toast-btn:hover { background: #f4f4f5; }
|
|
324
|
+
.robot-toast-btn:active { transform: scale(0.97); }
|
|
321
325
|
|
|
322
|
-
/*
|
|
323
|
-
.robot-toast-
|
|
326
|
+
/* Dark theme \u2014 inverted neutral */
|
|
327
|
+
.robot-toast-message.robot-toast-theme-dark .robot-toast-btn {
|
|
324
328
|
background: #18181b;
|
|
325
329
|
color: #fafafa;
|
|
326
|
-
border: 1px solid #18181b;
|
|
327
|
-
}
|
|
328
|
-
.robot-toast-action:hover { background: #000; border-color: #000; }
|
|
329
|
-
|
|
330
|
-
/* Secondary (cancel) \u2014 outline */
|
|
331
|
-
.robot-toast-cancel {
|
|
332
|
-
background: transparent;
|
|
333
|
-
color: #52525b;
|
|
334
|
-
border: 1px solid #e4e4e7;
|
|
335
|
-
}
|
|
336
|
-
.robot-toast-cancel:hover { background: #f4f4f5; color: #18181b; }
|
|
337
|
-
|
|
338
|
-
/* Dark theme inversion */
|
|
339
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-action {
|
|
340
|
-
background: #fafafa;
|
|
341
|
-
color: #18181b;
|
|
342
|
-
border-color: #fafafa;
|
|
343
|
-
}
|
|
344
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-action:hover {
|
|
345
|
-
background: #e4e4e7;
|
|
346
|
-
border-color: #e4e4e7;
|
|
347
|
-
}
|
|
348
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-cancel {
|
|
349
|
-
color: #a1a1aa;
|
|
350
330
|
border-color: #3f3f46;
|
|
351
331
|
}
|
|
352
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-
|
|
332
|
+
.robot-toast-message.robot-toast-theme-dark .robot-toast-btn:hover {
|
|
353
333
|
background: #27272a;
|
|
354
|
-
color: #fafafa;
|
|
355
334
|
}
|
|
356
335
|
|
|
357
336
|
/* Colored theme \u2014 translucent whites keep contrast on any gradient */
|
|
358
|
-
.robot-toast-message.robot-toast-theme-colored .robot-toast-
|
|
337
|
+
.robot-toast-message.robot-toast-theme-colored .robot-toast-btn {
|
|
359
338
|
background: rgba(255, 255, 255, 0.95);
|
|
360
339
|
color: #18181b;
|
|
361
340
|
border-color: transparent;
|
|
362
341
|
}
|
|
363
|
-
.robot-toast-message.robot-toast-theme-colored .robot-toast-
|
|
342
|
+
.robot-toast-message.robot-toast-theme-colored .robot-toast-btn:hover {
|
|
364
343
|
background: #fff;
|
|
365
344
|
}
|
|
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);
|
|
372
|
-
}
|
|
373
345
|
|
|
374
346
|
/* \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 */
|
|
375
347
|
/* PROGRESS BAR */
|
|
@@ -626,52 +598,49 @@
|
|
|
626
598
|
/* \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
599
|
|
|
628
600
|
/*
|
|
629
|
-
*
|
|
630
|
-
*
|
|
631
|
-
*
|
|
632
|
-
*
|
|
633
|
-
*
|
|
601
|
+
* Small-viewport tweaks. No !important / edge-to-edge override here \u2014 the
|
|
602
|
+
* wrapper keeps its configured position preset and the message box stays
|
|
603
|
+
* content-sized (just capped by max-width so it doesn't overflow). Drag
|
|
604
|
+
* still works everywhere because no stylesheet rule competes with the
|
|
605
|
+
* inline position the drag handler writes.
|
|
634
606
|
*/
|
|
635
607
|
@media (max-width: 600px) {
|
|
636
608
|
.robot-toast-wrapper {
|
|
637
|
-
gap:
|
|
638
|
-
|
|
639
|
-
right: 16px !important;
|
|
640
|
-
width: auto !important;
|
|
641
|
-
max-width: none !important;
|
|
642
|
-
transform: none !important;
|
|
609
|
+
gap: 8px;
|
|
610
|
+
max-width: calc(100vw - 24px);
|
|
643
611
|
}
|
|
644
612
|
|
|
645
613
|
.robot-toast-wrapper.robot-toast-top-right,
|
|
614
|
+
.robot-toast-wrapper.robot-toast-bottom-right { right: 12px; }
|
|
646
615
|
.robot-toast-wrapper.robot-toast-top-left,
|
|
647
|
-
.robot-toast-wrapper.robot-toast-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
}
|
|
616
|
+
.robot-toast-wrapper.robot-toast-bottom-left { left: 12px; }
|
|
617
|
+
.robot-toast-wrapper.robot-toast-top-right,
|
|
618
|
+
.robot-toast-wrapper.robot-toast-top-left,
|
|
619
|
+
.robot-toast-wrapper.robot-toast-top-center { top: 12px; }
|
|
651
620
|
.robot-toast-wrapper.robot-toast-bottom-right,
|
|
652
621
|
.robot-toast-wrapper.robot-toast-bottom-left,
|
|
622
|
+
.robot-toast-wrapper.robot-toast-bottom-center { bottom: 12px; }
|
|
623
|
+
|
|
624
|
+
.robot-toast-wrapper.robot-toast-top-center,
|
|
653
625
|
.robot-toast-wrapper.robot-toast-bottom-center {
|
|
654
|
-
|
|
655
|
-
|
|
626
|
+
width: calc(100vw - 24px);
|
|
627
|
+
justify-content: center;
|
|
656
628
|
}
|
|
657
629
|
|
|
658
630
|
.robot-toast-robot {
|
|
659
631
|
width: 48px;
|
|
660
632
|
height: 52px;
|
|
661
|
-
flex-shrink: 0;
|
|
662
633
|
}
|
|
663
634
|
|
|
664
|
-
/* The message box expands to fill the remaining wrapper width */
|
|
665
635
|
.robot-toast-message {
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
padding: 12px 36px 0 14px;
|
|
636
|
+
min-width: 100px;
|
|
637
|
+
max-width: calc(100vw - 48px - 24px - 8px);
|
|
638
|
+
font-size: 13px;
|
|
639
|
+
padding: 10px 36px 0 12px;
|
|
671
640
|
}
|
|
672
641
|
|
|
673
642
|
.robot-toast-text {
|
|
674
|
-
font-size:
|
|
643
|
+
font-size: 13px;
|
|
675
644
|
padding-bottom: 10px;
|
|
676
645
|
}
|
|
677
646
|
|
|
@@ -680,31 +649,18 @@
|
|
|
680
649
|
height: 24px;
|
|
681
650
|
font-size: 20px;
|
|
682
651
|
}
|
|
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
652
|
}
|
|
695
653
|
|
|
696
654
|
@media (max-width: 360px) {
|
|
697
|
-
.robot-toast-wrapper {
|
|
698
|
-
left: 12px !important;
|
|
699
|
-
right: 12px !important;
|
|
700
|
-
gap: 8px;
|
|
701
|
-
}
|
|
702
655
|
.robot-toast-robot {
|
|
703
|
-
width:
|
|
704
|
-
height:
|
|
656
|
+
width: 40px;
|
|
657
|
+
height: 44px;
|
|
658
|
+
}
|
|
659
|
+
.robot-toast-message {
|
|
660
|
+
max-width: calc(100vw - 40px - 20px - 8px);
|
|
705
661
|
}
|
|
706
662
|
}
|
|
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"
|
|
663
|
+
`,e=document.createElement("style");e.id=t,e.textContent=o,document.head.appendChild(e);}};m.injected=false;var g=m,T=g;var k=1;function R(){return k++}var B=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,b=>b[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=this.wrapper.getBoundingClientRect(),i=r.top,n=r.left+r.width/2,c=window.innerWidth/2,h=n<c,b=this.options.nearScreen?h?"left":"right":h?"right":"left",v=h?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"
|
|
708
664
|
width="100%" height="100%" role="img" aria-label="Robot">
|
|
709
665
|
<defs>
|
|
710
666
|
<linearGradient id="rtGrad${this.id}" x1="0" y1="0" x2="1" y2="1">
|
|
@@ -752,5 +708,5 @@
|
|
|
752
708
|
fill="url(#rtAccent${this.id})" stroke="#2B3A55" stroke-width="1.5"/>
|
|
753
709
|
<rect x="54" y="110" width="16" height="10" rx="5"
|
|
754
710
|
fill="url(#rtAccent${this.id})" stroke="#2B3A55" stroke-width="1.5"/>
|
|
755
|
-
</svg>`}},d=class d{constructor(){this.activeToasts=[];this.queue=[];this.globalLimit=0;new T;}static getInstance(){return d._instance||(d._instance=new d),d._instance}show(t){if(typeof document>"u")return -1;let o=
|
|
711
|
+
</svg>`}},d=class d{constructor(){this.activeToasts=[];this.queue=[];this.globalLimit=0;new T;}static getInstance(){return d._instance||(d._instance=new d),d._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()+B;});});}};d._instance=null;var l=d;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 L(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 p(a){return typeof window>"u"?-1:l.getInstance().show(f(a))}p.success=a=>p({...f(a),type:"success"});p.error=a=>p({...f(a),type:"error"});p.info=a=>p({...f(a),type:"info"});p.warning=a=>p({...f(a),type:"warning"});p.closeAll=()=>{typeof window>"u"||l.getInstance().closeAll();};p.closeById=a=>{typeof window>"u"||l.getInstance().closeById(a);};p.promise=(a,t)=>{if(typeof window>"u")return a;let o=typeof t.loading=="string"?{message:t.loading}:{message:"",...t.loading},e=p({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=>{p.closeById(e);let i=typeof t.success=="function"?t.success(r):t.success;return p(s(i,"success")),r},r=>{p.closeById(e);let i=typeof t.error=="function"?t.error(r):t.error;throw p(s(i,"error")),r})};function Y(){if(typeof window>"u"||window.__robotToastLoaded)return;window.__robotToastLoaded=true;let a={show:t=>l.getInstance().show(t),closeAll:()=>l.getInstance().closeAll(),closeById:t=>l.getInstance().closeById(t),getInstance:()=>l.getInstance()};window.RobotToast=a;}Y();exports.RobotToast=l;exports.RobotToastManager=l;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=L;exports.toast=p;//# sourceMappingURL=index.js.map
|
|
756
712
|
//# sourceMappingURL=index.js.map
|