primevue 3.7.2 → 3.9.0

package/dialog/dialog.js

@@ -130,7 +130,9 @@ this.primevue.dialog = (function (utils, Ripple, vue) {
                 this.bindGlobalListeners();
             },
             onBeforeLeave() {
-                utils.DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                if (this.modal) {
+                    utils.DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                }
             },
             onLeave() {
 
@@ -527,7 +529,7 @@ this.primevue.dialog = (function (utils, Ripple, vue) {
       }
     }
 
-    var css_248z = "\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    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";
+    var css_248z = "\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";
     styleInject(css_248z);
 
     script.render = render;

package/dialog/dialog.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.dialog=function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={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(){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),a=t.pageX-this.lastPageX,o=t.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+a,d=l.top+o,r=e.DomHandler.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+n<r.width&&(this.lastPageX=t.pageX,this.container.style.left=s+"px"),d>=this.minY&&d+i<r.height&&(this.lastPageY=t.pageY,this.container.style.top=d+"px")):(this.lastPageX=t.pageX,this.container.style.left=s+"px",this.lastPageY=t.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=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]},appendDisabled(){return"self"===this.appendTo},appendTarget(){return this.appendDisabled?null:this.appendTo}},directives:{ripple:i(t).default}};const o={class:"p-dialog-header-icons"},l=n.createVNode("span",{class:"p-dialog-header-close-icon pi pi-times"},null,-1),s={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],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.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    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"),a.render=function(e,t,i,a,d,r){const p=n.resolveDirective("ripple");return n.openBlock(),n.createBlock(n.Teleport,{to:r.appendTarget,disabled:r.appendDisabled},[d.containerVisible?(n.openBlock(),n.createBlock("div",{key:0,ref:r.maskRef,class:r.maskClass,onClick:t[4]||(t[4]=(...e)=>r.onMaskClick&&r.onMaskClick(...e))},[n.createVNode(n.Transition,{name:"p-dialog",onBeforeEnter:r.onBeforeEnter,onEnter:r.onEnter,onBeforeLeave:r.onBeforeLeave,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:n.withCtx((()=>[i.visible?(n.openBlock(),n.createBlock("div",n.mergeProps({key:0,ref:r.containerRef,class:r.dialogClass},e.$attrs,{role:"dialog","aria-labelledby":r.ariaLabelledById,"aria-modal":i.modal}),[i.showHeader?(n.openBlock(),n.createBlock("div",{key:0,class:"p-dialog-header",onMousedown:t[3]||(t[3]=(...e)=>r.initDrag&&r.initDrag(...e))},[n.renderSlot(e.$slots,"header",{},(()=>[i.header?(n.openBlock(),n.createBlock("span",{key:0,id:r.ariaLabelledById,class:"p-dialog-title"},n.toDisplayString(i.header),9,["id"])):n.createCommentVNode("",!0)])),n.createVNode("div",o,[i.maximizable?n.withDirectives((n.openBlock(),n.createBlock("button",{key:0,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[1]||(t[1]=(...e)=>r.maximize&&r.maximize(...e)),type:"button",tabindex:"-1"},[n.createVNode("span",{class:r.maximizeIconClass},null,2)],512)),[[p]]):n.createCommentVNode("",!0),i.closable?n.withDirectives((n.openBlock(),n.createBlock("button",{key:1,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[2]||(t[2]=(...e)=>r.close&&r.close(...e)),"aria-label":i.ariaCloseLabel,type:"button",tabindex:"-1"},[l],8,["aria-label"])),[[p]]):n.createCommentVNode("",!0)])],32)):n.createCommentVNode("",!0),n.createVNode("div",{class:r.contentStyleClass,style:i.contentStyle},[n.renderSlot(e.$slots,"default")],6),i.footer||e.$slots.footer?(n.openBlock(),n.createBlock("div",s,[n.renderSlot(e.$slots,"footer",{},(()=>[n.createTextVNode(n.toDisplayString(i.footer),1)]))])):n.createCommentVNode("",!0)],16,["aria-labelledby","aria-modal"])):n.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):n.createCommentVNode("",!0)],8,["to","disabled"])},a}(primevue.utils,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.dialog=function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={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),a=t.pageX-this.lastPageX,o=t.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+a,d=l.top+o,r=e.DomHandler.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+n<r.width&&(this.lastPageX=t.pageX,this.container.style.left=s+"px"),d>=this.minY&&d+i<r.height&&(this.lastPageY=t.pageY,this.container.style.top=d+"px")):(this.lastPageX=t.pageX,this.container.style.left=s+"px",this.lastPageY=t.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=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]},appendDisabled(){return"self"===this.appendTo},appendTarget(){return this.appendDisabled?null:this.appendTo}},directives:{ripple:i(t).default}};const o={class:"p-dialog-header-icons"},l=n.createVNode("span",{class:"p-dialog-header-close-icon pi pi-times"},null,-1),s={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],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.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"),a.render=function(e,t,i,a,d,r){const p=n.resolveDirective("ripple");return n.openBlock(),n.createBlock(n.Teleport,{to:r.appendTarget,disabled:r.appendDisabled},[d.containerVisible?(n.openBlock(),n.createBlock("div",{key:0,ref:r.maskRef,class:r.maskClass,onClick:t[4]||(t[4]=(...e)=>r.onMaskClick&&r.onMaskClick(...e))},[n.createVNode(n.Transition,{name:"p-dialog",onBeforeEnter:r.onBeforeEnter,onEnter:r.onEnter,onBeforeLeave:r.onBeforeLeave,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:n.withCtx((()=>[i.visible?(n.openBlock(),n.createBlock("div",n.mergeProps({key:0,ref:r.containerRef,class:r.dialogClass},e.$attrs,{role:"dialog","aria-labelledby":r.ariaLabelledById,"aria-modal":i.modal}),[i.showHeader?(n.openBlock(),n.createBlock("div",{key:0,class:"p-dialog-header",onMousedown:t[3]||(t[3]=(...e)=>r.initDrag&&r.initDrag(...e))},[n.renderSlot(e.$slots,"header",{},(()=>[i.header?(n.openBlock(),n.createBlock("span",{key:0,id:r.ariaLabelledById,class:"p-dialog-title"},n.toDisplayString(i.header),9,["id"])):n.createCommentVNode("",!0)])),n.createVNode("div",o,[i.maximizable?n.withDirectives((n.openBlock(),n.createBlock("button",{key:0,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[1]||(t[1]=(...e)=>r.maximize&&r.maximize(...e)),type:"button",tabindex:"-1"},[n.createVNode("span",{class:r.maximizeIconClass},null,2)],512)),[[p]]):n.createCommentVNode("",!0),i.closable?n.withDirectives((n.openBlock(),n.createBlock("button",{key:1,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[2]||(t[2]=(...e)=>r.close&&r.close(...e)),"aria-label":i.ariaCloseLabel,type:"button",tabindex:"-1"},[l],8,["aria-label"])),[[p]]):n.createCommentVNode("",!0)])],32)):n.createCommentVNode("",!0),n.createVNode("div",{class:r.contentStyleClass,style:i.contentStyle},[n.renderSlot(e.$slots,"default")],6),i.footer||e.$slots.footer?(n.openBlock(),n.createBlock("div",s,[n.renderSlot(e.$slots,"footer",{},(()=>[n.createTextVNode(n.toDisplayString(i.footer),1)]))])):n.createCommentVNode("",!0)],16,["aria-labelledby","aria-modal"])):n.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):n.createCommentVNode("",!0)],8,["to","disabled"])},a}(primevue.utils,primevue.ripple,Vue);

package/dock/Dock.d.ts

@@ -9,10 +9,19 @@ interface DockProps {
     tooltipOptions?: any;
 }
 
+interface DockItemSlotInterface {
+    item: any;
+}
+
+interface DockIconSlotInterface {
+    item: any;
+}
+
 declare class Dock {
     $props: DockProps;
     $slots: {
-        'item': VNode[];
+        item: DockItemSlotInterface;
+        icon: DockIconSlotInterface;
     }
 }
 

package/dock/Dock.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" :style="style">
-        <DockSub :model="model" :template="$slots.item" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub>
+        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub>
     </div>
 </template>
 

package/dock/DockSub.vue

@@ -2,31 +2,33 @@
     <div class="p-dock-list-container">
         <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
             <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
-                <template v-if="!template">
+                <template v-if="!templates['item']">
                     <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                         <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
                             v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
-                            <template v-if="typeof item.icon === 'string'">
+                            <template v-if="!templates['icon']">
                                 <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                             </template>
-                            <component v-else :is="item.icon"></component>
+                            <component v-else :is="templates['icon']" :item="item"></component>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
                         v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
-                        <template v-if="typeof item.icon === 'string'">
+                        <template v-if="!templates['icon']">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
-                        <component v-else :is="item.icon"></component>
+                        <component v-else :is="templates['icon']" :item="item"></component>
                     </a>
                 </template>
-                <component v-else :is="template" :item="item"></component>
+                <component v-else :is="templates['item']" :item="item"></component>
             </li>
         </ul>
     </div>
 </template>
 
 <script>
+import Ripple from 'primevue/ripple';
+
 export default {
     name: 'DockSub',
     props: {
@@ -34,8 +36,8 @@ export default {
             type: Array,
             default: null
         },
-        template: {
-            type: Function,
+        templates: {
+            type: null,
             default: null
         },
         exact: {
@@ -92,6 +94,9 @@ export default {
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>

package/dock/dock.cjs.js

@@ -1,7 +1,12 @@
 'use strict';
 
+var Ripple = require('primevue/ripple');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+
 var script$1 = {
     name: 'DockSub',
     props: {
@@ -9,8 +14,8 @@ var script$1 = {
             type: Array,
             default: null
         },
-        template: {
-            type: Function,
+        templates: {
+            type: null,
             default: null
         },
         exact: {
@@ -67,6 +72,9 @@ var script$1 = {
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
+    },
+    directives: {
+        'ripple': Ripple__default['default']
     }
 };
 
@@ -91,7 +99,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           role: "none",
           onMouseenter: $event => ($options.onItemMouseEnter(index))
         }, [
-          (!$props.template)
+          (!$props.templates['item'])
             ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [
                 (item.to && !$options.disabled(item))
                   ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -107,14 +115,17 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                           target: item.target,
                           onClick: $event => ($options.onItemClick($event, item, navigate))
                         }, [
-                          (typeof item.icon === 'string')
+                          (!$props.templates['icon'])
                             ? vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
                                 key: 0,
                                 class: ['p-dock-action-icon', item.icon]
                               }, null, 2)), [
                                 [_directive_ripple]
                               ])
-                            : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), { key: 1 }))
+                            : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['icon']), {
+                                key: 1,
+                                item: item
+                              }, null, 8, ["item"]))
                         ], 10, ["href", "target", "onClick"]), [
                           [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions]
                         ])
@@ -130,19 +141,22 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       onClick: $event => ($options.onItemClick($event, item)),
                       tabindex: $options.disabled(item) ? null : '0'
                     }, [
-                      (typeof item.icon === 'string')
+                      (!$props.templates['icon'])
                         ? vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
                             key: 0,
                             class: ['p-dock-action-icon', item.icon]
                           }, null, 2)), [
                             [_directive_ripple]
                           ])
-                        : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), { key: 1 }))
+                        : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['icon']), {
+                            key: 1,
+                            item: item
+                          }, null, 8, ["item"]))
                     ], 10, ["href", "target", "onClick", "tabindex"])), [
                       [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions]
                     ])
               ], 64))
-            : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+            : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['item']), {
                 key: 1,
                 item: item
               }, null, 8, ["item"]))
@@ -189,10 +203,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     vue.createVNode(_component_DockSub, {
       model: $props.model,
-      template: _ctx.$slots.item,
+      templates: _ctx.$slots,
       exact: $props.exact,
       tooltipOptions: $props.tooltipOptions
-    }, null, 8, ["model", "template", "exact", "tooltipOptions"])
+    }, null, 8, ["model", "templates", "exact", "tooltipOptions"])
   ], 6))
 }
 

package/dock/dock.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),n={name:"DockSub",props:{model:{type:Array,default:null},template:{type:Function,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,n,t){this.disabled(n)?e.preventDefault():(n.command&&n.command({originalEvent:e,item:n}),n.to&&t&&t(e))},itemClass(e){return["p-dock-item",{"p-dock-item-second-prev":this.currentIndex-2===e,"p-dock-item-prev":this.currentIndex-1===e,"p-dock-item-current":this.currentIndex===e,"p-dock-item-next":this.currentIndex+1===e,"p-dock-item-second-next":this.currentIndex+2===e}]},linkClass(e,n){return["p-dock-action",{"p-disabled":this.disabled(e),"router-link-active":n&&n.isActive,"router-link-active-exact":this.exact&&n&&n.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled}};const t={class:"p-dock-list-container"};n.render=function(n,o,i,c,l,r){const s=e.resolveComponent("router-link"),a=e.resolveDirective("ripple"),d=e.resolveDirective("tooltip");return e.openBlock(),e.createBlock("div",t,[e.createVNode("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:o[1]||(o[1]=(...e)=>r.onListMouseLeave&&r.onListMouseLeave(...e))},[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(i.model,((n,t)=>(e.openBlock(),e.createBlock("li",{class:r.itemClass(t),key:t,role:"none",onMouseenter:e=>r.onItemMouseEnter(t)},[i.template?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.template),{key:1,item:n},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[n.to&&!r.disabled(n)?(e.openBlock(),e.createBlock(s,{key:0,to:n.to,custom:""},{default:e.withCtx((({navigate:t,href:o,isActive:c,isExactActive:l})=>[e.withDirectives(e.createVNode("a",{href:o,role:"menuitem",class:r.linkClass(n,{isActive:c,isExactActive:l}),target:n.target,onClick:e=>r.onItemClick(e,n,t)},["string"==typeof n.icon?e.withDirectives((e.openBlock(),e.createBlock("span",{key:0,class:["p-dock-action-icon",n.icon]},null,2)),[[a]]):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.icon),{key:1}))],10,["href","target","onClick"]),[[d,{value:n.label,disabled:!i.tooltipOptions},i.tooltipOptions]])])),_:2},1032,["to"])):e.withDirectives((e.openBlock(),e.createBlock("a",{key:1,href:n.url,role:"menuitem",class:r.linkClass(n),target:n.target,onClick:e=>r.onItemClick(e,n),tabindex:r.disabled(n)?null:"0"},["string"==typeof n.icon?e.withDirectives((e.openBlock(),e.createBlock("span",{key:0,class:["p-dock-action-icon",n.icon]},null,2)),[[a]]):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.icon),{key:1}))],10,["href","target","onClick","tabindex"])),[[d,{value:n.label,disabled:!i.tooltipOptions},i.tooltipOptions]])],64))],42,["onMouseenter"])))),128))],544)])};var o={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:n}};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-dock {\n    position: absolute;\n    z-index: 1;\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-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\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}\n.p-dock-item {\n    -webkit-transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-action {\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    -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    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n"),o.render=function(n,t,o,i,c,l){const r=e.resolveComponent("DockSub");return e.openBlock(),e.createBlock("div",{class:l.containerClass,style:o.style},[e.createVNode(r,{model:o.model,template:n.$slots.item,exact:o.exact,tooltipOptions:o.tooltipOptions},null,8,["model","template","exact","tooltipOptions"])],6)},module.exports=o;
+"use strict";var e=require("primevue/ripple"),t=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"DockSub",props:{model:{type:Array,default:null},templates:{type:null,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},itemClass(e){return["p-dock-item",{"p-dock-item-second-prev":this.currentIndex-2===e,"p-dock-item-prev":this.currentIndex-1===e,"p-dock-item-current":this.currentIndex===e,"p-dock-item-next":this.currentIndex+1===e,"p-dock-item-second-next":this.currentIndex+2===e}]},linkClass(e,t){return["p-dock-action",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},directives:{ripple:n(e).default}};const i={class:"p-dock-list-container"};o.render=function(e,n,o,l,c,r){const s=t.resolveComponent("router-link"),a=t.resolveDirective("ripple"),p=t.resolveDirective("tooltip");return t.openBlock(),t.createBlock("div",i,[t.createVNode("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:n[1]||(n[1]=(...e)=>r.onListMouseLeave&&r.onListMouseLeave(...e))},[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(o.model,((e,n)=>(t.openBlock(),t.createBlock("li",{class:r.itemClass(n),key:n,role:"none",onMouseenter:e=>r.onItemMouseEnter(n)},[o.templates.item?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates.item),{key:1,item:e},null,8,["item"])):(t.openBlock(),t.createBlock(t.Fragment,{key:0},[e.to&&!r.disabled(e)?(t.openBlock(),t.createBlock(s,{key:0,to:e.to,custom:""},{default:t.withCtx((({navigate:n,href:i,isActive:l,isExactActive:c})=>[t.withDirectives(t.createVNode("a",{href:i,role:"menuitem",class:r.linkClass(e,{isActive:l,isExactActive:c}),target:e.target,onClick:t=>r.onItemClick(t,e,n)},[o.templates.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates.icon),{key:1,item:e},null,8,["item"])):t.withDirectives((t.openBlock(),t.createBlock("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[a]])],10,["href","target","onClick"]),[[p,{value:e.label,disabled:!o.tooltipOptions},o.tooltipOptions]])])),_:2},1032,["to"])):t.withDirectives((t.openBlock(),t.createBlock("a",{key:1,href:e.url,role:"menuitem",class:r.linkClass(e),target:e.target,onClick:t=>r.onItemClick(t,e),tabindex:r.disabled(e)?null:"0"},[o.templates.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates.icon),{key:1,item:e},null,8,["item"])):t.withDirectives((t.openBlock(),t.createBlock("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[a]])],10,["href","target","onClick","tabindex"])),[[p,{value:e.label,disabled:!o.tooltipOptions},o.tooltipOptions]])],64))],42,["onMouseenter"])))),128))],544)])};var l={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:o}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-dock {\n    position: absolute;\n    z-index: 1;\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-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\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}\n.p-dock-item {\n    -webkit-transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-action {\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    -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    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n"),l.render=function(e,n,o,i,l,c){const r=t.resolveComponent("DockSub");return t.openBlock(),t.createBlock("div",{class:c.containerClass,style:o.style},[t.createVNode(r,{model:o.model,templates:e.$slots,exact:o.exact,tooltipOptions:o.tooltipOptions},null,8,["model","templates","exact","tooltipOptions"])],6)},module.exports=l;

package/dock/dock.esm.js

@@ -1,3 +1,4 @@
+import Ripple from 'primevue/ripple';
 import { resolveComponent, resolveDirective, openBlock, createBlock, createVNode, Fragment, renderList, withCtx, withDirectives, resolveDynamicComponent } from 'vue';
 
 var script$1 = {
@@ -7,8 +8,8 @@ var script$1 = {
             type: Array,
             default: null
         },
-        template: {
-            type: Function,
+        templates: {
+            type: null,
             default: null
         },
         exact: {
@@ -65,6 +66,9 @@ var script$1 = {
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 };
 
@@ -89,7 +93,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           role: "none",
           onMouseenter: $event => ($options.onItemMouseEnter(index))
         }, [
-          (!$props.template)
+          (!$props.templates['item'])
             ? (openBlock(), createBlock(Fragment, { key: 0 }, [
                 (item.to && !$options.disabled(item))
                   ? (openBlock(), createBlock(_component_router_link, {
@@ -105,14 +109,17 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                           target: item.target,
                           onClick: $event => ($options.onItemClick($event, item, navigate))
                         }, [
-                          (typeof item.icon === 'string')
+                          (!$props.templates['icon'])
                             ? withDirectives((openBlock(), createBlock("span", {
                                 key: 0,
                                 class: ['p-dock-action-icon', item.icon]
                               }, null, 2)), [
                                 [_directive_ripple]
                               ])
-                            : (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 1 }))
+                            : (openBlock(), createBlock(resolveDynamicComponent($props.templates['icon']), {
+                                key: 1,
+                                item: item
+                              }, null, 8, ["item"]))
                         ], 10, ["href", "target", "onClick"]), [
                           [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions]
                         ])
@@ -128,19 +135,22 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       onClick: $event => ($options.onItemClick($event, item)),
                       tabindex: $options.disabled(item) ? null : '0'
                     }, [
-                      (typeof item.icon === 'string')
+                      (!$props.templates['icon'])
                         ? withDirectives((openBlock(), createBlock("span", {
                             key: 0,
                             class: ['p-dock-action-icon', item.icon]
                           }, null, 2)), [
                             [_directive_ripple]
                           ])
-                        : (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 1 }))
+                        : (openBlock(), createBlock(resolveDynamicComponent($props.templates['icon']), {
+                            key: 1,
+                            item: item
+                          }, null, 8, ["item"]))
                     ], 10, ["href", "target", "onClick", "tabindex"])), [
                       [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions]
                     ])
               ], 64))
-            : (openBlock(), createBlock(resolveDynamicComponent($props.template), {
+            : (openBlock(), createBlock(resolveDynamicComponent($props.templates['item']), {
                 key: 1,
                 item: item
               }, null, 8, ["item"]))
@@ -187,10 +197,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createVNode(_component_DockSub, {
       model: $props.model,
-      template: _ctx.$slots.item,
+      templates: _ctx.$slots,
       exact: $props.exact,
       tooltipOptions: $props.tooltipOptions
-    }, null, 8, ["model", "template", "exact", "tooltipOptions"])
+    }, null, 8, ["model", "templates", "exact", "tooltipOptions"])
   ], 6))
 }
 

package/dock/dock.esm.min.js

@@ -1 +1 @@
-import{resolveComponent as e,resolveDirective as n,openBlock as t,createBlock as o,createVNode as i,Fragment as l,renderList as c,withCtx as r,withDirectives as s,resolveDynamicComponent as a}from"vue";var d={name:"DockSub",props:{model:{type:Array,default:null},template:{type:Function,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,n,t){this.disabled(n)?e.preventDefault():(n.command&&n.command({originalEvent:e,item:n}),n.to&&t&&t(e))},itemClass(e){return["p-dock-item",{"p-dock-item-second-prev":this.currentIndex-2===e,"p-dock-item-prev":this.currentIndex-1===e,"p-dock-item-current":this.currentIndex===e,"p-dock-item-next":this.currentIndex+1===e,"p-dock-item-second-next":this.currentIndex+2===e}]},linkClass(e,n){return["p-dock-action",{"p-disabled":this.disabled(e),"router-link-active":n&&n.isActive,"router-link-active-exact":this.exact&&n&&n.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled}};const p={class:"p-dock-list-container"};d.render=function(d,m,k,u,f,b){const x=e("router-link"),y=n("ripple"),g=n("tooltip");return t(),o("div",p,[i("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:m[1]||(m[1]=(...e)=>b.onListMouseLeave&&b.onListMouseLeave(...e))},[(t(!0),o(l,null,c(k.model,((e,n)=>(t(),o("li",{class:b.itemClass(n),key:n,role:"none",onMouseenter:e=>b.onItemMouseEnter(n)},[k.template?(t(),o(a(k.template),{key:1,item:e},null,8,["item"])):(t(),o(l,{key:0},[e.to&&!b.disabled(e)?(t(),o(x,{key:0,to:e.to,custom:""},{default:r((({navigate:n,href:l,isActive:c,isExactActive:r})=>[s(i("a",{href:l,role:"menuitem",class:b.linkClass(e,{isActive:c,isExactActive:r}),target:e.target,onClick:t=>b.onItemClick(t,e,n)},["string"==typeof e.icon?s((t(),o("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[y]]):(t(),o(a(e.icon),{key:1}))],10,["href","target","onClick"]),[[g,{value:e.label,disabled:!k.tooltipOptions},k.tooltipOptions]])])),_:2},1032,["to"])):s((t(),o("a",{key:1,href:e.url,role:"menuitem",class:b.linkClass(e),target:e.target,onClick:n=>b.onItemClick(n,e),tabindex:b.disabled(e)?null:"0"},["string"==typeof e.icon?s((t(),o("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[y]]):(t(),o(a(e.icon),{key:1}))],10,["href","target","onClick","tabindex"])),[[g,{value:e.label,disabled:!k.tooltipOptions},k.tooltipOptions]])],64))],42,["onMouseenter"])))),128))],544)])};var m={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:d}};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-dock {\n    position: absolute;\n    z-index: 1;\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-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\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}\n.p-dock-item {\n    -webkit-transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-action {\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    -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    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n"),m.render=function(n,l,c,r,s,a){const d=e("DockSub");return t(),o("div",{class:a.containerClass,style:c.style},[i(d,{model:c.model,template:n.$slots.item,exact:c.exact,tooltipOptions:c.tooltipOptions},null,8,["model","template","exact","tooltipOptions"])],6)};export default m;
+import e from"primevue/ripple";import{resolveComponent as t,resolveDirective as n,openBlock as i,createBlock as o,createVNode as l,Fragment as s,renderList as r,withCtx as c,withDirectives as a,resolveDynamicComponent as d}from"vue";var p={name:"DockSub",props:{model:{type:Array,default:null},templates:{type:null,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},itemClass(e){return["p-dock-item",{"p-dock-item-second-prev":this.currentIndex-2===e,"p-dock-item-prev":this.currentIndex-1===e,"p-dock-item-current":this.currentIndex===e,"p-dock-item-next":this.currentIndex+1===e,"p-dock-item-second-next":this.currentIndex+2===e}]},linkClass(e,t){return["p-dock-action",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},directives:{ripple:e}};const m={class:"p-dock-list-container"};p.render=function(e,p,k,u,f,b){const x=t("router-link"),h=n("ripple"),y=n("tooltip");return i(),o("div",m,[l("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:p[1]||(p[1]=(...e)=>b.onListMouseLeave&&b.onListMouseLeave(...e))},[(i(!0),o(s,null,r(k.model,((e,t)=>(i(),o("li",{class:b.itemClass(t),key:t,role:"none",onMouseenter:e=>b.onItemMouseEnter(t)},[k.templates.item?(i(),o(d(k.templates.item),{key:1,item:e},null,8,["item"])):(i(),o(s,{key:0},[e.to&&!b.disabled(e)?(i(),o(x,{key:0,to:e.to,custom:""},{default:c((({navigate:t,href:n,isActive:s,isExactActive:r})=>[a(l("a",{href:n,role:"menuitem",class:b.linkClass(e,{isActive:s,isExactActive:r}),target:e.target,onClick:n=>b.onItemClick(n,e,t)},[k.templates.icon?(i(),o(d(k.templates.icon),{key:1,item:e},null,8,["item"])):a((i(),o("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[h]])],10,["href","target","onClick"]),[[y,{value:e.label,disabled:!k.tooltipOptions},k.tooltipOptions]])])),_:2},1032,["to"])):a((i(),o("a",{key:1,href:e.url,role:"menuitem",class:b.linkClass(e),target:e.target,onClick:t=>b.onItemClick(t,e),tabindex:b.disabled(e)?null:"0"},[k.templates.icon?(i(),o(d(k.templates.icon),{key:1,item:e},null,8,["item"])):a((i(),o("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[h]])],10,["href","target","onClick","tabindex"])),[[y,{value:e.label,disabled:!k.tooltipOptions},k.tooltipOptions]])],64))],42,["onMouseenter"])))),128))],544)])};var k={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:p}};!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-dock {\n    position: absolute;\n    z-index: 1;\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-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\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}\n.p-dock-item {\n    -webkit-transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-action {\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    -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    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n"),k.render=function(e,n,s,r,c,a){const d=t("DockSub");return i(),o("div",{class:a.containerClass,style:s.style},[l(d,{model:s.model,templates:e.$slots,exact:s.exact,tooltipOptions:s.tooltipOptions},null,8,["model","templates","exact","tooltipOptions"])],6)};export default k;

package/dock/dock.js

@@ -1,7 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.dock = (function (vue) {
+this.primevue.dock = (function (Ripple, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+
     var script$1 = {
         name: 'DockSub',
         props: {
@@ -9,8 +13,8 @@ this.primevue.dock = (function (vue) {
                 type: Array,
                 default: null
             },
-            template: {
-                type: Function,
+            templates: {
+                type: null,
                 default: null
             },
             exact: {
@@ -67,6 +71,9 @@ this.primevue.dock = (function (vue) {
             disabled(item) {
                 return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
             }
+        },
+        directives: {
+            'ripple': Ripple__default['default']
         }
     };
 
@@ -91,7 +98,7 @@ this.primevue.dock = (function (vue) {
               role: "none",
               onMouseenter: $event => ($options.onItemMouseEnter(index))
             }, [
-              (!$props.template)
+              (!$props.templates['item'])
                 ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [
                     (item.to && !$options.disabled(item))
                       ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -107,14 +114,17 @@ this.primevue.dock = (function (vue) {
                               target: item.target,
                               onClick: $event => ($options.onItemClick($event, item, navigate))
                             }, [
-                              (typeof item.icon === 'string')
+                              (!$props.templates['icon'])
                                 ? vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
                                     key: 0,
                                     class: ['p-dock-action-icon', item.icon]
                                   }, null, 2)), [
                                     [_directive_ripple]
                                   ])
-                                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), { key: 1 }))
+                                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['icon']), {
+                                    key: 1,
+                                    item: item
+                                  }, null, 8, ["item"]))
                             ], 10, ["href", "target", "onClick"]), [
                               [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions]
                             ])
@@ -130,19 +140,22 @@ this.primevue.dock = (function (vue) {
                           onClick: $event => ($options.onItemClick($event, item)),
                           tabindex: $options.disabled(item) ? null : '0'
                         }, [
-                          (typeof item.icon === 'string')
+                          (!$props.templates['icon'])
                             ? vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
                                 key: 0,
                                 class: ['p-dock-action-icon', item.icon]
                               }, null, 2)), [
                                 [_directive_ripple]
                               ])
-                            : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), { key: 1 }))
+                            : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['icon']), {
+                                key: 1,
+                                item: item
+                              }, null, 8, ["item"]))
                         ], 10, ["href", "target", "onClick", "tabindex"])), [
                           [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions]
                         ])
                   ], 64))
-                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['item']), {
                     key: 1,
                     item: item
                   }, null, 8, ["item"]))
@@ -189,10 +202,10 @@ this.primevue.dock = (function (vue) {
       }, [
         vue.createVNode(_component_DockSub, {
           model: $props.model,
-          template: _ctx.$slots.item,
+          templates: _ctx.$slots,
           exact: $props.exact,
           tooltipOptions: $props.tooltipOptions
-        }, null, 8, ["model", "template", "exact", "tooltipOptions"])
+        }, null, 8, ["model", "templates", "exact", "tooltipOptions"])
       ], 6))
     }
 
@@ -230,4 +243,4 @@ this.primevue.dock = (function (vue) {
 
     return script;
 
-}(Vue));
+}(primevue.ripple, Vue));