robot-toast 2.0.1 → 2.1.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 +21 -2
- package/dist/index.d.mts +16 -1
- package/dist/index.d.ts +16 -1
- package/dist/index.js +78 -27
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +78 -27
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var f=class f{constructor(){typeof document>"u"||f.injected||(f.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,13 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
129
129
|
width: fit-content;
|
|
130
130
|
min-width: 120px;
|
|
131
131
|
max-width: min(400px, calc(100vw - 120px));
|
|
132
|
-
|
|
132
|
+
/*
|
|
133
|
+
* IMPORTANT: no padding on the outer box. Each section (.robot-toast-body,
|
|
134
|
+
* .robot-toast-footer, .robot-toast-progress-container) owns its own
|
|
135
|
+
* spacing, so optional sections can disappear without us having to tweak
|
|
136
|
+
* margins / paddings anywhere else.
|
|
137
|
+
*/
|
|
138
|
+
padding: 0;
|
|
133
139
|
border-radius: 8px;
|
|
134
140
|
margin: 0;
|
|
135
141
|
opacity: 0;
|
|
@@ -275,11 +281,15 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
275
281
|
}
|
|
276
282
|
|
|
277
283
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
278
|
-
/*
|
|
284
|
+
/* BODY \u2014 the message zone. Always present, always owns its own padding. */
|
|
285
|
+
/* Right padding leaves clear room for the absolute close button. */
|
|
279
286
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
280
287
|
|
|
288
|
+
.robot-toast-body {
|
|
289
|
+
padding: 10px 40px 10px 14px;
|
|
290
|
+
}
|
|
291
|
+
|
|
281
292
|
.robot-toast-text {
|
|
282
|
-
padding-bottom: 12px;
|
|
283
293
|
font-size: 14px;
|
|
284
294
|
line-height: 1.5;
|
|
285
295
|
word-break: break-word;
|
|
@@ -287,31 +297,60 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
287
297
|
font-weight: 500;
|
|
288
298
|
min-width: 0;
|
|
289
299
|
min-height: 1.5em;
|
|
300
|
+
/* No padding-bottom here \u2014 body's padding-bottom handles spacing toward
|
|
301
|
+
whichever section follows (footer, progress bar, or nothing). */
|
|
290
302
|
}
|
|
291
303
|
|
|
292
304
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\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
|
-
/*
|
|
294
|
-
/*
|
|
295
|
-
/* their own visual hierarchy by passing a className. */
|
|
305
|
+
/* FOOTER \u2014 the button zone. Rendered only when buttons.length > 0. */
|
|
306
|
+
/* Owns its own bottom padding so there are no conditional margins anywhere. */
|
|
296
307
|
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
297
308
|
|
|
298
|
-
.robot-toast-
|
|
309
|
+
.robot-toast-footer {
|
|
310
|
+
/*
|
|
311
|
+
* Symmetric vertical padding (10px top + 10px bottom) \u2014 matches body so
|
|
312
|
+
* the two sections feel like equally-weighted "cards" stacked inside the
|
|
313
|
+
* toast. This is intentional even though it doubles the gap between text
|
|
314
|
+
* and buttons (10 body-bottom + 10 footer-top = 20px); the visual balance
|
|
315
|
+
* matters more than the gap-tightness.
|
|
316
|
+
*/
|
|
317
|
+
padding: 10px;
|
|
318
|
+
display: flex;
|
|
319
|
+
flex-direction: column;
|
|
320
|
+
gap: 6px;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/* A row inside the footer. data-count drives width distribution \u2014 pure CSS,
|
|
324
|
+
* no JS-side layout code. */
|
|
325
|
+
.robot-toast-row {
|
|
299
326
|
display: flex;
|
|
300
327
|
gap: 6px;
|
|
301
|
-
justify-content: flex-end;
|
|
302
328
|
align-items: center;
|
|
303
|
-
margin-top: 4px;
|
|
304
|
-
padding-bottom: 8px;
|
|
305
|
-
flex-wrap: wrap;
|
|
306
329
|
}
|
|
307
330
|
|
|
331
|
+
/* 1 button in its row \u2192 content-sized, left-aligned (flex default) */
|
|
332
|
+
.robot-toast-row[data-count="1"] .robot-toast-btn {
|
|
333
|
+
/* nothing \u2014 intrinsic width, flex-start alignment */
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/* 2 or 3 buttons in a row \u2192 equal shares, filling the row's width */
|
|
337
|
+
.robot-toast-row[data-count="2"] .robot-toast-btn,
|
|
338
|
+
.robot-toast-row[data-count="3"] .robot-toast-btn {
|
|
339
|
+
flex: 1;
|
|
340
|
+
min-width: 0; /* let long labels shrink without breaking the 50/50 split */
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
344
|
+
/* INLINE BUTTONS */
|
|
345
|
+
/* \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 */
|
|
346
|
+
|
|
308
347
|
.robot-toast-btn {
|
|
309
348
|
appearance: none;
|
|
310
349
|
font: inherit;
|
|
311
350
|
font-size: 12px;
|
|
312
351
|
font-weight: 500;
|
|
313
352
|
line-height: 1;
|
|
314
|
-
padding:
|
|
353
|
+
padding: 6px 12px;
|
|
315
354
|
border-radius: 5px;
|
|
316
355
|
cursor: pointer;
|
|
317
356
|
transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
|
|
@@ -324,18 +363,22 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
324
363
|
.robot-toast-btn:active { transform: scale(0.97); }
|
|
325
364
|
|
|
326
365
|
/*
|
|
327
|
-
*
|
|
328
|
-
* filled so it feels decisive (
|
|
329
|
-
*
|
|
330
|
-
*
|
|
366
|
+
* Solo CTA: when the toast has exactly one button, it's implicitly the
|
|
367
|
+
* primary action. Render it filled/dark so it feels decisive (Undo / Retry
|
|
368
|
+
* UX). A multi-button toast drops back to all-neutral \u2014 the caller picks a
|
|
369
|
+
* primary via its own className.
|
|
370
|
+
*
|
|
371
|
+
* "Exactly one button total" = the single row has data-count="1" AND is the
|
|
372
|
+
* only row in the footer (covers the n=1 case; n=4 also has data-count rows
|
|
373
|
+
* but they're paired, not only-child).
|
|
331
374
|
*/
|
|
332
|
-
.robot-toast-
|
|
375
|
+
.robot-toast-row[data-count="1"]:only-child .robot-toast-btn {
|
|
333
376
|
background: #18181b;
|
|
334
377
|
color: #fafafa;
|
|
335
378
|
border-color: #18181b;
|
|
336
379
|
font-weight: 600;
|
|
337
380
|
}
|
|
338
|
-
.robot-toast-
|
|
381
|
+
.robot-toast-row[data-count="1"]:only-child .robot-toast-btn:hover {
|
|
339
382
|
background: #000;
|
|
340
383
|
border-color: #000;
|
|
341
384
|
color: #fafafa;
|
|
@@ -350,12 +393,12 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
350
393
|
background: #27272a;
|
|
351
394
|
color: #fafafa;
|
|
352
395
|
}
|
|
353
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-
|
|
396
|
+
.robot-toast-message.robot-toast-theme-dark .robot-toast-row[data-count="1"]:only-child .robot-toast-btn {
|
|
354
397
|
background: #fafafa;
|
|
355
398
|
color: #18181b;
|
|
356
399
|
border-color: #fafafa;
|
|
357
400
|
}
|
|
358
|
-
.robot-toast-message.robot-toast-theme-dark .robot-toast-
|
|
401
|
+
.robot-toast-message.robot-toast-theme-dark .robot-toast-row[data-count="1"]:only-child .robot-toast-btn:hover {
|
|
359
402
|
background: #e4e4e7;
|
|
360
403
|
border-color: #e4e4e7;
|
|
361
404
|
color: #18181b;
|
|
@@ -370,12 +413,12 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
370
413
|
background: rgba(255, 255, 255, 0.15);
|
|
371
414
|
color: #fff;
|
|
372
415
|
}
|
|
373
|
-
.robot-toast-message.robot-toast-theme-colored .robot-toast-
|
|
416
|
+
.robot-toast-message.robot-toast-theme-colored .robot-toast-row[data-count="1"]:only-child .robot-toast-btn {
|
|
374
417
|
background: rgba(255, 255, 255, 0.95);
|
|
375
418
|
color: #18181b;
|
|
376
419
|
border-color: transparent;
|
|
377
420
|
}
|
|
378
|
-
.robot-toast-message.robot-toast-theme-colored .robot-toast-
|
|
421
|
+
.robot-toast-message.robot-toast-theme-colored .robot-toast-row[data-count="1"]:only-child .robot-toast-btn:hover {
|
|
379
422
|
background: #fff;
|
|
380
423
|
color: #18181b;
|
|
381
424
|
}
|
|
@@ -673,12 +716,20 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
673
716
|
min-width: 100px;
|
|
674
717
|
max-width: calc(100vw - 48px - 24px - 8px);
|
|
675
718
|
font-size: 13px;
|
|
676
|
-
padding
|
|
719
|
+
/* padding stays 0 on the outer box; sections own their spacing */
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
.robot-toast-body {
|
|
723
|
+
padding: 10px 36px 10px 12px;
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
.robot-toast-footer {
|
|
727
|
+
/* Same symmetric vertical padding as body \u2014 equal section weight on mobile too */
|
|
728
|
+
padding: 10px;
|
|
677
729
|
}
|
|
678
730
|
|
|
679
731
|
.robot-toast-text {
|
|
680
732
|
font-size: 13px;
|
|
681
|
-
padding-bottom: 10px;
|
|
682
733
|
}
|
|
683
734
|
|
|
684
735
|
.robot-toast-close {
|
|
@@ -697,7 +748,7 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
697
748
|
max-width: calc(100vw - 40px - 20px - 8px);
|
|
698
749
|
}
|
|
699
750
|
}
|
|
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"
|
|
751
|
+
`,e=document.createElement("style");e.id=t,e.textContent=o,document.head.appendChild(e);}};f.injected=false;var w=f,k=w;var E=1;function R(){return E++}var B=16;function L(a){let t=a.length;if(t===0)return [];if(t<=3)return [a.slice()];if(t===4)return [a.slice(0,2),a.slice(2)];let o=[],e=0;for(;t-e>4;)o.push(a.slice(e,e+3)),e+=3;return t-e===4?(o.push(a.slice(e,e+2)),o.push(a.slice(e+2))):o.push(a.slice(e)),o}var x=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(([l,m])=>{let d=l.replace(/-([a-z])/g,b=>b[1].toUpperCase());t.style[d]=m;});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",l=>{l.stopPropagation(),this.close();}),t.appendChild(e);let s=document.createElement("div");s.className="robot-toast-body";let r=document.createElement("div");if(r.className="robot-toast-text",s.appendChild(r),t.appendChild(s),this.options.buttons&&this.options.buttons.length>0){let l=document.createElement("div");l.className="robot-toast-footer",L(this.options.buttons).forEach(d=>{let b=document.createElement("div");b.className="robot-toast-row",b.setAttribute("data-count",String(d.length)),d.forEach(y=>b.appendChild(this.buildButton(y))),l.appendChild(b);}),t.appendChild(l);}let i=document.createElement("div");i.className="robot-toast-progress-container",this.options.hideProgressBar&&(i.style.display="none");let p=document.createElement("div");return p.className="robot-toast-progress-bar",i.appendChild(p),t.appendChild(i),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,t.style&&Object.entries(t.style).forEach(([e,s])=>{let r=e.replace(/-([a-z])/g,i=>i[1].toUpperCase());o.style[r]=s;}),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 p=()=>{this.robotEl.removeEventListener("animationend",p),this.robotEl.style.opacity="1",this.robotEl.classList.remove(i),this.robotEl.classList.add("robot-idle"),e();};this.robotEl.addEventListener("animationend",p,{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}`:"",p=`robot-exit-${r}${i}`;this.robotEl.classList.add(p);let l=()=>{this.robotEl.removeEventListener("animationend",l),this.wrapper.classList.remove("robot-toast-visible"),setTimeout(t,260);};this.robotEl.addEventListener("animationend",l,{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,p=Math.max(0,Math.min(s.clientX-this.dragOffsetX,r)),l=Math.max(0,Math.min(s.clientY-this.dragOffsetY,i));this.wrapper.style.left=`${p}px`,this.wrapper.style.top=`${l}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,p=r.left+r.width/2,l=window.innerWidth/2,m=p<l,d=this.options.nearScreen?m?"left":"right":m?"right":"left",b=m?20:window.innerWidth-this.dragWidth-20,y=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=`${b}px`,this.wrapper.style.top=`${y}px`,d!==this.currentRobotSide){this.currentRobotSide=d;let T=d==="left";this.robotEl.style.order=T?"0":"1",this.messageBox.style.order=T?"1":"0";let v=d==="left"?"robot-snap-left":"robot-snap-right";this.robotEl.classList.remove("robot-idle","robot-snap-left","robot-snap-right"),this.robotEl.classList.add(v),this.robotEl.addEventListener("animationend",()=>{this.robotEl.style.opacity="1",this.robotEl.classList.remove(v),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"
|
|
701
752
|
width="100%" height="100%" role="img" aria-label="Robot">
|
|
702
753
|
<defs>
|
|
703
754
|
<linearGradient id="rtGrad${this.id}" x1="0" y1="0" x2="1" y2="1">
|
|
@@ -745,5 +796,5 @@ var m=class m{constructor(){typeof document>"u"||m.injected||(m.injected=true,th
|
|
|
745
796
|
fill="url(#rtAccent${this.id})" stroke="#2B3A55" stroke-width="1.5"/>
|
|
746
797
|
<rect x="54" y="110" width="16" height="10" rx="5"
|
|
747
798
|
fill="url(#rtAccent${this.id})" stroke="#2B3A55" stroke-width="1.5"/>
|
|
748
|
-
</svg>`}},
|
|
799
|
+
</svg>`}},h=class h{constructor(){this.activeToasts=[];this.queue=[];this.globalLimit=0;new k;}static getInstance(){return h._instance||(h._instance=new h),h._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 x(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;});});}};h._instance=null;var c=h;function g(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 O(a){try{return (await g()).show(a)}catch(t){return console.error("[RobotToast] showRobotToast failed:",t),-1}}async function S(){try{(await g()).closeAll();}catch(a){console.error("[RobotToast] closeAllRobotToasts failed:",a);}}async function A(){return g()}var I=["top-right","top-left","top-center","bottom-right","bottom-left","bottom-center"],C=["default","info","success","warning","error"],P=["light","dark","colored"],Y=["bounce","slide","zoom","flip"];function u(a){return typeof a=="string"?{message:a}:a}function n(a){return typeof window>"u"?-1:c.getInstance().show(u(a))}n.success=a=>n({...u(a),type:"success"});n.error=a=>n({...u(a),type:"error"});n.info=a=>n({...u(a),type:"info"});n.warning=a=>n({...u(a),type:"warning"});n.closeAll=()=>{typeof window>"u"||c.getInstance().closeAll();};n.closeById=a=>{typeof window>"u"||c.getInstance().closeById(a);};n.promise=(a,t)=>{if(typeof window>"u")return a;let o=typeof t.loading=="string"?{message:t.loading}:{message:"",...t.loading},e=n({autoClose:false,hideProgressBar:true,...o,typeSpeed:o.typeSpeed??0}),s=(r,i)=>{let p=typeof r=="string"?{message:r}:{message:"",...r};return {type:i,...p}};return a.then(r=>{n.closeById(e);let i=typeof t.success=="function"?t.success(r):t.success;return n(s(i,"success")),r},r=>{n.closeById(e);let i=typeof t.error=="function"?t.error(r):t.error;throw n(s(i,"error")),r})};function N(){if(typeof window>"u"||window.__robotToastLoaded)return;window.__robotToastLoaded=true;let a={show:t=>c.getInstance().show(t),closeAll:()=>c.getInstance().closeAll(),closeById:t=>c.getInstance().closeById(t),getInstance:()=>c.getInstance()};window.RobotToast=a;}N();export{c as RobotToast,c as RobotToastManager,I as TOAST_POSITIONS,P as TOAST_THEMES,Y as TOAST_TRANSITIONS,C as TOAST_TYPES,S as closeAllRobotToasts,g as ensureRobotToastReady,A as getRobotToastInstance,O as showRobotToast,n as toast};//# sourceMappingURL=index.mjs.map
|
|
749
800
|
//# sourceMappingURL=index.mjs.map
|