primevue 3.27.0 → 3.28.0

package/dialog/dialog.esm.min.js

@@ -1 +1 @@
-import e from"primevue/focustrap";import t from"primevue/icons/times";import n from"primevue/icons/windowmaximize";import i from"primevue/icons/windowminimize";import o from"primevue/portal";import a from"primevue/ripple";import{ZIndexUtils as l,DomHandler as s,UniqueComponentId as d}from"primevue/utils";import{computed as r,resolveComponent as m,resolveDirective as p,openBlock as c,createBlock as g,withCtx as u,createElementBlock as h,normalizeClass as f,createVNode as b,Transition as y,withDirectives as v,mergeProps as x,renderSlot as L,toDisplayString as w,createCommentVNode as z,createElementVNode as C,resolveDynamicComponent as k,createTextVNode as D}from"vue";var E={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],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},provide(){return{dialogRef:r((()=>this._instance))}},data(){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(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&l.clear(this.mask),this.container=null,this.mask=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(e){e.setAttribute(this.attributeSelector,"")},onEnter(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&l.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&s.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide"),this.focusableClose=null,this.focusableMax=null},onAfterLeave(){this.autoZIndex&&l.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.modal&&this.mask===e.target&&this.close()},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.footer&&e(this.footerContainer);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=this.$slots.default&&e(this.content),t||(this.maximizable?(this.focusableMax=!0,t=this.maximizableButton):(this.focusableClose=!0,t=this.closeButton)))),t&&s.focus(t)},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?s.addClass(document.body,"p-overflow-hidden"):s.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&s.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&s.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){"Escape"===e.code&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},footerContainerRef(e){this.footerContainer=e},maximizableRef(e){this.maximizableButton=e},closeButtonRef(e){this.closeButton=e},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)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){s.hasClass(e.target,"p-dialog-header-icon")||s.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",s.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let t=s.getOuterWidth(this.container),n=s.getOuterHeight(this.container),i=e.pageX-this.lastPageX,o=e.pageY-this.lastPageY,a=this.container.getBoundingClientRect(),l=a.left+i,d=a.top+o,r=s.getViewport();this.container.style.position="fixed",this.keepInViewport?(l>=this.minX&&l+t<r.width&&(this.lastPageX=e.pageX,this.container.style.left=l+"px"),d>=this.minY&&d+n<r.height&&(this.lastPageY=e.pageY,this.container.style.top=d+"px")):(this.lastPageX=e.pageX,this.container.style.left=l+"px",this.lastPageY=e.pageY,this.container.style.top=d+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,s.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconComponent(){return this.maximized?this.minimizeIcon?"span":"WindowMinimizeIcon":this.maximizeIcon?"span":"WindowMaximizeIcon"},maximizeIconClass(){return`p-dialog-header-maximize-icon ${this.maximized?this.minimizeIcon:this.maximizeIcon}`},ariaId:()=>d(),ariaLabelledById(){return null!=this.header||null!==this.$attrs["aria-labelledby"]?this.ariaId+"_header":null},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},attributeSelector:()=>d(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:a,focustrap:e},components:{Portal:o,WindowMinimizeIcon:i,WindowMaximizeIcon:n,TimesIcon:t}};const B=["aria-labelledby","aria-modal"],I=["id"],$={class:"p-dialog-header-icons"},S=["autofocus","tabindex"],P=["autofocus","aria-label"];!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-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-shrink: 0;\n}\n.p-dialog-footer {\n    flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: flex;\n    align-items: center;\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/* Position */\n.p-dialog-left {\n    justify-content: flex-start;\n}\n.p-dialog-right {\n    justify-content: flex-end;\n}\n.p-dialog-top {\n    align-items: flex-start;\n}\n.p-dialog-topleft {\n    justify-content: flex-start;\n    align-items: flex-start;\n}\n.p-dialog-topright {\n    justify-content: flex-end;\n    align-items: flex-start;\n}\n.p-dialog-bottom {\n    align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    justify-content: flex-start;\n    align-items: flex-end;\n}\n.p-dialog-bottomright {\n    justify-content: flex-end;\n    align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: flex;\n    align-items: center;\n}\n"),E.render=function(e,t,n,i,o,a){const l=m("Portal"),s=p("ripple"),d=p("focustrap");return c(),g(l,{appendTo:n.appendTo},{default:u((()=>[o.containerVisible?(c(),h("div",{key:0,ref:a.maskRef,class:f(a.maskClass),onClick:t[3]||(t[3]=(...e)=>a.onMaskClick&&a.onMaskClick(...e))},[b(y,{name:"p-dialog",onBeforeEnter:a.onBeforeEnter,onEnter:a.onEnter,onBeforeLeave:a.onBeforeLeave,onLeave:a.onLeave,onAfterLeave:a.onAfterLeave,appear:""},{default:u((()=>[n.visible?v((c(),h("div",x({key:0,ref:a.containerRef,class:a.dialogClass,role:"dialog","aria-labelledby":a.ariaLabelledById,"aria-modal":n.modal},e.$attrs),[n.showHeader?(c(),h("div",{key:0,ref:a.headerContainerRef,class:"p-dialog-header",onMousedown:t[2]||(t[2]=(...e)=>a.initDrag&&a.initDrag(...e))},[L(e.$slots,"header",{},(()=>[n.header?(c(),h("span",{key:0,id:a.ariaLabelledById,class:"p-dialog-title"},w(n.header),9,I)):z("",!0)])),C("div",$,[n.maximizable?v((c(),h("button",{key:0,ref:a.maximizableRef,autofocus:o.focusableMax,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[0]||(t[0]=(...e)=>a.maximize&&a.maximize(...e)),type:"button",tabindex:n.maximizable?"0":"-1"},[L(e.$slots,"maximizeicon",{maximized:o.maximized},(()=>[(c(),g(k(a.maximizeIconComponent),{class:f(a.maximizeIconClass)},null,8,["class"]))]))],8,S)),[[s]]):z("",!0),n.closable?v((c(),h("button",x({key:1,ref:a.closeButtonRef,autofocus:o.focusableClose,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[1]||(t[1]=(...e)=>a.close&&a.close(...e)),"aria-label":a.closeAriaLabel,type:"button"},n.closeButtonProps),[L(e.$slots,"closeicon",{},(()=>[(c(),g(k(n.closeIcon?"span":"TimesIcon"),{class:f(["p-dialog-header-close-icon",n.closeIcon])},null,8,["class"]))]))],16,P)),[[s]]):z("",!0)])],544)):z("",!0),C("div",x({ref:a.contentRef,class:a.contentStyleClass,style:n.contentStyle},n.contentProps),[L(e.$slots,"default")],16),n.footer||e.$slots.footer?(c(),h("div",{key:1,ref:a.footerContainerRef,class:"p-dialog-footer"},[L(e.$slots,"footer",{},(()=>[D(w(n.footer),1)]))],512)):z("",!0)],16,B)),[[d,{disabled:!n.modal}]]):z("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):z("",!0)])),_:3},8,["appendTo"])};export{E as default};
+import e from"primevue/basecomponent";import t from"primevue/focustrap";import n from"primevue/icons/times";import i from"primevue/icons/windowmaximize";import o from"primevue/icons/windowminimize";import a from"primevue/portal";import l from"primevue/ripple";import{ZIndexUtils as s,DomHandler as d,UniqueComponentId as r}from"primevue/utils";import{computed as m,resolveComponent as p,resolveDirective as c,openBlock as u,createBlock as g,withCtx as h,createElementBlock as f,mergeProps as b,createVNode as y,Transition as v,withDirectives as x,renderSlot as L,toDisplayString as w,createCommentVNode as z,createElementVNode as C,resolveDynamicComponent as k,createTextVNode as D}from"vue";var E={name:"Dialog",extends:e,inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],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},provide(){return{dialogRef:m((()=>this._instance))}},data(){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(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&s.clear(this.mask),this.container=null,this.mask=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(e){e.setAttribute(this.attributeSelector,"")},onEnter(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&s.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&d.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide"),this.focusableClose=null,this.focusableMax=null},onAfterLeave(){this.autoZIndex&&s.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.modal&&this.mask===e.target&&this.close()},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.footer&&e(this.footerContainer);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=this.$slots.default&&e(this.content),t||(this.maximizable?(this.focusableMax=!0,t=this.maximizableButton):(this.focusableClose=!0,t=this.closeButton)))),t&&d.focus(t)},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?d.addClass(document.body,"p-overflow-hidden"):d.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&d.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&d.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){"Escape"===e.code&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},footerContainerRef(e){this.footerContainer=e},maximizableRef(e){this.maximizableButton=e},closeButtonRef(e){this.closeButton=e},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)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){d.hasClass(e.target,"p-dialog-header-icon")||d.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",d.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let t=d.getOuterWidth(this.container),n=d.getOuterHeight(this.container),i=e.pageX-this.lastPageX,o=e.pageY-this.lastPageY,a=this.container.getBoundingClientRect(),l=a.left+i,s=a.top+o,r=d.getViewport();this.container.style.position="fixed",this.keepInViewport?(l>=this.minX&&l+t<r.width&&(this.lastPageX=e.pageX,this.container.style.left=l+"px"),s>=this.minY&&s+n<r.height&&(this.lastPageY=e.pageY,this.container.style.top=s+"px")):(this.lastPageX=e.pageX,this.container.style.left=l+"px",this.lastPageY=e.pageY,this.container.style.top=s+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,d.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconComponent(){return this.maximized?this.minimizeIcon?"span":"WindowMinimizeIcon":this.maximizeIcon?"span":"WindowMaximizeIcon"},maximizeIconClass(){return`p-dialog-header-maximize-icon ${this.maximized?this.minimizeIcon:this.maximizeIcon}`},ariaId:()=>r(),ariaLabelledById(){return null!=this.header||null!==this.$attrs["aria-labelledby"]?this.ariaId+"_header":null},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},attributeSelector:()=>r(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:l,focustrap:t},components:{Portal:a,WindowMinimizeIcon:o,WindowMaximizeIcon:i,TimesIcon:n}};const B=["aria-labelledby","aria-modal"],I=["id"],$=["autofocus","tabindex"],S=["autofocus","aria-label","pt"];!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-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-shrink: 0;\n}\n.p-dialog-footer {\n    flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: flex;\n    align-items: center;\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/* Position */\n.p-dialog-left {\n    justify-content: flex-start;\n}\n.p-dialog-right {\n    justify-content: flex-end;\n}\n.p-dialog-top {\n    align-items: flex-start;\n}\n.p-dialog-topleft {\n    justify-content: flex-start;\n    align-items: flex-start;\n}\n.p-dialog-topright {\n    justify-content: flex-end;\n    align-items: flex-start;\n}\n.p-dialog-bottom {\n    align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    justify-content: flex-start;\n    align-items: flex-end;\n}\n.p-dialog-bottomright {\n    justify-content: flex-end;\n    align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: flex;\n    align-items: center;\n}\n"),E.render=function(e,t,n,i,o,a){const l=p("Portal"),s=c("ripple"),d=c("focustrap");return u(),g(l,{appendTo:n.appendTo},{default:h((()=>[o.containerVisible?(u(),f("div",b({key:0,ref:a.maskRef,class:a.maskClass,onClick:t[3]||(t[3]=(...e)=>a.onMaskClick&&a.onMaskClick(...e))},e.ptm("mask")),[y(v,{name:"p-dialog",onBeforeEnter:a.onBeforeEnter,onEnter:a.onEnter,onBeforeLeave:a.onBeforeLeave,onLeave:a.onLeave,onAfterLeave:a.onAfterLeave,appear:""},{default:h((()=>[n.visible?x((u(),f("div",b({key:0,ref:a.containerRef,class:a.dialogClass,role:"dialog","aria-labelledby":a.ariaLabelledById,"aria-modal":n.modal},{...e.$attrs,...e.ptm("root")}),[n.showHeader?(u(),f("div",b({key:0,ref:a.headerContainerRef,class:"p-dialog-header",onMousedown:t[2]||(t[2]=(...e)=>a.initDrag&&a.initDrag(...e))},e.ptm("header")),[L(e.$slots,"header",{},(()=>[n.header?(u(),f("span",b({key:0,id:a.ariaLabelledById,class:"p-dialog-title"},e.ptm("headerTitle")),w(n.header),17,I)):z("",!0)])),C("div",b({class:"p-dialog-header-icons"},e.ptm("headerIcons")),[n.maximizable?x((u(),f("button",b({key:0,ref:a.maximizableRef,autofocus:o.focusableMax,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[0]||(t[0]=(...e)=>a.maximize&&a.maximize(...e)),type:"button",tabindex:n.maximizable?"0":"-1"},e.ptm("maximizableButton")),[L(e.$slots,"maximizeicon",{maximized:o.maximized},(()=>[(u(),g(k(a.maximizeIconComponent),b({class:a.maximizeIconClass},e.ptm("maximizableIcon")),null,16,["class"]))]))],16,$)),[[s]]):z("",!0),n.closable?x((u(),f("button",b({key:1,ref:a.closeButtonRef,autofocus:o.focusableClose,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[1]||(t[1]=(...e)=>a.close&&a.close(...e)),"aria-label":a.closeAriaLabel,type:"button",pt:e.ptm("closeButton")},n.closeButtonProps),[L(e.$slots,"closeicon",{},(()=>[(u(),g(k(n.closeIcon?"span":"TimesIcon"),b({class:["p-dialog-header-close-icon",n.closeIcon]},e.ptm("closeButton").icon),null,16,["class"]))]))],16,S)),[[s]]):z("",!0)],16)],16)):z("",!0),C("div",b({ref:a.contentRef,class:a.contentStyleClass,style:n.contentStyle},{...n.contentProps,...e.ptm("content")}),[L(e.$slots,"default")],16),n.footer||e.$slots.footer?(u(),f("div",b({key:1,ref:a.footerContainerRef,class:"p-dialog-footer"},e.ptm("footer")),[L(e.$slots,"footer",{},(()=>[D(w(n.footer),1)]))],16)):z("",!0)],16,B)),[[d,{disabled:!n.modal}]]):z("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):z("",!0)])),_:3},8,["appendTo"])};export{E as default};

package/dialog/dialog.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, Portal, Ripple, utils, vue) {
+this.primevue.dialog = (function (BaseComponent, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, Portal, Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
     var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
     var WindowMaximizeIcon__default = /*#__PURE__*/_interopDefaultLegacy(WindowMaximizeIcon);
@@ -13,6 +14,7 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
 
     var script = {
         name: 'Dialog',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
         props: {
@@ -479,9 +481,8 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
 
     const _hoisted_1 = ["aria-labelledby", "aria-modal"];
     const _hoisted_2 = ["id"];
-    const _hoisted_3 = { class: "p-dialog-header-icons" };
-    const _hoisted_4 = ["autofocus", "tabindex"];
-    const _hoisted_5 = ["autofocus", "aria-label"];
+    const _hoisted_3 = ["autofocus", "tabindex"];
+    const _hoisted_4 = ["autofocus", "aria-label", "pt"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_Portal = vue.resolveComponent("Portal");
@@ -491,12 +492,12 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
       return (vue.openBlock(), vue.createBlock(_component_Portal, { appendTo: $props.appendTo }, {
         default: vue.withCtx(() => [
           ($data.containerVisible)
-            ? (vue.openBlock(), vue.createElementBlock("div", {
+            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: 0,
                 ref: $options.maskRef,
-                class: vue.normalizeClass($options.maskClass),
+                class: $options.maskClass,
                 onClick: _cache[3] || (_cache[3] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
-              }, [
+              }, _ctx.ptm('mask')), [
                 vue.createVNode(vue.Transition, {
                   name: "p-dialog",
                   onBeforeEnter: $options.onBeforeEnter,
@@ -515,26 +516,26 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                           role: "dialog",
                           "aria-labelledby": $options.ariaLabelledById,
                           "aria-modal": $props.modal
-                        }, _ctx.$attrs), [
+                        }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
                           ($props.showHeader)
-                            ? (vue.openBlock(), vue.createElementBlock("div", {
+                            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                                 key: 0,
                                 ref: $options.headerContainerRef,
                                 class: "p-dialog-header",
                                 onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.initDrag && $options.initDrag(...args)))
-                              }, [
+                              }, _ctx.ptm('header')), [
                                 vue.renderSlot(_ctx.$slots, "header", {}, () => [
                                   ($props.header)
-                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                         key: 0,
                                         id: $options.ariaLabelledById,
                                         class: "p-dialog-title"
-                                      }, vue.toDisplayString($props.header), 9, _hoisted_2))
+                                      }, _ctx.ptm('headerTitle')), vue.toDisplayString($props.header), 17, _hoisted_2))
                                     : vue.createCommentVNode("", true)
                                 ]),
-                                vue.createElementVNode("div", _hoisted_3, [
+                                vue.createElementVNode("div", vue.mergeProps({ class: "p-dialog-header-icons" }, _ctx.ptm('headerIcons')), [
                                   ($props.maximizable)
-                                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                         key: 0,
                                         ref: $options.maximizableRef,
                                         autofocus: $data.focusableMax,
@@ -542,13 +543,11 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                                         onClick: _cache[0] || (_cache[0] = (...args) => ($options.maximize && $options.maximize(...args))),
                                         type: "button",
                                         tabindex: $props.maximizable ? '0' : '-1'
-                                      }, [
+                                      }, _ctx.ptm('maximizableButton')), [
                                         vue.renderSlot(_ctx.$slots, "maximizeicon", { maximized: $data.maximized }, () => [
-                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.maximizeIconComponent), {
-                                            class: vue.normalizeClass($options.maximizeIconClass)
-                                          }, null, 8, ["class"]))
+                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.maximizeIconComponent), vue.mergeProps({ class: $options.maximizeIconClass }, _ctx.ptm('maximizableIcon')), null, 16, ["class"]))
                                         ])
-                                      ], 8, _hoisted_4)), [
+                                      ], 16, _hoisted_3)), [
                                         [_directive_ripple]
                                       ])
                                     : vue.createCommentVNode("", true),
@@ -560,37 +559,38 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                                         class: "p-dialog-header-icon p-dialog-header-close p-link",
                                         onClick: _cache[1] || (_cache[1] = (...args) => ($options.close && $options.close(...args))),
                                         "aria-label": $options.closeAriaLabel,
-                                        type: "button"
+                                        type: "button",
+                                        pt: _ctx.ptm('closeButton')
                                       }, $props.closeButtonProps), [
                                         vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
-                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
-                                            class: vue.normalizeClass(['p-dialog-header-close-icon', $props.closeIcon])
-                                          }, null, 8, ["class"]))
+                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
+                                            class: ['p-dialog-header-close-icon', $props.closeIcon]
+                                          }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))
                                         ])
-                                      ], 16, _hoisted_5)), [
+                                      ], 16, _hoisted_4)), [
                                         [_directive_ripple]
                                       ])
                                     : vue.createCommentVNode("", true)
-                                ])
-                              ], 544))
+                                ], 16)
+                              ], 16))
                             : vue.createCommentVNode("", true),
                           vue.createElementVNode("div", vue.mergeProps({
                             ref: $options.contentRef,
                             class: $options.contentStyleClass,
                             style: $props.contentStyle
-                          }, $props.contentProps), [
+                          }, { ...$props.contentProps, ..._ctx.ptm('content') }), [
                             vue.renderSlot(_ctx.$slots, "default")
                           ], 16),
                           ($props.footer || _ctx.$slots.footer)
-                            ? (vue.openBlock(), vue.createElementBlock("div", {
+                            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                                 key: 1,
                                 ref: $options.footerContainerRef,
                                 class: "p-dialog-footer"
-                              }, [
+                              }, _ctx.ptm('footer')), [
                                 vue.renderSlot(_ctx.$slots, "footer", {}, () => [
                                   vue.createTextVNode(vue.toDisplayString($props.footer), 1)
                                 ])
-                              ], 512))
+                              ], 16))
                             : vue.createCommentVNode("", true)
                         ], 16, _hoisted_1)), [
                           [_directive_focustrap, { disabled: !$props.modal }]
@@ -599,7 +599,7 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                   ]),
                   _: 3
                 }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
-              ], 2))
+              ], 16))
             : vue.createCommentVNode("", true)
         ]),
         _: 3
@@ -640,4 +640,4 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
 
     return script;
 
-})(primevue.focustrap, primevue.icons.times, primevue.icons.windowmaximize, primevue.icons.windowminimize, primevue.portal, primevue.ripple, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.focustrap, primevue.icons.times, primevue.icons.windowmaximize, primevue.icons.windowminimize, primevue.portal, primevue.ripple, primevue.utils, Vue);

package/dialog/dialog.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.dialog=function(e,t,n,i,o,a,l,s){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=d(e),m=d(t),p=d(n),c=d(i),u=d(o),g={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],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},provide(){return{dialogRef:s.computed((()=>this._instance))}},data(){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(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&l.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(e){e.setAttribute(this.attributeSelector,"")},onEnter(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&l.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&l.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide"),this.focusableClose=null,this.focusableMax=null},onAfterLeave(){this.autoZIndex&&l.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.modal&&this.mask===e.target&&this.close()},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.footer&&e(this.footerContainer);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=this.$slots.default&&e(this.content),t||(this.maximizable?(this.focusableMax=!0,t=this.maximizableButton):(this.focusableClose=!0,t=this.closeButton)))),t&&l.DomHandler.focus(t)},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?l.DomHandler.addClass(document.body,"p-overflow-hidden"):l.DomHandler.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&l.DomHandler.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&l.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){"Escape"===e.code&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},footerContainerRef(e){this.footerContainer=e},maximizableRef(e){this.maximizableButton=e},closeButtonRef(e){this.closeButton=e},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)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){l.DomHandler.hasClass(e.target,"p-dialog-header-icon")||l.DomHandler.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",l.DomHandler.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let t=l.DomHandler.getOuterWidth(this.container),n=l.DomHandler.getOuterHeight(this.container),i=e.pageX-this.lastPageX,o=e.pageY-this.lastPageY,a=this.container.getBoundingClientRect(),s=a.left+i,d=a.top+o,r=l.DomHandler.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+t<r.width&&(this.lastPageX=e.pageX,this.container.style.left=s+"px"),d>=this.minY&&d+n<r.height&&(this.lastPageY=e.pageY,this.container.style.top=d+"px")):(this.lastPageX=e.pageX,this.container.style.left=s+"px",this.lastPageY=e.pageY,this.container.style.top=d+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,l.DomHandler.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconComponent(){return this.maximized?this.minimizeIcon?"span":"WindowMinimizeIcon":this.maximizeIcon?"span":"WindowMaximizeIcon"},maximizeIconClass(){return`p-dialog-header-maximize-icon ${this.maximized?this.minimizeIcon:this.maximizeIcon}`},ariaId:()=>l.UniqueComponentId(),ariaLabelledById(){return null!=this.header||null!==this.$attrs["aria-labelledby"]?this.ariaId+"_header":null},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},attributeSelector:()=>l.UniqueComponentId(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:d(a).default,focustrap:r.default},components:{Portal:u.default,WindowMinimizeIcon:c.default,WindowMaximizeIcon:p.default,TimesIcon:m.default}};const h=["aria-labelledby","aria-modal"],f=["id"],b={class:"p-dialog-header-icons"},v=["autofocus","tabindex"],y=["autofocus","aria-label"];return 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-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-shrink: 0;\n}\n.p-dialog-footer {\n    flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: flex;\n    align-items: center;\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/* Position */\n.p-dialog-left {\n    justify-content: flex-start;\n}\n.p-dialog-right {\n    justify-content: flex-end;\n}\n.p-dialog-top {\n    align-items: flex-start;\n}\n.p-dialog-topleft {\n    justify-content: flex-start;\n    align-items: flex-start;\n}\n.p-dialog-topright {\n    justify-content: flex-end;\n    align-items: flex-start;\n}\n.p-dialog-bottom {\n    align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    justify-content: flex-start;\n    align-items: flex-end;\n}\n.p-dialog-bottomright {\n    justify-content: flex-end;\n    align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: flex;\n    align-items: center;\n}\n"),g.render=function(e,t,n,i,o,a){const l=s.resolveComponent("Portal"),d=s.resolveDirective("ripple"),r=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(l,{appendTo:n.appendTo},{default:s.withCtx((()=>[o.containerVisible?(s.openBlock(),s.createElementBlock("div",{key:0,ref:a.maskRef,class:s.normalizeClass(a.maskClass),onClick:t[3]||(t[3]=(...e)=>a.onMaskClick&&a.onMaskClick(...e))},[s.createVNode(s.Transition,{name:"p-dialog",onBeforeEnter:a.onBeforeEnter,onEnter:a.onEnter,onBeforeLeave:a.onBeforeLeave,onLeave:a.onLeave,onAfterLeave:a.onAfterLeave,appear:""},{default:s.withCtx((()=>[n.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:a.containerRef,class:a.dialogClass,role:"dialog","aria-labelledby":a.ariaLabelledById,"aria-modal":n.modal},e.$attrs),[n.showHeader?(s.openBlock(),s.createElementBlock("div",{key:0,ref:a.headerContainerRef,class:"p-dialog-header",onMousedown:t[2]||(t[2]=(...e)=>a.initDrag&&a.initDrag(...e))},[s.renderSlot(e.$slots,"header",{},(()=>[n.header?(s.openBlock(),s.createElementBlock("span",{key:0,id:a.ariaLabelledById,class:"p-dialog-title"},s.toDisplayString(n.header),9,f)):s.createCommentVNode("",!0)])),s.createElementVNode("div",b,[n.maximizable?s.withDirectives((s.openBlock(),s.createElementBlock("button",{key:0,ref:a.maximizableRef,autofocus:o.focusableMax,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[0]||(t[0]=(...e)=>a.maximize&&a.maximize(...e)),type:"button",tabindex:n.maximizable?"0":"-1"},[s.renderSlot(e.$slots,"maximizeicon",{maximized:o.maximized},(()=>[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(a.maximizeIconComponent),{class:s.normalizeClass(a.maximizeIconClass)},null,8,["class"]))]))],8,v)),[[d]]):s.createCommentVNode("",!0),n.closable?s.withDirectives((s.openBlock(),s.createElementBlock("button",s.mergeProps({key:1,ref:a.closeButtonRef,autofocus:o.focusableClose,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[1]||(t[1]=(...e)=>a.close&&a.close(...e)),"aria-label":a.closeAriaLabel,type:"button"},n.closeButtonProps),[s.renderSlot(e.$slots,"closeicon",{},(()=>[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),{class:s.normalizeClass(["p-dialog-header-close-icon",n.closeIcon])},null,8,["class"]))]))],16,y)),[[d]]):s.createCommentVNode("",!0)])],544)):s.createCommentVNode("",!0),s.createElementVNode("div",s.mergeProps({ref:a.contentRef,class:a.contentStyleClass,style:n.contentStyle},n.contentProps),[s.renderSlot(e.$slots,"default")],16),n.footer||e.$slots.footer?(s.openBlock(),s.createElementBlock("div",{key:1,ref:a.footerContainerRef,class:"p-dialog-footer"},[s.renderSlot(e.$slots,"footer",{},(()=>[s.createTextVNode(s.toDisplayString(n.footer),1)]))],512)):s.createCommentVNode("",!0)],16,h)),[[r,{disabled:!n.modal}]]):s.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):s.createCommentVNode("",!0)])),_:3},8,["appendTo"])},g}(primevue.focustrap,primevue.icons.times,primevue.icons.windowmaximize,primevue.icons.windowminimize,primevue.portal,primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.dialog=function(e,t,n,i,o,a,l,s,r){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=d(e),p=d(t),c=d(n),u=d(i),g=d(o),h=d(a),f=d(l),b={name:"Dialog",extends:m.default,inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],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},provide(){return{dialogRef:r.computed((()=>this._instance))}},data(){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(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&s.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(e){e.setAttribute(this.attributeSelector,"")},onEnter(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&s.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&s.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide"),this.focusableClose=null,this.focusableMax=null},onAfterLeave(){this.autoZIndex&&s.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.modal&&this.mask===e.target&&this.close()},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.footer&&e(this.footerContainer);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=this.$slots.default&&e(this.content),t||(this.maximizable?(this.focusableMax=!0,t=this.maximizableButton):(this.focusableClose=!0,t=this.closeButton)))),t&&s.DomHandler.focus(t)},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?s.DomHandler.addClass(document.body,"p-overflow-hidden"):s.DomHandler.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&s.DomHandler.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&s.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){"Escape"===e.code&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},footerContainerRef(e){this.footerContainer=e},maximizableRef(e){this.maximizableButton=e},closeButtonRef(e){this.closeButton=e},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)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){s.DomHandler.hasClass(e.target,"p-dialog-header-icon")||s.DomHandler.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",s.DomHandler.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let t=s.DomHandler.getOuterWidth(this.container),n=s.DomHandler.getOuterHeight(this.container),i=e.pageX-this.lastPageX,o=e.pageY-this.lastPageY,a=this.container.getBoundingClientRect(),l=a.left+i,r=a.top+o,d=s.DomHandler.getViewport();this.container.style.position="fixed",this.keepInViewport?(l>=this.minX&&l+t<d.width&&(this.lastPageX=e.pageX,this.container.style.left=l+"px"),r>=this.minY&&r+n<d.height&&(this.lastPageY=e.pageY,this.container.style.top=r+"px")):(this.lastPageX=e.pageX,this.container.style.left=l+"px",this.lastPageY=e.pageY,this.container.style.top=r+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,s.DomHandler.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconComponent(){return this.maximized?this.minimizeIcon?"span":"WindowMinimizeIcon":this.maximizeIcon?"span":"WindowMaximizeIcon"},maximizeIconClass(){return`p-dialog-header-maximize-icon ${this.maximized?this.minimizeIcon:this.maximizeIcon}`},ariaId:()=>s.UniqueComponentId(),ariaLabelledById(){return null!=this.header||null!==this.$attrs["aria-labelledby"]?this.ariaId+"_header":null},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},attributeSelector:()=>s.UniqueComponentId(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:f.default,focustrap:p.default},components:{Portal:h.default,WindowMinimizeIcon:g.default,WindowMaximizeIcon:u.default,TimesIcon:c.default}};const v=["aria-labelledby","aria-modal"],y=["id"],x=["autofocus","tabindex"],D=["autofocus","aria-label","pt"];return 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-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-shrink: 0;\n}\n.p-dialog-footer {\n    flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: flex;\n    align-items: center;\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/* Position */\n.p-dialog-left {\n    justify-content: flex-start;\n}\n.p-dialog-right {\n    justify-content: flex-end;\n}\n.p-dialog-top {\n    align-items: flex-start;\n}\n.p-dialog-topleft {\n    justify-content: flex-start;\n    align-items: flex-start;\n}\n.p-dialog-topright {\n    justify-content: flex-end;\n    align-items: flex-start;\n}\n.p-dialog-bottom {\n    align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    justify-content: flex-start;\n    align-items: flex-end;\n}\n.p-dialog-bottomright {\n    justify-content: flex-end;\n    align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: flex;\n    align-items: center;\n}\n"),b.render=function(e,t,n,i,o,a){const l=r.resolveComponent("Portal"),s=r.resolveDirective("ripple"),d=r.resolveDirective("focustrap");return r.openBlock(),r.createBlock(l,{appendTo:n.appendTo},{default:r.withCtx((()=>[o.containerVisible?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,ref:a.maskRef,class:a.maskClass,onClick:t[3]||(t[3]=(...e)=>a.onMaskClick&&a.onMaskClick(...e))},e.ptm("mask")),[r.createVNode(r.Transition,{name:"p-dialog",onBeforeEnter:a.onBeforeEnter,onEnter:a.onEnter,onBeforeLeave:a.onBeforeLeave,onLeave:a.onLeave,onAfterLeave:a.onAfterLeave,appear:""},{default:r.withCtx((()=>[n.visible?r.withDirectives((r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,ref:a.containerRef,class:a.dialogClass,role:"dialog","aria-labelledby":a.ariaLabelledById,"aria-modal":n.modal},{...e.$attrs,...e.ptm("root")}),[n.showHeader?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,ref:a.headerContainerRef,class:"p-dialog-header",onMousedown:t[2]||(t[2]=(...e)=>a.initDrag&&a.initDrag(...e))},e.ptm("header")),[r.renderSlot(e.$slots,"header",{},(()=>[n.header?(r.openBlock(),r.createElementBlock("span",r.mergeProps({key:0,id:a.ariaLabelledById,class:"p-dialog-title"},e.ptm("headerTitle")),r.toDisplayString(n.header),17,y)):r.createCommentVNode("",!0)])),r.createElementVNode("div",r.mergeProps({class:"p-dialog-header-icons"},e.ptm("headerIcons")),[n.maximizable?r.withDirectives((r.openBlock(),r.createElementBlock("button",r.mergeProps({key:0,ref:a.maximizableRef,autofocus:o.focusableMax,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[0]||(t[0]=(...e)=>a.maximize&&a.maximize(...e)),type:"button",tabindex:n.maximizable?"0":"-1"},e.ptm("maximizableButton")),[r.renderSlot(e.$slots,"maximizeicon",{maximized:o.maximized},(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(a.maximizeIconComponent),r.mergeProps({class:a.maximizeIconClass},e.ptm("maximizableIcon")),null,16,["class"]))]))],16,x)),[[s]]):r.createCommentVNode("",!0),n.closable?r.withDirectives((r.openBlock(),r.createElementBlock("button",r.mergeProps({key:1,ref:a.closeButtonRef,autofocus:o.focusableClose,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[1]||(t[1]=(...e)=>a.close&&a.close(...e)),"aria-label":a.closeAriaLabel,type:"button",pt:e.ptm("closeButton")},n.closeButtonProps),[r.renderSlot(e.$slots,"closeicon",{},(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),r.mergeProps({class:["p-dialog-header-close-icon",n.closeIcon]},e.ptm("closeButton").icon),null,16,["class"]))]))],16,D)),[[s]]):r.createCommentVNode("",!0)],16)],16)):r.createCommentVNode("",!0),r.createElementVNode("div",r.mergeProps({ref:a.contentRef,class:a.contentStyleClass,style:n.contentStyle},{...n.contentProps,...e.ptm("content")}),[r.renderSlot(e.$slots,"default")],16),n.footer||e.$slots.footer?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:1,ref:a.footerContainerRef,class:"p-dialog-footer"},e.ptm("footer")),[r.renderSlot(e.$slots,"footer",{},(()=>[r.createTextVNode(r.toDisplayString(n.footer),1)]))],16)):r.createCommentVNode("",!0)],16,v)),[[d,{disabled:!n.modal}]]):r.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):r.createCommentVNode("",!0)])),_:3},8,["appendTo"])},b}(primevue.basecomponent,primevue.focustrap,primevue.icons.times,primevue.icons.windowmaximize,primevue.icons.windowminimize,primevue.portal,primevue.ripple,primevue.utils,Vue);

package/dock/Dock.d.ts

@@ -11,6 +11,95 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((options: DockPassThroughMethodOptions) => DockPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DockPassThroughMethodOptions {
+    props: DockProps;
+    state: DockState;
+    context: DockContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DockProps.pt}
+ */
+export interface DockPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: DockPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DockPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Dock component.
+ */
+export interface DockState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current index as a number.
+     * @defaultvalue -3
+     */
+    currentIndex: number;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Dock component.
+ */
+export interface DockContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
 /**
  * Defines tooltip options
  */
@@ -77,6 +166,11 @@ export interface DockProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DockPassThroughOptions}
+     */
+    pt?: DockPassThroughOptions;
 }
 
 /**

package/dock/Dock.vue

@@ -1,14 +1,16 @@
 <template>
-    <div :class="containerClass" :style="style">
-        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex"></DockSub>
+    <div :class="containerClass" :style="style" v-bind="ptm('root')">
+        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt"></DockSub>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import DockSub from './DockSub.vue';
 
 export default {
     name: 'Dock',
+    extends: BaseComponent,
     props: {
         position: {
             type: String,

package/dock/DockSub.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-dock-list-container">
+    <div class="p-dock-list-container" v-bind="ptm('container')">
         <ul
             ref="list"
             :id="id"
@@ -14,6 +14,7 @@
             @blur="onListBlur"
             @keydown="onListKeyDown"
             @mouseleave="onListMouseLeave"
+            v-bind="ptm('menu')"
         >
             <template v-for="(processedItem, index) of model" :key="index">
                 <li
@@ -24,8 +25,9 @@
                     :aria-disabled="disabled(processedItem)"
                     @click="onItemClick($event, processedItem)"
                     @mouseenter="onItemMouseEnter(index)"
+                    v-bind="getPTOptions(getItemId(index), 'menuitem')"
                 >
-                    <div class="p-menuitem-content">
+                    <div class="p-menuitem-content" v-bind="getPTOptions(getItemId(index), 'content')">
                         <template v-if="!templates['item']">
                             <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
                                 <a
@@ -36,16 +38,26 @@
                                     tabindex="-1"
                                     aria-hidden="true"
                                     @click="onItemActionClick($event, processedItem, navigate)"
+                                    v-bind="getPTOptions(getItemId(index), 'action')"
                                 >
                                     <template v-if="!templates['icon']">
-                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
+                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
                                     </template>
                                     <component v-else :is="templates['icon']" :item="processedItem"></component>
                                 </a>
                             </router-link>
-                            <a v-else v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }" :href="processedItem.url" :class="linkClass()" :target="processedItem.target" tabindex="-1" aria-hidden="true">
+                            <a
+                                v-else
+                                v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
+                                :href="processedItem.url"
+                                :class="linkClass()"
+                                :target="processedItem.target"
+                                tabindex="-1"
+                                aria-hidden="true"
+                                v-bind="getPTOptions(getItemId(index), 'action')"
+                            >
                                 <template v-if="!templates['icon']">
-                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
+                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
                                 </template>
                                 <component v-else :is="templates['icon']" :item="processedItem"></component>
                             </a>
@@ -59,12 +71,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'DockSub',
+    extends: BaseComponent,
     emits: ['focus', 'blur'],
     props: {
         position: {
@@ -124,9 +138,19 @@ export default {
         getItemProp(processedItem, name) {
             return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
         },
+        getPTOptions(id, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(id)
+                }
+            });
+        },
         isSameMenuItem(event) {
             return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
         },
+        isItemActive(id) {
+            return id === this.focusedOptionIndex;
+        },
         onListMouseLeave() {
             this.currentIndex = -3;
         },
@@ -248,7 +272,7 @@ export default {
             return [
                 'p-dock-item',
                 {
-                    'p-focus': id === this.focusedOptionIndex,
+                    'p-focus': this.isItemActive(id),
                     'p-disabled': this.disabled(item),
                     'p-dock-item-second-prev': this.currentIndex - 2 === index,
                     'p-dock-item-prev': this.currentIndex - 1 === index,