primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 11.5 kB
JavaScript
import t from"primevue/basecomponent";import{useStyle as e}from"primevue/usestyle";import n from"primevue/ripple";import i from"primevue/tooltip";import{UniqueComponentId as o,ObjectUtils as r,DomHandler as a}from"primevue/utils";import{mergeProps as s,resolveComponent as c,resolveDirective as l,openBlock as d,createElementBlock as u,createElementVNode as p,Fragment as m,renderList as f,createBlock as h,withCtx as b,withDirectives as x,resolveDynamicComponent as y,normalizeClass as g,createVNode as k}from"vue";var v=e("\n.p-dock {\n position: absolute;\n z-index: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n\n.p-dock-list-container {\n display: flex;\n pointer-events: auto;\n}\n\n.p-dock-list {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.p-dock-item {\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n}\n\n.p-dock-link {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n cursor: default;\n}\n\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n transform: scale(1.2);\n}\n\n.p-dock-item-prev,\n.p-dock-item-next {\n transform: scale(1.4);\n}\n\n.p-dock-item-current {\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\n.p-dock-top .p-dock-item {\n transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n left: 0;\n bottom: 0;\n width: 100%;\n}\n\n.p-dock-bottom .p-dock-item {\n transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n right: 0;\n top: 0;\n height: 100%;\n}\n\n.p-dock-right .p-dock-item {\n transform-origin: center right;\n}\n\n.p-dock-right .p-dock-list {\n flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n left: 0;\n top: 0;\n height: 100%;\n}\n\n.p-dock-left .p-dock-item {\n transform-origin: center left;\n}\n\n.p-dock-left .p-dock-list {\n flex-direction: column;\n}\n",{name:"dock",manual:!0}),I={name:"BaseDock",extends:t,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}},css:{classes:{root:function(t){return["p-dock p-component","p-dock-".concat(t.props.position)]},container:"p-dock-list-container",menu:"p-dock-list",menuitem:function(t){var e=t.instance,n=t.processedItem,i=t.index;return["p-dock-item",{"p-focus":e.isItemActive(t.id),"p-disabled":e.disabled(n),"p-dock-item-second-prev":e.currentIndex-2===i,"p-dock-item-prev":e.currentIndex-1===i,"p-dock-item-current":e.currentIndex===i,"p-dock-item-next":e.currentIndex+1===i,"p-dock-item-second-next":e.currentIndex+2===i}]},content:"p-menuitem-content",action:function(t){return["p-dock-link",{"router-link-active":t.isActive,"router-link-active-exact":t.props.exact&&t.isExactActive}]},icon:"p-dock-icon"},loadStyle:v.load},provide:function(){return{$parentInstance:this}}};function O(t){return D(t)||S(t)||w(t)||A()}function A(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function w(t,e){if(t){if("string"==typeof t)return L(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?L(t,e):void 0}}function S(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function D(t){if(Array.isArray(t))return L(t)}function L(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}var K={name:"DockSub",hostName:"Dock",extends:t,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:function(){return{id:this.menuId,currentIndex:-3,focused:!1,focusedOptionIndex:-1}},watch:{menuId:function(t){this.id=t||o()}},mounted:function(){this.id=this.id||o()},methods:{getItemId:function(t){return"".concat(this.id,"_").concat(t)},getItemProp:function(t,e){return t&&t.item?r.getItemValue(t.item[e]):void 0},getPTOptions:function(t,e,n){return this.ptm(t,{context:{index:n,item:e,active:this.isItemActive(this.getItemId(n))}})},isSameMenuItem:function(t){return t.currentTarget&&(t.currentTarget.isSameNode(t.target)||t.currentTarget.isSameNode(t.target.closest('[data-pc-section="menuitem"]')))},isItemActive:function(t){return t===this.focusedOptionIndex},onListMouseLeave:function(){this.currentIndex=-3},onItemMouseEnter:function(t){this.currentIndex=t},onItemActionClick:function(t,e){e&&e(t)},onItemClick:function(t,e){if(this.isSameMenuItem(t)){var n=this.getItemProp(e,"command");n&&n({originalEvent:t,item:e.item})}},onListFocus:function(t){this.focused=!0,this.changeFocusedOptionIndex(0),this.$emit("focus",t)},onListBlur:function(t){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",t)},onListKeyDown:function(t){switch(t.code){case"ArrowDown":"left"!==this.position&&"right"!==this.position||this.onArrowDownKey(),t.preventDefault();break;case"ArrowUp":"left"!==this.position&&"right"!==this.position||this.onArrowUpKey(),t.preventDefault();break;case"ArrowRight":"top"!==this.position&&"bottom"!==this.position||this.onArrowDownKey(),t.preventDefault();break;case"ArrowLeft":"top"!==this.position&&"bottom"!==this.position||this.onArrowUpKey(),t.preventDefault();break;case"Home":this.onHomeKey(),t.preventDefault();break;case"End":this.onEndKey(),t.preventDefault();break;case"Enter":case"Space":this.onSpaceKey(t),t.preventDefault()}},onArrowDownKey:function(){var t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t)},onArrowUpKey:function(){var t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t)},onHomeKey:function(){this.changeFocusedOptionIndex(0)},onEndKey:function(){this.changeFocusedOptionIndex(a.find(this.$refs.list,'li[data-pc-section="menuitem"][data-p-disabled="false"]').length-1)},onSpaceKey:function(){var t=a.findSingle(this.$refs.list,'li[id="'.concat("".concat(this.focusedOptionIndex),'"]')),e=t&&a.findSingle(t,'[data-pc-section="action"]');e?e.click():t&&t.click()},findNextOptionIndex:function(t){var e=O(a.find(this.$refs.list,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(e){return e.id===t}));return e>-1?e+1:0},findPrevOptionIndex:function(t){var e=O(a.find(this.$refs.list,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(e){return e.id===t}));return e>-1?e-1:0},changeFocusedOptionIndex:function(t){var e=a.find(this.$refs.list,'li[data-pc-section="menuitem"][data-p-disabled="false"]');this.focusedOptionIndex=e[t>=e.length?e.length-1:t<0?0:t].getAttribute("id")},disabled:function(t){return"function"==typeof t.disabled?t.disabled():t.disabled},getMenuItemProps:function(t,e){return{action:s({tabindex:-1,"aria-hidden":!0,class:this.cx("action")},this.getPTOptions("action",t,e)),icon:s({class:[this.cx("icon"),t.icon]},this.getPTOptions("icon",t,e))}}},computed:{focusedOptionId:function(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},directives:{ripple:n,tooltip:i}},P=["id","aria-orientation","aria-activedescendant","tabindex","aria-label","aria-labelledby"],M=["id","aria-label","aria-disabled","onClick","onMouseenter","data-p-focused","data-p-disabled"],T=["href","target","onClick"],C=["href","target"];K.render=function(t,e,n,i,o,r){var a=c("router-link"),k=l("ripple"),v=l("tooltip");return d(),u("div",s({class:t.cx("container")},t.ptm("container")),[p("ul",s({ref:"list",id:o.id,class:t.cx("menu"),role:"menu","aria-orientation":"bottom"===n.position||"top"===n.position?"horizontal":"vertical","aria-activedescendant":o.focused?r.focusedOptionId:void 0,tabindex:n.tabindex,"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledby,onFocus:e[0]||(e[0]=function(){return r.onListFocus&&r.onListFocus.apply(r,arguments)}),onBlur:e[1]||(e[1]=function(){return r.onListBlur&&r.onListBlur.apply(r,arguments)}),onKeydown:e[2]||(e[2]=function(){return r.onListKeyDown&&r.onListKeyDown.apply(r,arguments)}),onMouseleave:e[3]||(e[3]=function(){return r.onListMouseLeave&&r.onListMouseLeave.apply(r,arguments)})},t.ptm("menu")),[(d(!0),u(m,null,f(n.model,(function(e,i){return d(),u("li",s({key:i,id:r.getItemId(i),class:t.cx("menuitem",{processedItem:e,index:i,id:r.getItemId(i)}),role:"menuitem","aria-label":e.label,"aria-disabled":r.disabled(e),onClick:function(t){return r.onItemClick(t,e)},onMouseenter:function(t){return r.onItemMouseEnter(i)}},r.getPTOptions("menuitem",e,i),{"data-p-focused":r.isItemActive(r.getItemId(i)),"data-p-disabled":r.disabled(e)||!1}),[p("div",s({class:t.cx("content")},r.getPTOptions("content",e,i)),[n.templates.item?(d(),h(y(n.templates.item),{key:1,item:e,index:i,label:e.label,props:r.getMenuItemProps(e,i)},null,8,["item","index","label","props"])):(d(),u(m,{key:0},[e.to&&!r.disabled(e)?(d(),h(a,{key:0,to:e.to,custom:""},{default:b((function(o){var a=o.navigate,c=o.href,l=o.isActive,p=o.isExactActive;return[x((d(),u("a",s({href:c,class:t.cx("action",{isActive:l,isExactActive:p}),target:e.target,tabindex:"-1","aria-hidden":"true",onClick:function(t){return r.onItemActionClick(t,e,a)}},r.getPTOptions("action",e,i)),[n.templates.icon?(d(),h(y(n.templates.icon),{key:1,item:e,class:g(t.cx("icon"))},null,8,["item","class"])):x((d(),u("span",s({key:0,class:[t.cx("icon"),e.icon]},r.getPTOptions("icon",e,i)),null,16)),[[k]])],16,T)),[[v,{value:e.label,disabled:!n.tooltipOptions},n.tooltipOptions]])]})),_:2},1032,["to"])):x((d(),u("a",s({key:1,href:e.url,class:t.cx("action"),target:e.target,tabindex:"-1","aria-hidden":"true"},r.getPTOptions("action",e,i)),[n.templates.icon?(d(),h(y(n.templates.icon),{key:1,item:e,class:g(t.cx("icon"))},null,8,["item","class"])):x((d(),u("span",s({key:0,class:[t.cx("icon"),e.icon]},r.getPTOptions("icon",e,i)),null,16)),[[k]])],16,C)),[[v,{value:e.label,disabled:!n.tooltipOptions},n.tooltipOptions]])],64))],16)],16,M)})),128))],16,P)],16)};var E={name:"Dock",extends:I,beforeMount:function(){this.$slots.item||console.warn("In future versions, vue-router support will be removed. Item templating should be used.")},computed:{containerClass:function(){return[this.class,this.cx("root")]}},components:{DockSub:K}};E.render=function(t,e,n,i,o,r){var a=c("DockSub");return d(),u("div",s({class:r.containerClass,style:t.style},t.ptm("root"),{"data-pc-name":"dock"}),[k(a,{model:t.model,templates:t.$slots,exact:t.exact,tooltipOptions:t.tooltipOptions,position:t.position,menuId:t.menuId,"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledby,tabindex:t.tabindex,pt:t.pt,unstyled:t.unstyled},null,8,["model","templates","exact","tooltipOptions","position","menuId","aria-label","aria-labelledby","tabindex","pt","unstyled"])],16)};export{E as default};