primevue/toast/toast.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

import e from"primevue/toasteventbus";import t from"primevue/ripple";import{resolveDirective as s,openBlock as n,createElementBlock as o,normalizeClass as i,createElementVNode as a,Fragment as r,toDisplayString as l,createBlock as m,resolveDynamicComponent as p,withDirectives as c,createCommentVNode as h,resolveComponent as u,Teleport as d,mergeProps as f,createVNode as g,TransitionGroup as y,withCtx as b,renderList as v}from"vue";import{ZIndexUtils as x,ObjectUtils as k,UniqueComponentId as w}from"primevue/utils";var C={name:"ToastMessage",emits:["close"],props:{message:null,template:null},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close()}),this.message.life))},beforeUnmount(){this.clearCloseTimeout()},methods:{close(){this.$emit("close",this.message)},onCloseClick(){this.clearCloseTimeout(),this.close()},clearCloseTimeout(){this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null)}},computed:{containerClass(){return["p-toast-message",this.message.styleClass,{"p-toast-message-info":"info"===this.message.severity,"p-toast-message-warn":"warn"===this.message.severity,"p-toast-message-error":"error"===this.message.severity,"p-toast-message-success":"success"===this.message.severity}]},iconClass(){return["p-toast-message-icon pi",{"pi-info-circle":"info"===this.message.severity,"pi-exclamation-triangle":"warn"===this.message.severity,"pi-times":"error"===this.message.severity,"pi-check":"success"===this.message.severity}]}},directives:{ripple:t}};const T={class:"p-toast-message-text"},E={class:"p-toast-summary"},$={class:"p-toast-detail"},S=[a("span",{class:"p-toast-icon-close-icon pi pi-times"},null,-1)];C.render=function(e,t,u,d,f,g){const y=s("ripple");return n(),o("div",{class:i(g.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[a("div",{class:i(["p-toast-message-content",u.message.contentStyleClass])},[u.template?(n(),m(p(u.template),{key:1,message:u.message},null,8,["message"])):(n(),o(r,{key:0},[a("span",{class:i(g.iconClass)},null,2),a("div",T,[a("span",E,l(u.message.summary),1),a("div",$,l(u.message.detail),1)])],64)),!1!==u.message.closable?c((n(),o("button",{key:2,class:"p-toast-icon-close p-link",onClick:t[0]||(t[0]=(...e)=>g.onCloseClick&&g.onCloseClick(...e)),type:"button"},S)),[[y]]):h("",!0)],2)],2)};var A=0,I={name:"Toast",inheritAttrs:!1,props:{group:{type:String,default:null},position:{type:String,default:"top-right"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},breakpoints:{type:Object,default:null}},data:()=>({messages:[]}),styleElement:null,mounted(){e.on("add",this.onAdd),e.on("remove-group",this.onRemoveGroup),e.on("remove-all-groups",this.onRemoveAllGroups),this.breakpoints&&this.createStyle()},beforeUnmount(){this.destroyStyle(),this.$refs.container&&this.autoZIndex&&x.clear(this.$refs.container),e.off("add",this.onAdd),e.off("remove-group",this.onRemoveGroup),e.off("remove-all-groups",this.onRemoveAllGroups)},methods:{add(e){null==e.id&&(e.id=A++),this.messages=[...this.messages,e]},remove(e){let t=-1;for(let s=0;s<this.messages.length;s++)if(this.messages[s]===e){t=s;break}this.messages.splice(t,1)},onAdd(e){this.group==e.group&&this.add(e)},onRemoveGroup(e){this.group===e&&(this.messages=[])},onRemoveAllGroups(){this.messages=[]},onEnter(){this.$refs.container.setAttribute(this.attributeSelector,""),this.autoZIndex&&x.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},onLeave(){this.$refs.container&&this.autoZIndex&&k.isEmpty(this.messages)&&x.clear(this.$refs.container)},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints){let s="";for(let e in this.breakpoints[t])s+=e+":"+this.breakpoints[t][e]+"!important;";e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-toast[${this.attributeSelector}] {\n                                ${s}\n                            }\n                        }\n                    `}this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)}},components:{ToastMessage:C},computed:{containerClass(){return["p-toast p-component p-toast-"+this.position,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>w()}};!function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-toast-message-text {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-toast-top-right {\n\ttop: 20px;\n\tright: 20px;\n}\n.p-toast-top-left {\n\ttop: 20px;\n\tleft: 20px;\n}\n.p-toast-bottom-left {\n\tbottom: 20px;\n\tleft: 20px;\n}\n.p-toast-bottom-right {\n\tbottom: 20px;\n\tright: 20px;\n}\n.p-toast-top-center {\n\ttop: 20px;\n    left: 50%;\n    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n\tbottom: 20px;\n    left: 50%;\n    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-center {\n\tleft: 50%;\n\ttop: 50%;\n    min-width: 20vw;\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n\tcursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-transform: translateY(50%);\n    transform: translateY(50%);\n}\n.p-toast-message-leave-from {\n    max-height: 1000px;\n}\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin-bottom: 0;\n    overflow: hidden;\n}\n.p-toast-message-enter-active {\n    -webkit-transition: transform .3s, opacity .3s;\n    -webkit-transition: opacity .3s, -webkit-transform .3s;\n    transition: opacity .3s, -webkit-transform .3s;\n    transition: transform .3s, opacity .3s;\n    transition: transform .3s, opacity .3s, -webkit-transform .3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;\n    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;\n}\n"),I.render=function(e,t,s,i,l,p){const c=u("ToastMessage");return n(),m(d,{to:"body"},[a("div",f({ref:"container",class:p.containerClass},e.$attrs),[g(y,{name:"p-toast-message",tag:"div",onEnter:p.onEnter,onLeave:p.onLeave},{default:b((()=>[(n(!0),o(r,null,v(l.messages,(s=>(n(),m(c,{key:s.id,message:s,onClose:t[0]||(t[0]=e=>p.remove(e)),template:e.$slots.message},null,8,["message","template"])))),128))])),_:1},8,["onEnter","onLeave"])],16)])};export{I as default};