@k90mirzaei/vue-toast/dist/index.js

Vue toast notification with tailwindcss

import{h as e,render as t,openBlock as s,createElementBlock as r,normalizeClass as i,createElementVNode as o,toDisplayString as n}from"vue";class a{constructor(e,t){this.startedAt=Date.now(),this.callback=e,this.delay=t,this.timer=setTimeout(e,t)}pause(){this.stop(),this.delay-=Date.now()-this.startedAt}resume(){this.stop(),this.startedAt=Date.now(),this.timer=setTimeout(this.callback,this.delay)}stop(){clearTimeout(this.timer)}}var u=new class{constructor(){this.queue={}}$on(e,t){this.queue[e]=this.queue[e]||[],this.queue[e].push(t)}$off(e,t){if(this.queue[e])for(var s=0;s<this.queue[e].length;s++)if(this.queue[e][s]===t){this.queue[e].splice(s,1);break}}$emit(e,t){this.queue[e]&&this.queue[e].forEach((function(e){e(t)}))}};const l=()=>"undefined"!=typeof document&&document.createElement("div");var h=e=>{void 0!==e.remove?e.remove():e.parentNode.removeChild(e)},d=(s,{props:r,children:i,element:o,app:n}={})=>{let a=o||l(),u=e(s,r,i);n&&n._context&&(u.appContext=n._context),t(u,a);return{vNode:u,destroy:()=>{a&&t(null,a),a=null,u=null},el:a}},c={name:"toast",props:{message:{type:String,required:!0},type:{type:String,default:"default"},delay:{type:Number,default:4e3},maxToasts:{type:[Number,Boolean],default:5}},data:()=>({parent:null,timer:null,queueTimer:null,transition:"toast-in"}),computed:{animation(){return" animation-"+this.transition},style:()=>"flex self-end overflow-hidden rounded-xl cursor-pointer shadow-xl mb-5 pointer-events-auto",shade(){switch(this.type){case"info":return" bg-blue-500 border-2 border-blue-600 text-white";case"warning":return" bg-orange-600 border-2 border-orange-600 text-white";case"success":return" bg-green-600 border-2 border-green-600 text-white";case"error":return" bg-red-500 border-2 border-red-600 text-white";default:return" bg-gray-50 border-2 border-gray-200"}}},beforeMount(){this.createParent(),this.setupContainer()},mounted(){this.notify(),u.$on("toast-clean",this.close)},methods:{createParent(){this.parent=document.getElementById("_toast_container"),this.parent||(this.parent=document.createElement("div"),this.parent.id="_toast_container",this.parent.className="fixed flex flex-col-reverse w-full h-full inset-0 p-10 z-50 pointer-events-none overflow-hidden")},setupContainer(){document.body.appendChild(this.parent)},shouldNotify(){return console.log(this.parent.childElementCount),!1!==this.maxToasts?this.maxToasts<=this.parent.childElementCount:!this.maxToasts},notify(){this.shouldNotify()?this.queueTimer=setTimeout(this.notify,250):(this.parent.insertAdjacentElement("afterbegin",this.$el),this.timer=new a(this.close,this.delay))},click(){this.close()},toggleTimer(e){this.timer&&(e?this.timer.pause():this.timer.resume())},close(){this.timer&&this.timer.stop(),clearTimeout(this.queueTimer),this.transition="toast-out",setTimeout((()=>{h(this.$el)}),250)}},beforeUnmount(){u.$off("toast-clear",this.close)}};const m={class:"px-4 py-4 flex justify-between items-start text-lg"};c.render=function(e,t,a,u,l,h){return s(),r("div",{class:i(h.style+h.shade+h.animation),onClick:t[0]||(t[0]=(...e)=>h.click&&h.click(...e)),onMouseover:t[1]||(t[1]=e=>h.toggleTimer(!0)),onMouseleave:t[2]||(t[2]=e=>h.toggleTimer(!1)),role:"alert"},[o("div",m,n(a.message),1)],34)},c.__file="src/toast.vue";const p=(e={})=>({show:(t,s={})=>d(c,{props:{...e,...{message:t,...s}}}),success(e,t={}){return t.type="success",this.show(e,t)},error(e,t={}){return t.type="error",this.show(e,t)},info(e,t={}){return t.type="info",this.show(e,t)},warning(e,t={}){return t.type="warning",this.show(e,t)}});c.install=(e,t={})=>{let s=p(t);e.$toast=s,e.config.globalProperties.$toast=s};export{c as default,p as service,c as toast};
//# sourceMappingURL=index.js.map