primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)
2 lines (1 loc) • 6.73 kB
JavaScript
import e from"primevue/confirmationeventbus";import{DomHandler as t,ConnectedOverlayScrollHandler as i}from"primevue/utils";import n from"primevue/button";import{resolveComponent as o,openBlock as r,createBlock as s,Transition as c,withCtx as l,createVNode as a,toDisplayString as p,createCommentVNode as u}from"vue";var f={props:{group:String},data:()=>({visible:!1,confirmation:null}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,mounted(){e.on("confirm",(e=>{e&&e.group===this.group&&(this.confirmation=e,this.target=e.target,this.visible=!0)})),e.on("close",(()=>{this.visible=!1,this.confirmation=null}))},beforeUnmount(){e.off("confirm"),e.off("close"),this.restoreAppend(),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.target=null,this.container=null,this.confirmation=null},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onEnter(){this.appendContainer(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.container.style.zIndex=String(this.baseZIndex+t.generateZIndex())},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},alignOverlay(){t.absolutePosition(this.container,this.target);const e=t.getOffset(this.container),i=t.getOffset(this.target);let n=0;e.left<i.left&&(n=i.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<i.top&&t.addClass(this.container,"p-confirm-popup-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.visible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)&&(this.visible=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(){return this.target&&(this.target===event.target||this.target.contains(event.target))},appendContainer(){document.body.appendChild(this.container)},restoreAppend(){this.container&&document.body.removeChild(this.container)},containerRef(e){this.container=e}},computed:{message(){return this.confirmation?this.confirmation.message:null},iconClass(){return["p-confirm-popup-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-popup-accept p-button-sm",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-popup-reject p-button-sm",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]}},components:{CPButton:n}};const m={class:"p-confirm-popup-content"},d={class:"p-confirm-popup-message"},h={class:"p-confirm-popup-footer"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('\n.p-confirm-popup {\n position: absolute;\n margin-top: 10px;\n}\n.p-confirm-popup-flipped {\n margin-top: 0;\n margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n opacity: 0;\n -webkit-transform: scaleY(0.8);\n transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n opacity: 0;\n}\n.p-confirm-popup-enter-active {\n -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n -webkit-transition: opacity .1s linear;\n transition: opacity .1s linear;\n}\n.p-confirm-popup:after, .p-confirm-popup:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-confirm-popup:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-confirm-popup:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {\n bottom: auto;\n top: 100%;\n}\n.p-confirm-popup.p-confirm-popup-flipped:after {\n border-bottom-color: transparent;\n}\n.p-confirm-popup.p-confirm-popup-flipped:before {\n border-bottom-color: transparent\n}\n.p-confirm-popup .p-confirm-popup-content {\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}\n'),f.render=function(e,t,i,n,f,b){const v=o("CPButton");return r(),s(c,{name:"p-confirm-popup",onEnter:b.onEnter,onLeave:b.onLeave},{default:l((()=>[f.visible?(r(),s("div",{key:0,class:"p-confirm-popup p-component",ref:b.containerRef},[a("div",m,[a("i",{class:b.iconClass},null,2),a("span",d,p(f.confirmation.message),1)]),a("div",h,[a(v,{label:b.rejectLabel,icon:b.rejectIcon,class:b.rejectClass,onClick:t[1]||(t[1]=e=>b.reject())},null,8,["label","icon","class"]),a(v,{label:b.acceptLabel,icon:b.acceptIcon,class:b.acceptClass,onClick:t[2]||(t[2]=e=>b.accept()),autofocus:""},null,8,["label","icon","class"])])],512)):u("",!0)])),_:1},8,["onEnter","onLeave"])};export default f;