primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 6.48 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.toast=function(e,t,s,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e),i={name:"ToastMessage",emits:["close"],props:{message:null},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close()}),this.message.life))},methods:{close(){this.$emit("close",this.message)},onCloseClick(){this.closeTimeout&&clearTimeout(this.closeTimeout),this.close()}},computed:{containerClass(){return["p-toast-message",{"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:o(t).default}};const r={class:"p-toast-message-content"},l={class:"p-toast-message-text"},p={class:"p-toast-summary"},m={class:"p-toast-detail"},c=s.createVNode("span",{class:"p-toast-icon-close-icon pi pi-times"},null,-1);i.render=function(e,t,n,o,a,i){const d=s.resolveDirective("ripple");return s.openBlock(),s.createBlock("div",{class:i.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},[s.createVNode("div",r,[s.createVNode("span",{class:i.iconClass},null,2),s.createVNode("div",l,[s.createVNode("span",p,s.toDisplayString(n.message.summary),1),s.createVNode("div",m,s.toDisplayString(n.message.detail),1)]),!1!==n.message.closable?s.withDirectives((s.openBlock(),s.createBlock("button",{key:0,class:"p-toast-icon-close p-link",onClick:t[1]||(t[1]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),type:"button"},[c],512)),[[d]]):s.createCommentVNode("",!0)])],2)};var d=0,u={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}},data:()=>({messages:[]}),mounted(){a.default.on("add",this.onAdd),a.default.on("remove-group",this.onRemoveGroup),a.default.on("remove-all-groups",this.onRemoveAllGroups),this.autoZIndex&&n.ZIndexUtils.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},beforeUnmount(){this.$refs.container&&this.autoZIndex&&n.ZIndexUtils.clear(this.$refs.container),a.default.off("add",this.onAdd),a.default.off("remove-group",this.onRemoveGroup),a.default.off("remove-all-groups",this.onRemoveAllGroups)},methods:{add(e){null==e.id&&(e.id=d++),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=[]}},components:{ToastMessage:i},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}]}}};return 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"),u.render=function(e,t,n,o,a,i){const r=s.resolveComponent("ToastMessage");return s.openBlock(),s.createBlock(s.Teleport,{to:"body"},[s.createVNode("div",s.mergeProps({ref:"container",class:i.containerClass},e.$attrs),[s.createVNode(s.TransitionGroup,{name:"p-toast-message",tag:"div"},{default:s.withCtx((()=>[(s.openBlock(!0),s.createBlock(s.Fragment,null,s.renderList(a.messages,(e=>(s.openBlock(),s.createBlock(r,{key:e.id,message:e,onClose:t[1]||(t[1]=e=>i.remove(e))},null,8,["message"])))),128))])),_:1})],16)])},u}(primevue.toasteventbus,primevue.ripple,Vue,primevue.utils);