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/basecomponent";import t from"primevue/portal";import s from"primevue/toasteventbus";import{ZIndexUtils as o,ObjectUtils as n,UniqueComponentId as i}from"primevue/utils";import a from"primevue/icons/check";import r from"primevue/icons/exclamationtriangle";import l from"primevue/icons/infocircle";import m from"primevue/icons/times";import c from"primevue/icons/timescircle";import p from"primevue/ripple";import{resolveDirective as u,openBlock as d,createElementBlock as h,mergeProps as f,createElementVNode as g,Fragment as y,createBlock as v,resolveDynamicComponent as I,toDisplayString as b,normalizeProps as x,withDirectives as C,createCommentVNode as S,resolveComponent as T,withCtx as k,createVNode as w,TransitionGroup as E,renderList as $}from"vue";var A={name:"ToastMessage",extends:e,emits:["close"],props:{message:{type:null,default:null},templates:{type:Object,default:null},closeIcon:{type:String,default:null},infoIcon:{type:String,default:null},warnIcon:{type:String,default:null},errorIcon:{type:String,default:null},successIcon:{type:String,default:null},closeButtonProps:{type:null,default:null}},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close({message:this.message,type:"life-end"})}),this.message.life))},beforeUnmount(){this.clearCloseTimeout()},methods:{close(e){this.$emit("close",e)},onCloseClick(){this.clearCloseTimeout(),this.close({message:this.message,type:"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}]},iconComponent(){return{info:!this.infoIcon&&l,success:!this.successIcon&&a,warn:!this.warnIcon&&r,error:!this.errorIcon&&c}[this.message.severity]},iconClass(){return[{[this.infoIcon]:"info"===this.message.severity,[this.warnIcon]:"warn"===this.message.severity,[this.errorIcon]:"error"===this.message.severity,[this.successIcon]:"success"===this.message.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{TimesIcon:m,InfoCircleIcon:l,CheckIcon:a,ExclamationTriangleIcon:r,TimesCircleIcon:c},directives:{ripple:p}};const B=["aria-label"];A.render=function(e,t,s,o,n,i){const a=u("ripple");return d(),h("div",f({class:i.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},e.ptm("container")),[g("div",f({class:["p-toast-message-content",s.message.contentStyleClass]},e.ptm("content")),[s.templates.message?(d(),v(I(s.templates.message),{key:1,message:s.message},null,8,["message"])):(d(),h(y,{key:0},[(d(),v(I(s.templates.icon?s.templates.icon:i.iconComponent.name?i.iconComponent:"span"),f({class:[i.iconClass,"p-toast-message-icon"]},e.ptm("icon")),null,16,["class"])),g("div",f({class:"p-toast-message-text"},e.ptm("text")),[g("span",f({class:"p-toast-summary"},e.ptm("summary")),b(s.message.summary),17),g("div",f({class:"p-toast-detail"},e.ptm("detail")),b(s.message.detail),17)],16)],64)),!1!==s.message.closable?(d(),h("div",x(f({key:2},e.ptm("buttonContainer"))),[C((d(),h("button",f({class:"p-toast-icon-close p-link",type:"button","aria-label":i.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),autofocus:""},{...s.closeButtonProps,...e.ptm("button")}),[(d(),v(I(s.templates.closeicon||"TimesIcon"),f({class:["p-toast-icon-close-icon",s.closeIcon]},e.ptm("buttonIcon")),null,16,["class"]))],16,B)),[[a]])],16)):S("",!0)],16)],16)};var P=0,L={name:"Toast",extends:e,inheritAttrs:!1,emits:["close","life-end"],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},closeIcon:{type:String,default:void 0},infoIcon:{type:String,default:void 0},warnIcon:{type:String,default:void 0},errorIcon:{type:String,default:void 0},successIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},data:()=>({messages:[]}),styleElement:null,mounted(){s.on("add",this.onAdd),s.on("remove-group",this.onRemoveGroup),s.on("remove-all-groups",this.onRemoveAllGroups),this.breakpoints&&this.createStyle()},beforeUnmount(){this.destroyStyle(),this.$refs.container&&this.autoZIndex&&o.clear(this.$refs.container),s.off("add",this.onAdd),s.off("remove-group",this.onRemoveGroup),s.off("remove-all-groups",this.onRemoveAllGroups)},methods:{add(e){null==e.id&&(e.id=P++),this.messages=[...this.messages,e]},remove(e){let t=-1;for(let s=0;s<this.messages.length;s++)if(this.messages[s]===e.message){t=s;break}this.messages.splice(t,1),this.$emit(e.type,{message:e.message})},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&&o.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},onLeave(){this.$refs.container&&this.autoZIndex&&n.isEmpty(this.messages)&&setTimeout((()=>{o.clear(this.$refs.container)}),200)},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)}},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:()=>i()},components:{ToastMessage:A,Portal:t}};!function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===s&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: flex;\n    align-items: flex-start;\n}\n.p-toast-message-text {\n    flex: 1 1 auto;\n}\n.p-toast-top-right {\n    top: 20px;\n    right: 20px;\n}\n.p-toast-top-left {\n    top: 20px;\n    left: 20px;\n}\n.p-toast-bottom-left {\n    bottom: 20px;\n    left: 20px;\n}\n.p-toast-bottom-right {\n    bottom: 20px;\n    right: 20px;\n}\n.p-toast-top-center {\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-center {\n    left: 50%;\n    top: 50%;\n    min-width: 20vw;\n    transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n    cursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-transform: translateY(50%);\n    -ms-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 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n}\n"),L.render=function(e,t,s,o,n,i){const a=T("ToastMessage"),r=T("Portal");return d(),v(r,null,{default:k((()=>[g("div",f({ref:"container",class:i.containerClass},{...e.$attrs,...e.ptm("root")}),[w(E,f({name:"p-toast-message",tag:"div",onEnter:i.onEnter,onLeave:i.onLeave},e.ptm("message")),{default:k((()=>[(d(!0),h(y,null,$(n.messages,(o=>(d(),v(a,{key:o.id,message:o,templates:e.$slots,closeIcon:s.closeIcon,infoIcon:s.infoIcon,warnIcon:s.warnIcon,errorIcon:s.errorIcon,successIcon:s.successIcon,closeButtonProps:s.closeButtonProps,onClose:t[0]||(t[0]=e=>i.remove(e)),pt:e.pt},null,8,["message","templates","closeIcon","infoIcon","warnIcon","errorIcon","successIcon","closeButtonProps","pt"])))),128))])),_:1},16,["onEnter","onLeave"])],16)])),_:1})};export{L as default};