primevue/dock/dock.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

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;