primevue 3.13.1 → 3.16.0

package/dialog/dialog.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.dialog=function(e,t,n,i){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),l=o(n),s={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","maximize","unmaximize","dragend"],props:{header:null,footer:null,visible:Boolean,modal:Boolean,contentStyle:null,contentClass:String,rtl:Boolean,maximizable:Boolean,dismissableMask:Boolean,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},ariaCloseLabel:{type:String,default:"close"},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"}},data(){return{containerVisible:this.visible,maximized:!1}},documentKeydownListener:null,container:null,mask: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=null,this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(t){this.autoZIndex&&e.ZIndexUtils.set("modal",t,this.baseZIndex+this.$primevue.config.zIndex.modal),t.setAttribute(this.attributeSelector,"")},onEnter(){this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners()},onBeforeLeave(){this.modal&&e.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners()},onMaskClick(e){this.dismissableMask&&this.closable&&this.modal&&this.mask===e.target&&this.close()},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},maximize(t){this.maximized?(this.maximized=!1,this.$emit("unmaximize",t)):(this.maximized=!0,this.$emit("maximize",t)),this.modal||(this.maximized?e.DomHandler.addClass(document.body,"p-overflow-hidden"):e.DomHandler.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&e.DomHandler.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&e.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeyDown(t){if(9===t.which){t.preventDefault();let n=e.DomHandler.getFocusableElements(this.container);if(n&&n.length>0)if(document.activeElement){let e=n.indexOf(document.activeElement);t.shiftKey?-1==e||0===e?n[n.length-1].focus():n[e-1].focus():-1==e||e===n.length-1?n[0].focus():n[e+1].focus()}else n[0].focus()}else 27===t.which&&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},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(t){e.DomHandler.hasClass(t.target,"p-dialog-header-icon")||e.DomHandler.hasClass(t.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=t.pageX,this.lastPageY=t.pageY,this.container.style.margin="0",e.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=t=>{if(this.dragging){let n=e.DomHandler.getOuterWidth(this.container),i=e.DomHandler.getOuterHeight(this.container),o=t.pageX-this.lastPageX,a=t.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+o,r=l.top+a,d=e.DomHandler.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+n<d.width&&(this.lastPageX=t.pageX,this.container.style.left=s+"px"),r>=this.minY&&r+i<d.height&&(this.lastPageY=t.pageY,this.container.style.top=r+"px")):(this.lastPageX=t.pageX,this.container.style.left=s+"px",this.lastPageY=t.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=t=>{this.dragging&&(this.dragging=!1,e.DomHandler.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",t))},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}]},maximizeIconClass(){return["p-dialog-header-maximize-icon pi",{"pi-window-maximize":!this.maximized,"pi-window-minimize":this.maximized}]},ariaId:()=>e.UniqueComponentId(),ariaLabelledById(){return null!=this.header?this.ariaId+"_header":null},attributeSelector:()=>e.UniqueComponentId(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:a.default},components:{Portal:l.default}};const r=["aria-labelledby","aria-modal"],d=["id"],m={class:"p-dialog-header-icons"},p=["aria-label"],c=[i.createElementVNode("span",{class:"p-dialog-header-close-icon pi pi-times"},null,-1)],g={key:1,class:"p-dialog-footer"};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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: 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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    -webkit-transform: scale(1);\n            transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog-footer {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-dialog .p-dialog-header-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\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    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\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: .75rem;\n    -webkit-transform: translate3d(0px, 0px, 0px);\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    -webkit-transition: all .3s ease-out;\n    transition: all .3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, -100%, 0px);\n            transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, 100%, 0px);\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    -webkit-transform: translate3d(-100%, 0px, 0px);\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    -webkit-transform: translate3d(100%, 0px, 0px);\n            transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: none;\n    -webkit-transform: 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    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n\n/* Position */\n.p-dialog-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-dialog-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-dialog-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n"),s.render=function(e,t,n,o,a,l){const s=i.resolveComponent("Portal"),h=i.resolveDirective("ripple");return i.openBlock(),i.createBlock(s,{appendTo:n.appendTo},{default:i.withCtx((()=>[a.containerVisible?(i.openBlock(),i.createElementBlock("div",{key:0,ref:l.maskRef,class:i.normalizeClass(l.maskClass),onClick:t[3]||(t[3]=(...e)=>l.onMaskClick&&l.onMaskClick(...e))},[i.createVNode(i.Transition,{name:"p-dialog",onBeforeEnter:l.onBeforeEnter,onEnter:l.onEnter,onBeforeLeave:l.onBeforeLeave,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave,appear:""},{default:i.withCtx((()=>[n.visible?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref:l.containerRef,class:l.dialogClass},e.$attrs,{role:"dialog","aria-labelledby":l.ariaLabelledById,"aria-modal":n.modal}),[n.showHeader?(i.openBlock(),i.createElementBlock("div",{key:0,class:"p-dialog-header",onMousedown:t[2]||(t[2]=(...e)=>l.initDrag&&l.initDrag(...e))},[i.renderSlot(e.$slots,"header",{},(()=>[n.header?(i.openBlock(),i.createElementBlock("span",{key:0,id:l.ariaLabelledById,class:"p-dialog-title"},i.toDisplayString(n.header),9,d)):i.createCommentVNode("",!0)])),i.createElementVNode("div",m,[n.maximizable?i.withDirectives((i.openBlock(),i.createElementBlock("button",{key:0,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[0]||(t[0]=(...e)=>l.maximize&&l.maximize(...e)),type:"button",tabindex:"-1"},[i.createElementVNode("span",{class:i.normalizeClass(l.maximizeIconClass)},null,2)])),[[h]]):i.createCommentVNode("",!0),n.closable?i.withDirectives((i.openBlock(),i.createElementBlock("button",{key:1,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[1]||(t[1]=(...e)=>l.close&&l.close(...e)),"aria-label":n.ariaCloseLabel,type:"button"},c,8,p)),[[h]]):i.createCommentVNode("",!0)])],32)):i.createCommentVNode("",!0),i.createElementVNode("div",{class:i.normalizeClass(l.contentStyleClass),style:i.normalizeStyle(n.contentStyle)},[i.renderSlot(e.$slots,"default")],6),n.footer||e.$slots.footer?(i.openBlock(),i.createElementBlock("div",g,[i.renderSlot(e.$slots,"footer",{},(()=>[i.createTextVNode(i.toDisplayString(n.footer),1)]))])):i.createCommentVNode("",!0)],16,r)):i.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):i.createCommentVNode("",!0)])),_:3},8,["appendTo"])},s}(primevue.utils,primevue.ripple,primevue.portal,Vue);
+this.primevue=this.primevue||{},this.primevue.dialog=function(e,t,n,i){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(n),l=o(i),s={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],props:{header:null,footer:null,visible:Boolean,modal:Boolean,contentStyle:null,contentClass:String,rtl:Boolean,maximizable:Boolean,dismissableMask:Boolean,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},ariaCloseLabel:{type:String,default:"close"},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"},_instance:null},provide(){return{dialogRef:e.computed((()=>this._instance))}},data(){return{containerVisible:this.visible,maximized:!1}},documentKeydownListener:null,container:null,mask: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&&t.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&&t.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&t.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&t.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.closable&&this.modal&&this.mask===e.target&&this.close()},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?t.DomHandler.addClass(document.body,"p-overflow-hidden"):t.DomHandler.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&t.DomHandler.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&t.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){if(9===e.which){e.preventDefault();let n=t.DomHandler.getFocusableElements(this.container);if(n&&n.length>0)if(document.activeElement){let t=n.indexOf(document.activeElement);e.shiftKey?-1==t||0===t?n[n.length-1].focus():n[t-1].focus():-1==t||t===n.length-1?n[0].focus():n[t+1].focus()}else n[0].focus()}else 27===e.which&&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},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){t.DomHandler.hasClass(e.target,"p-dialog-header-icon")||t.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",t.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 n=t.DomHandler.getOuterWidth(this.container),i=t.DomHandler.getOuterHeight(this.container),o=e.pageX-this.lastPageX,a=e.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+o,d=l.top+a,r=t.DomHandler.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+n<r.width&&(this.lastPageX=e.pageX,this.container.style.left=s+"px"),d>=this.minY&&d+i<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,t.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}]},maximizeIconClass(){return["p-dialog-header-maximize-icon pi",{"pi-window-maximize":!this.maximized,"pi-window-minimize":this.maximized}]},ariaId:()=>t.UniqueComponentId(),ariaLabelledById(){return null!=this.header?this.ariaId+"_header":null},attributeSelector:()=>t.UniqueComponentId(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:a.default},components:{Portal:l.default}};const d=["aria-labelledby","aria-modal"],r=["id"],m={class:"p-dialog-header-icons"},p=["aria-label"],c=[e.createElementVNode("span",{class:"p-dialog-header-close-icon pi pi-times"},null,-1)],g={key:1,class:"p-dialog-footer"};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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: 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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    -webkit-transform: scale(1);\n            transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog-footer {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-dialog .p-dialog-header-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\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    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\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: .75rem;\n    -webkit-transform: translate3d(0px, 0px, 0px);\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    -webkit-transition: all .3s ease-out;\n    transition: all .3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, -100%, 0px);\n            transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, 100%, 0px);\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    -webkit-transform: translate3d(-100%, 0px, 0px);\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    -webkit-transform: translate3d(100%, 0px, 0px);\n            transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: none;\n    -webkit-transform: 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    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n\n/* Position */\n.p-dialog-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-dialog-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-dialog-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n"),s.render=function(t,n,i,o,a,l){const s=e.resolveComponent("Portal"),h=e.resolveDirective("ripple");return e.openBlock(),e.createBlock(s,{appendTo:i.appendTo},{default:e.withCtx((()=>[a.containerVisible?(e.openBlock(),e.createElementBlock("div",{key:0,ref:l.maskRef,class:e.normalizeClass(l.maskClass),onClick:n[3]||(n[3]=(...e)=>l.onMaskClick&&l.onMaskClick(...e))},[e.createVNode(e.Transition,{name:"p-dialog",onBeforeEnter:l.onBeforeEnter,onEnter:l.onEnter,onBeforeLeave:l.onBeforeLeave,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave,appear:""},{default:e.withCtx((()=>[i.visible?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,ref:l.containerRef,class:l.dialogClass},t.$attrs,{role:"dialog","aria-labelledby":l.ariaLabelledById,"aria-modal":i.modal}),[i.showHeader?(e.openBlock(),e.createElementBlock("div",{key:0,class:"p-dialog-header",onMousedown:n[2]||(n[2]=(...e)=>l.initDrag&&l.initDrag(...e))},[e.renderSlot(t.$slots,"header",{},(()=>[i.header?(e.openBlock(),e.createElementBlock("span",{key:0,id:l.ariaLabelledById,class:"p-dialog-title"},e.toDisplayString(i.header),9,r)):e.createCommentVNode("",!0)])),e.createElementVNode("div",m,[i.maximizable?e.withDirectives((e.openBlock(),e.createElementBlock("button",{key:0,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:n[0]||(n[0]=(...e)=>l.maximize&&l.maximize(...e)),type:"button",tabindex:"-1"},[e.createElementVNode("span",{class:e.normalizeClass(l.maximizeIconClass)},null,2)])),[[h]]):e.createCommentVNode("",!0),i.closable?e.withDirectives((e.openBlock(),e.createElementBlock("button",{key:1,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:n[1]||(n[1]=(...e)=>l.close&&l.close(...e)),"aria-label":i.ariaCloseLabel,type:"button"},c,8,p)),[[h]]):e.createCommentVNode("",!0)])],32)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(l.contentStyleClass),style:e.normalizeStyle(i.contentStyle)},[e.renderSlot(t.$slots,"default")],6),i.footer||t.$slots.footer?(e.openBlock(),e.createElementBlock("div",g,[e.renderSlot(t.$slots,"footer",{},(()=>[e.createTextVNode(e.toDisplayString(i.footer),1)]))])):e.createCommentVNode("",!0)],16,d)):e.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):e.createCommentVNode("",!0)])),_:3},8,["appendTo"])},s}(Vue,primevue.utils,primevue.ripple,primevue.portal);

package/dialogservice/DialogService.d.ts

@@ -0,0 +1,27 @@
+import { Plugin } from 'vue';
+import { DynamicDialogOptions, DynamicDialogInstance } from '../dynamicdialogoptions';
+
+declare const plugin: Plugin;
+export default plugin;
+
+export interface DialogServiceMethods {
+    /**
+     * Displays the dialog using the dynamic dialog object options.
+     * @param {*} content - Dynamic component for content template
+     * @param {DynamicDialogOptions} options - DynamicDialog Object
+     * @return {@link DynamicDialogInstance}
+     */
+    open: (content: any, options?: DynamicDialogOptions) => DynamicDialogInstance;
+}
+
+declare module 'vue/types/vue' {
+    interface Vue {
+        $dialog: DialogServiceMethods;
+    }
+}
+
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $dialog: DialogServiceMethods;
+    }
+}

package/dialogservice/dialogservice.cjs.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var vue = require('vue');
+var usedialog = require('primevue/usedialog');
+var DynamicDialogEventBus = require('primevue/dynamicdialogeventbus');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var DynamicDialogEventBus__default = /*#__PURE__*/_interopDefaultLegacy(DynamicDialogEventBus);
+
+var DialogService = {
+    install: (app) => {
+        const DialogService = {
+            open: (content, options) => {
+                const instance = {
+                    content: content && vue.markRaw(content),
+                    options: options || {},
+                    data: options && options.data,
+                    close: (params) => {
+                        DynamicDialogEventBus__default["default"].emit('close', { instance, params });
+                    }
+                };
+
+                DynamicDialogEventBus__default["default"].emit('open', { instance });
+
+                return instance;
+            }
+        };
+
+        app.config.unwrapInjectedRef = true; // Remove it after Vue 3.3. Details: https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity
+        app.config.globalProperties.$dialog = DialogService;
+        app.provide(usedialog.PrimeVueDialogSymbol, DialogService);
+    }
+};
+
+module.exports = DialogService;

package/dialogservice/dialogservice.cjs.min.js

@@ -0,0 +1 @@
+"use strict";var e=require("vue"),t=require("primevue/usedialog");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(require("primevue/dynamicdialogeventbus")),o={install:a=>{const o={open:(t,a)=>{const o={content:t&&e.markRaw(t),options:a||{},data:a&&a.data,close:e=>{i.default.emit("close",{instance:o,params:e})}};return i.default.emit("open",{instance:o}),o}};a.config.unwrapInjectedRef=!0,a.config.globalProperties.$dialog=o,a.provide(t.PrimeVueDialogSymbol,o)}};module.exports=o;

package/dialogservice/dialogservice.esm.js

@@ -0,0 +1,30 @@
+import { markRaw } from 'vue';
+import { PrimeVueDialogSymbol } from 'primevue/usedialog';
+import DynamicDialogEventBus from 'primevue/dynamicdialogeventbus';
+
+var DialogService = {
+    install: (app) => {
+        const DialogService = {
+            open: (content, options) => {
+                const instance = {
+                    content: content && markRaw(content),
+                    options: options || {},
+                    data: options && options.data,
+                    close: (params) => {
+                        DynamicDialogEventBus.emit('close', { instance, params });
+                    }
+                };
+
+                DynamicDialogEventBus.emit('open', { instance });
+
+                return instance;
+            }
+        };
+
+        app.config.unwrapInjectedRef = true; // Remove it after Vue 3.3. Details: https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity
+        app.config.globalProperties.$dialog = DialogService;
+        app.provide(PrimeVueDialogSymbol, DialogService);
+    }
+};
+
+export { DialogService as default };

package/dialogservice/dialogservice.esm.min.js

@@ -0,0 +1 @@
+import{markRaw as e}from"vue";import{PrimeVueDialogSymbol as o}from"primevue/usedialog";import t from"primevue/dynamicdialogeventbus";var i={install:i=>{const n={open:(o,i)=>{const n={content:o&&e(o),options:i||{},data:i&&i.data,close:e=>{t.emit("close",{instance:n,params:e})}};return t.emit("open",{instance:n}),n}};i.config.unwrapInjectedRef=!0,i.config.globalProperties.$dialog=n,i.provide(o,n)}};export{i as default};

package/dialogservice/dialogservice.js

@@ -0,0 +1,36 @@
+this.primevue = this.primevue || {};
+this.primevue.dialogservice = (function (vue, usedialog, DynamicDialogEventBus) {
+    'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var DynamicDialogEventBus__default = /*#__PURE__*/_interopDefaultLegacy(DynamicDialogEventBus);
+
+    var DialogService = {
+        install: (app) => {
+            const DialogService = {
+                open: (content, options) => {
+                    const instance = {
+                        content: content && vue.markRaw(content),
+                        options: options || {},
+                        data: options && options.data,
+                        close: (params) => {
+                            DynamicDialogEventBus__default["default"].emit('close', { instance, params });
+                        }
+                    };
+
+                    DynamicDialogEventBus__default["default"].emit('open', { instance });
+
+                    return instance;
+                }
+            };
+
+            app.config.unwrapInjectedRef = true; // Remove it after Vue 3.3. Details: https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity
+            app.config.globalProperties.$dialog = DialogService;
+            app.provide(usedialog.PrimeVueDialogSymbol, DialogService);
+        }
+    };
+
+    return DialogService;
+
+})(Vue, primevue.usedialog, primevue.dynamicdialogeventbus);

package/dialogservice/dialogservice.min.js

@@ -0,0 +1 @@
+this.primevue=this.primevue||{},this.primevue.dialogservice=function(e,t,i){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(primevue.dynamicdialogeventbus);return{install:i=>{const n={open:(t,i)=>{const n={content:t&&e.markRaw(t),options:i||{},data:i&&i.data,close:e=>{a.default.emit("close",{instance:n,params:e})}};return a.default.emit("open",{instance:n}),n}};i.config.unwrapInjectedRef=!0,i.config.globalProperties.$dialog=n,i.provide(t.PrimeVueDialogSymbol,n)}}}(Vue,primevue.usedialog);

package/dialogservice/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./dialogservice.cjs.js",
+    "module": "./dialogservice.esm.js",
+    "unpkg": "./dialogservice.min.js",
+    "types": "./DialogService.d.ts"
+}

package/dropdown/Dropdown.d.ts

@@ -2,17 +2,17 @@ import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerProps, VirtualScrollerItemOptions } from '../virtualscroller';
 
-type DropdownOptionLabelType = string | ((data: any) => string) | undefined;
+type DropdownOptionLabelType = string | ((data: any) => string) | undefined;
 
-type DropdownOptionValueType = string | ((data: any) => any) | undefined;
+type DropdownOptionValueType = string | ((data: any) => any) | undefined;
 
-type DropdownOptionDisabledType = string | ((data: any) => boolean) | undefined;
+type DropdownOptionDisabledType = string | ((data: any) => boolean) | undefined;
 
-type DropdownOptionChildrenType = string | ((data: any) => any[]) | undefined;
+type DropdownOptionChildrenType = string | ((data: any) => any[]) | undefined;
 
 type DropdownFilterMatchModeType = 'contains' | 'startsWith' | 'endsWith' | undefined;
 
-type DropdownAppendToType = 'body' | 'self' | string | undefined;
+type DropdownAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
 
 export interface DropdownChangeEvent {
     /**
@@ -36,7 +36,7 @@ export interface DropdownFilterEvent {
     value: any;
 }
 
-export interface DropdownProps {
+export interface DropdownProps extends HTMLDivElement {
     /**
      * Value of the component.
      */
@@ -117,38 +117,48 @@ export interface DropdownProps {
      * When enabled, a clear icon is displayed to clear the value.
      */
     showClear?: boolean | undefined;
-    /**
-     * Index of the element in tabbing order.
-     */
-    tabindex?: number | string | undefined;
     /**
      * Identifier of the underlying input element.
      */
     inputId?: string | undefined;
     /**
-     * Identifier of the underlying input element.
+     * Inline style of the input field.
      */
-    ariaLabelledBy?: string | undefined;
+    inputStyle?: any;
     /**
-     * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
-     * @see DropdownAppendToType
-     * Default value is 'body'.
+     * Style class of the input field.
      */
-    appendTo?: DropdownAppendToType;
+    inputClass?: any;
     /**
-     * Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
-     * Default value is 'No results found'.
+     * Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.
      */
-    emptyFilterMessage?: string | undefined;
+    inputProps?: HTMLInputElement | HTMLSpanElement | undefined;
     /**
-     * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
-     * Default value is 'No results found'.
+     * Inline style of the overlay panel.
      */
-    emptyMessage?: string | undefined;
+    panelStyle?: any;
     /**
      * Style class of the overlay panel.
      */
     panelClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
+     */
+    panelProps?: HTMLDivElement | undefined;
+    /**
+     * Uses to pass all properties of the HTMLInputElement to the filter input inside the component.
+     */
+    filterInputProps?: HTMLInputElement | undefined;
+    /**
+     * Uses to pass all properties of the HTMLElement to the clear icon inside the component.
+     */
+    clearIconProps?: HTMLElement | undefined;
+    /**
+     * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
+     * @see DropdownAppendToType
+     * Default value is 'body'.
+     */
+    appendTo?: DropdownAppendToType;
     /**
      * Whether the dropdown is in loading state.
      */
@@ -163,6 +173,48 @@ export interface DropdownProps {
      * @see VirtualScroller.VirtualScrollerProps
      */
     virtualScrollerOptions?: VirtualScrollerProps;
+    /**
+     * Whether to focus on the first visible or selected element when the overlay panel is shown.
+     * Default value is true.
+     */
+    autoOptionFocus?: boolean | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
+     * Default value is '{0} results are available'.
+     */
+    filterMessage?: string | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.
+     * Default value is '{0} items selected'.
+     */
+    selectionMessage?: string | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No selected item'.
+     */
+    emptySelectionMessage?: string | undefined;
+    /**
+     * Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No results found'.
+     */
+    emptyFilterMessage?: string | undefined;
+    /**
+     * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No results found'.
+     */
+    emptyMessage?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | string | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    "aria-labelledby"?: string | undefined;
 }
 
 export interface DropdownSlots {
@@ -180,6 +232,10 @@ export interface DropdownSlots {
          */
         placeholder: string;
     }) => VNode[];
+    /**
+     * Custom indicator template.
+     */
+    indicator: () => VNode[];
     /**
      * Custom header template of panel.
      * @param {Object} scope - header slot's params.
@@ -244,7 +300,7 @@ export interface DropdownSlots {
      * Custom empty template.
      */
     empty: () => VNode[];
-     /**
+    /**
      * Custom content template.
      * @param {Object} scope - content slot's params.
      */
@@ -279,10 +335,6 @@ export interface DropdownSlots {
          */
         options: any[];
     }) => VNode[];
-    /**
-     * Custom indicator template.
-     */
-    indicator: () => VNode[];
 }
 
 export declare type DropdownEmits = {
@@ -296,6 +348,16 @@ export declare type DropdownEmits = {
      * @param {DropdownChangeEvent} event - Custom change event.
      */
     'change': (event: DropdownChangeEvent) => void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    'focus': (event: Event) => void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    'blur': (event: Event) => void;
     /**
      * Callback to invoke before the overlay is shown.
      */
@@ -312,16 +374,6 @@ export declare type DropdownEmits = {
      * Callback to invoke when the overlay is hidden.
      */
     'hide': () => void;
-    /**
-     * Callback to invoke when the component receives focus.
-     * @param {Event} event - Browser event.
-     */
-    'focus': (event: Event) => void;
-    /**
-     * Callback to invoke when the component loses focus.
-     * @param {Event} event - Browser event.
-     */
-    'blur': () => void;
     /**
      * Callback to invoke on filter input.
      * @param {DropdownFilterEvent} event - Custom filter event.
@@ -332,16 +384,18 @@ export declare type DropdownEmits = {
 declare class Dropdown extends ClassComponent<DropdownProps, DropdownSlots, DropdownEmits> {
     /**
      * Shows the overlay.
+     * @param {boolean} [isFocus] - Decides whether to focus on the component. Default value is false.
      *
      * @memberof Dropdown
      */
-    show: () => void;
+    show: (isFocus?: boolean) => void;
     /**
      * Hides the overlay.
+     * @param {boolean} [isFocus] - Decides whether to focus on the component. Default value is false.
      *
      * @memberof Dropdown
      */
-    hide: () => void;
+    hide: (isFocus?: boolean) => void;
 }
 
 declare module '@vue/runtime-core' {