UNPKG

primevue

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue) [![Actions CI](https://github.com/primefaces/primevue/wo

2 lines (1 loc) 8.83 kB
"use strict";var e=require("primevue/portal"),t=require("primevue/toasteventbus"),s=require("primevue/utils"),n=require("primevue/ripple"),o=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e),r=a(t),l={name:"ToastMessage",emits:["close"],props:{message:null,template:null,closeIcon:null,infoIcon:null,warnIcon:null,errorIcon:null,successIcon: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",{[this.infoIcon]:"info"===this.message.severity,[this.warnIcon]:"warn"===this.message.severity,[this.errorIcon]:"error"===this.message.severity,[this.successIcon]:"success"===this.message.severity}]}},directives:{ripple:a(n).default}};const c={class:"p-toast-message-text"},m={class:"p-toast-summary"},p={class:"p-toast-detail"},u={key:2};l.render=function(e,t,s,n,a,i){const r=o.resolveDirective("ripple");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(i.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[o.createElementVNode("div",{class:o.normalizeClass(["p-toast-message-content",s.message.contentStyleClass])},[s.template?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(s.template),{key:1,message:s.message},null,8,["message"])):(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[o.createElementVNode("span",{class:o.normalizeClass(i.iconClass)},null,2),o.createElementVNode("div",c,[o.createElementVNode("span",m,o.toDisplayString(s.message.summary),1),o.createElementVNode("div",p,o.toDisplayString(s.message.detail),1)])],64)),!1!==s.message.closable?(o.openBlock(),o.createElementBlock("div",u,[o.withDirectives((o.openBlock(),o.createElementBlock("button",{class:"p-toast-icon-close p-link",onClick:t[0]||(t[0]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),type:"button"},[o.createElementVNode("span",{class:o.normalizeClass(["p-toast-icon-close-icon",s.closeIcon])},null,2)])),[[r]])])):o.createCommentVNode("",!0)],2)],2)};var d=0,h={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},closeIcon:{type:String,default:"pi pi-times"},infoIcon:{type:String,default:"pi pi-info-circle"},warnIcon:{type:String,default:"pi pi-exclamation-triangle"},errorIcon:{type:String,default:"pi pi-times"},successIcon:{type:String,default:"pi pi-check"}},data:()=>({messages:[]}),styleElement:null,mounted(){r.default.on("add",this.onAdd),r.default.on("remove-group",this.onRemoveGroup),r.default.on("remove-all-groups",this.onRemoveAllGroups),this.breakpoints&&this.createStyle()},beforeUnmount(){this.destroyStyle(),this.$refs.container&&this.autoZIndex&&s.ZIndexUtils.clear(this.$refs.container),r.default.off("add",this.onAdd),r.default.off("remove-group",this.onRemoveGroup),r.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=[]},onEnter(){this.$refs.container.setAttribute(this.attributeSelector,""),this.autoZIndex&&s.ZIndexUtils.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},onLeave(){this.$refs.container&&this.autoZIndex&&s.ObjectUtils.isEmpty(this.messages)&&setTimeout((()=>{s.ZIndexUtils.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:()=>s.UniqueComponentId()},components:{ToastMessage:l,Portal:i.default}};!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 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 -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n bottom: 20px;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n}\n.p-toast-center {\n left: 50%;\n top: 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 cursor: 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 0.3s, opacity 0.3s;\n -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;\n transition: opacity 0.3s, -webkit-transform 0.3s;\n transition: transform 0.3s, opacity 0.3s;\n transition: transform 0.3s, opacity 0.3s, -webkit-transform 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"),h.render=function(e,t,s,n,a,i){const r=o.resolveComponent("ToastMessage"),l=o.resolveComponent("Portal");return o.openBlock(),o.createBlock(l,null,{default:o.withCtx((()=>[o.createElementVNode("div",o.mergeProps({ref:"container",class:i.containerClass},e.$attrs),[o.createVNode(o.TransitionGroup,{name:"p-toast-message",tag:"div",onEnter:i.onEnter,onLeave:i.onLeave},{default:o.withCtx((()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(a.messages,(n=>(o.openBlock(),o.createBlock(r,{key:n.id,message:n,template:e.$slots.message,closeIcon:s.closeIcon,infoIcon:s.infoIcon,warnIcon:s.warnIcon,errorIcon:s.errorIcon,successIcon:s.successIcon,onClose:t[0]||(t[0]=e=>i.remove(e))},null,8,["message","template","closeIcon","infoIcon","warnIcon","errorIcon","successIcon"])))),128))])),_:1},8,["onEnter","onLeave"])],16)])),_:1})},module.exports=h;