vue3-notification
Version:
Based on [vue-snotify](https://github.com/artemsky/vue-snotify) for Vue 2.
3 lines (2 loc) • 13.2 kB
JavaScript
import './style.css';
var t,i,o=Object.defineProperty,e=Object.defineProperties,n=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,c=(t,i,e)=>i in t?o(t,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[i]=e,l=(t,i,o)=>(c(t,"symbol"!=typeof i?i+"":i,o),o);import{defineComponent as h,openBlock as f,createElementBlock as u,normalizeClass as d,createElementVNode as m,toDisplayString as p,Fragment as g,renderList as y,withModifiers as v,resolveComponent as b,normalizeStyle as k,createCommentVNode as _,createBlock as T}from"vue";(i=t||(t={})).leftTop="leftTop",i.leftCenter="leftCenter",i.leftBottom="leftBottom",i.rightTop="rightTop",i.rightCenter="rightCenter",i.rightBottom="rightBottom",i.centerTop="centerTop",i.centerCenter="centerCenter",i.centerBottom="centerBottom";const w="simple",O="success",C="error",x="warning",E="info",S="async",B="confirm",P="prompt";var M=(t,i)=>{for(const[o,e]of i)t[o]=e;return t};const z=h({props:["toast"],data:()=>({isPromptFocused:!1}),methods:{valueChanged(t){this.toast.value=t.target.value,this.toast.eventEmitter.emit("input")}}}),F=["id"],$=["for"],D={class:"snotifyToast__input__labelContent"};var H=M(z,[["render",function(t,i,o,e,n,s){return f(),u("span",{class:d(["snotifyToast__input",{"snotifyToast__input--filled":t.isPromptFocused}])},[m("input",{onInput:i[0]||(i[0]=(...i)=>t.valueChanged&&t.valueChanged(...i)),class:"snotifyToast__input__field",type:"text",id:t.toast.id,onFocus:i[1]||(i[1]=i=>t.isPromptFocused=!0),onBlur:i[2]||(i[2]=i=>t.isPromptFocused=!!t.toast.value.length)},null,40,F),m("label",{class:"snotifyToast__input__label",for:t.toast.id},[m("span",D,p(t.toast.config.placeholder),1)],8,$)],2)}]]);const A=h({props:["toast"],methods:{remove(){this.$snotify.remove(this.toast.id)}}}),L={class:"snotifyToast__buttons"},j=["onClick"];const I=h({components:{SnotifyPrompt:H,SnotifyButton:M(A,[["render",function(t,i,o,e,n,s){return f(),u("div",L,[(f(!0),u(g,null,y(t.toast.config.buttons,((i,o)=>(f(),u("button",{type:"button",key:o,class:d([{"snotifyToast__buttons--bold":i.bold},i.className]),onClick:v((o=>i.action?i.action(t.toast):t.remove()),["prevent","stop"])},p(i.text),11,j)))),128))])}]])},props:["toastData"],emits:["stateChanged"],data(){return{toast:this.toastData,animationFrame:0,state:{paused:!1,progress:0,animation:"",isDestroying:!1,promptType:P}}},computed:{toastTitle(){const t=this.toast.title;return t.length>this.toast.config.titleMaxLength?t.slice(0,this.toast.config.titleMaxLength):t},toastBody(){const t=this.toast.body;return t.length>this.toast.config.bodyMaxLength?t.slice(0,this.toast.config.bodyMaxLength):t}},methods:{initToast(){this.toast.config.timeout>0&&this.startTimeout(0)},onClick(){this.toast.eventEmitter.emit("click"),this.toast.config.closeOnClick&&this.$snotify.remove(this.toast.id)},onMouseEnter(){this.toast.eventEmitter.emit("mouseenter"),this.toast.config.pauseOnHover&&(this.state.paused=!0)},onMouseLeave(){this.toast.config.pauseOnHover&&this.toast.config.timeout&&(this.state.paused=!1,this.startTimeout(this.toast.config.timeout*this.state.progress)),this.toast.eventEmitter.emit("mouseleave")},onExitTransitionEnd(){this.state.isDestroying||(this.initToast(),this.toast.eventEmitter.emit("shown"))},startTimeout(t=0){const i=performance.now(),o=()=>{this.animationFrame=requestAnimationFrame((e=>{const n=e+t-i,s=Math.min(n/this.toast.config.timeout,1);this.state.paused?cancelAnimationFrame(this.animationFrame):n<this.toast.config.timeout?(this.state.progress=s,o()):(this.state.progress=1,cancelAnimationFrame(this.animationFrame),this.$snotify.emitter.emit("remove",this.toast.id))}))};o()},onRemove(){this.state.isDestroying=!0,this.$emit("stateChanged","beforeHide"),this.toast.eventEmitter.emit("beforeHide"),this.state.animation=this.toast.config.animation.exit,setTimeout((()=>{this.$emit("stateChanged","hidden"),this.state.animation="snotifyToast--out",this.toast.eventEmitter.emit("hidden"),setTimeout((()=>this.$snotify.remove(this.toast.id,!0)),this.toast.config.animation.time/2)}),this.toast.config.animation.time/2)}},created(){this.$snotify.emitter.on("remove",(t=>{this.toast.id===t&&this.onRemove()}))},mounted(){this.$nextTick((()=>{this.toast.eventEmitter.emit("mounted"),this.state.animation="snotifyToast--in",this.$nextTick((()=>{setTimeout((()=>{this.$emit("stateChanged","beforeShow"),this.toast.eventEmitter.emit("beforeShow"),this.state.animation=this.toast.config.animation.enter}),this.toast.config.animation.time/5)}))}))},unmounted(){cancelAnimationFrame(this.animationFrame),this.toast.eventEmitter.emit("destroyed")}}),N={key:0,class:"snotifyToast__progressBar"},R={key:0,class:"snotifyToast__title"},q={key:1,class:"snotifyToast__body"},G={key:4},J=["src"],K=["innerHTML"];var Q=M(h({components:{Toast:M(I,[["render",function(t,i,o,e,n,s){const a=b("snotify-prompt"),r=b("snotify-button");return f(),u("div",{class:d(["snotifyToast animated",["snotify-"+t.toast.config.type,t.state.animation,void 0===t.toast.valid?"":t.toast.valid?"snotifyToast--valid":"snotifyToast--invalid"]]),style:k({"-webkit-animation-duration":t.toast.config.animation.time+"ms","animation-duration":t.toast.config.animation.time+"ms","-webkit-transition":t.toast.config.animation.time+"ms",transition:t.toast.config.animation.time+"ms"}),onClick:i[0]||(i[0]=(...i)=>t.onClick&&t.onClick(...i)),onMouseenter:i[1]||(i[1]=(...i)=>t.onMouseEnter&&t.onMouseEnter(...i)),onMouseleave:i[2]||(i[2]=(...i)=>t.onMouseLeave&&t.onMouseLeave(...i)),onAnimationend:i[3]||(i[3]=(...i)=>t.onExitTransitionEnd&&t.onExitTransitionEnd(...i))},[t.toast.config.showProgressBar&&t.toast.config.timeout>0?(f(),u("div",N,[m("span",{class:"snotifyToast__progressBar__percentage",style:k({width:100*t.state.progress+"%"})},null,4)])):_("",!0),t.toast.config.html?(f(),u("div",{key:2,class:"snotifyToast__inner",innerHTML:t.toast.config.html},null,8,K)):(f(),u("div",{key:1,class:d(["snotifyToast__inner",{snotifyToast__noIcon:!1===t.toast.config.icon}])},[t.toast.title?(f(),u("div",R,p(t.toastTitle),1)):_("",!0),t.toast.body?(f(),u("div",q,p(t.toastBody),1)):_("",!0),t.toast.config.type===t.state.promptType?(f(),T(a,{key:2,toast:t.toast},null,8,["toast"])):_("",!0),void 0===t.toast.config.icon?(f(),u("div",{key:3,class:d(["snotify-icon","snotify-icon--"+t.toast.config.type])},null,2)):!1!==t.toast.config.icon?(f(),u("div",G,[m("img",{class:"snotify-icon",src:t.toast.config.icon},null,8,J)])):_("",!0)],2)),t.toast.config.buttons?(f(),T(r,{key:3,toast:t.toast},null,8,["toast"])):_("",!0)],38)}]])},data:()=>({notifications:{left_top:[],left_center:[],left_bottom:[],right_top:[],right_center:[],right_bottom:[],center_top:[],center_center:[],center_bottom:[]},dockSize_a:0,dockSize_b:0,blockSize_a:0,blockSize_b:0,backdrop:-1,withBackdrop:[]}),methods:{getNotificationsForPos(t){return this.notifications[t].slice(this.blockSize_a,this.blockSize_b)},setOptions(t){var i,o;if(this.$snotify.config.global){const e=null==(i=this.$snotify.config.global)?void 0:i.maxOnScreen,n=null==(o=this.$snotify.config.global)?void 0:o.maxAtPosition;this.$snotify.config.global.newOnTop?(e&&(this.dockSize_a=-e),this.dockSize_b=void 0,n&&(this.blockSize_a=-n),this.blockSize_b=void 0,this.withBackdrop=t.filter((t=>t.config.backdrop>=0))):(this.dockSize_a=0,e&&(this.dockSize_b=e),this.blockSize_a=0,n&&(this.blockSize_b=n),this.withBackdrop=t.filter((t=>t.config.backdrop>=0)).reverse())}this.notifications=this.splitToasts(t.slice(this.dockSize_a,this.dockSize_b)),this.stateChanged("mounted")},stateChanged(t){if(this.withBackdrop.length)switch(t){case"mounted":this.backdrop<0&&(this.backdrop=0);break;case"beforeShow":const t=this.withBackdrop[this.withBackdrop.length-1].config.backdrop;t&&(this.backdrop=t);break;case"beforeHide":1===this.withBackdrop.length&&(this.backdrop=0);break;case"hidden":1===this.withBackdrop.length&&(this.backdrop=-1)}else this.backdrop>=0&&(this.backdrop=-1)},splitToasts(i){const o={};for(const e in t)t.hasOwnProperty(e)&&(o[t[e]]=[]);return i.forEach((t=>{o[t.config.position].push(t)})),o}},created(){this.$snotify.emitter.on("snotify",(t=>{this.setOptions(t)}))}}),[["render",function(t,i,o,e,n,s){const a=b("toast");return f(),u("div",null,[t.backdrop>=0?(f(),u("div",{key:0,class:"snotify-backdrop",style:k({opacity:t.backdrop})},null,4)):_("",!0),(f(!0),u(g,null,y(t.notifications,((i,o)=>(f(),u("div",{class:d(["snotify","snotify-"+o]),key:o},[(f(!0),u(g,null,y(t.getNotificationsForPos(o),(i=>(f(),T(a,{toastData:i,key:i.id,onStateChanged:t.stateChanged},null,8,["toastData","onStateChanged"])))),128))],2)))),128))])}]]);function U(t){return{all:t=t||new Map,on:function(i,o){var e=t.get(i);e?e.push(o):t.set(i,[o])},off:function(i,o){var e=t.get(i);e&&(o?e.splice(e.indexOf(o)>>>0,1):t.set(i,[]))},emit:function(i,o){var e=t.get(i);e&&e.slice().map((function(t){t(o)})),(e=t.get("*"))&&e.slice().map((function(t){t(i,o)}))}}}class V{constructor(t,i,o,e){l(this,"eventEmitter",U()),l(this,"_eventsHolder",[]),l(this,"value",""),l(this,"valid"),this.id=t,this.title=i,this.body=o,this.config=e,this.config.type===P&&(this.value=""),this.on("hidden",(()=>{this._eventsHolder.forEach((t=>{this.eventEmitter.off(t.event,t.action)}))}))}on(t,i){return this._eventsHolder.push({event:t,action:i}),this.eventEmitter.on(t,(()=>i(this))),this}}const W={global:{newOnTop:!0,maxOnScreen:8,maxAtPosition:8,oneAtTime:!1,preventDuplicates:!1},toast:{timeout:2e3,showProgressBar:!0,type:w,closeOnClick:!0,pauseOnHover:!0,titleMaxLength:16,bodyMaxLength:150,backdrop:-1,icon:void 0,animation:{enter:"fadeIn",exit:"fadeOut",time:400},html:void 0,position:t.rightBottom},type:{[P]:{timeout:0,closeOnClick:!1,buttons:[{text:"Ok",bold:!0},{text:"Cancel",bold:!1}],placeholder:"Enter answer here...",type:P},[B]:{timeout:0,closeOnClick:!1,buttons:[{text:"Ok",bold:!0},{text:"Cancel",bold:!1}],type:B},[w]:{type:w},[O]:{type:O},[C]:{type:C},[x]:{type:x},[E]:{type:E},[S]:{pauseOnHover:!1,closeOnClick:!1,timeout:0,showProgressBar:!1,type:S}}};function X(t){return t&&"object"==typeof t&&!Array.isArray(t)&&null!==t}function Y(...t){const i={};if(!t.length)return i;for(;t.length>0;){const o=t.shift();if(X(o))for(const t in o)X(o[t])?i[t]=Y(i[t],o[t]):Object.assign(i,{[t]:o[t]})}return i}function Z(t,i,o){return{value:function(...t){var l;return t[0].config=(l=((t,i)=>{for(var o in i||(i={}))a.call(i,o)&&c(t,o,i[o]);if(s)for(var o of s(i))r.call(i,o)&&c(t,o,i[o]);return t})({},t[0].config),e(l,n({type:i}))),o.value.apply(this,t)}}}function tt(t,i,o){return i===S?{value:function(...t){let i;return i=2===t.length?{title:null,body:t[0],config:null,action:t[1]}:3===t.length?"string"==typeof t[1]?{title:t[1],body:t[0],config:null,action:t[2]}:{title:null,body:t[0],config:t[2],action:t[1]}:{title:t[1],body:t[0],config:t[3],action:t[2]},o.value.apply(this,[i])}}:{value:function(...t){let i;return i=1===t.length?{title:null,body:t[0],config:null}:3===t.length?{title:t[1],body:t[0],config:t[2]}:{title:null,config:null,body:t[0],["string"==typeof t[1]?"title":"config"]:t[1]},o.value.apply(this,[i])}}}var it=Object.defineProperty,ot=Object.getOwnPropertyDescriptor,et=(t,i,o,e)=>{for(var n,s=e>1?void 0:e?ot(i,o):i,a=t.length-1;a>=0;a--)(n=t[a])&&(s=(e?n(i,o,s):n(s))||s);return e&&s&&it(i,o,s),s};class nt{constructor(){l(this,"emitter",U()),l(this,"notifications",[]),l(this,"config",W)}emit(){this.emitter.emit("snotify",this.notifications.slice())}get(t){return this.notifications.find((i=>i.id===t))}add(t){var i;(null==(i=this.config.global)?void 0:i.newOnTop)?this.notifications.unshift(t):this.notifications.push(t),this.emit()}remove(t,i){return t?i?(this.notifications=this.notifications.filter((i=>i.id!==t)),this.emit()):void this.emitter.emit("remove",t):this.clear()}clear(){this.notifications=[],this.emit()}button(t,i=!0,o,e=!1){return{text:t,action:i?t=>{o&&o(t),this.remove(t.id)}:o,bold:e}}create(t){var i,o,e,n,s;if((null==(o=null==(i=this.config)?void 0:i.global)?void 0:o.oneAtTime)&&0!==this.notifications.length)return;if((null==(n=null==(e=this.config)?void 0:e.global)?void 0:n.preventDuplicates)&&1===this.notifications.filter((i=>{var o;return i.config.type===(null==(o=null==t?void 0:t.config)?void 0:o.type)})).length)return;const a=Y(this.config.toast,this.config.type?[null==(s=t.config)?void 0:s.type]:null,t.config),r=new V(a.id?a.id:Math.floor(Math.random()*(Date.now()-1))+1,t.title?t.title:"",t.body?t.body:"",a);return this.add(r),r}setDefaults(t){return this.config=Y(this.config,t)}simple(t){return this.create(t)}success(t){return this.create(t)}error(t){return this.create(t)}info(t){return this.create(t)}warning(t){return this.create(t)}confirm(t){return this.create(t)}prompt(t){return this.create(t)}}et([tt,Z],nt.prototype,"simple",1),et([tt,Z],nt.prototype,"success",1),et([tt,Z],nt.prototype,"error",1),et([tt,Z],nt.prototype,"info",1),et([tt,Z],nt.prototype,"warning",1),et([tt,Z],nt.prototype,"confirm",1),et([tt,Z],nt.prototype,"prompt",1);var st={install:(t,i={})=>{const o=new nt;o.setDefaults(i),t.config.globalProperties.$snotify=o,t.component("vue3-notify",Q),t.provide("vue3-notify",o)}};export{st as default};