primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)
2 lines (1 loc) • 5.62 kB
JavaScript
import t from"primevue/toasteventbus";import e from"primevue/ripple";import{resolveDirective as s,openBlock as n,createBlock as a,createVNode as o,toDisplayString as i,withDirectives as r,createCommentVNode as l,resolveComponent as m,TransitionGroup as p,withCtx as c,Fragment as g,renderList as d}from"vue";import{DomHandler as u}from"primevue/utils";var f={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:e}};const h={class:"p-toast-message-content"},x={class:"p-toast-message-text"},b={class:"p-toast-summary"},v={class:"p-toast-detail"},y=o("span",{class:"p-toast-icon-close-icon pi pi-times"},null,-1);f.render=function(t,e,m,p,c,g){const d=s("ripple");return n(),a("div",{class:g.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},[o("div",h,[o("span",{class:g.iconClass},null,2),o("div",x,[o("span",b,i(m.message.summary),1),o("div",v,i(m.message.detail),1)]),!1!==m.message.closable?r((n(),a("button",{key:0,class:"p-toast-icon-close p-link",onClick:e[1]||(e[1]=(...t)=>g.onCloseClick&&g.onCloseClick(...t)),type:"button"},[y],512)),[[d]]):l("",!0)])],2)};var k=0,w={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(){t.on("add",(t=>{this.group==t.group&&this.add(t)})),t.on("remove-group",(t=>{this.group===t&&(this.messages=[])})),t.on("remove-all-groups",(()=>{this.messages=[]})),this.updateZIndex()},beforeUpdate(){this.updateZIndex()},methods:{add(t){null==t.id&&(t.id=k++),this.messages=[...this.messages,t]},remove(t){let e=-1;for(let s=0;s<this.messages.length;s++)if(this.messages[s]===t){e=s;break}this.messages.splice(e,1)},updateZIndex(){this.autoZIndex&&(this.$refs.container.style.zIndex=String(this.baseZIndex+u.generateZIndex()))}},components:{ToastMessage:f},computed:{containerClass(){return"p-toast p-component p-toast-"+this.position}}};!function(t,e){void 0===e&&(e={});var s=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===s&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}("\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 margin-left: -10em;\n}\n.p-toast-bottom-center {\n\tbottom: 20px;\n\tleft: 50%;\n margin-left: -10em;\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"),w.render=function(t,e,s,i,r,l){const u=m("ToastMessage");return n(),a("div",{ref:"container",class:l.containerClass},[o(p,{name:"p-toast-message",tag:"div"},{default:c((()=>[(n(!0),a(g,null,d(r.messages,(t=>(n(),a(u,{key:t.id,message:t,onClose:e[1]||(e[1]=t=>l.remove(t))},null,8,["message"])))),128))])),_:1})],2)};export default w;