@samline/notify 1.0.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{LICENSE → LICENSE.md} +2 -2
- package/README.md +27 -163
- package/dist/_runtime.d.mts +87 -0
- package/dist/_runtime.d.ts +87 -0
- package/dist/_runtime.js +97 -0
- package/dist/_runtime.mjs +83 -0
- package/dist/browser/assets-client-B-VVPPYQ.js +114 -0
- package/dist/browser/assets-client-CUzxHubR.mjs +108 -0
- package/dist/browser/index-client-BBOQyMFk.mjs +173 -0
- package/dist/browser/index-client-Czb7hTpD.js +181 -0
- package/dist/browser/index.d.mts +134 -0
- package/dist/browser/index.d.ts +134 -0
- package/dist/browser/index.js +34 -0
- package/dist/browser/index.mjs +26 -0
- package/dist/browser/render-client-CjcQoukB.js +981 -0
- package/dist/browser/render-client-bGRSTd-L.mjs +974 -0
- package/dist/core/index.d.mts +68 -0
- package/dist/core/index.d.ts +68 -0
- package/dist/core/index.js +1 -0
- package/dist/core/index.mjs +1 -0
- package/dist/index.d.mts +131 -0
- package/dist/index.d.ts +131 -0
- package/dist/index.js +1240 -0
- package/dist/index.mjs +1228 -0
- package/dist/react/index.d.mts +158 -0
- package/dist/react/index.d.ts +158 -0
- package/dist/react/index.js +1116 -0
- package/dist/react/index.mjs +1107 -0
- package/dist/styles.css +589 -422
- package/dist/svelte/assets-client-B-VVPPYQ.js +114 -0
- package/dist/svelte/assets-client-CUzxHubR.mjs +108 -0
- package/dist/svelte/index-client-DbXbWMIe.js +177 -0
- package/dist/svelte/index-client-Dj_WfPK9.mjs +170 -0
- package/dist/svelte/index.d.mts +14 -0
- package/dist/svelte/index.d.ts +14 -0
- package/dist/svelte/index.js +43 -0
- package/dist/svelte/index.mjs +36 -0
- package/dist/svelte/render-client-CjcQoukB.js +981 -0
- package/dist/svelte/render-client-bGRSTd-L.mjs +974 -0
- package/dist/vue/assets-client-B-VVPPYQ.js +114 -0
- package/dist/vue/assets-client-CUzxHubR.mjs +108 -0
- package/dist/vue/index-client-DbXbWMIe.js +177 -0
- package/dist/vue/index-client-Dj_WfPK9.mjs +170 -0
- package/dist/vue/index.d.mts +50 -0
- package/dist/vue/index.d.ts +50 -0
- package/dist/vue/index.js +110 -0
- package/dist/vue/index.mjs +104 -0
- package/dist/vue/render-client-CjcQoukB.js +981 -0
- package/dist/vue/render-client-bGRSTd-L.mjs +974 -0
- package/package.json +140 -95
- package/dist/browser-notify.js +0 -68
- package/dist/cc-2Yt7NqMX.mjs +0 -21
- package/dist/cc-B6peeNak.mjs +0 -33
- package/dist/cc-BWuAzFJ6.js +0 -12
- package/dist/cc-CaBHsjUt.js +0 -34
- package/dist/cc-DGff5sSY.js +0 -21
- package/dist/cc-he3fHS3P.mjs +0 -12
- package/dist/notify.d.mts +0 -48
- package/dist/notify.d.mts.map +0 -1
- package/dist/notify.d.ts +0 -48
- package/dist/notify.d.ts.map +0 -1
- package/dist/notify.js +0 -206
- package/dist/notify.mjs +0 -202
- package/dist/react-notify-12s--2JK5UjB.mjs +0 -1244
- package/dist/react-notify-12s-Kv2M6zlv.js +0 -1247
- package/dist/react.d.mts +0 -70
- package/dist/react.d.mts.map +0 -1
- package/dist/react.d.ts +0 -70
- package/dist/react.d.ts.map +0 -1
- package/dist/react.js +0 -19
- package/dist/react.mjs +0 -10
- package/dist/render-notify-toasts.js +0 -213
- package/dist/svelte.d.mts +0 -49
- package/dist/svelte.d.mts.map +0 -1
- package/dist/svelte.d.ts +0 -49
- package/dist/svelte.d.ts.map +0 -1
- package/dist/svelte.js +0 -284
- package/dist/svelte.mjs +0 -280
- package/dist/vue.d.mts +0 -107
- package/dist/vue.d.mts.map +0 -1
- package/dist/vue.d.ts +0 -107
- package/dist/vue.d.ts.map +0 -1
- package/dist/vue.js +0 -2215
- package/dist/vue.mjs +0 -2211
package/dist/notify.js
DELETED
|
@@ -1,206 +0,0 @@
|
|
|
1
|
-
function __insertCSS(code) {
|
|
2
|
-
if (!code || typeof document == 'undefined') return
|
|
3
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
-
let style = document.createElement('style')
|
|
5
|
-
style.type = 'text/css'
|
|
6
|
-
head.appendChild(style)
|
|
7
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var cc = require('./cc-DGff5sSY.js');
|
|
13
|
-
|
|
14
|
-
__insertCSS(":root{--notify-spring-easing:linear(\n\t\t0,\n\t\t0.002 0.6%,\n\t\t0.007 1.2%,\n\t\t0.015 1.8%,\n\t\t0.026 2.4%,\n\t\t0.041 3.1%,\n\t\t0.06 3.8%,\n\t\t0.108 5.3%,\n\t\t0.157 6.6%,\n\t\t0.214 8%,\n\t\t0.467 13.7%,\n\t\t0.577 16.3%,\n\t\t0.631 17.7%,\n\t\t0.682 19.1%,\n\t\t0.73 20.5%,\n\t\t0.771 21.8%,\n\t\t0.808 23.1%,\n\t\t0.844 24.5%,\n\t\t0.874 25.8%,\n\t\t0.903 27.2%,\n\t\t0.928 28.6%,\n\t\t0.952 30.1%,\n\t\t0.972 31.6%,\n\t\t0.988 33.1%,\n\t\t1.01 35.7%,\n\t\t1.025 38.5%,\n\t\t1.034 41.6%,\n\t\t1.038 45%,\n\t\t1.035 50.1%,\n\t\t1.012 64.2%,\n\t\t1.003 73%,\n\t\t0.999 83.7%,\n\t\t1\n\t);--notify-duration:600ms;--notify-height:40px;--notify-width:350px;--notify-state-success:oklch(0.723 0.219 142.136);--notify-state-loading:oklch(0.556 0 0);--notify-state-error:oklch(0.637 0.237 25.331);--notify-state-warning:oklch(0.795 0.184 86.047);--notify-state-info:oklch(0.685 0.169 237.323);--notify-state-action:oklch(0.623 0.214 259.815)}[data-notify-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:0 0;padding:0;width:var(--notify-width);height:var(--_h,var(--notify-height));opacity:0;transform:translateZ(0) scale(.95);transform-origin:center;contain:layout style;overflow:visible}[data-notify-toast][data-state=loading]{cursor:default}[data-notify-toast][data-ready=true]{opacity:1;transform:translateZ(0) scale(1);transition:transform calc(var(--notify-duration) * .66) var(--notify-spring-easing),opacity calc(var(--notify-duration) * .66) var(--notify-spring-easing),margin-bottom calc(var(--notify-duration) * .66) var(--notify-spring-easing),margin-top calc(var(--notify-duration) * .66) var(--notify-spring-easing),height var(--notify-duration) var(--notify-spring-easing)}[data-notify-viewport][data-position^=top] [data-notify-toast]:not([data-ready=true]){transform:translateY(-6px) scale(.95)}[data-notify-viewport][data-position^=bottom] [data-notify-toast]:not([data-ready=true]){transform:translateY(6px) scale(.95)}[data-notify-toast][data-ready=true][data-exiting=true]{opacity:0;pointer-events:none}[data-notify-viewport][data-position^=top] [data-notify-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px) scale(.95)}[data-notify-viewport][data-position^=bottom] [data-notify-toast][data-ready=true][data-exiting=true]{transform:translateY(6px) scale(.95)}[data-notify-canvas]{position:absolute;left:0;right:0;pointer-events:none;transform:translateZ(0);contain:layout style;overflow:visible}[data-sileo-canvas][data-edge=top]{bottom:0;transform:scaleY(-1) translateZ(0)}[data-sileo-canvas][data-edge=bottom]{top:0}[data-notify-svg]{overflow:visible}[data-notify-header]{position:absolute;z-index:20;display:flex;align-items:center;padding:.5rem;height:var(--sileo-height);overflow:hidden;left:var(--_px,0);transform:var(--_ht);max-width:var(--_pw)}[data-notify-toast][data-ready=true] [data-notify-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),left var(--sileo-duration) var(--sileo-spring-easing),max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-notify-header][data-edge=top]{bottom:0}[data-notify-header][data-edge=bottom]{top:0}[data-notify-header-stack]{position:relative;display:inline-flex;align-items:center;height:100%}[data-notify-header-inner]{display:flex;align-items:center;gap:.5rem;white-space:nowrap;opacity:1;filter:blur(0px);transform:translateZ(0)}[data-notify-header-inner][data-layer=current]{position:relative;z-index:1;animation:sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-notify-header-inner][data-exiting=true],[data-notify-header-inner][data-layer=current]:not(:only-child){will-change:opacity,filter}[data-notify-header-inner][data-layer=prev]{position:absolute;left:0;top:0;z-index:0;pointer-events:none}[data-notify-header-inner][data-exiting=true]{animation:notify-header-exit calc(var(--notify-duration) * .7) ease forwards}[data-notify-badge]{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border-radius:9999px;color:var(--sileo-tone,currentColor);background-color:var(--sileo-tone-bg,transparent)}[data-notify-title]{font-size:.825rem;line-height:1rem;font-weight:500;text-transform:capitalize;color:var(--sileo-tone,currentColor)}:is([data-notify-badge],[data-notify-title],[data-notify-button])[data-state]{--_c:var(--notify-state-success)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=loading]{--_c:var(--notify-state-loading)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=error]{--_c:var(--notify-state-error)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=warning]{--_c:var(--notify-state-warning)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=info]{--_c:var(--notify-state-info)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=action]{--_c:var(--notify-state-action)}:is([data-notify-badge],[data-notify-title])[data-state]{--notify-tone:var(--_c);--notify-tone-bg:color-mix(in oklch, var(--_c) 20%, transparent)}[data-notify-content]{position:absolute;left:0;z-index:10;width:100%;pointer-events:none;opacity:var(--_co, 0)}[data-notify-content]:not([data-visible=true]){content-visibility:hidden}[data-notify-toast][data-ready=true] [data-notify-content]{transition:opacity calc(var(--notify-duration) * .08) ease calc(var(--notify-duration) * .04)}[data-notify-content][data-edge=top]{top:0}[data-notify-content][data-edge=bottom]{top:var(--sileo-height)}[data-notify-content][data-visible=true]{pointer-events:auto}[data-notify-toast][data-ready=true] [data-notify-content][data-visible=true]{transition:opacity calc(var(--notify-duration) * .6) ease calc(var(--notify-duration) * .3)}[data-notify-description]{width:100%;text-align:left;padding:1rem;font-size:.875rem;line-height:1.25rem;contain:layout style paint;content-visibility:auto}[data-notify-button]{display:flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .625rem;margin-top:.75rem;border-radius:9999px;border:0;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--sileo-btn-color,currentColor);background-color:var(--sileo-btn-bg,transparent);transition:background-color 150ms ease}[data-notify-button]:hover{background-color:var(--sileo-btn-bg-hover,transparent)}[data-notify-button][data-state]{--notify-btn-color:var(--_c);--notify-btn-bg:color-mix(in oklch, var(--_c) 15%, transparent);--notify-btn-bg-hover:color-mix(in oklch, var(--_c) 25%, transparent)}[data-notify-icon=spin]{animation:notify-spin 1s linear infinite}@keyframes notify-spin{to{transform:rotate(360deg)}}@keyframes notify-header-enter{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0px)}}@keyframes notify-header-exit{from{opacity:1;filter:blur(0px)}to{opacity:0;filter:blur(6px)}}[data-notify-viewport]{position:fixed;z-index:50;display:flex;gap:.75rem;padding:.75rem;pointer-events:none;max-width:calc(100vw - 1.5rem);contain:layout style}[data-notify-viewport][data-position^=top] [data-notify-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--notify-height) + .75rem))}[data-notify-viewport][data-position^=bottom] [data-notify-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--notify-height) + .75rem))}[data-notify-viewport][data-position^=top]{top:0;flex-direction:column-reverse}[data-notify-viewport][data-position^=bottom]{bottom:0;flex-direction:column}[data-notify-viewport][data-position$=left]{left:0;align-items:flex-start}[data-notify-viewport][data-position$=right]{right:0;align-items:flex-end}[data-notify-viewport][data-position$=center]{left:50%;transform:translateX(-50%);align-items:center}@media (prefers-reduced-motion:no-preference){[data-notify-toast][data-ready=true]:hover,[data-notify-toast][data-ready=true][data-exiting=true]{will-change:transform,opacity,height}}@media (prefers-reduced-motion:reduce){[data-notify-viewport],[data-notify-viewport] *,[data-notify-viewport] ::after,[data-notify-viewport] ::before{animation-duration:0s;animation-iteration-count:1;transition-duration:0s}}[data-notify-viewport][data-theme=dark] [data-notify-description]{color:rgba(0,0,0,.5)}[data-notify-viewport][data-theme=light] [data-notify-description]{color:rgba(255,255,255,.5)}[data-notify-toast]:has([data-notify-card]){width:auto;height:auto;background:0 0}[data-notify-card]{background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);width:var(--notify-width);overflow:hidden}[data-notify-card] [data-notify-header]{position:relative;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;height:auto;left:auto;max-width:none;transform:none;overflow:visible}[data-notify-card] [data-notify-content]{position:relative;opacity:1;pointer-events:auto;content-visibility:visible;border-top:1px solid rgba(0,0,0,.06)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state]{color:var(--notify-state-success)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=error]{color:var(--notify-state-error)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=warning]{color:var(--notify-state-warning)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=info]{color:var(--notify-state-info)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=loading]{color:var(--notify-state-loading)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=action]{color:var(--notify-state-action)}[data-notify-card] [data-notify-description]{color:rgba(0,0,0,.6)}");
|
|
15
|
-
|
|
16
|
-
// Notify logic (no React dependencies)
|
|
17
|
-
// Provides toast management and utilities for VanillaJS, Vue, Svelte, etc.
|
|
18
|
-
class NotifyCore {
|
|
19
|
-
generateId() {
|
|
20
|
-
return `${++this.idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
21
|
-
}
|
|
22
|
-
subscribe(fn) {
|
|
23
|
-
this.listeners.add(fn);
|
|
24
|
-
fn(this.toasts);
|
|
25
|
-
return ()=>this.listeners.delete(fn);
|
|
26
|
-
}
|
|
27
|
-
emit() {
|
|
28
|
-
for (const fn of this.listeners)fn(this.toasts);
|
|
29
|
-
}
|
|
30
|
-
update(fn) {
|
|
31
|
-
this.toasts = fn(this.toasts);
|
|
32
|
-
this.emit();
|
|
33
|
-
}
|
|
34
|
-
dismiss(id) {
|
|
35
|
-
const item = this.toasts.find((t)=>t.id === id);
|
|
36
|
-
if (!item || item.exiting) return;
|
|
37
|
-
this.update((prev)=>prev.map((t)=>t.id === id ? cc._extends({}, t, {
|
|
38
|
-
exiting: true
|
|
39
|
-
}) : t));
|
|
40
|
-
setTimeout(()=>this.update((prev)=>prev.filter((t)=>t.id !== id)), 600);
|
|
41
|
-
}
|
|
42
|
-
show(opts) {
|
|
43
|
-
var _ref, _ref1, _opts_type;
|
|
44
|
-
// Use a unique identifier based on options (e.g., the title or a generated key)
|
|
45
|
-
// If not provided, use a default one
|
|
46
|
-
const id = opts.title ? `notify-${opts.title}` : "notify-default";
|
|
47
|
-
const prevItem = this.toasts.find((t)=>t.id === id);
|
|
48
|
-
const instanceId = (_ref = prevItem == null ? void 0 : prevItem.instanceId) != null ? _ref : this.generateId();
|
|
49
|
-
// Set the state correctly
|
|
50
|
-
const state = (_ref1 = (_opts_type = opts.type) != null ? _opts_type : prevItem == null ? void 0 : prevItem.type) != null ? _ref1 : "success";
|
|
51
|
-
const item = cc._extends({}, prevItem, opts, {
|
|
52
|
-
id,
|
|
53
|
-
instanceId,
|
|
54
|
-
type: state
|
|
55
|
-
});
|
|
56
|
-
this.update((prev)=>{
|
|
57
|
-
const filtered = prev.filter((t)=>t.id !== id);
|
|
58
|
-
return [
|
|
59
|
-
...filtered,
|
|
60
|
-
item
|
|
61
|
-
];
|
|
62
|
-
});
|
|
63
|
-
return id;
|
|
64
|
-
}
|
|
65
|
-
getToasts() {
|
|
66
|
-
return this.toasts;
|
|
67
|
-
}
|
|
68
|
-
constructor(){
|
|
69
|
-
this.toasts = [];
|
|
70
|
-
this.listeners = new Set();
|
|
71
|
-
this.position = "top-right";
|
|
72
|
-
this.options = undefined;
|
|
73
|
-
this.idCounter = 0;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
// Global instance for multiplatform usage
|
|
77
|
-
const notifyCore = new NotifyCore();
|
|
78
|
-
|
|
79
|
-
function showNotifyToast(options) {
|
|
80
|
-
const id = notifyCore.show(options);
|
|
81
|
-
// ...existing code...
|
|
82
|
-
// Aquí iría la lógica para mostrar el toast en el DOM si aplica
|
|
83
|
-
return id;
|
|
84
|
-
}
|
|
85
|
-
function onNotifyToastsChange(fn) {
|
|
86
|
-
return notifyCore.subscribe(fn);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
const ICONS = {
|
|
90
|
-
success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
|
|
91
|
-
error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
|
|
92
|
-
warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
|
|
93
|
-
info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
|
|
94
|
-
loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
|
|
95
|
-
action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
|
|
96
|
-
};
|
|
97
|
-
const EXIT_MS = 600;
|
|
98
|
-
function capitalize(s) {
|
|
99
|
-
return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
|
|
100
|
-
}
|
|
101
|
-
let viewport = null;
|
|
102
|
-
const toastEls = new Map();
|
|
103
|
-
function getOrCreateViewport(position) {
|
|
104
|
-
if (!viewport) {
|
|
105
|
-
viewport = document.createElement("div");
|
|
106
|
-
viewport.setAttribute("data-notify-viewport", "");
|
|
107
|
-
viewport.setAttribute("data-position", position);
|
|
108
|
-
viewport.setAttribute("data-theme", "light");
|
|
109
|
-
document.body.appendChild(viewport);
|
|
110
|
-
}
|
|
111
|
-
return viewport;
|
|
112
|
-
}
|
|
113
|
-
function buildToastEl(toast) {
|
|
114
|
-
const state = toast.type || "success";
|
|
115
|
-
const btn = document.createElement("button");
|
|
116
|
-
btn.type = "button";
|
|
117
|
-
btn.setAttribute("data-notify-toast", "");
|
|
118
|
-
btn.setAttribute("data-state", state);
|
|
119
|
-
btn.setAttribute("data-ready", "false");
|
|
120
|
-
btn.setAttribute("data-exiting", "false");
|
|
121
|
-
const card = document.createElement("div");
|
|
122
|
-
card.setAttribute("data-notify-card", "");
|
|
123
|
-
const header = document.createElement("div");
|
|
124
|
-
header.setAttribute("data-notify-header", "");
|
|
125
|
-
const badge = document.createElement("div");
|
|
126
|
-
badge.setAttribute("data-notify-badge", "");
|
|
127
|
-
badge.setAttribute("data-state", state);
|
|
128
|
-
badge.innerHTML = ICONS[state] || ICONS.success;
|
|
129
|
-
const titleEl = document.createElement("span");
|
|
130
|
-
titleEl.setAttribute("data-notify-title", "");
|
|
131
|
-
titleEl.setAttribute("data-state", state);
|
|
132
|
-
titleEl.textContent = toast.title || capitalize(state);
|
|
133
|
-
header.appendChild(badge);
|
|
134
|
-
header.appendChild(titleEl);
|
|
135
|
-
card.appendChild(header);
|
|
136
|
-
if (toast.description || toast.button) {
|
|
137
|
-
const content = document.createElement("div");
|
|
138
|
-
content.setAttribute("data-notify-content", "");
|
|
139
|
-
content.setAttribute("data-visible", "true");
|
|
140
|
-
if (toast.description) {
|
|
141
|
-
const desc = document.createElement("div");
|
|
142
|
-
desc.setAttribute("data-notify-description", "");
|
|
143
|
-
desc.textContent = toast.description;
|
|
144
|
-
content.appendChild(desc);
|
|
145
|
-
}
|
|
146
|
-
if (toast.button) {
|
|
147
|
-
const actionBtn = document.createElement("button");
|
|
148
|
-
actionBtn.setAttribute("data-notify-button", "");
|
|
149
|
-
actionBtn.setAttribute("data-state", state);
|
|
150
|
-
actionBtn.textContent = toast.button.title;
|
|
151
|
-
actionBtn.addEventListener("click", (e)=>{
|
|
152
|
-
var _toast_button;
|
|
153
|
-
e.stopPropagation();
|
|
154
|
-
(_toast_button = toast.button) == null ? void 0 : _toast_button.onClick();
|
|
155
|
-
notifyCore.dismiss(toast.id);
|
|
156
|
-
});
|
|
157
|
-
content.appendChild(actionBtn);
|
|
158
|
-
}
|
|
159
|
-
card.appendChild(content);
|
|
160
|
-
}
|
|
161
|
-
btn.appendChild(card);
|
|
162
|
-
btn.addEventListener("click", ()=>notifyCore.dismiss(toast.id));
|
|
163
|
-
requestAnimationFrame(()=>{
|
|
164
|
-
requestAnimationFrame(()=>{
|
|
165
|
-
btn.setAttribute("data-ready", "true");
|
|
166
|
-
});
|
|
167
|
-
});
|
|
168
|
-
return btn;
|
|
169
|
-
}
|
|
170
|
-
function updateToastEl(el, toast) {
|
|
171
|
-
const state = toast.type || "success";
|
|
172
|
-
el.setAttribute("data-state", state);
|
|
173
|
-
if (toast.exiting) {
|
|
174
|
-
el.setAttribute("data-exiting", "true");
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
function renderNotifyToasts(options = {}) {
|
|
178
|
-
var _options_position;
|
|
179
|
-
const position = (_options_position = options.position) != null ? _options_position : "top-right";
|
|
180
|
-
const vp = getOrCreateViewport(position);
|
|
181
|
-
return notifyCore.subscribe((toasts)=>{
|
|
182
|
-
const liveIds = new Set(toasts.map((t)=>t.id));
|
|
183
|
-
for (const [id, el] of toastEls){
|
|
184
|
-
if (!liveIds.has(id)) {
|
|
185
|
-
el.setAttribute("data-exiting", "true");
|
|
186
|
-
setTimeout(()=>{
|
|
187
|
-
el.remove();
|
|
188
|
-
toastEls.delete(id);
|
|
189
|
-
}, EXIT_MS);
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
for (const toast of toasts){
|
|
193
|
-
if (toastEls.has(toast.id)) {
|
|
194
|
-
updateToastEl(toastEls.get(toast.id), toast);
|
|
195
|
-
} else {
|
|
196
|
-
const el = buildToastEl(toast);
|
|
197
|
-
toastEls.set(toast.id, el);
|
|
198
|
-
vp.appendChild(el);
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
exports.onNotifyToastsChange = onNotifyToastsChange;
|
|
205
|
-
exports.renderNotifyToasts = renderNotifyToasts;
|
|
206
|
-
exports.showNotifyToast = showNotifyToast;
|
package/dist/notify.mjs
DELETED
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
function __insertCSS(code) {
|
|
2
|
-
if (!code || typeof document == 'undefined') return
|
|
3
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
-
let style = document.createElement('style')
|
|
5
|
-
style.type = 'text/css'
|
|
6
|
-
head.appendChild(style)
|
|
7
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
import { _ as _extends } from './cc-2Yt7NqMX.mjs';
|
|
11
|
-
|
|
12
|
-
__insertCSS(":root{--notify-spring-easing:linear(\n\t\t0,\n\t\t0.002 0.6%,\n\t\t0.007 1.2%,\n\t\t0.015 1.8%,\n\t\t0.026 2.4%,\n\t\t0.041 3.1%,\n\t\t0.06 3.8%,\n\t\t0.108 5.3%,\n\t\t0.157 6.6%,\n\t\t0.214 8%,\n\t\t0.467 13.7%,\n\t\t0.577 16.3%,\n\t\t0.631 17.7%,\n\t\t0.682 19.1%,\n\t\t0.73 20.5%,\n\t\t0.771 21.8%,\n\t\t0.808 23.1%,\n\t\t0.844 24.5%,\n\t\t0.874 25.8%,\n\t\t0.903 27.2%,\n\t\t0.928 28.6%,\n\t\t0.952 30.1%,\n\t\t0.972 31.6%,\n\t\t0.988 33.1%,\n\t\t1.01 35.7%,\n\t\t1.025 38.5%,\n\t\t1.034 41.6%,\n\t\t1.038 45%,\n\t\t1.035 50.1%,\n\t\t1.012 64.2%,\n\t\t1.003 73%,\n\t\t0.999 83.7%,\n\t\t1\n\t);--notify-duration:600ms;--notify-height:40px;--notify-width:350px;--notify-state-success:oklch(0.723 0.219 142.136);--notify-state-loading:oklch(0.556 0 0);--notify-state-error:oklch(0.637 0.237 25.331);--notify-state-warning:oklch(0.795 0.184 86.047);--notify-state-info:oklch(0.685 0.169 237.323);--notify-state-action:oklch(0.623 0.214 259.815)}[data-notify-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:0 0;padding:0;width:var(--notify-width);height:var(--_h,var(--notify-height));opacity:0;transform:translateZ(0) scale(.95);transform-origin:center;contain:layout style;overflow:visible}[data-notify-toast][data-state=loading]{cursor:default}[data-notify-toast][data-ready=true]{opacity:1;transform:translateZ(0) scale(1);transition:transform calc(var(--notify-duration) * .66) var(--notify-spring-easing),opacity calc(var(--notify-duration) * .66) var(--notify-spring-easing),margin-bottom calc(var(--notify-duration) * .66) var(--notify-spring-easing),margin-top calc(var(--notify-duration) * .66) var(--notify-spring-easing),height var(--notify-duration) var(--notify-spring-easing)}[data-notify-viewport][data-position^=top] [data-notify-toast]:not([data-ready=true]){transform:translateY(-6px) scale(.95)}[data-notify-viewport][data-position^=bottom] [data-notify-toast]:not([data-ready=true]){transform:translateY(6px) scale(.95)}[data-notify-toast][data-ready=true][data-exiting=true]{opacity:0;pointer-events:none}[data-notify-viewport][data-position^=top] [data-notify-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px) scale(.95)}[data-notify-viewport][data-position^=bottom] [data-notify-toast][data-ready=true][data-exiting=true]{transform:translateY(6px) scale(.95)}[data-notify-canvas]{position:absolute;left:0;right:0;pointer-events:none;transform:translateZ(0);contain:layout style;overflow:visible}[data-sileo-canvas][data-edge=top]{bottom:0;transform:scaleY(-1) translateZ(0)}[data-sileo-canvas][data-edge=bottom]{top:0}[data-notify-svg]{overflow:visible}[data-notify-header]{position:absolute;z-index:20;display:flex;align-items:center;padding:.5rem;height:var(--sileo-height);overflow:hidden;left:var(--_px,0);transform:var(--_ht);max-width:var(--_pw)}[data-notify-toast][data-ready=true] [data-notify-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),left var(--sileo-duration) var(--sileo-spring-easing),max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-notify-header][data-edge=top]{bottom:0}[data-notify-header][data-edge=bottom]{top:0}[data-notify-header-stack]{position:relative;display:inline-flex;align-items:center;height:100%}[data-notify-header-inner]{display:flex;align-items:center;gap:.5rem;white-space:nowrap;opacity:1;filter:blur(0px);transform:translateZ(0)}[data-notify-header-inner][data-layer=current]{position:relative;z-index:1;animation:sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-notify-header-inner][data-exiting=true],[data-notify-header-inner][data-layer=current]:not(:only-child){will-change:opacity,filter}[data-notify-header-inner][data-layer=prev]{position:absolute;left:0;top:0;z-index:0;pointer-events:none}[data-notify-header-inner][data-exiting=true]{animation:notify-header-exit calc(var(--notify-duration) * .7) ease forwards}[data-notify-badge]{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border-radius:9999px;color:var(--sileo-tone,currentColor);background-color:var(--sileo-tone-bg,transparent)}[data-notify-title]{font-size:.825rem;line-height:1rem;font-weight:500;text-transform:capitalize;color:var(--sileo-tone,currentColor)}:is([data-notify-badge],[data-notify-title],[data-notify-button])[data-state]{--_c:var(--notify-state-success)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=loading]{--_c:var(--notify-state-loading)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=error]{--_c:var(--notify-state-error)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=warning]{--_c:var(--notify-state-warning)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=info]{--_c:var(--notify-state-info)}:is(\n[data-notify-badge],[data-notify-title],[data-notify-button]\n)[data-state=action]{--_c:var(--notify-state-action)}:is([data-notify-badge],[data-notify-title])[data-state]{--notify-tone:var(--_c);--notify-tone-bg:color-mix(in oklch, var(--_c) 20%, transparent)}[data-notify-content]{position:absolute;left:0;z-index:10;width:100%;pointer-events:none;opacity:var(--_co, 0)}[data-notify-content]:not([data-visible=true]){content-visibility:hidden}[data-notify-toast][data-ready=true] [data-notify-content]{transition:opacity calc(var(--notify-duration) * .08) ease calc(var(--notify-duration) * .04)}[data-notify-content][data-edge=top]{top:0}[data-notify-content][data-edge=bottom]{top:var(--sileo-height)}[data-notify-content][data-visible=true]{pointer-events:auto}[data-notify-toast][data-ready=true] [data-notify-content][data-visible=true]{transition:opacity calc(var(--notify-duration) * .6) ease calc(var(--notify-duration) * .3)}[data-notify-description]{width:100%;text-align:left;padding:1rem;font-size:.875rem;line-height:1.25rem;contain:layout style paint;content-visibility:auto}[data-notify-button]{display:flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .625rem;margin-top:.75rem;border-radius:9999px;border:0;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--sileo-btn-color,currentColor);background-color:var(--sileo-btn-bg,transparent);transition:background-color 150ms ease}[data-notify-button]:hover{background-color:var(--sileo-btn-bg-hover,transparent)}[data-notify-button][data-state]{--notify-btn-color:var(--_c);--notify-btn-bg:color-mix(in oklch, var(--_c) 15%, transparent);--notify-btn-bg-hover:color-mix(in oklch, var(--_c) 25%, transparent)}[data-notify-icon=spin]{animation:notify-spin 1s linear infinite}@keyframes notify-spin{to{transform:rotate(360deg)}}@keyframes notify-header-enter{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0px)}}@keyframes notify-header-exit{from{opacity:1;filter:blur(0px)}to{opacity:0;filter:blur(6px)}}[data-notify-viewport]{position:fixed;z-index:50;display:flex;gap:.75rem;padding:.75rem;pointer-events:none;max-width:calc(100vw - 1.5rem);contain:layout style}[data-notify-viewport][data-position^=top] [data-notify-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--notify-height) + .75rem))}[data-notify-viewport][data-position^=bottom] [data-notify-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--notify-height) + .75rem))}[data-notify-viewport][data-position^=top]{top:0;flex-direction:column-reverse}[data-notify-viewport][data-position^=bottom]{bottom:0;flex-direction:column}[data-notify-viewport][data-position$=left]{left:0;align-items:flex-start}[data-notify-viewport][data-position$=right]{right:0;align-items:flex-end}[data-notify-viewport][data-position$=center]{left:50%;transform:translateX(-50%);align-items:center}@media (prefers-reduced-motion:no-preference){[data-notify-toast][data-ready=true]:hover,[data-notify-toast][data-ready=true][data-exiting=true]{will-change:transform,opacity,height}}@media (prefers-reduced-motion:reduce){[data-notify-viewport],[data-notify-viewport] *,[data-notify-viewport] ::after,[data-notify-viewport] ::before{animation-duration:0s;animation-iteration-count:1;transition-duration:0s}}[data-notify-viewport][data-theme=dark] [data-notify-description]{color:rgba(0,0,0,.5)}[data-notify-viewport][data-theme=light] [data-notify-description]{color:rgba(255,255,255,.5)}[data-notify-toast]:has([data-notify-card]){width:auto;height:auto;background:0 0}[data-notify-card]{background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);width:var(--notify-width);overflow:hidden}[data-notify-card] [data-notify-header]{position:relative;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;height:auto;left:auto;max-width:none;transform:none;overflow:visible}[data-notify-card] [data-notify-content]{position:relative;opacity:1;pointer-events:auto;content-visibility:visible;border-top:1px solid rgba(0,0,0,.06)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state]{color:var(--notify-state-success)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=error]{color:var(--notify-state-error)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=warning]{color:var(--notify-state-warning)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=info]{color:var(--notify-state-info)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=loading]{color:var(--notify-state-loading)}[data-notify-card] :is([data-notify-badge],[data-notify-title])[data-state=action]{color:var(--notify-state-action)}[data-notify-card] [data-notify-description]{color:rgba(0,0,0,.6)}");
|
|
13
|
-
|
|
14
|
-
// Notify logic (no React dependencies)
|
|
15
|
-
// Provides toast management and utilities for VanillaJS, Vue, Svelte, etc.
|
|
16
|
-
class NotifyCore {
|
|
17
|
-
generateId() {
|
|
18
|
-
return `${++this.idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
19
|
-
}
|
|
20
|
-
subscribe(fn) {
|
|
21
|
-
this.listeners.add(fn);
|
|
22
|
-
fn(this.toasts);
|
|
23
|
-
return ()=>this.listeners.delete(fn);
|
|
24
|
-
}
|
|
25
|
-
emit() {
|
|
26
|
-
for (const fn of this.listeners)fn(this.toasts);
|
|
27
|
-
}
|
|
28
|
-
update(fn) {
|
|
29
|
-
this.toasts = fn(this.toasts);
|
|
30
|
-
this.emit();
|
|
31
|
-
}
|
|
32
|
-
dismiss(id) {
|
|
33
|
-
const item = this.toasts.find((t)=>t.id === id);
|
|
34
|
-
if (!item || item.exiting) return;
|
|
35
|
-
this.update((prev)=>prev.map((t)=>t.id === id ? _extends({}, t, {
|
|
36
|
-
exiting: true
|
|
37
|
-
}) : t));
|
|
38
|
-
setTimeout(()=>this.update((prev)=>prev.filter((t)=>t.id !== id)), 600);
|
|
39
|
-
}
|
|
40
|
-
show(opts) {
|
|
41
|
-
var _ref, _ref1, _opts_type;
|
|
42
|
-
// Use a unique identifier based on options (e.g., the title or a generated key)
|
|
43
|
-
// If not provided, use a default one
|
|
44
|
-
const id = opts.title ? `notify-${opts.title}` : "notify-default";
|
|
45
|
-
const prevItem = this.toasts.find((t)=>t.id === id);
|
|
46
|
-
const instanceId = (_ref = prevItem == null ? void 0 : prevItem.instanceId) != null ? _ref : this.generateId();
|
|
47
|
-
// Set the state correctly
|
|
48
|
-
const state = (_ref1 = (_opts_type = opts.type) != null ? _opts_type : prevItem == null ? void 0 : prevItem.type) != null ? _ref1 : "success";
|
|
49
|
-
const item = _extends({}, prevItem, opts, {
|
|
50
|
-
id,
|
|
51
|
-
instanceId,
|
|
52
|
-
type: state
|
|
53
|
-
});
|
|
54
|
-
this.update((prev)=>{
|
|
55
|
-
const filtered = prev.filter((t)=>t.id !== id);
|
|
56
|
-
return [
|
|
57
|
-
...filtered,
|
|
58
|
-
item
|
|
59
|
-
];
|
|
60
|
-
});
|
|
61
|
-
return id;
|
|
62
|
-
}
|
|
63
|
-
getToasts() {
|
|
64
|
-
return this.toasts;
|
|
65
|
-
}
|
|
66
|
-
constructor(){
|
|
67
|
-
this.toasts = [];
|
|
68
|
-
this.listeners = new Set();
|
|
69
|
-
this.position = "top-right";
|
|
70
|
-
this.options = undefined;
|
|
71
|
-
this.idCounter = 0;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
// Global instance for multiplatform usage
|
|
75
|
-
const notifyCore = new NotifyCore();
|
|
76
|
-
|
|
77
|
-
function showNotifyToast(options) {
|
|
78
|
-
const id = notifyCore.show(options);
|
|
79
|
-
// ...existing code...
|
|
80
|
-
// Aquí iría la lógica para mostrar el toast en el DOM si aplica
|
|
81
|
-
return id;
|
|
82
|
-
}
|
|
83
|
-
function onNotifyToastsChange(fn) {
|
|
84
|
-
return notifyCore.subscribe(fn);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
const ICONS = {
|
|
88
|
-
success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
|
|
89
|
-
error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
|
|
90
|
-
warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
|
|
91
|
-
info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
|
|
92
|
-
loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
|
|
93
|
-
action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
|
|
94
|
-
};
|
|
95
|
-
const EXIT_MS = 600;
|
|
96
|
-
function capitalize(s) {
|
|
97
|
-
return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
|
|
98
|
-
}
|
|
99
|
-
let viewport = null;
|
|
100
|
-
const toastEls = new Map();
|
|
101
|
-
function getOrCreateViewport(position) {
|
|
102
|
-
if (!viewport) {
|
|
103
|
-
viewport = document.createElement("div");
|
|
104
|
-
viewport.setAttribute("data-notify-viewport", "");
|
|
105
|
-
viewport.setAttribute("data-position", position);
|
|
106
|
-
viewport.setAttribute("data-theme", "light");
|
|
107
|
-
document.body.appendChild(viewport);
|
|
108
|
-
}
|
|
109
|
-
return viewport;
|
|
110
|
-
}
|
|
111
|
-
function buildToastEl(toast) {
|
|
112
|
-
const state = toast.type || "success";
|
|
113
|
-
const btn = document.createElement("button");
|
|
114
|
-
btn.type = "button";
|
|
115
|
-
btn.setAttribute("data-notify-toast", "");
|
|
116
|
-
btn.setAttribute("data-state", state);
|
|
117
|
-
btn.setAttribute("data-ready", "false");
|
|
118
|
-
btn.setAttribute("data-exiting", "false");
|
|
119
|
-
const card = document.createElement("div");
|
|
120
|
-
card.setAttribute("data-notify-card", "");
|
|
121
|
-
const header = document.createElement("div");
|
|
122
|
-
header.setAttribute("data-notify-header", "");
|
|
123
|
-
const badge = document.createElement("div");
|
|
124
|
-
badge.setAttribute("data-notify-badge", "");
|
|
125
|
-
badge.setAttribute("data-state", state);
|
|
126
|
-
badge.innerHTML = ICONS[state] || ICONS.success;
|
|
127
|
-
const titleEl = document.createElement("span");
|
|
128
|
-
titleEl.setAttribute("data-notify-title", "");
|
|
129
|
-
titleEl.setAttribute("data-state", state);
|
|
130
|
-
titleEl.textContent = toast.title || capitalize(state);
|
|
131
|
-
header.appendChild(badge);
|
|
132
|
-
header.appendChild(titleEl);
|
|
133
|
-
card.appendChild(header);
|
|
134
|
-
if (toast.description || toast.button) {
|
|
135
|
-
const content = document.createElement("div");
|
|
136
|
-
content.setAttribute("data-notify-content", "");
|
|
137
|
-
content.setAttribute("data-visible", "true");
|
|
138
|
-
if (toast.description) {
|
|
139
|
-
const desc = document.createElement("div");
|
|
140
|
-
desc.setAttribute("data-notify-description", "");
|
|
141
|
-
desc.textContent = toast.description;
|
|
142
|
-
content.appendChild(desc);
|
|
143
|
-
}
|
|
144
|
-
if (toast.button) {
|
|
145
|
-
const actionBtn = document.createElement("button");
|
|
146
|
-
actionBtn.setAttribute("data-notify-button", "");
|
|
147
|
-
actionBtn.setAttribute("data-state", state);
|
|
148
|
-
actionBtn.textContent = toast.button.title;
|
|
149
|
-
actionBtn.addEventListener("click", (e)=>{
|
|
150
|
-
var _toast_button;
|
|
151
|
-
e.stopPropagation();
|
|
152
|
-
(_toast_button = toast.button) == null ? void 0 : _toast_button.onClick();
|
|
153
|
-
notifyCore.dismiss(toast.id);
|
|
154
|
-
});
|
|
155
|
-
content.appendChild(actionBtn);
|
|
156
|
-
}
|
|
157
|
-
card.appendChild(content);
|
|
158
|
-
}
|
|
159
|
-
btn.appendChild(card);
|
|
160
|
-
btn.addEventListener("click", ()=>notifyCore.dismiss(toast.id));
|
|
161
|
-
requestAnimationFrame(()=>{
|
|
162
|
-
requestAnimationFrame(()=>{
|
|
163
|
-
btn.setAttribute("data-ready", "true");
|
|
164
|
-
});
|
|
165
|
-
});
|
|
166
|
-
return btn;
|
|
167
|
-
}
|
|
168
|
-
function updateToastEl(el, toast) {
|
|
169
|
-
const state = toast.type || "success";
|
|
170
|
-
el.setAttribute("data-state", state);
|
|
171
|
-
if (toast.exiting) {
|
|
172
|
-
el.setAttribute("data-exiting", "true");
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
function renderNotifyToasts(options = {}) {
|
|
176
|
-
var _options_position;
|
|
177
|
-
const position = (_options_position = options.position) != null ? _options_position : "top-right";
|
|
178
|
-
const vp = getOrCreateViewport(position);
|
|
179
|
-
return notifyCore.subscribe((toasts)=>{
|
|
180
|
-
const liveIds = new Set(toasts.map((t)=>t.id));
|
|
181
|
-
for (const [id, el] of toastEls){
|
|
182
|
-
if (!liveIds.has(id)) {
|
|
183
|
-
el.setAttribute("data-exiting", "true");
|
|
184
|
-
setTimeout(()=>{
|
|
185
|
-
el.remove();
|
|
186
|
-
toastEls.delete(id);
|
|
187
|
-
}, EXIT_MS);
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
for (const toast of toasts){
|
|
191
|
-
if (toastEls.has(toast.id)) {
|
|
192
|
-
updateToastEl(toastEls.get(toast.id), toast);
|
|
193
|
-
} else {
|
|
194
|
-
const el = buildToastEl(toast);
|
|
195
|
-
toastEls.set(toast.id, el);
|
|
196
|
-
vp.appendChild(el);
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
});
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
export { onNotifyToastsChange, renderNotifyToasts, showNotifyToast };
|