primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 6.24 kB
JavaScript
import{resolveComponent as e,resolveDirective as n,openBlock as t,createBlock as o,Fragment as i,renderList as r,withCtx as c,createVNode as l,withDirectives as s,resolveDynamicComponent as a}from"vue";var d={name:"DockSub",props:{model:{type:Array,default:null},template:{type:Function,default:null}},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,n){n.command&&n.command({originalEvent:e,item:n}),e.preventDefault()},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}]}}};d.render=function(d,m,p,k,u,f){const x=e("router-link"),b=n("ripple");return t(),o("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:m[1]||(m[1]=(...e)=>f.onListMouseLeave&&f.onListMouseLeave(...e))},[(t(!0),o(i,null,r(p.model,((e,n)=>(t(),o("li",{class:f.itemClass(n),key:n,role:"none",onMouseenter:e=>f.onItemMouseEnter(n)},[p.template?(t(),o(a(p.template),{key:1,item:e},null,8,["item"])):(t(),o(i,{key:0},[e.to&&!e.disabled?(t(),o(x,{key:0,to:e.to,custom:""},{default:c((({href:n})=>[l("a",{href:n,role:"menuitem",class:["p-dock-action",{"p-disabled":e.disabled}],target:e.target,"data-pr-tooltip":e.label,onClick:n=>f.onItemClick(d.e,e)},["string"==typeof e.icon?s((t(),o("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[b]]):(t(),o(a(e.icon),{key:1}))],10,["href","target","data-pr-tooltip","onClick"])])),_:2},1032,["to"])):(t(),o("a",{key:1,href:e.url||"#",role:"menuitem",class:["p-dock-action",{"p-disabled":e.disabled}],target:e.target,"data-pr-tooltip":e.label,onClick:n=>f.onItemClick(n,e)},["string"==typeof e.icon?s((t(),o("span",{key:0,class:["p-dock-action-icon",e.icon]},null,2)),[[b]]):(t(),o(a(e.icon),{key:1}))],10,["href","target","data-pr-tooltip","onClick"]))],64))],42,["onMouseenter"])))),128))],544)};var m={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,n){n.command&&n.command({originalEvent:e,item:n}),e.preventDefault()},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}]}},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 {\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 pointer-events: auto;\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,i,r,c,s,a){const d=e("DockSub");return t(),o("div",{class:a.containerClass,style:r.style},[l(d,{model:r.model,template:n.$slots.item},null,8,["model","template"])],6)};export default m;