@vuesimple/vs-toast 1.0.2 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +12 -12
  2. package/build/rollup.config.js +0 -2
  3. package/dist/vs-toast.esm.js +18 -22
  4. package/dist/vs-toast.min.js +1 -1
  5. package/dist/vs-toast.umd.js +18 -22
  6. package/package.json +4 -5
  7. package/src/index.js +4 -3
  8. package/src/vs-toast.vue +11 -8
  9. package/tests/vs-toast.spec.js +19 -18
package/README.md CHANGED
@@ -93,7 +93,7 @@ After installation,
93
93
  import Vue from 'vue';
94
94
  import VsToast from '@vuesimple/vs-toast';
95
95
 
96
- Vue.component('vs-toast', VsAlert);
96
+ Vue.component('vs-toast', VsToast);
97
97
  ```
98
98
 
99
99
  - Update `nuxt.config.js`
@@ -135,17 +135,17 @@ After installation,
135
135
 
136
136
  ### ⚙ Options
137
137
 
138
- | Name | Type | Default | Description |
139
- | ---------- | ------- | ------------ | ---------------------------------------------------------------------------------------------------------- |
140
- | variant | String | - | Available variants; `success`, `warning`, `error`, `info`, `secondary` |
141
- | title | String | - | Toast title |
142
- | message | String | - | Toast body/content/description |
143
- | position | String | `top-center` | Available positions: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` |
144
- | timeout | Number | 5000 | Hide timeout |
145
- | show-close | Boolean | false | Show/Hide close button |
146
- | type | String | `toast` | Available types: `toast`, `alert` |
147
- | animation | String | `slide` | Default class applied for animation: `vs-toast--transition-{animation-name}` |
148
- | is-sticky | Boolean | false | Whether toast should close automatically or not |
138
+ | Name | Type | Default | Description |
139
+ | --------- | ------- | ------------ | ---------------------------------------------------------------------------------------------------------- |
140
+ | variant | String | - | Available variants; `success`, `warning`, `error`, `info`, `secondary` |
141
+ | title | String | - | Toast title |
142
+ | message | String | - | Toast body/content/description |
143
+ | position | String | `top-center` | Available positions: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` |
144
+ | timeout | Number | 5000 | Hide timeout |
145
+ | showClose | Boolean | false | Show/Hide close button |
146
+ | type | String | `toast` | Available types: `toast`, `alert` |
147
+ | animation | String | `slide` | Default class applied for animation: `vs-toast--transition-{animation-name}` |
148
+ | isSticky | Boolean | false | Whether toast should close automatically or not |
149
149
 
150
150
  ### 🌟 Tips
151
151
 
package/build/rollup.config.js CHANGED
@@ -1,6 +1,4 @@
1
- // rollup.config.js
2
1
  import vue from 'rollup-plugin-vue';
3
- // import buble from 'rollup-plugin-buble';
4
2
  import image from '@rollup/plugin-image';
5
3
  import { terser } from 'rollup-plugin-terser';
6
4
  import minimist from 'minimist';
package/dist/vs-toast.esm.js CHANGED
@@ -110,11 +110,6 @@ import Vue from 'vue';
110
110
  //
111
111
  //
112
112
  //
113
- //
114
- //
115
- //
116
- //
117
- //
118
113
 
119
114
  var script = {
120
115
  name: 'VsAlert',
@@ -124,6 +119,7 @@ var script = {
124
119
  variant: {
125
120
  type: String,
126
121
  required: true,
122
+ validator: value => ['success', 'error', 'info', 'warning', 'secondary'].includes(value.toLowerCase()),
127
123
  },
128
124
  showClose: {
129
125
  type: Boolean,
@@ -153,6 +149,7 @@ var script = {
153
149
  { 'vs-alert--no-bg': this.noBg },
154
150
  { 'vs-alert--small': this.small },
155
151
  { 'vs-alert--toast': this.toast },
152
+ { 'vs-alert--is-close': this.showClose },
156
153
  ];
157
154
  },
158
155
  },
@@ -506,11 +503,7 @@ var __vue_render__ = function() {
506
503
  _c(
507
504
  "div",
508
505
  { staticClass: "vs-alert__heading" },
509
- [
510
- _vm._t("title", [
511
- _vm.title ? _c("div", [_vm._v(_vm._s(_vm.title))]) : _vm._e()
512
- ])
513
- ],
506
+ [_vm._t("title", [_vm.title ? [_vm._v(_vm._s(_vm.title))] : _vm._e()])],
514
507
  2
515
508
  ),
516
509
  _vm._v(" "),
@@ -521,7 +514,7 @@ var __vue_render__ = function() {
521
514
  "button",
522
515
  {
523
516
  class: ["vs-alert-button", _vm.variant],
524
- attrs: { "aria-label": "Close Alert" },
517
+ attrs: { "aria-label": "Close" },
525
518
  on: {
526
519
  click: function($event) {
527
520
  return _vm.$emit("close", true)
@@ -564,7 +557,7 @@ __vue_render__._withStripped = true;
564
557
  /* style */
565
558
  const __vue_inject_styles__ = function (inject) {
566
559
  if (!inject) return
567
- inject("data-v-3b900aa4_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 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}\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--small {\n padding: 12px 40px;\n}\n.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--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-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 });
560
+ inject("data-v-b5696c94_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 });
568
561
 
569
562
  };
570
563
  /* scoped */
@@ -598,7 +591,6 @@ var script$1 = {
598
591
  name: 'VsToast',
599
592
 
600
593
  props: {
601
- // value: {},
602
594
  type: {
603
595
  type: String,
604
596
  default: 'toast',
@@ -616,8 +608,8 @@ var script$1 = {
616
608
  type: String,
617
609
  },
618
610
  /**
619
- * Toast Variants
620
- * Variants: success, warning, error
611
+ * Toast Variants (same as vs-alert)
612
+ * Variants: success, warning, error, info, secondary
621
613
  */
622
614
  variant: {
623
615
  type: String,
@@ -636,6 +628,10 @@ var script$1 = {
636
628
  position: {
637
629
  type: String,
638
630
  default: 'top-center',
631
+ validator: value =>
632
+ ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(
633
+ value.toLowerCase(),
634
+ ),
639
635
  },
640
636
  /**
641
637
  * Animation name:
@@ -679,7 +675,7 @@ var script$1 = {
679
675
  * @returns {String} class
680
676
  */
681
677
  classList() {
682
- return [`vs-toast--${this.variant}`, `vs-toast--${this.position}`];
678
+ return [`vs-toast--${this.position}`];
683
679
  },
684
680
 
685
681
  /**
@@ -735,7 +731,6 @@ var script$1 = {
735
731
  * Clear timerId and clearTimeout
736
732
  */
737
733
  close() {
738
- console.log('here');
739
734
  if (this.timerId) {
740
735
  clearTimeout(this.timerId);
741
736
  this.timerId = null;
@@ -796,7 +791,7 @@ var __vue_render__$1 = function() {
796
791
  "div",
797
792
  {
798
793
  class: ["vs-toast", _vm.classList],
799
- attrs: { "aria-hidden": _vm.isOpen ? "false" : "true" },
794
+ attrs: { role: "status" },
800
795
  on: {
801
796
  mouseover: function($event) {
802
797
  return _vm.mouseHover(true)
@@ -840,7 +835,7 @@ __vue_render__$1._withStripped = true;
840
835
  /* style */
841
836
  const __vue_inject_styles__$1 = function (inject) {
842
837
  if (!inject) return
843
- inject("data-v-d1ba5982_0", { source: ".vs-toast {\n position: fixed;\n 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% - 150px);\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% - 150px);\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 });
838
+ inject("data-v-053a2fbe_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 });
844
839
 
845
840
  };
846
841
  /* scoped */
@@ -868,16 +863,17 @@ __vue_render__$1._withStripped = true;
868
863
  undefined
869
864
  );
870
865
 
871
- const variant = ['success', 'warning', 'error'];
866
+ const variant = ['success', 'warning', 'error', 'info', 'secondary'];
872
867
 
873
868
  const defaultOptions = {
874
869
  title: '',
875
870
  message: '',
876
871
  variant: 'success',
877
- timeout: 5000,
872
+ position: 'top-center',
878
873
  type: 'toast',
874
+ timeout: 5000,
879
875
  showClose: true,
880
- position: 'top-center',
876
+ isSticky: false,
881
877
  };
882
878
 
883
879
  let toastCmp = null;
package/dist/vs-toast.min.js CHANGED
@@ -1 +1 @@
1
- var VsToast=function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={name:"VsAlert",props:{variant:{type:String,required:!0},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1},toast:{type:Boolean,default:!1}},computed:{classList(){return["vs-alert-"+this.variant,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small},{"vs-alert--toast":this.toast}]}}};function n(t,e,n,s,o,r,a,i,l,c){"boolean"!=typeof a&&(l=i,i=a,a=!1);const v="function"==typeof n?n.options:n;let d;if(t&&t.render&&(v.render=t.render,v.staticRenderFns=t.staticRenderFns,v._compiled=!0,o&&(v.functional=!0)),s&&(v._scopeId=s),r?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},v._ssrRegister=d):e&&(d=a?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,i(t))}),d)if(v.functional){const t=v.render;v.render=function(e,n){return d.call(n),t(e,n)}}else{const t=v.beforeCreate;v.beforeCreate=t?[].concat(t,d):[d]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(t){return(t,e)=>function(t,e){const n=s?e.media||"default":t,o=a[n]||(a[n]={ids:new Set,styles:[]});if(!o.ids.has(t)){o.ids.add(t);let n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",e.media&&o.element.setAttribute("media",e.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(n),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const t=o.ids.size-1,e=document.createTextNode(n),s=o.element.childNodes;s[t]&&o.element.removeChild(s[t]),s.length?o.element.insertBefore(e,s[t]):o.element.appendChild(e)}}}(t,e)}let r;const a={};const i=e;var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["vs-alert",t.classList]},[n("span",{staticClass:"vs-alert-icon__wrapper"},[t._t("icon",["success"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("g",{attrs:{fill:"none",stroke:"var(--vs-alert-success-icon)"}},[n("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}}),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7"}})])]):t._e(),t._v(" "),"warning"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("path",{attrs:{fill:"none",stroke:"var(--vs-alert-warning-icon)","stroke-linecap":"round",d:"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"}}),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"}})]):t._e(),t._v(" "),"error"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("g",{attrs:{fill:"none",stroke:"var(--vs-alert-error-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7"}}),t._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 4.5V9"}})]),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"}})]):t._e(),t._v(" "),"info"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("g",{attrs:{stroke:"var(--vs-alert-info-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7",fill:"none"}}),t._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 12.5V8"}})]),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"}})]):t._e(),t._v(" "),"secondary"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("g",{attrs:{stroke:"var(--vs-alert-secondary-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7",fill:"none"}}),t._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 12.5V8"}})]),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"}})]):t._e()])],2),t._v(" "),n("div",{staticClass:"vs-alert__heading"},[t._t("title",[t.title?n("div",[t._v(t._s(t.title))]):t._e()])],2),t._v(" "),t._t("default"),t._v(" "),t.showClose?n("button",{class:["vs-alert-button",t.variant],attrs:{"aria-label":"Close Alert"},on:{click:function(e){return t.$emit("close",!0)}}},[n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",role:"presentation",focusable:"false"}},[n("path",{attrs:{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"}})])]):t._e()],2)};l._withStripped=!0;const c={name:"VsToast",props:{type:{type:String,default:"toast"},title:{type:String},message:{type:String},variant:{type:String},showClose:{type:Boolean,default:!0},position:{type:String,default:"top-center"},animation:{type:String},timeout:{type:Number,default:5e3},isSticky:{type:Boolean,default:!1}},components:{VsAlert:n({render:l,staticRenderFns:[]},(function(t){t&&t("data-v-3b900aa4_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 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}\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--small {\n padding: 12px 40px;\n}\n.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--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-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:void 0,media:void 0})}),i,void 0,!1,void 0,!1,o,void 0,void 0)},data:()=>({isOpen:!1,timerId:null,isMouseHovered:!1,isTimedOut:!1}),computed:{classList(){return["vs-toast--"+this.variant,"vs-toast--"+this.position]},toggleTransition(){const t=this.position.split("-")[0];return this.animation?"vs-toast--transition-"+this.animation:"top"===t?"vs-toast--transition-slide-down":"vs-toast--transition-slide-up"}},methods:{async open(t={}){if(0!==Object.keys(t).length){if(this.isOpen)return this.close(),void this.$nextTick(()=>this.open(t));t={...this.$props,...t},Object.keys(t).forEach(e=>this[e]=t[e])}this.timerId&&await this.close(),this.isOpen=!0,this.isTimedOut=!1,this.isSticky||(this.timerId=setTimeout(async()=>{this.isMouseHovered||await this.close(),this.isTimedOut=!0},this.timeout))},close(){return console.log("here"),this.timerId&&(clearTimeout(this.timerId),this.timerId=null),this.isOpen=!1,new Promise(t=>setTimeout(()=>{this.$emit("input",this.isOpen),t()},10))},mouseHover(t=!1){this.isMouseHovered=t,this.isTimedOut&&!this.isMouseHovered&&this.close()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide")}}};var v=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:t.toggleTransition},on:{"after-enter":t.onEnter,"after-leave":t.onLeave}},[t.isOpen?n("div",{class:["vs-toast",t.classList],attrs:{"aria-hidden":t.isOpen?"false":"true"},on:{mouseover:function(e){return t.mouseHover(!0)},mouseleave:function(e){return t.mouseHover(!1)}}},[t._t("custom",[n("vs-alert",{attrs:{title:t.title,variant:t.variant,"show-close":t.showClose,toast:"toast"===t.type},on:{close:t.close}},[t._t("default",[t._v(t._s(t.message))])],2)],{close:t.close})],2):t._e()])};v._withStripped=!0;const d=n({render:v,staticRenderFns:[]},(function(t){t&&t("data-v-d1ba5982_0",{source:".vs-toast {\n position: fixed;\n 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% - 150px);\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% - 150px);\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:void 0,media:void 0})}),c,void 0,!1,void 0,!1,o,void 0,void 0),p=["success","warning","error"],u={title:"",message:"",variant:"success",timeout:5e3,type:"toast",showClose:!0,position:"top-center"};let f=null;function h(){return f||(f=function(){const e=new t(d);return document.body.appendChild(e.$mount().$el),e}()),f}function g(t={}){h().open({...u,...t})}return{show:g,close:function(){h().close()},getToastCmp:h,defaultOptions:u,...function(){const t={};return p.forEach(e=>t[e]=(t,n={})=>g({variant:e,message:t,...n})),t}()}}(Vue);
1
+ var VsToast=function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={name:"VsAlert",props:{variant:{type:String,required:!0,validator:t=>["success","error","info","warning","secondary"].includes(t.toLowerCase())},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1},toast:{type:Boolean,default:!1}},computed:{classList(){return["vs-alert-"+this.variant,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small},{"vs-alert--toast":this.toast},{"vs-alert--is-close":this.showClose}]}}};function n(t,e,n,s,r,o,a,i,l,c){"boolean"!=typeof a&&(l=i,i=a,a=!1);const v="function"==typeof n?n.options:n;let d;if(t&&t.render&&(v.render=t.render,v.staticRenderFns=t.staticRenderFns,v._compiled=!0,r&&(v.functional=!0)),s&&(v._scopeId=s),o?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},v._ssrRegister=d):e&&(d=a?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,i(t))}),d)if(v.functional){const t=v.render;v.render=function(e,n){return d.call(n),t(e,n)}}else{const t=v.beforeCreate;v.beforeCreate=t?[].concat(t,d):[d]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(t){return(t,e)=>function(t,e){const n=s?e.media||"default":t,r=a[n]||(a[n]={ids:new Set,styles:[]});if(!r.ids.has(t)){r.ids.add(t);let n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",e.media&&r.element.setAttribute("media",e.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const t=r.ids.size-1,e=document.createTextNode(n),s=r.element.childNodes;s[t]&&r.element.removeChild(s[t]),s.length?r.element.insertBefore(e,s[t]):r.element.appendChild(e)}}}(t,e)}let o;const a={};const i=e;var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["vs-alert",t.classList]},[n("span",{staticClass:"vs-alert-icon__wrapper"},[t._t("icon",["success"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("g",{attrs:{fill:"none",stroke:"var(--vs-alert-success-icon)"}},[n("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}}),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7"}})])]):t._e(),t._v(" "),"warning"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("path",{attrs:{fill:"none",stroke:"var(--vs-alert-warning-icon)","stroke-linecap":"round",d:"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"}}),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"}})]):t._e(),t._v(" "),"error"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("g",{attrs:{fill:"none",stroke:"var(--vs-alert-error-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7"}}),t._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 4.5V9"}})]),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"}})]):t._e(),t._v(" "),"info"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("g",{attrs:{stroke:"var(--vs-alert-info-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7",fill:"none"}}),t._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 12.5V8"}})]),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"}})]):t._e(),t._v(" "),"secondary"===t.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[n("g",{attrs:{stroke:"var(--vs-alert-secondary-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7",fill:"none"}}),t._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 12.5V8"}})]),t._v(" "),n("circle",{attrs:{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"}})]):t._e()])],2),t._v(" "),n("div",{staticClass:"vs-alert__heading"},[t._t("title",[t.title?[t._v(t._s(t.title))]:t._e()])],2),t._v(" "),t._t("default"),t._v(" "),t.showClose?n("button",{class:["vs-alert-button",t.variant],attrs:{"aria-label":"Close"},on:{click:function(e){return t.$emit("close",!0)}}},[n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",role:"presentation",focusable:"false"}},[n("path",{attrs:{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"}})])]):t._e()],2)};l._withStripped=!0;const c={name:"VsToast",props:{type:{type:String,default:"toast"},title:{type:String},message:{type:String},variant:{type:String},showClose:{type:Boolean,default:!0},position:{type:String,default:"top-center",validator:t=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(t.toLowerCase())},animation:{type:String},timeout:{type:Number,default:5e3},isSticky:{type:Boolean,default:!1}},components:{VsAlert:n({render:l,staticRenderFns:[]},(function(t){t&&t("data-v-b5696c94_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:void 0,media:void 0})}),i,void 0,!1,void 0,!1,r,void 0,void 0)},data:()=>({isOpen:!1,timerId:null,isMouseHovered:!1,isTimedOut:!1}),computed:{classList(){return["vs-toast--"+this.position]},toggleTransition(){const t=this.position.split("-")[0];return this.animation?"vs-toast--transition-"+this.animation:"top"===t?"vs-toast--transition-slide-down":"vs-toast--transition-slide-up"}},methods:{async open(t={}){if(0!==Object.keys(t).length){if(this.isOpen)return this.close(),void this.$nextTick(()=>this.open(t));t={...this.$props,...t},Object.keys(t).forEach(e=>this[e]=t[e])}this.timerId&&await this.close(),this.isOpen=!0,this.isTimedOut=!1,this.isSticky||(this.timerId=setTimeout(async()=>{this.isMouseHovered||await this.close(),this.isTimedOut=!0},this.timeout))},close(){return this.timerId&&(clearTimeout(this.timerId),this.timerId=null),this.isOpen=!1,new Promise(t=>setTimeout(()=>{this.$emit("input",this.isOpen),t()},10))},mouseHover(t=!1){this.isMouseHovered=t,this.isTimedOut&&!this.isMouseHovered&&this.close()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide")}}};var v=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:t.toggleTransition},on:{"after-enter":t.onEnter,"after-leave":t.onLeave}},[t.isOpen?n("div",{class:["vs-toast",t.classList],attrs:{role:"status"},on:{mouseover:function(e){return t.mouseHover(!0)},mouseleave:function(e){return t.mouseHover(!1)}}},[t._t("custom",[n("vs-alert",{attrs:{title:t.title,variant:t.variant,"show-close":t.showClose,toast:"toast"===t.type},on:{close:t.close}},[t._t("default",[t._v(t._s(t.message))])],2)],{close:t.close})],2):t._e()])};v._withStripped=!0;const d=n({render:v,staticRenderFns:[]},(function(t){t&&t("data-v-053a2fbe_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:void 0,media:void 0})}),c,void 0,!1,void 0,!1,r,void 0,void 0),p=["success","warning","error","info","secondary"],u={title:"",message:"",variant:"success",position:"top-center",type:"toast",timeout:5e3,showClose:!0,isSticky:!1};let f=null;function g(){return f||(f=function(){const e=new t(d);return document.body.appendChild(e.$mount().$el),e}()),f}function h(t={}){g().open({...u,...t})}return{show:h,close:function(){g().close()},getToastCmp:g,defaultOptions:u,...function(){const t={};return p.forEach(e=>t[e]=(t,n={})=>h({variant:e,message:t,...n})),t}()}}(Vue);
package/dist/vs-toast.umd.js CHANGED
@@ -116,11 +116,6 @@
116
116
  //
117
117
  //
118
118
  //
119
- //
120
- //
121
- //
122
- //
123
- //
124
119
 
125
120
  var script = {
126
121
  name: 'VsAlert',
@@ -130,6 +125,7 @@
130
125
  variant: {
131
126
  type: String,
132
127
  required: true,
128
+ validator: value => ['success', 'error', 'info', 'warning', 'secondary'].includes(value.toLowerCase()),
133
129
  },
134
130
  showClose: {
135
131
  type: Boolean,
@@ -159,6 +155,7 @@
159
155
  { 'vs-alert--no-bg': this.noBg },
160
156
  { 'vs-alert--small': this.small },
161
157
  { 'vs-alert--toast': this.toast },
158
+ { 'vs-alert--is-close': this.showClose },
162
159
  ];
163
160
  },
164
161
  },
@@ -512,11 +509,7 @@
512
509
  _c(
513
510
  "div",
514
511
  { staticClass: "vs-alert__heading" },
515
- [
516
- _vm._t("title", [
517
- _vm.title ? _c("div", [_vm._v(_vm._s(_vm.title))]) : _vm._e()
518
- ])
519
- ],
512
+ [_vm._t("title", [_vm.title ? [_vm._v(_vm._s(_vm.title))] : _vm._e()])],
520
513
  2
521
514
  ),
522
515
  _vm._v(" "),
@@ -527,7 +520,7 @@
527
520
  "button",
528
521
  {
529
522
  class: ["vs-alert-button", _vm.variant],
530
- attrs: { "aria-label": "Close Alert" },
523
+ attrs: { "aria-label": "Close" },
531
524
  on: {
532
525
  click: function($event) {
533
526
  return _vm.$emit("close", true)
@@ -570,7 +563,7 @@
570
563
  /* style */
571
564
  const __vue_inject_styles__ = function (inject) {
572
565
  if (!inject) return
573
- inject("data-v-3b900aa4_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 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}\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--small {\n padding: 12px 40px;\n}\n.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--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-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 });
566
+ inject("data-v-b5696c94_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 });
574
567
 
575
568
  };
576
569
  /* scoped */
@@ -604,7 +597,6 @@
604
597
  name: 'VsToast',
605
598
 
606
599
  props: {
607
- // value: {},
608
600
  type: {
609
601
  type: String,
610
602
  default: 'toast',
@@ -622,8 +614,8 @@
622
614
  type: String,
623
615
  },
624
616
  /**
625
- * Toast Variants
626
- * Variants: success, warning, error
617
+ * Toast Variants (same as vs-alert)
618
+ * Variants: success, warning, error, info, secondary
627
619
  */
628
620
  variant: {
629
621
  type: String,
@@ -642,6 +634,10 @@
642
634
  position: {
643
635
  type: String,
644
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
+ ),
645
641
  },
646
642
  /**
647
643
  * Animation name:
@@ -685,7 +681,7 @@
685
681
  * @returns {String} class
686
682
  */
687
683
  classList() {
688
- return [`vs-toast--${this.variant}`, `vs-toast--${this.position}`];
684
+ return [`vs-toast--${this.position}`];
689
685
  },
690
686
 
691
687
  /**
@@ -741,7 +737,6 @@
741
737
  * Clear timerId and clearTimeout
742
738
  */
743
739
  close() {
744
- console.log('here');
745
740
  if (this.timerId) {
746
741
  clearTimeout(this.timerId);
747
742
  this.timerId = null;
@@ -802,7 +797,7 @@
802
797
  "div",
803
798
  {
804
799
  class: ["vs-toast", _vm.classList],
805
- attrs: { "aria-hidden": _vm.isOpen ? "false" : "true" },
800
+ attrs: { role: "status" },
806
801
  on: {
807
802
  mouseover: function($event) {
808
803
  return _vm.mouseHover(true)
@@ -846,7 +841,7 @@
846
841
  /* style */
847
842
  const __vue_inject_styles__$1 = function (inject) {
848
843
  if (!inject) return
849
- inject("data-v-d1ba5982_0", { source: ".vs-toast {\n position: fixed;\n 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% - 150px);\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% - 150px);\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 });
844
+ inject("data-v-053a2fbe_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 });
850
845
 
851
846
  };
852
847
  /* scoped */
@@ -874,16 +869,17 @@
874
869
  undefined
875
870
  );
876
871
 
877
- const variant = ['success', 'warning', 'error'];
872
+ const variant = ['success', 'warning', 'error', 'info', 'secondary'];
878
873
 
879
874
  const defaultOptions = {
880
875
  title: '',
881
876
  message: '',
882
877
  variant: 'success',
883
- timeout: 5000,
878
+ position: 'top-center',
884
879
  type: 'toast',
880
+ timeout: 5000,
885
881
  showClose: true,
886
- position: 'top-center',
882
+ isSticky: false,
887
883
  };
888
884
 
889
885
  let toastCmp = null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vuesimple/vs-toast",
3
- "version": "1.0.2",
3
+ "version": "1.4.1",
4
4
  "description": "A simple vue toast.",
5
5
  "main": "dist/vs-toast.umd.js",
6
6
  "module": "dist/vs-toast.esm.js",
@@ -16,10 +16,9 @@
16
16
  },
17
17
  "devDependencies": {
18
18
  "@rollup/plugin-image": "2.0.5",
19
- "minimist": "1.2.0",
19
+ "minimist": "1.2.5",
20
20
  "rollup": "1.32.0",
21
- "rollup-plugin-babel": "^4.4.0",
22
- "rollup-plugin-buble": "0.19.8",
21
+ "rollup-plugin-babel": "4.4.0",
23
22
  "rollup-plugin-terser": "6.1.0",
24
23
  "rollup-plugin-vue": "5.1.9",
25
24
  "vue": "2.6.10",
@@ -52,5 +51,5 @@
52
51
  "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
53
52
  },
54
53
  "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-toast",
55
- "gitHead": "1a03804c5538fbeb6c65fcf5ada83a65798f42ab"
54
+ "gitHead": "4a6fbd8716221364e5fc2710645a6c5882746929"
56
55
  }
package/src/index.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import Vue from 'vue';
2
2
  import VsToast from './vs-toast.vue';
3
3
 
4
- const variant = ['success', 'warning', 'error'];
4
+ const variant = ['success', 'warning', 'error', 'info', 'secondary'];
5
5
 
6
6
  const defaultOptions = {
7
7
  title: '',
8
8
  message: '',
9
9
  variant: 'success',
10
- timeout: 5000,
10
+ position: 'top-center',
11
11
  type: 'toast',
12
+ timeout: 5000,
12
13
  showClose: true,
13
- position: 'top-center',
14
+ isSticky: false,
14
15
  };
15
16
 
16
17
  let toastCmp = null;
package/src/vs-toast.vue CHANGED
@@ -2,8 +2,8 @@
2
2
  <transition :name="toggleTransition" @after-enter="onEnter" @after-leave="onLeave">
3
3
  <div
4
4
  :class="['vs-toast', classList]"
5
+ role="status"
5
6
  v-if="isOpen"
6
- :aria-hidden="isOpen ? 'false' : 'true'"
7
7
  @mouseover="mouseHover(true)"
8
8
  @mouseleave="mouseHover(false)"
9
9
  >
@@ -23,7 +23,6 @@
23
23
  name: 'VsToast',
24
24
 
25
25
  props: {
26
- // value: {},
27
26
  type: {
28
27
  type: String,
29
28
  default: 'toast',
@@ -41,8 +40,8 @@
41
40
  type: String,
42
41
  },
43
42
  /**
44
- * Toast Variants
45
- * Variants: success, warning, error
43
+ * Toast Variants (same as vs-alert)
44
+ * Variants: success, warning, error, info, secondary
46
45
  */
47
46
  variant: {
48
47
  type: String,
@@ -61,6 +60,10 @@
61
60
  position: {
62
61
  type: String,
63
62
  default: 'top-center',
63
+ validator: value =>
64
+ ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(
65
+ value.toLowerCase(),
66
+ ),
64
67
  },
65
68
  /**
66
69
  * Animation name:
@@ -104,7 +107,7 @@
104
107
  * @returns {String} class
105
108
  */
106
109
  classList() {
107
- return [`vs-toast--${this.variant}`, `vs-toast--${this.position}`];
110
+ return [`vs-toast--${this.position}`];
108
111
  },
109
112
 
110
113
  /**
@@ -160,7 +163,6 @@
160
163
  * Clear timerId and clearTimeout
161
164
  */
162
165
  close() {
163
- console.log('here');
164
166
  if (this.timerId) {
165
167
  clearTimeout(this.timerId);
166
168
  this.timerId = null;
@@ -208,6 +210,7 @@
208
210
  #{$el} {
209
211
  position: fixed;
210
212
  width: 350px;
213
+ max-width: 350px;
211
214
  background-color: #ffffff;
212
215
  z-index: 9999;
213
216
  font-family: inherit;
@@ -223,7 +226,7 @@
223
226
 
224
227
  // Top alignemnts
225
228
  &--top-center {
226
- left: calc(50% - 150px);
229
+ left: calc(50% - 175px);
227
230
  top: 5px;
228
231
  }
229
232
 
@@ -239,7 +242,7 @@
239
242
 
240
243
  // Bottom alignments
241
244
  &--bottom-center {
242
- left: calc(50% - 150px);
245
+ left: calc(50% - 175px);
243
246
  bottom: 5px;
244
247
  }
245
248
 
package/tests/vs-toast.spec.js CHANGED
@@ -8,17 +8,18 @@ describe('VsToast', () => {
8
8
  propsData: {
9
9
  variant: 'success',
10
10
  },
11
- slots: {
12
- default: defaultToastText,
13
- },
14
11
  });
15
- expect(wrapper.find('div').exists()).toBe(true);
16
- expect(wrapper.text()).toMatch(defaultToastText);
17
- const mainWraper = wrapper.find('.vs-toast');
18
- expect(mainWraper.classes()).toContain('vs-toast--success');
19
- expect(mainWraper.classes()).toContain('vs-toast--top-center');
20
- const icon = wrapper.find('.vs-toast-icon');
21
- expect(icon.classes()).toContain('vs-toast-icon');
12
+ expect(wrapper.find('div').exists()).toBe(false);
13
+ wrapper.vm.open();
14
+ setTimeout(() => {
15
+ expect(wrapper.find('div').exists()).toBe(true);
16
+ expect(wrapper.text()).toMatch(defaultToastText);
17
+ const mainWraper = wrapper.find('.vs-toast');
18
+ expect(mainWraper.classes()).toContain('vs-toast--success');
19
+ expect(mainWraper.classes()).toContain('vs-toast--top-center');
20
+ const icon = wrapper.find('.vs-toast-icon');
21
+ expect(icon.classes()).toContain('vs-toast-icon');
22
+ }, 1000);
22
23
  });
23
24
 
24
25
  it('Check toast error', () => {
@@ -29,14 +30,14 @@ describe('VsToast', () => {
29
30
  position: 'top-right',
30
31
  showClose: false,
31
32
  },
32
- slots: {
33
- default: defaultToastText,
34
- },
35
33
  });
36
- expect(wrapper.find('div').exists()).toBe(true);
37
- expect(wrapper.text()).toMatch(defaultToastText);
38
- const mainWraper = wrapper.find('.vs-toast');
39
- expect(mainWraper.classes()).toContain('vs-toast--error');
40
- expect(mainWraper.classes()).toContain('vs-toast--top-right');
34
+ wrapper.vm.open();
35
+ setTimeout(() => {
36
+ expect(wrapper.find('div').exists()).toBe(true);
37
+ expect(wrapper.text()).toMatch(defaultToastText);
38
+ const mainWraper = wrapper.find('.vs-toast');
39
+ expect(mainWraper.classes()).toContain('vs-toast--error');
40
+ expect(mainWraper.classes()).toContain('vs-toast--top-right');
41
+ }, 1000);
41
42
  });
42
43
  });