primevue 3.7.0 → 3.8.1

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));

package/dock/dock.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.dock=function(e){"use strict";var t={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,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}};const n={class:"p-dock-list-container"};t.render=function(t,o,i,c,l,r){const s=e.resolveComponent("router-link"),a=e.resolveDirective("ripple"),p=e.resolveDirective("tooltip");return e.openBlock(),e.createBlock("div",n,[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,((t,n)=>(e.openBlock(),e.createBlock("li",{class:r.itemClass(n),key:n,role:"none",onMouseenter:e=>r.onItemMouseEnter(n)},[i.template?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.template),{key:1,item:t},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[t.to&&!r.disabled(t)?(e.openBlock(),e.createBlock(s,{key:0,to:t.to,custom:""},{default:e.withCtx((({navigate:n,href:o,isActive:c,isExactActive:l})=>[e.withDirectives(e.createVNode("a",{href:o,role:"menuitem",class:r.linkClass(t,{isActive:c,isExactActive:l}),target:t.target,onClick:e=>r.onItemClick(e,t,n)},["string"==typeof t.icon?e.withDirectives((e.openBlock(),e.createBlock("span",{key:0,class:["p-dock-action-icon",t.icon]},null,2)),[[a]]):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:1}))],10,["href","target","onClick"]),[[p,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions]])])),_:2},1032,["to"])):e.withDirectives((e.openBlock(),e.createBlock("a",{key:1,href:t.url,role:"menuitem",class:r.linkClass(t),target:t.target,onClick:e=>r.onItemClick(e,t),tabindex:r.disabled(t)?null:"0"},["string"==typeof t.icon?e.withDirectives((e.openBlock(),e.createBlock("span",{key:0,class:["p-dock-action-icon",t.icon]},null,2)),[[a]]):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:1}))],10,["href","target","onClick","tabindex"])),[[p,{value:t.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:t}};return 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"),o.render=function(t,n,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:t.$slots.item,exact:o.exact,tooltipOptions:o.tooltipOptions},null,8,["model","template","exact","tooltipOptions"])],6)},o}(Vue);
+this.primevue=this.primevue||{},this.primevue.dock=function(e,t){"use strict";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}};return 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)},l}(primevue.ripple,Vue);

package/dropdown/Dropdown.vue

@@ -21,7 +21,7 @@
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div class="p-dropdown-header" v-if="filter">
                         <div  class="p-dropdown-filter-container">
-                            <input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown"  @input="onFilterChange"/>
+                            <input type="text" ref="filterInput" v-model="filterValue" @vnode-updated="onFilterUpdated" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown"  @input="onFilterChange"/>
                             <span class="p-dropdown-filter-icon pi pi-search"></span>
                         </div>
                     </div>
@@ -206,20 +206,20 @@ export default {
         },
         getSelectedOption() {
             let index = this.getSelectedOptionIndex();
-            return index !== -1 ? (this.optionGroupLabel ? this.getOptionGroupChildren(this.options[index.group])[index.option]: this.options[index]) : null;
+            return index !== -1 ? (this.optionGroupLabel ? this.getOptionGroupChildren(this.visibleOptions[index.group])[index.option]: this.visibleOptions[index]) : null;
         },
         getSelectedOptionIndex() {
-            if (this.modelValue != null && this.options) {
+            if (this.modelValue != null && this.visibleOptions) {
                 if (this.optionGroupLabel) {
-                    for (let i = 0; i < this.options.length; i++) {
-                        let selectedOptionIndex = this.findOptionIndexInList(this.modelValue, this.getOptionGroupChildren(this.options[i]));
+                    for (let i = 0; i < this.visibleOptions.length; i++) {
+                        let selectedOptionIndex = this.findOptionIndexInList(this.modelValue, this.getOptionGroupChildren(this.visibleOptions[i]));
                         if (selectedOptionIndex !== -1) {
                             return {group: i, option: selectedOptionIndex};
                         }
                     }
                 }
                 else {
-                    return this.findOptionIndexInList(this.modelValue, this.options);
+                    return this.findOptionIndexInList(this.modelValue, this.visibleOptions);
                 }
             }
 
@@ -436,7 +436,6 @@ export default {
         },
         onOverlayEnter(el) {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
-            this.scrollValueInView();
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindScrollListener();
@@ -609,6 +608,8 @@ export default {
         },
         onFilterChange(event) {
             this.$emit('filter', {originalEvent: event, value: event.target.value});
+        },
+        onFilterUpdated() {
             if (this.overlayVisible) {
                 this.alignOverlay();
             }
@@ -653,7 +654,7 @@ export default {
                     return filteredGroups
                 }
                 else {
-                    return FilterService.filter(this.options, this.searchFields, this.filterValue, 'contains', this.filterLocale);
+                    return FilterService.filter(this.options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
                 }
             }
             else {

package/dropdown/dropdown.cjs.js

@@ -146,20 +146,20 @@ var script = {
         },
         getSelectedOption() {
             let index = this.getSelectedOptionIndex();
-            return index !== -1 ? (this.optionGroupLabel ? this.getOptionGroupChildren(this.options[index.group])[index.option]: this.options[index]) : null;
+            return index !== -1 ? (this.optionGroupLabel ? this.getOptionGroupChildren(this.visibleOptions[index.group])[index.option]: this.visibleOptions[index]) : null;
         },
         getSelectedOptionIndex() {
-            if (this.modelValue != null && this.options) {
+            if (this.modelValue != null && this.visibleOptions) {
                 if (this.optionGroupLabel) {
-                    for (let i = 0; i < this.options.length; i++) {
-                        let selectedOptionIndex = this.findOptionIndexInList(this.modelValue, this.getOptionGroupChildren(this.options[i]));
+                    for (let i = 0; i < this.visibleOptions.length; i++) {
+                        let selectedOptionIndex = this.findOptionIndexInList(this.modelValue, this.getOptionGroupChildren(this.visibleOptions[i]));
                         if (selectedOptionIndex !== -1) {
                             return {group: i, option: selectedOptionIndex};
                         }
                     }
                 }
                 else {
-                    return this.findOptionIndexInList(this.modelValue, this.options);
+                    return this.findOptionIndexInList(this.modelValue, this.visibleOptions);
                 }
             }
 
@@ -373,7 +373,6 @@ var script = {
         },
         onOverlayEnter(el) {
             utils.ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
-            this.scrollValueInView();
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindScrollListener();
@@ -546,6 +545,8 @@ var script = {
         },
         onFilterChange(event) {
             this.$emit('filter', {originalEvent: event, value: event.target.value});
+        },
+        onFilterUpdated() {
             if (this.overlayVisible) {
                 this.alignOverlay();
             }
@@ -590,7 +591,7 @@ var script = {
                     return filteredGroups
                 }
                 else {
-                    return api.FilterService.filter(this.options, this.searchFields, this.filterValue, 'contains', this.filterLocale);
+                    return api.FilterService.filter(this.options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
                 }
             }
             else {
@@ -695,7 +696,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createBlock("div", {
     ref: "container",
     class: $options.containerClass,
-    onClick: _cache[12] || (_cache[12] = $event => ($options.onClick($event)))
+    onClick: _cache[13] || (_cache[13] = $event => ($options.onClick($event)))
   }, [
     vue.createVNode("div", _hoisted_1, [
       vue.createVNode("input", {
@@ -774,7 +775,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 key: 0,
                 ref: $options.overlayRef,
                 class: $options.panelStyleClass,
-                onClick: _cache[11] || (_cache[11] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
+                onClick: _cache[12] || (_cache[12] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
               }, [
                 vue.renderSlot(_ctx.$slots, "header", {
                   value: $props.modelValue,
@@ -787,11 +788,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           type: "text",
                           ref: "filterInput",
                           "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => ($data.filterValue = $event)),
+                          onVnodeUpdated: _cache[9] || (_cache[9] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
                           autoComplete: "off",
                           class: "p-dropdown-filter p-inputtext p-component",
                           placeholder: $props.filterPlaceholder,
-                          onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onFilterKeyDown && $options.onFilterKeyDown(...args))),
-                          onInput: _cache[10] || (_cache[10] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
+                          onKeydown: _cache[10] || (_cache[10] = (...args) => ($options.onFilterKeyDown && $options.onFilterKeyDown(...args))),
+                          onInput: _cache[11] || (_cache[11] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
                         }, null, 40, ["placeholder"]), [
                           [vue.vModelText, $data.filterValue]
                         ]),