primevue/dock/dock.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Actions CI](https://github.com/primefaces/primevue/wo

import e from"primevue/ripple";import t from"primevue/tooltip";import{ObjectUtils as n,DomHandler as i,UniqueComponentId as o}from"primevue/utils";import{resolveComponent as l,resolveDirective as s,openBlock as r,createElementBlock as a,createElementVNode as d,Fragment as c,renderList as p,normalizeClass as u,createBlock as m,withCtx as f,withDirectives as b,resolveDynamicComponent as k,normalizeStyle as x,createVNode as h}from"vue";var y={name:"DockSub",emits:["focus","blur"],props:{position:{type:String,default:"bottom"},model:{type:Array,default:null},templates:{type:null,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null,menuId:{type:String,default:null},tabindex:{type:Number,default:0},"aria-label":{type:String,default:null},"aria-labelledby":{type:String,default:null}},data:()=>({currentIndex:-3,focused:!1,focusedOptionIndex:-1}),methods:{getItemId(e){return`${this.id}_${e}`},getItemProp:(e,t)=>e&&e.item?n.getItemValue(e.item[t]):void 0,isSameMenuItem:e=>e.currentTarget&&(e.currentTarget.isSameNode(e.target)||e.currentTarget.isSameNode(e.target.closest(".p-menuitem"))),onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemActionClick(e,t){t&&t(e)},onItemClick(e,t){if(this.isSameMenuItem(e)){const n=this.getItemProp(t,"command");n&&n({originalEvent:e,item:t.item})}},onListFocus(e){this.focused=!0,this.changeFocusedOptionIndex(0),this.$emit("focus",e)},onListBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onListKeyDown(e){switch(e.code){case"ArrowDown":"left"!==this.position&&"right"!==this.position||this.onArrowDownKey(),e.preventDefault();break;case"ArrowUp":"left"!==this.position&&"right"!==this.position||this.onArrowUpKey(),e.preventDefault();break;case"ArrowRight":"top"!==this.position&&"bottom"!==this.position||this.onArrowDownKey(),e.preventDefault();break;case"ArrowLeft":"top"!==this.position&&"bottom"!==this.position||this.onArrowUpKey(),e.preventDefault();break;case"Home":this.onHomeKey(),e.preventDefault();break;case"End":this.onEndKey(),e.preventDefault();break;case"Enter":case"Space":this.onSpaceKey(e),e.preventDefault()}},onArrowDownKey(){const e=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(e)},onArrowUpKey(){const e=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(e)},onHomeKey(){this.changeFocusedOptionIndex(0)},onEndKey(){this.changeFocusedOptionIndex(i.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)").length-1)},onSpaceKey(){const e=i.findSingle(this.$refs.list,`li[id="${this.focusedOptionIndex}"]`),t=e&&i.findSingle(e,".p-dock-link");t?t.click():e&&e.click()},findNextOptionIndex(e){const t=[...i.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)")].findIndex((t=>t.id===e));return t>-1?t+1:0},findPrevOptionIndex(e){const t=[...i.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)")].findIndex((t=>t.id===e));return t>-1?t-1:0},changeFocusedOptionIndex(e){const t=i.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)");let n=e>=t.length?t.length-1:e<0?0:e;this.focusedOptionIndex=t[n].getAttribute("id")},itemClass(e,t,n){return["p-dock-item",{"p-focus":n===this.focusedOptionIndex,"p-disabled":this.disabled(e),"p-dock-item-second-prev":this.currentIndex-2===t,"p-dock-item-prev":this.currentIndex-1===t,"p-dock-item-current":this.currentIndex===t,"p-dock-item-next":this.currentIndex+1===t,"p-dock-item-second-next":this.currentIndex+2===t}]},linkClass(e){return["p-dock-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},computed:{id(){return this.menuId||o()},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},directives:{ripple:e,tooltip:t}};const g={class:"p-dock-list-container"},v=["id","aria-orientation","aria-activedescendant","tabindex","aria-label","aria-labelledby"],I=["id","aria-label","aria-disabled","onClick","onMouseenter"],w={class:"p-menuitem-content"},O=["href","target","onClick"],S=["href","target"];y.render=function(e,t,n,i,o,x){const h=l("router-link"),y=s("ripple"),A=s("tooltip");return r(),a("div",g,[d("ul",{ref:"list",id:x.id,class:"p-dock-list",role:"menu","aria-orientation":"bottom"===n.position||"top"===n.position?"horizontal":"vertical","aria-activedescendant":o.focused?x.focusedOptionId:void 0,tabindex:n.tabindex,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:t[0]||(t[0]=(...e)=>x.onListFocus&&x.onListFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>x.onListBlur&&x.onListBlur(...e)),onKeydown:t[2]||(t[2]=(...e)=>x.onListKeyDown&&x.onListKeyDown(...e)),onMouseleave:t[3]||(t[3]=(...e)=>x.onListMouseLeave&&x.onListMouseLeave(...e))},[(r(!0),a(c,null,p(n.model,((e,t)=>(r(),a("li",{key:t,id:x.getItemId(t),class:u(x.itemClass(e,t,x.getItemId(t))),role:"menuitem","aria-label":e.label,"aria-disabled":x.disabled(e),onClick:t=>x.onItemClick(t,e),onMouseenter:e=>x.onItemMouseEnter(t)},[d("div",w,[n.templates.item?(r(),m(k(n.templates.item),{key:1,item:e,index:t},null,8,["item","index"])):(r(),a(c,{key:0},[e.to&&!x.disabled(e)?(r(),m(h,{key:0,to:e.to,custom:""},{default:f((({navigate:t,href:i,isActive:o,isExactActive:l})=>[b((r(),a("a",{href:i,class:u(x.linkClass({isActive:o,isExactActive:l})),target:e.target,tabindex:"-1","aria-hidden":"true",onClick:n=>x.onItemActionClick(n,e,t)},[n.templates.icon?(r(),m(k(n.templates.icon),{key:1,item:e},null,8,["item"])):b((r(),a("span",{key:0,class:u(["p-dock-icon",e.icon])},null,2)),[[y]])],10,O)),[[A,{value:e.label,disabled:!n.tooltipOptions},n.tooltipOptions]])])),_:2},1032,["to"])):b((r(),a("a",{key:1,href:e.url,class:u(x.linkClass()),target:e.target,tabindex:"-1","aria-hidden":"true"},[n.templates.icon?(r(),m(k(n.templates.icon),{key:1,item:e},null,8,["item"])):b((r(),a("span",{key:0,class:u(["p-dock-icon",e.icon])},null,2)),[[y]])],10,S)),[[A,{value:e.label,disabled:!n.tooltipOptions},n.tooltipOptions]])],64))])],42,I)))),128))],40,v)])};var A={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0},menuId:{type:String,default:null},tabindex:{type:Number,default:0},"aria-label":{type:String,default:null},"aria-labelledby":{type:String,default:null}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:y}};!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 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-link {\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"),A.render=function(e,t,n,i,o,s){const d=l("DockSub");return r(),a("div",{class:u(s.containerClass),style:x(n.style)},[h(d,{model:n.model,templates:e.$slots,exact:n.exact,tooltipOptions:n.tooltipOptions,position:n.position,menuId:n.menuId,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,tabindex:n.tabindex},null,8,["model","templates","exact","tooltipOptions","position","menuId","aria-label","aria-labelledby","tabindex"])],6)};export{A as default};