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