@vuesimple/vs-toast 1.3.41 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/rollup.config.js +0 -2
- package/dist/vs-toast.esm.js +2 -1
- package/dist/vs-toast.min.js +1 -1
- package/dist/vs-toast.umd.js +2 -1
- package/package.json +4 -5
package/build/rollup.config.js
CHANGED
package/dist/vs-toast.esm.js
CHANGED
|
@@ -149,6 +149,7 @@ var script = {
|
|
|
149
149
|
{ 'vs-alert--no-bg': this.noBg },
|
|
150
150
|
{ 'vs-alert--small': this.small },
|
|
151
151
|
{ 'vs-alert--toast': this.toast },
|
|
152
|
+
{ 'vs-alert--is-close': this.showClose },
|
|
152
153
|
];
|
|
153
154
|
},
|
|
154
155
|
},
|
|
@@ -556,7 +557,7 @@ __vue_render__._withStripped = true;
|
|
|
556
557
|
/* style */
|
|
557
558
|
const __vue_inject_styles__ = function (inject) {
|
|
558
559
|
if (!inject) return
|
|
559
|
-
inject("data-v-
|
|
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 });
|
|
560
561
|
|
|
561
562
|
};
|
|
562
563
|
/* scoped */
|
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,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}]}}};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-4f95209e_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 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--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--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);
|
|
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
|
@@ -155,6 +155,7 @@
|
|
|
155
155
|
{ 'vs-alert--no-bg': this.noBg },
|
|
156
156
|
{ 'vs-alert--small': this.small },
|
|
157
157
|
{ 'vs-alert--toast': this.toast },
|
|
158
|
+
{ 'vs-alert--is-close': this.showClose },
|
|
158
159
|
];
|
|
159
160
|
},
|
|
160
161
|
},
|
|
@@ -562,7 +563,7 @@
|
|
|
562
563
|
/* style */
|
|
563
564
|
const __vue_inject_styles__ = function (inject) {
|
|
564
565
|
if (!inject) return
|
|
565
|
-
inject("data-v-
|
|
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 });
|
|
566
567
|
|
|
567
568
|
};
|
|
568
569
|
/* scoped */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuesimple/vs-toast",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.2",
|
|
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.
|
|
19
|
+
"minimist": "1.2.5",
|
|
20
20
|
"rollup": "1.32.0",
|
|
21
|
-
"rollup-plugin-babel": "
|
|
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": "
|
|
54
|
+
"gitHead": "337bc9bb282ad2e0d7aebe8f581eecaf822dd809"
|
|
56
55
|
}
|