@vuesimple/vs-toast 1.4.18 → 3.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.
Files changed (11) hide show
  1. package/README.md +5 -4
  2. package/build/vite.config.js +33 -0
  3. package/dist/index.js +389 -0
  4. package/dist/index.min.js +1 -0
  5. package/dist/index.umd.js +1 -0
  6. package/package.json +9 -14
  7. package/src/index.js +13 -6
  8. package/src/vs-toast.vue +22 -15
  9. package/dist/vs-toast.esm.js +0 -916
  10. package/dist/vs-toast.min.js +0 -1
  11. package/dist/vs-toast.umd.js +0 -924
package/dist/vs-toast.umd.js DELETED
@@ -1,924 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
3
- typeof define === 'function' && define.amd ? define(['vue'], factory) :
4
- (global = global || self, global.VsToast = factory(global.Vue));
5
- }(this, (function (Vue) { 'use strict';
6
-
7
- Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
8
-
9
- //
10
- //
11
- //
12
- //
13
- //
14
- //
15
- //
16
- //
17
- //
18
- //
19
- //
20
- //
21
- //
22
- //
23
- //
24
- //
25
- //
26
- //
27
- //
28
- //
29
- //
30
- //
31
- //
32
- //
33
- //
34
- //
35
- //
36
- //
37
- //
38
- //
39
- //
40
- //
41
- //
42
- //
43
- //
44
- //
45
- //
46
- //
47
- //
48
- //
49
- //
50
- //
51
- //
52
- //
53
- //
54
- //
55
- //
56
- //
57
- //
58
- //
59
- //
60
- //
61
- //
62
- //
63
- //
64
- //
65
- //
66
- //
67
- //
68
- //
69
- //
70
- //
71
- //
72
- //
73
- //
74
- //
75
- //
76
- //
77
- //
78
- //
79
- //
80
- //
81
- //
82
- //
83
- //
84
- //
85
- //
86
- //
87
- //
88
- //
89
- //
90
- //
91
- //
92
- //
93
- //
94
- //
95
- //
96
- //
97
- //
98
- //
99
- //
100
- //
101
- //
102
- //
103
- //
104
- //
105
- //
106
- //
107
- //
108
- //
109
- //
110
- //
111
- //
112
- //
113
- //
114
- //
115
- //
116
- //
117
- //
118
- //
119
-
120
- var script = {
121
- name: 'VsAlert',
122
-
123
- props: {
124
- // Variants: success, warning, error, info, secondary
125
- variant: {
126
- type: String,
127
- required: true,
128
- validator: value => ['success', 'error', 'info', 'warning', 'secondary'].includes(value.toLowerCase()),
129
- },
130
- showClose: {
131
- type: Boolean,
132
- default: false,
133
- },
134
- title: {
135
- type: String,
136
- },
137
- noBg: {
138
- type: Boolean,
139
- default: false,
140
- },
141
- small: {
142
- type: Boolean,
143
- default: false,
144
- },
145
- toast: {
146
- type: Boolean,
147
- default: false,
148
- },
149
- },
150
-
151
- computed: {
152
- classList() {
153
- return [
154
- `vs-alert-${this.variant}`,
155
- { 'vs-alert--no-bg': this.noBg },
156
- { 'vs-alert--small': this.small },
157
- { 'vs-alert--toast': this.toast },
158
- { 'vs-alert--is-close': this.showClose },
159
- ];
160
- },
161
- },
162
- };
163
-
164
- function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
165
- if (typeof shadowMode !== 'boolean') {
166
- createInjectorSSR = createInjector;
167
- createInjector = shadowMode;
168
- shadowMode = false;
169
- }
170
- // Vue.extend constructor export interop.
171
- const options = typeof script === 'function' ? script.options : script;
172
- // render functions
173
- if (template && template.render) {
174
- options.render = template.render;
175
- options.staticRenderFns = template.staticRenderFns;
176
- options._compiled = true;
177
- // functional template
178
- if (isFunctionalTemplate) {
179
- options.functional = true;
180
- }
181
- }
182
- // scopedId
183
- if (scopeId) {
184
- options._scopeId = scopeId;
185
- }
186
- let hook;
187
- if (moduleIdentifier) {
188
- // server build
189
- hook = function (context) {
190
- // 2.3 injection
191
- context =
192
- context || // cached call
193
- (this.$vnode && this.$vnode.ssrContext) || // stateful
194
- (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
195
- // 2.2 with runInNewContext: true
196
- if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
197
- context = __VUE_SSR_CONTEXT__;
198
- }
199
- // inject component styles
200
- if (style) {
201
- style.call(this, createInjectorSSR(context));
202
- }
203
- // register component module identifier for async chunk inference
204
- if (context && context._registeredComponents) {
205
- context._registeredComponents.add(moduleIdentifier);
206
- }
207
- };
208
- // used by ssr in case component is cached and beforeCreate
209
- // never gets called
210
- options._ssrRegister = hook;
211
- }
212
- else if (style) {
213
- hook = shadowMode
214
- ? function (context) {
215
- style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
216
- }
217
- : function (context) {
218
- style.call(this, createInjector(context));
219
- };
220
- }
221
- if (hook) {
222
- if (options.functional) {
223
- // register for functional component in vue file
224
- const originalRender = options.render;
225
- options.render = function renderWithStyleInjection(h, context) {
226
- hook.call(context);
227
- return originalRender(h, context);
228
- };
229
- }
230
- else {
231
- // inject component registration as beforeCreate hook
232
- const existing = options.beforeCreate;
233
- options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
234
- }
235
- }
236
- return script;
237
- }
238
-
239
- const isOldIE = typeof navigator !== 'undefined' &&
240
- /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
241
- function createInjector(context) {
242
- return (id, style) => addStyle(id, style);
243
- }
244
- let HEAD;
245
- const styles = {};
246
- function addStyle(id, css) {
247
- const group = isOldIE ? css.media || 'default' : id;
248
- const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
249
- if (!style.ids.has(id)) {
250
- style.ids.add(id);
251
- let code = css.source;
252
- if (css.map) {
253
- // https://developer.chrome.com/devtools/docs/javascript-debugging
254
- // this makes source maps inside style tags work properly in Chrome
255
- code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
256
- // http://stackoverflow.com/a/26603875
257
- code +=
258
- '\n/*# sourceMappingURL=data:application/json;base64,' +
259
- btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
260
- ' */';
261
- }
262
- if (!style.element) {
263
- style.element = document.createElement('style');
264
- style.element.type = 'text/css';
265
- if (css.media)
266
- style.element.setAttribute('media', css.media);
267
- if (HEAD === undefined) {
268
- HEAD = document.head || document.getElementsByTagName('head')[0];
269
- }
270
- HEAD.appendChild(style.element);
271
- }
272
- if ('styleSheet' in style.element) {
273
- style.styles.push(code);
274
- style.element.styleSheet.cssText = style.styles
275
- .filter(Boolean)
276
- .join('\n');
277
- }
278
- else {
279
- const index = style.ids.size - 1;
280
- const textNode = document.createTextNode(code);
281
- const nodes = style.element.childNodes;
282
- if (nodes[index])
283
- style.element.removeChild(nodes[index]);
284
- if (nodes.length)
285
- style.element.insertBefore(textNode, nodes[index]);
286
- else
287
- style.element.appendChild(textNode);
288
- }
289
- }
290
- }
291
-
292
- /* script */
293
- const __vue_script__ = script;
294
-
295
- /* template */
296
- var __vue_render__ = function() {
297
- var _vm = this;
298
- var _h = _vm.$createElement;
299
- var _c = _vm._self._c || _h;
300
- return _c(
301
- "div",
302
- { class: ["vs-alert", _vm.classList] },
303
- [
304
- _c(
305
- "span",
306
- { staticClass: "vs-alert-icon__wrapper" },
307
- [
308
- _vm._t("icon", [
309
- _vm.variant === "success"
310
- ? _c(
311
- "svg",
312
- {
313
- attrs: {
314
- xmlns: "http://www.w3.org/2000/svg",
315
- width: "16",
316
- height: "16",
317
- viewBox: "0 0 16 16",
318
- role: "presentation",
319
- focussable: "false"
320
- }
321
- },
322
- [
323
- _c(
324
- "g",
325
- {
326
- attrs: {
327
- fill: "none",
328
- stroke: "var(--vs-alert-success-icon)"
329
- }
330
- },
331
- [
332
- _c("path", {
333
- attrs: {
334
- "stroke-linecap": "round",
335
- "stroke-linejoin": "round",
336
- d: "M4 9l2.5 2.5 5-5"
337
- }
338
- }),
339
- _vm._v(" "),
340
- _c("circle", {
341
- attrs: { cx: "7.5", cy: "8.5", r: "7" }
342
- })
343
- ]
344
- )
345
- ]
346
- )
347
- : _vm._e(),
348
- _vm._v(" "),
349
- _vm.variant === "warning"
350
- ? _c(
351
- "svg",
352
- {
353
- attrs: {
354
- xmlns: "http://www.w3.org/2000/svg",
355
- width: "16",
356
- height: "16",
357
- viewBox: "0 0 16 16",
358
- role: "presentation",
359
- focussable: "false"
360
- }
361
- },
362
- [
363
- _c("path", {
364
- attrs: {
365
- fill: "none",
366
- stroke: "var(--vs-alert-warning-icon)",
367
- "stroke-linecap": "round",
368
- d:
369
- "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
370
- }
371
- }),
372
- _vm._v(" "),
373
- _c("circle", {
374
- attrs: { cx: "7.5", cy: "12", r: "1", fill: "#ad5918" }
375
- })
376
- ]
377
- )
378
- : _vm._e(),
379
- _vm._v(" "),
380
- _vm.variant === "error"
381
- ? _c(
382
- "svg",
383
- {
384
- attrs: {
385
- xmlns: "http://www.w3.org/2000/svg",
386
- width: "16",
387
- height: "16",
388
- viewBox: "0 0 16 16",
389
- role: "presentation",
390
- focussable: "false"
391
- }
392
- },
393
- [
394
- _c(
395
- "g",
396
- {
397
- attrs: {
398
- fill: "none",
399
- stroke: "var(--vs-alert-error-icon)"
400
- }
401
- },
402
- [
403
- _c("circle", {
404
- attrs: { cx: "7.5", cy: "8.5", r: "7" }
405
- }),
406
- _vm._v(" "),
407
- _c("path", {
408
- attrs: { "stroke-linecap": "round", d: "M7.5 4.5V9" }
409
- })
410
- ]
411
- ),
412
- _vm._v(" "),
413
- _c("circle", {
414
- attrs: {
415
- cx: "7.5",
416
- cy: "12",
417
- r: "1",
418
- fill: "var(--vs-alert-error-icon)"
419
- }
420
- })
421
- ]
422
- )
423
- : _vm._e(),
424
- _vm._v(" "),
425
- _vm.variant === "info"
426
- ? _c(
427
- "svg",
428
- {
429
- attrs: {
430
- xmlns: "http://www.w3.org/2000/svg",
431
- width: "16",
432
- height: "16",
433
- viewBox: "0 0 16 16",
434
- role: "presentation",
435
- focussable: "false"
436
- }
437
- },
438
- [
439
- _c(
440
- "g",
441
- { attrs: { stroke: "var(--vs-alert-info-icon)" } },
442
- [
443
- _c("circle", {
444
- attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
445
- }),
446
- _vm._v(" "),
447
- _c("path", {
448
- attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
449
- })
450
- ]
451
- ),
452
- _vm._v(" "),
453
- _c("circle", {
454
- attrs: {
455
- cx: "7.5",
456
- cy: "5",
457
- r: "1",
458
- fill: "var(--vs-alert-info-icon)"
459
- }
460
- })
461
- ]
462
- )
463
- : _vm._e(),
464
- _vm._v(" "),
465
- _vm.variant === "secondary"
466
- ? _c(
467
- "svg",
468
- {
469
- attrs: {
470
- xmlns: "http://www.w3.org/2000/svg",
471
- width: "16",
472
- height: "16",
473
- viewBox: "0 0 16 16",
474
- role: "presentation",
475
- focussable: "false"
476
- }
477
- },
478
- [
479
- _c(
480
- "g",
481
- { attrs: { stroke: "var(--vs-alert-secondary-icon)" } },
482
- [
483
- _c("circle", {
484
- attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
485
- }),
486
- _vm._v(" "),
487
- _c("path", {
488
- attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
489
- })
490
- ]
491
- ),
492
- _vm._v(" "),
493
- _c("circle", {
494
- attrs: {
495
- cx: "7.5",
496
- cy: "5",
497
- r: "1",
498
- fill: "var(--vs-alert-secondary-icon)"
499
- }
500
- })
501
- ]
502
- )
503
- : _vm._e()
504
- ])
505
- ],
506
- 2
507
- ),
508
- _vm._v(" "),
509
- _c(
510
- "div",
511
- { staticClass: "vs-alert__heading" },
512
- [_vm._t("title", [_vm.title ? [_vm._v(_vm._s(_vm.title))] : _vm._e()])],
513
- 2
514
- ),
515
- _vm._v(" "),
516
- _vm._t("default"),
517
- _vm._v(" "),
518
- _vm.showClose
519
- ? _c(
520
- "button",
521
- {
522
- class: ["vs-alert-button", _vm.variant],
523
- attrs: { "aria-label": "Close" },
524
- on: {
525
- click: function($event) {
526
- return _vm.$emit("close", true)
527
- }
528
- }
529
- },
530
- [
531
- _c(
532
- "svg",
533
- {
534
- attrs: {
535
- xmlns: "http://www.w3.org/2000/svg",
536
- width: "12",
537
- height: "12",
538
- viewBox: "0 0 12 12",
539
- role: "presentation",
540
- focusable: "false"
541
- }
542
- },
543
- [
544
- _c("path", {
545
- attrs: {
546
- stroke: "currentColor",
547
- "stroke-linecap": "round",
548
- d: "M3 9l6-6m0 6L3 3"
549
- }
550
- })
551
- ]
552
- )
553
- ]
554
- )
555
- : _vm._e()
556
- ],
557
- 2
558
- )
559
- };
560
- var __vue_staticRenderFns__ = [];
561
- __vue_render__._withStripped = true;
562
-
563
- /* style */
564
- const __vue_inject_styles__ = function (inject) {
565
- if (!inject) return
566
- inject("data-v-98c9a0d8_0", { source: ".vs-alert {\n --vs-alert-success-bc: #aecfc2;\n --vs-alert-success-bg: #edf8f4;\n --vs-alert-success-color: #186146;\n --vs-alert-success-icon: #038153;\n --vs-alert-warning-bc: #fed6a8;\n --vs-alert-warning-bg: #fff7ed;\n --vs-alert-warning-color: #ad5918;\n --vs-alert-warning-icon: #ad5918;\n --vs-alert-error-bc: #f5b5ba;\n --vs-alert-error-bg: #fff0f1;\n --vs-alert-error-color: #8c232c;\n --vs-alert-error-icon: #cc3340;\n --vs-alert-info-bc: #adcce4;\n --vs-alert-info-bg: #edf7ff;\n --vs-alert-info-color: #1f73b7;\n --vs-alert-info-icon: #337fbd;\n --vs-alert-secondary-bc: #d8dcde;\n --vs-alert-secondary-bg: #f8f9f9;\n --vs-alert-secondary-color: #68737d;\n --vs-alert-secondary-icon: #68737d;\n position: relative;\n border-radius: 4px;\n padding: 20px 20px 20px 40px;\n line-height: 1.42857;\n font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n position: absolute;\n left: 15px;\n margin-top: 1px;\n}\n.vs-alert__heading {\n font-weight: 600;\n filter: brightness(85%);\n}\n.vs-alert-button {\n display: block;\n position: absolute;\n top: 15px;\n right: 10px;\n transition: background-color 0.1s ease-in-out 0s, color 0.25s ease-in-out 0s;\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n width: 28px;\n height: 28px;\n overflow: hidden;\n color: #333333;\n font-size: 0px;\n user-select: none;\n}\n.vs-alert-button.success {\n color: var(--vs-alert-success-color);\n}\n.vs-alert-button.warning {\n color: var(--vs-alert-warning-color);\n}\n.vs-alert-button.error {\n color: var(--vs-alert-error-color);\n}\n.vs-alert-button.info {\n color: var(--vs-alert-info-color);\n}\n.vs-alert-button.secondary {\n color: var(--vs-alert-secondary-color);\n}\n.vs-alert-success {\n border: 1px solid var(--vs-alert-success-bc);\n background-color: var(--vs-alert-success-bg);\n color: var(--vs-alert-success-color);\n}\n.vs-alert-warning {\n border: 1px solid var(--vs-alert-warning-bc);\n background-color: var(--vs-alert-warning-bg);\n color: var(--vs-alert-warning-color);\n}\n.vs-alert-error {\n border: 1px solid var(--vs-alert-error-bc);\n background-color: var(--vs-alert-error-bg);\n color: var(--vs-alert-error-color);\n}\n.vs-alert-info {\n border: 1px solid var(--vs-alert-info-bc);\n background-color: var(--vs-alert-info-bg);\n color: var(--vs-alert-info-color);\n}\n.vs-alert-secondary {\n border: 1px solid var(--vs-alert-secondary-bc);\n background-color: var(--vs-alert-secondary-bg);\n color: var(--vs-alert-secondary-color);\n}\n.vs-alert.vs-alert--small:not(.vs-alert--is-close) {\n padding: 12px 20px 12px 40px;\n}\n.vs-alert.vs-alert--is-close:not(.vs-alert--small) {\n padding: 20px 40px;\n}\n.vs-alert.vs-alert--is-close.vs-alert--small {\n padding: 12px 40px;\n}\n.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button {\n top: 8px;\n}\n.vs-alert--no-bg {\n background-color: transparent;\n border-color: transparent;\n padding: 0 22px;\n font-size: 13px;\n}\n.vs-alert--no-bg .vs-alert-icon__wrapper svg {\n left: 0;\n margin-top: 0;\n}\n.vs-alert--no-bg.vs-alert-warning {\n color: var(--vs-alert-warning-icon);\n}\n.vs-alert--no-bg.vs-alert-error {\n color: var(--vs-alert-error-icon);\n}\n.vs-alert--toast {\n background-color: transparent;\n border: solid 1px #d8dcde;\n color: #2f3941;\n box-shadow: rgba(23, 73, 77, 0.15) 0px 20px 28px 0px;\n padding: 15px 40px;\n}\n.vs-alert--toast .vs-alert__heading {\n filter: brightness(100%);\n}\n.vs-alert--toast.vs-alert-success .vs-alert__heading {\n color: var(--vs-alert-success-icon);\n}\n.vs-alert--toast.vs-alert-warning .vs-alert__heading {\n color: var(--vs-alert-warning-icon);\n}\n.vs-alert--toast.vs-alert-error .vs-alert__heading {\n color: var(--vs-alert-error-icon);\n}\n.vs-alert--toast.vs-alert-info .vs-alert__heading {\n color: var(--vs-alert-info-icon);\n}\n.vs-alert--toast.vs-alert-secondary .vs-alert__heading {\n color: var(--vs-alert-secondary-icon);\n}\n.vs-alert--toast .vs-alert-button {\n color: #68737d;\n top: 10px;\n}", map: undefined, media: undefined });
567
-
568
- };
569
- /* scoped */
570
- const __vue_scope_id__ = undefined;
571
- /* module identifier */
572
- const __vue_module_identifier__ = undefined;
573
- /* functional template */
574
- const __vue_is_functional_template__ = false;
575
- /* style inject SSR */
576
-
577
- /* style inject shadow dom */
578
-
579
-
580
-
581
- const __vue_component__ = /*#__PURE__*/normalizeComponent(
582
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
583
- __vue_inject_styles__,
584
- __vue_script__,
585
- __vue_scope_id__,
586
- __vue_is_functional_template__,
587
- __vue_module_identifier__,
588
- false,
589
- createInjector,
590
- undefined,
591
- undefined
592
- );
593
-
594
- //
595
-
596
- var script$1 = {
597
- name: 'VsToast',
598
-
599
- props: {
600
- type: {
601
- type: String,
602
- default: 'toast',
603
- },
604
- /**
605
- * Toast title
606
- */
607
- title: {
608
- type: String,
609
- },
610
- /**
611
- * Toast message
612
- */
613
- message: {
614
- type: String,
615
- },
616
- /**
617
- * Toast Variants (same as vs-alert)
618
- * Variants: success, warning, error, info, secondary
619
- */
620
- variant: {
621
- type: String,
622
- },
623
- /**
624
- * Show Toast Close Icon
625
- */
626
- showClose: {
627
- type: Boolean,
628
- default: true,
629
- },
630
- /**
631
- * Position of toast:
632
- * top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
633
- */
634
- position: {
635
- type: String,
636
- default: 'top-center',
637
- validator: value =>
638
- ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(
639
- value.toLowerCase(),
640
- ),
641
- },
642
- /**
643
- * Animation name:
644
- * vs-toast--transition-{animation}
645
- */
646
- animation: {
647
- type: String,
648
- },
649
- /**
650
- * Toast Timeout
651
- */
652
- timeout: {
653
- type: Number,
654
- default: 5000,
655
- },
656
- /**
657
- * Whether toast should close automatically or not
658
- */
659
- isSticky: {
660
- type: Boolean,
661
- default: false,
662
- },
663
- },
664
-
665
- components: {
666
- VsAlert: __vue_component__,
667
- },
668
-
669
- data() {
670
- return {
671
- isOpen: false,
672
- timerId: null,
673
- isMouseHovered: false,
674
- isTimedOut: false,
675
- };
676
- },
677
-
678
- computed: {
679
- /**
680
- * Main Class List
681
- * @returns {String} class
682
- */
683
- classList() {
684
- return [`vs-toast--${this.position}`];
685
- },
686
-
687
- /**
688
- * Toggle Transition Class
689
- * @returns {String} class
690
- */
691
- toggleTransition() {
692
- const position = this.position.split('-')[0];
693
- // If custom animation
694
- if (this.animation) {
695
- return `vs-toast--transition-${this.animation}`;
696
- }
697
- if (position === 'top') {
698
- return 'vs-toast--transition-slide-down';
699
- }
700
- return 'vs-toast--transition-slide-up';
701
- },
702
- },
703
-
704
- methods: {
705
- /**
706
- * Open Toast
707
- * If timer exists: reset and open
708
- */
709
- async open(options = {}) {
710
- if (Object.keys(options).length !== 0) {
711
- if (this.isOpen) {
712
- this.close();
713
- this.$nextTick(() => this.open(options));
714
- return;
715
- }
716
- options = { ...this.$props, ...options };
717
- Object.keys(options).forEach(field => (this[field] = options[field]));
718
- }
719
-
720
- if (this.timerId) {
721
- await this.close();
722
- }
723
- this.isOpen = true;
724
- this.isTimedOut = false;
725
- if (!this.isSticky) {
726
- this.timerId = setTimeout(async () => {
727
- if (!this.isMouseHovered) {
728
- await this.close();
729
- }
730
- this.isTimedOut = true;
731
- }, this.timeout);
732
- }
733
- },
734
-
735
- /**
736
- * Close Toast
737
- * Clear timerId and clearTimeout
738
- */
739
- close() {
740
- if (this.timerId) {
741
- clearTimeout(this.timerId);
742
- this.timerId = null;
743
- }
744
- this.isOpen = false;
745
- return new Promise(resolve =>
746
- setTimeout(() => {
747
- this.$emit('input', this.isOpen);
748
- resolve();
749
- }, 10),
750
- );
751
- },
752
-
753
- /**
754
- * On mouse hover on toast
755
- * Close only if timedOut and not hovered
756
- */
757
- mouseHover(value = false) {
758
- this.isMouseHovered = value;
759
- if (this.isTimedOut && !this.isMouseHovered) {
760
- this.close();
761
- }
762
- },
763
-
764
- /**
765
- * Emitted after transition is done and opened
766
- */
767
- onEnter() {
768
- this.$emit('reveal');
769
- },
770
-
771
- /**
772
- * Emitted after transition is done and closes
773
- */
774
- onLeave() {
775
- this.$emit('hide');
776
- },
777
- },
778
- };
779
-
780
- /* script */
781
- const __vue_script__$1 = script$1;
782
-
783
- /* template */
784
- var __vue_render__$1 = function() {
785
- var _vm = this;
786
- var _h = _vm.$createElement;
787
- var _c = _vm._self._c || _h;
788
- return _c(
789
- "transition",
790
- {
791
- attrs: { name: _vm.toggleTransition },
792
- on: { "after-enter": _vm.onEnter, "after-leave": _vm.onLeave }
793
- },
794
- [
795
- _vm.isOpen
796
- ? _c(
797
- "div",
798
- {
799
- class: ["vs-toast", _vm.classList],
800
- attrs: { role: "status" },
801
- on: {
802
- mouseover: function($event) {
803
- return _vm.mouseHover(true)
804
- },
805
- mouseleave: function($event) {
806
- return _vm.mouseHover(false)
807
- }
808
- }
809
- },
810
- [
811
- _vm._t(
812
- "custom",
813
- [
814
- _c(
815
- "vs-alert",
816
- {
817
- attrs: {
818
- title: _vm.title,
819
- variant: _vm.variant,
820
- "show-close": _vm.showClose,
821
- toast: _vm.type === "toast"
822
- },
823
- on: { close: _vm.close }
824
- },
825
- [_vm._t("default", [_vm._v(_vm._s(_vm.message))])],
826
- 2
827
- )
828
- ],
829
- { close: _vm.close }
830
- )
831
- ],
832
- 2
833
- )
834
- : _vm._e()
835
- ]
836
- )
837
- };
838
- var __vue_staticRenderFns__$1 = [];
839
- __vue_render__$1._withStripped = true;
840
-
841
- /* style */
842
- const __vue_inject_styles__$1 = function (inject) {
843
- if (!inject) return
844
- inject("data-v-b5577bc8_0", { source: ".vs-toast {\n position: fixed;\n width: 350px;\n max-width: 350px;\n background-color: #ffffff;\n z-index: 9999;\n font-family: inherit;\n text-align: left;\n}\n.vs-toast .vs-alert {\n padding: 15px 40px;\n}\n.vs-toast .vs-alert .vs-alert-button {\n top: 10px;\n}\n.vs-toast--top-center {\n left: calc(50% - 175px);\n top: 5px;\n}\n.vs-toast--top-left {\n left: 5px;\n top: 5px;\n}\n.vs-toast--top-right {\n right: 5px;\n top: 5px;\n}\n.vs-toast--bottom-center {\n left: calc(50% - 175px);\n bottom: 5px;\n}\n.vs-toast--bottom-left {\n left: 5px;\n bottom: 5px;\n}\n.vs-toast--bottom-right {\n right: 5px;\n bottom: 5px;\n}\n.vs-toast--transition-slide-down-enter-active, .vs-toast--transition-slide-down-leave-active {\n transition: 0.3s all ease-in-out;\n}\n.vs-toast--transition-slide-down-enter-to, .vs-toast--transition-slide-down-leave {\n opacity: 1;\n transform: translateY(0px);\n}\n.vs-toast--transition-slide-down-enter, .vs-toast--transition-slide-down-leave-to {\n opacity: 0;\n transform: translateY(-30px);\n}\n.vs-toast--transition-slide-up-enter-active, .vs-toast--transition-slide-up-leave-active {\n transition: 0.3s all ease-in-out;\n}\n.vs-toast--transition-slide-up-enter-to, .vs-toast--transition-slide-up-leave {\n opacity: 1;\n transform: translateY(0px);\n}\n.vs-toast--transition-slide-up-enter, .vs-toast--transition-slide-up-leave-to {\n opacity: 0;\n transform: translateY(30px);\n}", map: undefined, media: undefined });
845
-
846
- };
847
- /* scoped */
848
- const __vue_scope_id__$1 = undefined;
849
- /* module identifier */
850
- const __vue_module_identifier__$1 = undefined;
851
- /* functional template */
852
- const __vue_is_functional_template__$1 = false;
853
- /* style inject SSR */
854
-
855
- /* style inject shadow dom */
856
-
857
-
858
-
859
- const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
860
- { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
861
- __vue_inject_styles__$1,
862
- __vue_script__$1,
863
- __vue_scope_id__$1,
864
- __vue_is_functional_template__$1,
865
- __vue_module_identifier__$1,
866
- false,
867
- createInjector,
868
- undefined,
869
- undefined
870
- );
871
-
872
- const variant = ['success', 'warning', 'error', 'info', 'secondary'];
873
-
874
- const defaultOptions = {
875
- title: '',
876
- message: '',
877
- variant: 'success',
878
- position: 'top-center',
879
- type: 'toast',
880
- timeout: 5000,
881
- showClose: true,
882
- isSticky: false,
883
- };
884
-
885
- let toastCmp = null;
886
-
887
- function createToastCmp() {
888
- const cmp = new Vue(__vue_component__$1);
889
- document.body.appendChild(cmp.$mount().$el);
890
- return cmp;
891
- }
892
-
893
- function getToastCmp() {
894
- if (!toastCmp) {
895
- toastCmp = createToastCmp();
896
- }
897
- return toastCmp;
898
- }
899
-
900
- function show(options = {}) {
901
- getToastCmp().open({ ...defaultOptions, ...options });
902
- }
903
-
904
- function close() {
905
- getToastCmp().close();
906
- }
907
-
908
- function createShorthands() {
909
- const shorthands = {};
910
- variant.forEach(variant => (shorthands[variant] = (message, options = {}) => show({ variant, message, ...options })));
911
- return shorthands;
912
- }
913
-
914
- var index = {
915
- show,
916
- close,
917
- getToastCmp,
918
- defaultOptions,
919
- ...createShorthands(),
920
- };
921
-
922
- return index;
923
-
924
- })));