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) [![Discord Chat](https://img.shields.io/discord/55794023

2 lines (1 loc) 9.54 kB
"use strict";var e=require("primevue/basecomponent"),t=require("primevue/button"),n=require("primevue/confirmationeventbus"),i=require("primevue/focustrap"),o=require("primevue/overlayeventbus"),r=require("primevue/portal"),s=require("primevue/utils"),c=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(e),p=l(t),u=l(n),m=l(i),f=l(o),d=l(r),h={name:"ConfirmPopup",extends:a.default,inheritAttrs:!1,props:{group:String},data:()=>({visible:!1,confirmation:null,autoFocusAccept:null,autoFocusReject:null}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,confirmListener:null,closeListener:null,mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.target=e.target,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},u.default.on("confirm",this.confirmListener),u.default.on("close",this.closeListener)},beforeUnmount(){u.default.off("confirm",this.confirmListener),u.default.off("close",this.closeListener),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.container&&(s.ZIndexUtils.clear(this.container),this.container=null),this.target=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},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1},onAcceptKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.accept(),s.DomHandler.focus(this.target),e.preventDefault())},onRejectKeydown(e){"Space"!==e.code&&"Enter"!==e.code||(this.reject(),s.DomHandler.focus(this.target),e.preventDefault())},onEnter(e){this.autoFocusAccept=void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus,this.autoFocusReject="reject"===this.confirmation.defaultFocus,this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),s.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterEnter(){this.focus()},onLeave(){this.autoFocusAccept=null,this.autoFocusReject=null,this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},onAfterLeave(e){s.ZIndexUtils.clear(e)},alignOverlay(){s.DomHandler.absolutePosition(this.container,this.target);const e=s.DomHandler.getOffset(this.container),t=s.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&s.DomHandler.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.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1):this.alignOverlay()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new s.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!s.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus({preventScroll:!0})},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},containerRef(e){this.container=e},onOverlayClick(e){f.default.emit("overlay-click",{originalEvent:e,target:this.target})},onOverlayKeydown(e){"Escape"===e.code&&(u.default.emit("close",this.closeListener),s.DomHandler.focus(this.target))}},computed:{containerClass(){return["p-confirm-popup p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},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:p.default,Portal:d.default},directives:{focustrap:m.default}};const v=["aria-modal"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.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 top: 0;\n left: 0;\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 transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n opacity: 0;\n}\n.p-confirm-popup-enter-active {\n transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n transition: opacity 0.1s linear;\n}\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n bottom: 100%;\n left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n content: ' ';\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n}\n.p-confirm-popup:after {\n border-width: 8px;\n margin-left: -8px;\n}\n.p-confirm-popup:before {\n border-width: 10px;\n margin-left: -10px;\n}\n.p-confirm-popup-flipped:after,\n.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: flex;\n align-items: center;\n}\n"),h.render=function(e,t,n,i,o,r){const s=c.resolveComponent("CPButton"),l=c.resolveComponent("Portal"),a=c.resolveDirective("focustrap");return c.openBlock(),c.createBlock(l,null,{default:c.withCtx((()=>[c.createVNode(c.Transition,{name:"p-confirm-popup",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:c.withCtx((()=>[o.visible?c.withDirectives((c.openBlock(),c.createElementBlock("div",c.mergeProps({key:0,ref:r.containerRef,role:"alertdialog",class:r.containerClass,"aria-modal":o.visible,onClick:t[2]||(t[2]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e)),onKeydown:t[3]||(t[3]=(...e)=>r.onOverlayKeydown&&r.onOverlayKeydown(...e))},{...e.$attrs,...e.ptm("root")}),[e.$slots.message?(c.openBlock(),c.createBlock(c.resolveDynamicComponent(e.$slots.message),{key:1,message:o.confirmation},null,8,["message"])):(c.openBlock(),c.createElementBlock("div",c.mergeProps({key:0,class:"p-confirm-popup-content"},e.ptm("content")),[c.renderSlot(e.$slots,"icon",{class:"p-confirm-popup-icon"},(()=>[e.$slots.icon?(c.openBlock(),c.createBlock(c.resolveDynamicComponent(e.$slots.icon),{key:0,class:"p-confirm-popup-icon"})):o.confirmation.icon?(c.openBlock(),c.createElementBlock("span",c.mergeProps({key:1,class:r.iconClass},e.ptm("icon")),null,16)):c.createCommentVNode("",!0)])),c.createElementVNode("span",c.mergeProps({class:"p-confirm-popup-message"},e.ptm("message")),c.toDisplayString(o.confirmation.message),17)],16)),c.createElementVNode("div",c.mergeProps({class:"p-confirm-popup-footer"},e.ptm("footer")),[c.createVNode(s,{label:r.rejectLabel,class:c.normalizeClass(r.rejectClass),onClick:t[0]||(t[0]=e=>r.reject()),onKeydown:r.onRejectKeydown,autofocus:o.autoFocusReject,pt:e.ptm("rejectButton")},{icon:c.withCtx((t=>[c.renderSlot(e.$slots,"rejecticon",{},(()=>[c.createElementVNode("span",c.mergeProps({class:[r.rejectIcon,t.class]},e.ptm("rejectButton").icon),null,16)]))])),_:3},8,["label","class","onKeydown","autofocus","pt"]),c.createVNode(s,{label:r.acceptLabel,class:c.normalizeClass(r.acceptClass),onClick:t[1]||(t[1]=e=>r.accept()),onKeydown:r.onAcceptKeydown,autofocus:o.autoFocusAccept,pt:e.ptm("acceptButton")},{icon:c.withCtx((t=>[c.renderSlot(e.$slots,"accepticon",{},(()=>[c.createElementVNode("span",c.mergeProps({class:[r.acceptIcon,t.class]},e.ptm("acceptButton").icon),null,16)]))])),_:3},8,["label","class","onKeydown","autofocus","pt"])],16)],16,v)),[[a]]):c.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:3})},module.exports=h;