@r01al/simple-toast 1.0.1 → 1.0.2
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/dist/simple-toast.cjs.js +88 -239
- package/dist/simple-toast.esm.js +88 -239
- package/dist/simple-toast.min.js +1 -1
- package/dist/simple-toast.umd.js +88 -239
- package/package.json +1 -1
package/dist/simple-toast.esm.js
CHANGED
|
@@ -1,3 +1,47 @@
|
|
|
1
|
+
function _defineProperty(e, r, t) {
|
|
2
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
3
|
+
value: t,
|
|
4
|
+
enumerable: true,
|
|
5
|
+
configurable: true,
|
|
6
|
+
writable: true
|
|
7
|
+
}) : e[r] = t, e;
|
|
8
|
+
}
|
|
9
|
+
function ownKeys(e, r) {
|
|
10
|
+
var t = Object.keys(e);
|
|
11
|
+
if (Object.getOwnPropertySymbols) {
|
|
12
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
13
|
+
r && (o = o.filter(function (r) {
|
|
14
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
15
|
+
})), t.push.apply(t, o);
|
|
16
|
+
}
|
|
17
|
+
return t;
|
|
18
|
+
}
|
|
19
|
+
function _objectSpread2(e) {
|
|
20
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
21
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
22
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
|
|
23
|
+
_defineProperty(e, r, t[r]);
|
|
24
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
25
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
return e;
|
|
29
|
+
}
|
|
30
|
+
function _toPrimitive(t, r) {
|
|
31
|
+
if ("object" != typeof t || !t) return t;
|
|
32
|
+
var e = t[Symbol.toPrimitive];
|
|
33
|
+
if (void 0 !== e) {
|
|
34
|
+
var i = e.call(t, r);
|
|
35
|
+
if ("object" != typeof i) return i;
|
|
36
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
37
|
+
}
|
|
38
|
+
return ("string" === r ? String : Number)(t);
|
|
39
|
+
}
|
|
40
|
+
function _toPropertyKey(t) {
|
|
41
|
+
var i = _toPrimitive(t, "string");
|
|
42
|
+
return "symbol" == typeof i ? i : i + "";
|
|
43
|
+
}
|
|
44
|
+
|
|
1
45
|
const defaultConfig = {
|
|
2
46
|
position: 'tr',
|
|
3
47
|
duration: 3000,
|
|
@@ -5,230 +49,31 @@ const defaultConfig = {
|
|
|
5
49
|
dismissible: true,
|
|
6
50
|
maxToasts: 10
|
|
7
51
|
};
|
|
8
|
-
|
|
9
|
-
let globalConfig = { ...defaultConfig };
|
|
10
|
-
|
|
52
|
+
let globalConfig = _objectSpread2({}, defaultConfig);
|
|
11
53
|
function configure(config) {
|
|
12
|
-
globalConfig = {
|
|
54
|
+
globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), config);
|
|
13
55
|
}
|
|
14
|
-
|
|
15
56
|
function getConfig() {
|
|
16
57
|
return globalConfig;
|
|
17
58
|
}
|
|
18
59
|
|
|
19
60
|
let stylesInjected = false;
|
|
20
|
-
|
|
21
61
|
function injectStyles() {
|
|
22
62
|
if (stylesInjected) return;
|
|
23
|
-
|
|
24
63
|
const style = document.createElement('style');
|
|
25
64
|
style.setAttribute('data-r01st', '');
|
|
26
|
-
style.textContent =
|
|
27
|
-
.r01st-container {
|
|
28
|
-
position: fixed;
|
|
29
|
-
z-index: 9999;
|
|
30
|
-
pointer-events: none;
|
|
31
|
-
padding: 16px;
|
|
32
|
-
}
|
|
33
|
-
.r01st-container[data-position="tl"] {
|
|
34
|
-
top: 0;
|
|
35
|
-
left: 0;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.r01st-container[data-position="tc"] {
|
|
39
|
-
top: 0;
|
|
40
|
-
left: 50%;
|
|
41
|
-
margin-left: -210px;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.r01st-container[data-position="tr"] {
|
|
45
|
-
top: 0;
|
|
46
|
-
right: 0;
|
|
47
|
-
}
|
|
48
|
-
.r01st-container[data-position="ml"] {
|
|
49
|
-
top: 50%;
|
|
50
|
-
left: 0;
|
|
51
|
-
margin-top: -50px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.r01st-container[data-position="mc"] {
|
|
55
|
-
top: 50%;
|
|
56
|
-
left: 50%;
|
|
57
|
-
margin-left: -210px;
|
|
58
|
-
margin-top: -50px;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.r01st-container[data-position="mr"] {
|
|
62
|
-
top: 50%;
|
|
63
|
-
right: 0;
|
|
64
|
-
margin-top: -50px;
|
|
65
|
-
}
|
|
66
|
-
.r01st-container[data-position="bl"] {
|
|
67
|
-
bottom: 0;
|
|
68
|
-
left: 0;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.r01st-container[data-position="bc"] {
|
|
72
|
-
bottom: 0;
|
|
73
|
-
left: 50%;
|
|
74
|
-
margin-left: -210px;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.r01st-container[data-position="br"] {
|
|
78
|
-
bottom: 0;
|
|
79
|
-
right: 0;
|
|
80
|
-
}
|
|
81
|
-
.r01st {
|
|
82
|
-
pointer-events: auto;
|
|
83
|
-
position: relative;
|
|
84
|
-
min-width: 280px;
|
|
85
|
-
max-width: 420px;
|
|
86
|
-
padding: 16px;
|
|
87
|
-
margin-bottom: 16px;
|
|
88
|
-
border-radius: 8px;
|
|
89
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
90
|
-
font-size: 14px;
|
|
91
|
-
line-height: 1.5;
|
|
92
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
93
|
-
color: #ffffff;
|
|
94
|
-
opacity: 0;
|
|
95
|
-
transition: opacity 0.3s ease, margin-top 0.3s ease;
|
|
96
|
-
margin-top: -20px;
|
|
97
|
-
}
|
|
98
|
-
.r01st-show {
|
|
99
|
-
opacity: 1;
|
|
100
|
-
margin-top: 0;
|
|
101
|
-
}
|
|
102
|
-
.r01st-container[data-theme="l"] .r01st-success {
|
|
103
|
-
background-color: #10b981;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.r01st-container[data-theme="l"] .r01st-error {
|
|
107
|
-
background-color: #ef4444;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.r01st-container[data-theme="l"] .r01st-info {
|
|
111
|
-
background-color: #3b82f6;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.r01st-container[data-theme="l"] .r01st-warning {
|
|
115
|
-
background-color: #f59e0b;
|
|
116
|
-
}
|
|
117
|
-
.r01st-container[data-theme="d"] .r01st-success {
|
|
118
|
-
background-color: #059669;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.r01st-container[data-theme="d"] .r01st-error {
|
|
122
|
-
background-color: #dc2626;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.r01st-container[data-theme="d"] .r01st-info {
|
|
126
|
-
background-color: #2563eb;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.r01st-container[data-theme="d"] .r01st-warning {
|
|
130
|
-
background-color: #d97706;
|
|
131
|
-
}
|
|
132
|
-
.r01st-content {
|
|
133
|
-
display: inline-block;
|
|
134
|
-
width: 100%;
|
|
135
|
-
vertical-align: top;
|
|
136
|
-
padding-right: 30px;
|
|
137
|
-
}
|
|
138
|
-
.r01st-icon {
|
|
139
|
-
display: inline-block;
|
|
140
|
-
width: 20px;
|
|
141
|
-
height: 20px;
|
|
142
|
-
vertical-align: middle;
|
|
143
|
-
margin-right: 12px;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.r01st-icon svg {
|
|
147
|
-
width: 100%;
|
|
148
|
-
height: 100%;
|
|
149
|
-
display: block;
|
|
150
|
-
}
|
|
151
|
-
.r01st-message {
|
|
152
|
-
display: inline-block;
|
|
153
|
-
vertical-align: middle;
|
|
154
|
-
word-wrap: break-word;
|
|
155
|
-
max-width: calc(100% - 32px);
|
|
156
|
-
}
|
|
157
|
-
.r01st-close {
|
|
158
|
-
position: absolute;
|
|
159
|
-
top: 16px;
|
|
160
|
-
right: 16px;
|
|
161
|
-
background: transparent;
|
|
162
|
-
border: none;
|
|
163
|
-
color: #ffffff;
|
|
164
|
-
font-size: 24px;
|
|
165
|
-
line-height: 1;
|
|
166
|
-
cursor: pointer;
|
|
167
|
-
padding: 0;
|
|
168
|
-
width: 24px;
|
|
169
|
-
height: 24px;
|
|
170
|
-
text-align: center;
|
|
171
|
-
border-radius: 4px;
|
|
172
|
-
opacity: 0.8;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.r01st-close:hover {
|
|
176
|
-
background-color: rgba(255, 255, 255, 0.2);
|
|
177
|
-
opacity: 1;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.r01st-close:focus {
|
|
181
|
-
outline: 2px solid #ffffff;
|
|
182
|
-
outline-offset: 2px;
|
|
183
|
-
}
|
|
184
|
-
.r01st-container[data-position^="b"] .r01st {
|
|
185
|
-
margin-top: 0;
|
|
186
|
-
margin-bottom: -20px;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.r01st-container[data-position^="b"] .r01st-show {
|
|
190
|
-
margin-bottom: 16px;
|
|
191
|
-
}
|
|
192
|
-
@media (max-width: 480px) {
|
|
193
|
-
.r01st-container {
|
|
194
|
-
left: 0 !important;
|
|
195
|
-
right: 0 !important;
|
|
196
|
-
margin-left: 0 !important;
|
|
197
|
-
padding: 8px;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.r01st {
|
|
201
|
-
min-width: auto;
|
|
202
|
-
max-width: none;
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
@media (prefers-reduced-motion: reduce) {
|
|
206
|
-
.r01st {
|
|
207
|
-
transition: opacity 0.2s;
|
|
208
|
-
margin-top: 0;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
@media print {
|
|
212
|
-
.r01st-container {
|
|
213
|
-
display: none;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
`;
|
|
217
|
-
|
|
65
|
+
style.textContent = "\n.r01st-container {\n position: fixed;\n z-index: 9999;\n pointer-events: none;\n padding: 16px;\n}\n.r01st-container[data-position=\"tl\"] {\n top: 0;\n left: 0;\n}\n\n.r01st-container[data-position=\"tc\"] {\n top: 0;\n left: 50%;\n margin-left: -210px;\n}\n\n.r01st-container[data-position=\"tr\"] {\n top: 0;\n right: 0;\n}\n.r01st-container[data-position=\"ml\"] {\n top: 50%;\n left: 0;\n margin-top: -50px;\n}\n\n.r01st-container[data-position=\"mc\"] {\n top: 50%;\n left: 50%;\n margin-left: -210px;\n margin-top: -50px;\n}\n\n.r01st-container[data-position=\"mr\"] {\n top: 50%;\n right: 0;\n margin-top: -50px;\n}\n.r01st-container[data-position=\"bl\"] {\n bottom: 0;\n left: 0;\n}\n\n.r01st-container[data-position=\"bc\"] {\n bottom: 0;\n left: 50%;\n margin-left: -210px;\n}\n\n.r01st-container[data-position=\"br\"] {\n bottom: 0;\n right: 0;\n}\n.r01st {\n pointer-events: auto;\n position: relative;\n min-width: 280px;\n max-width: 420px;\n padding: 16px;\n margin-bottom: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n font-size: 14px;\n line-height: 1.5;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n color: #ffffff;\n opacity: 0;\n transition: opacity 0.3s ease, margin-top 0.3s ease;\n margin-top: -20px;\n}\n.r01st-show {\n opacity: 1;\n margin-top: 0;\n}\n.r01st-container[data-theme=\"l\"] .r01st-success {\n background-color: #10b981;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-error {\n background-color: #ef4444;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-info {\n background-color: #3b82f6;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-warning {\n background-color: #f59e0b;\n}\n.r01st-container[data-theme=\"d\"] .r01st-success {\n background-color: #059669;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-error {\n background-color: #dc2626;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-info {\n background-color: #2563eb;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-warning {\n background-color: #d97706;\n}\n.r01st-content {\n display: inline-block;\n width: 100%;\n vertical-align: top;\n padding-right: 30px;\n}\n.r01st-icon {\n display: inline-block;\n width: 20px;\n height: 20px;\n vertical-align: middle;\n margin-right: 12px;\n}\n\n.r01st-icon svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.r01st-message {\n display: inline-block;\n vertical-align: middle;\n word-wrap: break-word;\n max-width: calc(100% - 32px);\n}\n.r01st-close {\n position: absolute;\n top: 16px;\n right: 16px;\n background: transparent;\n border: none;\n color: #ffffff;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 4px;\n opacity: 0.8;\n}\n\n.r01st-close:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1;\n}\n\n.r01st-close:focus {\n outline: 2px solid #ffffff;\n outline-offset: 2px;\n}\n.r01st-container[data-position^=\"b\"] .r01st {\n margin-top: 0;\n margin-bottom: -20px;\n}\n\n.r01st-container[data-position^=\"b\"] .r01st-show {\n margin-bottom: 16px;\n}\n@media (max-width: 480px) {\n .r01st-container {\n left: 0 !important;\n right: 0 !important;\n margin-left: 0 !important;\n padding: 8px;\n }\n\n .r01st {\n min-width: auto;\n max-width: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .r01st {\n transition: opacity 0.2s;\n margin-top: 0;\n }\n}\n@media print {\n .r01st-container {\n display: none;\n }\n}\n";
|
|
218
66
|
document.head.appendChild(style);
|
|
219
67
|
stylesInjected = true;
|
|
220
68
|
}
|
|
221
69
|
|
|
222
70
|
let container = null;
|
|
223
|
-
|
|
224
71
|
function getContainer(position, theme) {
|
|
225
72
|
injectStyles();
|
|
226
|
-
|
|
227
73
|
if (container && (container.getAttribute('data-position') !== position || container.getAttribute('data-theme') !== theme)) {
|
|
228
74
|
container.parentNode.removeChild(container);
|
|
229
75
|
container = null;
|
|
230
76
|
}
|
|
231
|
-
|
|
232
77
|
if (!container) {
|
|
233
78
|
container = document.createElement('div');
|
|
234
79
|
container.className = 'r01st-container';
|
|
@@ -239,10 +84,8 @@ function getContainer(position, theme) {
|
|
|
239
84
|
container.setAttribute('data-theme', theme);
|
|
240
85
|
document.body.appendChild(container);
|
|
241
86
|
}
|
|
242
|
-
|
|
243
87
|
return container;
|
|
244
88
|
}
|
|
245
|
-
|
|
246
89
|
function cleanupContainer(activeCount) {
|
|
247
90
|
if (container && activeCount === 0) {
|
|
248
91
|
container.parentNode.removeChild(container);
|
|
@@ -265,23 +108,18 @@ function createToastElement(message, type, dismissible, className, id, onClose)
|
|
|
265
108
|
toastEl.className = 'r01st r01st-' + type + (className ? ' ' + className : '');
|
|
266
109
|
toastEl.setAttribute('role', 'alert');
|
|
267
110
|
toastEl.setAttribute('data-toast-id', id);
|
|
268
|
-
|
|
269
111
|
const content = document.createElement('div');
|
|
270
112
|
content.className = 'r01st-content';
|
|
271
|
-
|
|
272
113
|
const icon = document.createElement('span');
|
|
273
114
|
icon.className = 'r01st-icon';
|
|
274
115
|
icon.innerHTML = getIcon(type);
|
|
275
116
|
icon.setAttribute('aria-hidden', 'true');
|
|
276
117
|
content.appendChild(icon);
|
|
277
|
-
|
|
278
118
|
const messageEl = document.createElement('span');
|
|
279
119
|
messageEl.className = 'r01st-message';
|
|
280
120
|
messageEl.textContent = message;
|
|
281
121
|
content.appendChild(messageEl);
|
|
282
|
-
|
|
283
122
|
toastEl.appendChild(content);
|
|
284
|
-
|
|
285
123
|
if (dismissible) {
|
|
286
124
|
const closeBtn = document.createElement('button');
|
|
287
125
|
closeBtn.className = 'r01st-close';
|
|
@@ -290,7 +128,6 @@ function createToastElement(message, type, dismissible, className, id, onClose)
|
|
|
290
128
|
closeBtn.onclick = onClose;
|
|
291
129
|
toastEl.appendChild(closeBtn);
|
|
292
130
|
}
|
|
293
|
-
|
|
294
131
|
return toastEl;
|
|
295
132
|
}
|
|
296
133
|
|
|
@@ -299,10 +136,8 @@ function showToast(element) {
|
|
|
299
136
|
element.className = element.className + ' r01st-show';
|
|
300
137
|
});
|
|
301
138
|
}
|
|
302
|
-
|
|
303
139
|
function hideToast(element, callback) {
|
|
304
140
|
element.className = element.className.replace(' r01st-show', '');
|
|
305
|
-
|
|
306
141
|
setTimeout(() => {
|
|
307
142
|
if (element.parentNode) {
|
|
308
143
|
element.parentNode.removeChild(element);
|
|
@@ -313,59 +148,52 @@ function hideToast(element, callback) {
|
|
|
313
148
|
|
|
314
149
|
let toastCounter = 0;
|
|
315
150
|
const activeToasts = new Map();
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
const config = {
|
|
319
|
-
const {
|
|
320
|
-
|
|
151
|
+
function createToast(message) {
|
|
152
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
153
|
+
const config = _objectSpread2(_objectSpread2({}, getConfig()), options);
|
|
154
|
+
const {
|
|
155
|
+
position,
|
|
156
|
+
duration,
|
|
157
|
+
dismissible,
|
|
158
|
+
theme,
|
|
159
|
+
className,
|
|
160
|
+
type = 'info'
|
|
161
|
+
} = config;
|
|
321
162
|
const id = ++toastCounter;
|
|
322
|
-
|
|
323
163
|
if (activeToasts.size >= getConfig().maxToasts) {
|
|
324
164
|
const firstToast = activeToasts.keys().next().value;
|
|
325
165
|
dismissToast(firstToast);
|
|
326
166
|
}
|
|
327
|
-
|
|
328
167
|
const container = getContainer(position, theme);
|
|
329
|
-
|
|
330
168
|
const handleClose = () => dismissToast(id);
|
|
331
|
-
|
|
332
169
|
const toastEl = createToastElement(message, type, dismissible, className, id, handleClose);
|
|
333
|
-
|
|
334
170
|
container.appendChild(toastEl);
|
|
335
|
-
|
|
336
171
|
showToast(toastEl);
|
|
337
|
-
|
|
338
172
|
const toastData = {
|
|
339
173
|
element: toastEl,
|
|
340
174
|
timeoutId: null
|
|
341
175
|
};
|
|
342
|
-
|
|
343
176
|
if (duration > 0) {
|
|
344
177
|
toastData.timeoutId = setTimeout(() => dismissToast(id), duration);
|
|
345
178
|
}
|
|
346
|
-
|
|
347
179
|
activeToasts.set(id, toastData);
|
|
348
|
-
|
|
349
180
|
return id;
|
|
350
181
|
}
|
|
351
|
-
|
|
352
182
|
function dismissToast(id) {
|
|
353
183
|
const toastData = activeToasts.get(id);
|
|
354
184
|
if (!toastData) return;
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
185
|
+
const {
|
|
186
|
+
element,
|
|
187
|
+
timeoutId
|
|
188
|
+
} = toastData;
|
|
358
189
|
if (timeoutId) {
|
|
359
190
|
clearTimeout(timeoutId);
|
|
360
191
|
}
|
|
361
|
-
|
|
362
192
|
activeToasts.delete(id);
|
|
363
|
-
|
|
364
193
|
hideToast(element, () => {
|
|
365
194
|
cleanupContainer(activeToasts.size);
|
|
366
195
|
});
|
|
367
196
|
}
|
|
368
|
-
|
|
369
197
|
function dismissAllToasts() {
|
|
370
198
|
const ids = Array.from(activeToasts.keys());
|
|
371
199
|
ids.forEach(id => dismissToast(id));
|
|
@@ -377,15 +205,36 @@ function dismissAllToasts() {
|
|
|
377
205
|
* @param {Object} options - Toast options
|
|
378
206
|
* @returns {number} Toast ID
|
|
379
207
|
*/
|
|
380
|
-
function toast(message
|
|
208
|
+
function toast(message) {
|
|
209
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
381
210
|
return createToast(message, options);
|
|
382
211
|
}
|
|
383
212
|
|
|
384
213
|
// Shorthand methods
|
|
385
|
-
toast.success = (message
|
|
386
|
-
|
|
387
|
-
toast
|
|
388
|
-
|
|
214
|
+
toast.success = function (message) {
|
|
215
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
216
|
+
return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
217
|
+
type: 'success'
|
|
218
|
+
}));
|
|
219
|
+
};
|
|
220
|
+
toast.error = function (message) {
|
|
221
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
222
|
+
return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
223
|
+
type: 'error'
|
|
224
|
+
}));
|
|
225
|
+
};
|
|
226
|
+
toast.info = function (message) {
|
|
227
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
228
|
+
return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
229
|
+
type: 'info'
|
|
230
|
+
}));
|
|
231
|
+
};
|
|
232
|
+
toast.warning = function (message) {
|
|
233
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
234
|
+
return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
235
|
+
type: 'warning'
|
|
236
|
+
}));
|
|
237
|
+
};
|
|
389
238
|
|
|
390
239
|
// Export dismiss methods
|
|
391
240
|
toast.dismiss = dismissToast;
|
package/dist/simple-toast.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).SimpleToast={})}(this,function(n){"use strict";
|
|
1
|
+
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).SimpleToast={})}(this,function(n){"use strict";function t(n,t,e){return(t=function(n){var t=function(n,t){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var r=e.call(n,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(n)}(n,"string");return"symbol"==typeof t?t:t+""}(t))in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function e(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable})),e.push.apply(e,r)}return e}function r(n){for(var r=1;arguments.length>r;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?e(Object(o),!0).forEach(function(e){t(n,e,o[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):e(Object(o)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(o,t))})}return n}let o=r({},{position:"tr",duration:3e3,theme:"l",dismissible:!0,maxToasts:10});function i(){return o}let a=!1;let s=null;function l(n,t){return function(){if(a)return;const n=document.createElement("style");n.setAttribute("data-r01st",""),n.textContent='\n.r01st-container {\n position: fixed;\n z-index: 9999;\n pointer-events: none;\n padding: 16px;\n}\n.r01st-container[data-position="tl"] {\n top: 0;\n left: 0;\n}\n\n.r01st-container[data-position="tc"] {\n top: 0;\n left: 50%;\n margin-left: -210px;\n}\n\n.r01st-container[data-position="tr"] {\n top: 0;\n right: 0;\n}\n.r01st-container[data-position="ml"] {\n top: 50%;\n left: 0;\n margin-top: -50px;\n}\n\n.r01st-container[data-position="mc"] {\n top: 50%;\n left: 50%;\n margin-left: -210px;\n margin-top: -50px;\n}\n\n.r01st-container[data-position="mr"] {\n top: 50%;\n right: 0;\n margin-top: -50px;\n}\n.r01st-container[data-position="bl"] {\n bottom: 0;\n left: 0;\n}\n\n.r01st-container[data-position="bc"] {\n bottom: 0;\n left: 50%;\n margin-left: -210px;\n}\n\n.r01st-container[data-position="br"] {\n bottom: 0;\n right: 0;\n}\n.r01st {\n pointer-events: auto;\n position: relative;\n min-width: 280px;\n max-width: 420px;\n padding: 16px;\n margin-bottom: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n font-size: 14px;\n line-height: 1.5;\n font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n color: #ffffff;\n opacity: 0;\n transition: opacity 0.3s ease, margin-top 0.3s ease;\n margin-top: -20px;\n}\n.r01st-show {\n opacity: 1;\n margin-top: 0;\n}\n.r01st-container[data-theme="l"] .r01st-success {\n background-color: #10b981;\n}\n\n.r01st-container[data-theme="l"] .r01st-error {\n background-color: #ef4444;\n}\n\n.r01st-container[data-theme="l"] .r01st-info {\n background-color: #3b82f6;\n}\n\n.r01st-container[data-theme="l"] .r01st-warning {\n background-color: #f59e0b;\n}\n.r01st-container[data-theme="d"] .r01st-success {\n background-color: #059669;\n}\n\n.r01st-container[data-theme="d"] .r01st-error {\n background-color: #dc2626;\n}\n\n.r01st-container[data-theme="d"] .r01st-info {\n background-color: #2563eb;\n}\n\n.r01st-container[data-theme="d"] .r01st-warning {\n background-color: #d97706;\n}\n.r01st-content {\n display: inline-block;\n width: 100%;\n vertical-align: top;\n padding-right: 30px;\n}\n.r01st-icon {\n display: inline-block;\n width: 20px;\n height: 20px;\n vertical-align: middle;\n margin-right: 12px;\n}\n\n.r01st-icon svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.r01st-message {\n display: inline-block;\n vertical-align: middle;\n word-wrap: break-word;\n max-width: calc(100% - 32px);\n}\n.r01st-close {\n position: absolute;\n top: 16px;\n right: 16px;\n background: transparent;\n border: none;\n color: #ffffff;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 4px;\n opacity: 0.8;\n}\n\n.r01st-close:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1;\n}\n\n.r01st-close:focus {\n outline: 2px solid #ffffff;\n outline-offset: 2px;\n}\n.r01st-container[data-position^="b"] .r01st {\n margin-top: 0;\n margin-bottom: -20px;\n}\n\n.r01st-container[data-position^="b"] .r01st-show {\n margin-bottom: 16px;\n}\n@media (max-width: 480px) {\n .r01st-container {\n left: 0 !important;\n right: 0 !important;\n margin-left: 0 !important;\n padding: 8px;\n }\n\n .r01st {\n min-width: auto;\n max-width: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .r01st {\n transition: opacity 0.2s;\n margin-top: 0;\n }\n}\n@media print {\n .r01st-container {\n display: none;\n }\n}\n',document.head.appendChild(n),a=!0}(),!s||s.getAttribute("data-position")===n&&s.getAttribute("data-theme")===t||(s.parentNode.removeChild(s),s=null),s||(s=document.createElement("div"),s.className="r01st-container",s.setAttribute("role","region"),s.setAttribute("aria-label","Notifications"),s.setAttribute("aria-live","polite"),s.setAttribute("data-position",n),s.setAttribute("data-theme",t),document.body.appendChild(s)),s}let c=0;const d=new Map;function p(n){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const e=r(r({},i()),t),{position:o,duration:a,dismissible:s,theme:p,className:m,type:f="info"}=e,g=++c;if(d.size>=i().maxToasts){u(d.keys().next().value)}const b=l(o,p),h=function(n,t,e,r,o,i){const a=document.createElement("div");a.className="r01st r01st-"+t+(r?" "+r:""),a.setAttribute("role","alert"),a.setAttribute("data-toast-id",o);const s=document.createElement("div");s.className="r01st-content";const l=document.createElement("span");l.className="r01st-icon",l.innerHTML=function(n){const t={success:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>',error:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>',info:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>',warning:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>'};return t[n]||t.info}(t),l.setAttribute("aria-hidden","true"),s.appendChild(l);const c=document.createElement("span");if(c.className="r01st-message",c.textContent=n,s.appendChild(c),a.appendChild(s),e){const n=document.createElement("button");n.className="r01st-close",n.innerHTML="×",n.setAttribute("aria-label","Close notification"),n.onclick=i,a.appendChild(n)}return a}(n,f,s,m,g,()=>u(g));var v;b.appendChild(h),v=h,requestAnimationFrame(()=>{v.className=v.className+" r01st-show"});const x={element:h,timeoutId:null};return a>0&&(x.timeoutId=setTimeout(()=>u(g),a)),d.set(g,x),g}function u(n){const t=d.get(n);if(!t)return;const{element:e,timeoutId:r}=t;r&&clearTimeout(r),d.delete(n),function(n,t){n.className=n.className.replace(" r01st-show",""),setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n),t&&t()},300)}(e,()=>{var n;n=d.size,s&&0===n&&(s.parentNode.removeChild(s),s=null)})}function m(n){return p(n,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{})}m.success=function(n){return m(n,r(r({},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),{},{type:"success"}))},m.error=function(n){return m(n,r(r({},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),{},{type:"error"}))},m.info=function(n){return m(n,r(r({},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),{},{type:"info"}))},m.warning=function(n){return m(n,r(r({},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),{},{type:"warning"}))},m.dismiss=u,m.dismissAll=function(){Array.from(d.keys()).forEach(n=>u(n))},n.configure=function(n){o=r(r({},o),n)},n.default=m,n.toast=m,Object.defineProperty(n,"__esModule",{value:!0})});
|