primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 17.8 kB
JavaScript
import e from"primevue/focustrap";import t from"primevue/icons/times";import n from"primevue/icons/windowmaximize";import o from"primevue/icons/windowminimize";import i from"primevue/portal";import a from"primevue/ripple";import{ZIndexUtils as l,DomHandler as r,UniqueComponentId as s}from"primevue/utils";import{computed as d,resolveComponent as c,resolveDirective as p,openBlock as m,createBlock as u,withCtx as f,createElementBlock as g,mergeProps as h,createVNode as b,Transition as y,withDirectives as v,renderSlot as x,normalizeClass as w,toDisplayString as z,createCommentVNode as L,createElementVNode as D,resolveDynamicComponent as k,createTextVNode as B}from"vue";import E from"primevue/basecomponent";import{useStyle as I}from"primevue/usestyle";var C=I("\n.p-dialog-mask.p-component-overlay {\n pointer-events: auto;\n}\n\n.p-dialog {\n max-height: 90%;\n transform: scale(1);\n}\n\n.p-dialog-content {\n overflow-y: auto;\n}\n\n.p-dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n}\n\n.p-dialog-footer {\n flex-shrink: 0;\n}\n\n.p-dialog .p-dialog-header-icons {\n display: flex;\n align-items: center;\n}\n\n.p-dialog .p-dialog-header-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n\n/* Fluid */\n.p-fluid .p-dialog-footer .p-button {\n width: auto;\n}\n\n/* Animation */\n/* Center */\n.p-dialog-enter-active {\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n opacity: 0;\n transform: scale(0.7);\n}\n\n/* Top, Bottom, Left, Right, Top* and Bottom* */\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n margin: 0.75rem;\n transform: translate3d(0px, 0px, 0px);\n}\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n transition: all 0.3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n transform: translate3d(0px, 100%, 0px);\n}\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n transform: translate3d(-100%, 0px, 0px);\n}\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n -webkit-transition: none;\n transition: none;\n transform: none;\n width: 100vw !important;\n height: 100vh !important;\n top: 0px !important;\n left: 0px !important;\n max-height: 100%;\n height: 100%;\n}\n.p-dialog-maximized .p-dialog-content {\n flex-grow: 1;\n}\n\n.p-confirm-dialog .p-dialog-content {\n display: flex;\n align-items: center;\n}\n",{name:"dialog",manual:!0}),S={name:"Dialog",extends:{name:"BaseDialog",extends:E,props:{header:{type:null,default:null},footer:{type:null,default:null},visible:{type:Boolean,default:!1},modal:{type:Boolean,default:null},contentStyle:{type:null,default:null},contentClass:{type:String,default:null},contentProps:{type:null,default:null},rtl:{type:Boolean,default:null},maximizable:{type:Boolean,default:!1},dismissableMask:{type:Boolean,default:!1},closable:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},position:{type:String,default:"center"},breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0},keepInViewport:{type:Boolean,default:!0},minX:{type:Number,default:0},minY:{type:Number,default:0},appendTo:{type:String,default:"body"},closeIcon:{type:String,default:void 0},maximizeIcon:{type:String,default:void 0},minimizeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null},_instance:null},css:{classes:{mask:function(e){var t=e.props,n=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((function(e){return e===t.position}));return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":t.modal},n?"p-dialog-".concat(n):""]},root:function(e){var t=e.props,n=e.instance;return["p-dialog p-component",{"p-dialog-rtl":t.rtl,"p-dialog-maximized":t.maximizable&&n.maximized,"p-input-filled":"filled"===n.$primevue.config.inputStyle,"p-ripple-disabled":!1===n.$primevue.config.ripple}]},header:"p-dialog-header",headerTitle:"p-dialog-title",headerIcons:"p-dialog-header-icons",maximizableButton:"p-dialog-header-icon p-dialog-header-maximize p-link",maximizableIcon:"p-dialog-header-maximize-icon",closeButton:"p-dialog-header-icon p-dialog-header-close p-link",closeButtonIcon:"p-dialog-header-close-icon",content:"p-dialog-content",footer:"p-dialog-footer"},inlineStyles:{mask:function(e){var t=e.position;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===t||"topleft"===t||"bottomleft"===t?"flex-start":"right"===t||"topright"===t||"bottomright"===t?"flex-end":"center",alignItems:"top"===t||"topleft"===t||"topright"===t?"flex-start":"bottom"===t||"bottomleft"===t||"bottomright"===t?"flex-end":"center",pointerEvents:e.modal?"auto":"none"}},root:{display:"flex",flexDirection:"column",pointerEvents:"auto"}},loadStyle:C.load},provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],provide:function(){var e=this;return{dialogRef:d((function(){return e._instance}))}},data:function(){return{containerVisible:this.visible,maximized:!1,focusableMax:null,focusableClose:null}},documentKeydownListener:null,container:null,mask:null,content:null,headerContainer:null,footerContainer:null,maximizableButton:null,closeButton:null,styleElement:null,dragging:null,documentDragListener:null,documentDragEndListener:null,lastPageX:null,lastPageY:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&l.clear(this.mask),this.container=null,this.mask=null},mounted:function(){this.breakpoints&&this.createStyle()},methods:{close:function(){this.$emit("update:visible",!1)},onBeforeEnter:function(e){e.setAttribute(this.attributeSelector,"")},onEnter:function(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&l.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&r.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide"),this.focusableClose=null,this.focusableMax=null},onAfterLeave:function(){this.autoZIndex&&l.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissableMask&&this.modal&&this.mask===e.target&&this.close()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.footer&&e(this.footerContainer);t||(t=this.$slots.header&&e(this.headerContainer))||(t=this.$slots.default&&e(this.content))||(this.maximizable?(this.focusableMax=!0,t=this.maximizableButton):(this.focusableClose=!0,t=this.closeButton)),t&&r.focus(t)},maximize:function(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?r.addClass(document.body,"p-overflow-hidden"):r.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings:function(){(this.modal||this.maximizable&&this.maximized)&&r.addClass(document.body,"p-overflow-hidden")},unbindDocumentState:function(){(this.modal||this.maximizable&&this.maximized)&&r.removeClass(document.body,"p-overflow-hidden")},onKeyDown:function(e){"Escape"===e.code&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},footerContainerRef:function(e){this.footerContainer=e},maximizableRef:function(e){this.maximizableButton=e},closeButtonRef:function(e){this.closeButton=e},createStyle:function(){if(!this.styleElement&&!this.isUnstyled){var e;this.styleElement=document.createElement("style"),this.styleElement.type="text/css",r.setAttribute(this.styleElement,"nonce",null===(e=this.$primevue)||void 0===e||null===(e=e.config)||void 0===e||null===(e=e.csp)||void 0===e?void 0:e.nonce),document.head.appendChild(this.styleElement);var t="";for(var n in this.breakpoints)t+="\n @media screen and (max-width: ".concat(n,") {\n .p-dialog[").concat(this.attributeSelector,"] {\n width: ").concat(this.breakpoints[n]," !important;\n }\n }\n ");this.styleElement.innerHTML=t}},destroyStyle:function(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag:function(e){"headericons"!==e.target.closest("div").getAttribute("data-pc-section")&&this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",!this.isUnstyled&&r.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners:function(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners:function(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener:function(){var e=this;this.documentDragListener=function(t){if(e.dragging){var n=r.getOuterWidth(e.container),o=r.getOuterHeight(e.container),i=t.pageX-e.lastPageX,a=t.pageY-e.lastPageY,l=e.container.getBoundingClientRect(),s=l.left+i,d=l.top+a,c=r.getViewport(),p=getComputedStyle(e.container),m=parseFloat(p.marginLeft),u=parseFloat(p.marginTop);e.container.style.position="fixed",e.keepInViewport?(s>=e.minX&&s+n<c.width&&(e.lastPageX=t.pageX,e.container.style.left=s-m+"px"),d>=e.minY&&d+o<c.height&&(e.lastPageY=t.pageY,e.container.style.top=d-u+"px")):(e.lastPageX=t.pageX,e.container.style.left=s-m+"px",e.lastPageY=t.pageY,e.container.style.top=d-u+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener:function(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener:function(){var e=this;this.documentDragEndListener=function(t){e.dragging&&(e.dragging=!1,!e.isUnstyled&&r.removeClass(document.body,"p-unselectable-text"),e.$emit("dragend",t))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener:function(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maximizeIconComponent:function(){return this.maximized?this.minimizeIcon?"span":"WindowMinimizeIcon":this.maximizeIcon?"span":"WindowMaximizeIcon"},ariaId:function(){return s()},ariaLabelledById:function(){return null!=this.header||null!==this.$attrs["aria-labelledby"]?this.ariaId+"_header":null},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},attributeSelector:function(){return s()},contentStyleClass:function(){return["p-dialog-content",this.contentClass]}},directives:{ripple:a,focustrap:e},components:{Portal:i,WindowMinimizeIcon:o,WindowMaximizeIcon:n,TimesIcon:t}};function P(e){return P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},P(e)}function $(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function O(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?$(Object(n),!0).forEach((function(t){j(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):$(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function j(e,t,n){return(t=R(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function R(e){var t=M(e,"string");return"symbol"===P(t)?t:String(t)}function M(e,t){if("object"!==P(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==P(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var T=["aria-labelledby","aria-modal"],K=["id"],A=["autofocus","tabindex"],X=["autofocus","aria-label"];S.render=function(e,t,n,o,i,a){var l=c("Portal"),r=p("ripple"),s=p("focustrap");return m(),u(l,{appendTo:e.appendTo},{default:f((function(){return[i.containerVisible?(m(),g("div",h({key:0,ref:a.maskRef,class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position,modal:e.modal}),onClick:t[3]||(t[3]=function(){return a.onMaskClick&&a.onMaskClick.apply(a,arguments)})},e.ptm("mask")),[b(y,h({name:"p-dialog",onBeforeEnter:a.onBeforeEnter,onEnter:a.onEnter,onBeforeLeave:a.onBeforeLeave,onLeave:a.onLeave,onAfterLeave:a.onAfterLeave,appear:""},e.ptm("transition")),{default:f((function(){return[e.visible?v((m(),g("div",h({key:0,ref:a.containerRef,class:e.cx("root"),style:e.sx("root"),role:"dialog","aria-labelledby":a.ariaLabelledById,"aria-modal":e.modal},O(O({},e.$attrs),e.ptm("root"))),[e.showHeader?(m(),g("div",h({key:0,ref:a.headerContainerRef,class:e.cx("header"),onMousedown:t[2]||(t[2]=function(){return a.initDrag&&a.initDrag.apply(a,arguments)})},e.ptm("header")),[x(e.$slots,"header",{class:w(e.cx("headerTitle"))},(function(){return[e.header?(m(),g("span",h({key:0,id:a.ariaLabelledById,class:e.cx("headerTitle")},e.ptm("headerTitle")),z(e.header),17,K)):L("",!0)]})),D("div",h({class:e.cx("headerIcons")},e.ptm("headerIcons")),[e.maximizable?v((m(),g("button",h({key:0,ref:a.maximizableRef,autofocus:i.focusableMax,class:e.cx("maximizableButton"),onClick:t[0]||(t[0]=function(){return a.maximize&&a.maximize.apply(a,arguments)}),type:"button",tabindex:e.maximizable?"0":"-1"},e.ptm("maximizableButton"),{"data-pc-group-section":"headericon"}),[x(e.$slots,"maximizeicon",{maximized:i.maximized,class:w(e.cx("maximizableIcon"))},(function(){return[(m(),u(k(a.maximizeIconComponent),h({class:[e.cx("maximizableIcon"),i.maximized?e.minimizeIcon:e.maximizeIcon]},e.ptm("maximizableIcon")),null,16,["class"]))]}))],16,A)),[[r]]):L("",!0),e.closable?v((m(),g("button",h({key:1,ref:a.closeButtonRef,autofocus:i.focusableClose,class:e.cx("closeButton"),onClick:t[1]||(t[1]=function(){return a.close&&a.close.apply(a,arguments)}),"aria-label":a.closeAriaLabel,type:"button"},O(O({},e.closeButtonProps),e.ptm("closeButton")),{"data-pc-group-section":"headericon"}),[x(e.$slots,"closeicon",{class:w(e.cx("closeButtonIcon"))},(function(){return[(m(),u(k(e.closeIcon?"span":"TimesIcon"),h({class:[e.cx("closeButtonIcon"),e.closeIcon]},e.ptm("closeButtonIcon")),null,16,["class"]))]}))],16,X)),[[r]]):L("",!0)],16)],16)):L("",!0),D("div",h({ref:a.contentRef,class:[e.cx("content"),e.contentClass],style:e.contentStyle},O(O({},e.contentProps),e.ptm("content"))),[x(e.$slots,"default")],16),e.footer||e.$slots.footer?(m(),g("div",h({key:1,ref:a.footerContainerRef,class:e.cx("footer")},e.ptm("footer")),[x(e.$slots,"footer",{},(function(){return[B(z(e.footer),1)]}))],16)):L("",!0)],16,T)),[[s,{disabled:!e.modal}]]):L("",!0)]})),_:3},16,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):L("",!0)]})),_:3},8,["appendTo"])};export{S as default};