primevue 3.16.2 → 3.18.0

package/tabmenu/tabmenu.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),n=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"TabMenu",emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},methods:{onItemClick(e,t,n,l){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&l&&l(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,updateInkBar(){let t=this.$refs.nav.children,n=!1;for(let l=0;l<t.length;l++){let i=t[l];e.DomHandler.hasClass(i,"p-highlight")&&(this.$refs.inkbar.style.width=e.DomHandler.getWidth(i)+"px",this.$refs.inkbar.style.left=e.DomHandler.getOffset(i).left-e.DomHandler.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:l(t).default}};const a={class:"p-tabmenu p-component"},o={ref:"nav",class:"p-tabmenu-nav p-reset",role:"tablist"},s=["href","onClick"],r={class:"p-menuitem-text"},c=["href","target","onClick","tabindex"],m={class:"p-menuitem-text"},d={ref:"inkbar",class:"p-tabmenu-ink-bar"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: 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    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),i.render=function(e,t,l,i,p,u){const b=n.resolveComponent("router-link"),h=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",a,[n.createElementVNode("ul",o,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(l.model,((t,l)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:u.label(t)+"_"+l.toString()},[t.to&&!u.disabled(t)?(n.openBlock(),n.createBlock(b,{key:0,to:t.to,custom:""},{default:n.withCtx((({navigate:i,href:a,isActive:o,isExactActive:c})=>[u.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:0,class:n.normalizeClass(u.getRouteItemClass(t,o,c)),style:n.normalizeStyle(t.style),role:"tab"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,href:a,class:"p-menuitem-link",onClick:e=>u.onItemClick(e,t,l,i),role:"presentation"},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(u.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",r,n.toDisplayString(u.label(t)),1)],8,s)),[[h]])],6)):n.createCommentVNode("",!0)])),_:2},1032,["to"])):u.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:1,class:n.normalizeClass(u.getItemClass(t,l)),role:"tab"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,href:t.url,class:"p-menuitem-link",target:t.target,onClick:e=>u.onItemClick(e,t,l),role:"presentation",tabindex:u.disabled(t)?null:"0"},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(u.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",m,n.toDisplayString(u.label(t)),1)],8,c)),[[h]])],2)):n.createCommentVNode("",!0)],64)))),128)),n.createElementVNode("li",d,null,512)],512)])},module.exports=i;
+"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),n=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"TabMenu",emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},methods:{onItemClick(e,t,n,a){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&a&&a(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},onKeydownItem(e,t,n){let a=n,l={};const i=this.$refs.tabLink;switch(e.code){case"ArrowRight":l=this.findNextItem(this.$refs.tab,a),a=l.i;break;case"ArrowLeft":l=this.findPrevItem(this.$refs.tab,a),a=l.i;break;case"End":l=this.findPrevItem(this.$refs.tab,this.model.length),a=l.i,e.preventDefault();break;case"Home":l=this.findNextItem(this.$refs.tab,-1),a=l.i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(i)}i[a]&&i[n]&&(i[n].tabIndex="-1",i[a].tabIndex="0",i[a].focus())},findNextItem(e,n){let a=n+1;if(a>=e.length)return{nextItem:e[e.length],i:e.length};let l=e[a];return l?t.DomHandler.hasClass(l,"p-disabled")?this.findNextItem(e,a):{nextItem:l,i:a}:null},findPrevItem(e,n){let a=n-1;if(a<0)return{nextItem:e[0],i:0};let l=e[a];return l?t.DomHandler.hasClass(l,"p-disabled")?this.findPrevItem(e,a):{prevItem:l,i:a}:null},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,setDefaultTabIndexes(e){setTimeout((()=>{e.forEach((e=>{e.tabIndex=t.DomHandler.hasClass(e.parentElement,"p-highlight")?"0":"-1"}))}),300)},setTabIndex(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar(){let e=this.$refs.nav.children,n=!1;for(let a=0;a<e.length;a++){let l=e[a];t.DomHandler.hasClass(l,"p-highlight")&&(this.$refs.inkbar.style.width=t.DomHandler.getWidth(l)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(l).left-t.DomHandler.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:a(e).default}};const i={class:"p-tabmenu p-component"},s=["aria-labelledby","aria-label"],r=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],o={class:"p-menuitem-text"},d=["href","target","aria-label","aria-disabled","tabindex","onClick","onKeydown"],c={class:"p-menuitem-text"},m={ref:"inkbar",class:"p-tabmenu-ink-bar"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&a.firstChild?a.insertBefore(l,a.firstChild):a.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: 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    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),l.render=function(e,t,a,l,p,u){const b=n.resolveComponent("router-link"),f=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",i,[n.createElementVNode("ul",{ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(a.model,((t,a)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:u.label(t)+"_"+a.toString()},[t.to&&!u.disabled(t)?(n.openBlock(),n.createBlock(b,{key:0,to:t.to,custom:""},{default:n.withCtx((({navigate:l,href:i,isActive:s,isExactActive:d})=>[u.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:0,ref_for:!0,ref:"tab",class:n.normalizeClass(u.getRouteItemClass(t,s,d)),style:n.normalizeStyle(t.style),role:"presentation"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:i,class:"p-menuitem-link","aria-label":u.label(t),"aria-disabled":u.disabled(t),tabindex:d?"0":"-1",onClick:e=>u.onItemClick(e,t,a,l),onKeydown:e=>u.onKeydownItem(e,t,a,l)},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(u.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",o,n.toDisplayString(u.label(t)),1)],40,r)),[[f]])],6)):n.createCommentVNode("",!0)])),_:2},1032,["to"])):u.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:1,ref_for:!0,ref:"tab",class:n.normalizeClass(u.getItemClass(t,a)),role:"presentation"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":u.label(t),"aria-disabled":u.disabled(t),tabindex:u.setTabIndex(a),onClick:e=>u.onItemClick(e,t,a),onKeydown:e=>u.onKeydownItem(e,t,a)},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(u.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",c,n.toDisplayString(u.label(t)),1)],40,d)),[[f]])],2)):n.createCommentVNode("",!0)],64)))),128)),n.createElementVNode("li",m,null,512)],8,s)])},module.exports=l;

package/tabmenu/tabmenu.esm.js

@@ -1,12 +1,12 @@
-import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
+import { DomHandler } from 'primevue/utils';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createBlock, withCtx, normalizeClass, normalizeStyle, withDirectives, createCommentVNode, toDisplayString, resolveDynamicComponent } from 'vue';
 
 var script = {
     name: 'TabMenu',
     emits: ['update:activeIndex', 'tab-change'],
     props: {
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -17,12 +17,28 @@ var script = {
         activeIndex: {
             type: Number,
             default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
         }
     },
     timeout: null,
     data() {
         return {
             d_activeIndex: this.activeIndex
+        };
+    },
+    watch: {
+        $route() {
+            this.timeout = setTimeout(() => this.updateInkBar(), 50);
+        },
+        activeIndex(newValue) {
+            this.d_activeIndex = newValue;
         }
     },
     mounted() {
@@ -34,18 +50,11 @@ var script = {
     beforeUnmount() {
         clearTimeout(this.timeout);
     },
-    watch: {
-        $route() {
-            this.timeout = setTimeout(() => this.updateInkBar(), 50);
-        },
-        activeIndex(newValue) {
-            this.d_activeIndex = newValue;
-        }
-    },
     methods: {
         onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -70,62 +79,163 @@ var script = {
                 index: index
             });
         },
+        onKeydownItem(event, item, index) {
+            let i = index;
+
+            let foundElement = {};
+            const tabLinkRef = this.$refs.tabLink;
+
+            switch (event.code) {
+                case 'ArrowRight': {
+                    foundElement = this.findNextItem(this.$refs.tab, i);
+                    i = foundElement.i;
+
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    foundElement = this.findPrevItem(this.$refs.tab, i);
+                    i = foundElement.i;
+
+                    break;
+                }
+
+                case 'End': {
+                    foundElement = this.findPrevItem(this.$refs.tab, this.model.length);
+                    i = foundElement.i;
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Home': {
+                    foundElement = this.findNextItem(this.$refs.tab, -1);
+                    i = foundElement.i;
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Space':
+
+                case 'Enter': {
+                    if (event.currentTarget) {
+                        event.currentTarget.click();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    this.setDefaultTabIndexes(tabLinkRef);
+
+                    break;
+                }
+            }
+
+            if (tabLinkRef[i] && tabLinkRef[index]) {
+                tabLinkRef[index].tabIndex = '-1';
+                tabLinkRef[i].tabIndex = '0';
+                tabLinkRef[i].focus();
+            }
+        },
+        findNextItem(items, index) {
+            let i = index + 1;
+
+            if (i >= items.length) {
+                return { nextItem: items[items.length], i: items.length };
+            }
+
+            let nextItem = items[i];
+
+            if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') ? this.findNextItem(items, i) : { nextItem, i };
+            else return null;
+        },
+        findPrevItem(items, index) {
+            let i = index - 1;
+
+            if (i < 0) {
+                return { nextItem: items[0], i: 0 };
+            }
+
+            let prevItem = items[i];
+
+            if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(items, i) : { prevItem, i };
+            else return null;
+        },
         getItemClass(item, index) {
-            return ['p-tabmenuitem', item.class, {
-                'p-highlight': this.d_activeIndex === index,
-                'p-disabled': this.disabled(item)
-            }];
+            return [
+                'p-tabmenuitem',
+                item.class,
+                {
+                    'p-highlight': this.d_activeIndex === index,
+                    'p-disabled': this.disabled(item)
+                }
+            ];
         },
         getRouteItemClass(item, isActive, isExactActive) {
-            return ['p-tabmenuitem', item.class, {
-                'p-highlight': this.exact ? isExactActive : isActive,
-                'p-disabled': this.disabled(item)
-            }];
+            return [
+                'p-tabmenuitem',
+                item.class,
+                {
+                    'p-highlight': this.exact ? isExactActive : isActive,
+                    'p-disabled': this.disabled(item)
+                }
+            ];
         },
         getItemIcon(item) {
             return ['p-menuitem-icon', item.icon];
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
+        },
+        setDefaultTabIndexes(tabLinkRef) {
+            setTimeout(() => {
+                tabLinkRef.forEach((item) => {
+                    item.tabIndex = DomHandler.hasClass(item.parentElement, 'p-highlight') ? '0' : '-1';
+                });
+            }, 300);
+        },
+        setTabIndex(index) {
+            return this.d_activeIndex === index ? '0' : '-1';
         },
         updateInkBar() {
             let tabs = this.$refs.nav.children;
             let inkHighlighted = false;
+
             for (let i = 0; i < tabs.length; i++) {
                 let tab = tabs[i];
+
                 if (DomHandler.hasClass(tab, 'p-highlight')) {
                     this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';
-                    this.$refs.inkbar.style.left =  DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
+                    this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
                     inkHighlighted = true;
                 }
             }
 
             if (!inkHighlighted) {
                 this.$refs.inkbar.style.width = '0px';
-                this.$refs.inkbar.style.left =  '0px';
+                this.$refs.inkbar.style.left = '0px';
             }
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
 };
 
 const _hoisted_1 = { class: "p-tabmenu p-component" };
-const _hoisted_2 = {
-  ref: "nav",
-  class: "p-tabmenu-nav p-reset",
-  role: "tablist"
-};
-const _hoisted_3 = ["href", "onClick"];
+const _hoisted_2 = ["aria-labelledby", "aria-label"];
+const _hoisted_3 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
 const _hoisted_4 = { class: "p-menuitem-text" };
-const _hoisted_5 = ["href", "target", "onClick", "tabindex"];
+const _hoisted_5 = ["href", "target", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
 const _hoisted_6 = { class: "p-menuitem-text" };
 const _hoisted_7 = {
   ref: "inkbar",
@@ -137,7 +247,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
   return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("ul", _hoisted_2, [
+    createElementVNode("ul", {
+      ref: "nav",
+      class: "p-tabmenu-nav p-reset",
+      role: "menubar",
+      "aria-labelledby": _ctx.ariaLabelledby,
+      "aria-label": _ctx.ariaLabel
+    }, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.model, (item, i) => {
         return (openBlock(), createElementBlock(Fragment, {
           key: $options.label(item) + '_' + i.toString()
@@ -148,21 +264,29 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 to: item.to,
                 custom: ""
               }, {
-                default: withCtx(({navigate, href, isActive, isExactActive}) => [
+                default: withCtx(({ navigate, href, isActive, isExactActive }) => [
                   ($options.visible(item))
                     ? (openBlock(), createElementBlock("li", {
                         key: 0,
-                        class: normalizeClass($options.getRouteItemClass(item,isActive,isExactActive)),
+                        ref_for: true,
+                        ref: "tab",
+                        class: normalizeClass($options.getRouteItemClass(item, isActive, isExactActive)),
                         style: normalizeStyle(item.style),
-                        role: "tab"
+                        role: "presentation"
                       }, [
                         (!_ctx.$slots.item)
                           ? withDirectives((openBlock(), createElementBlock("a", {
                               key: 0,
+                              ref_for: true,
+                              ref: "tabLink",
+                              role: "menuitem",
                               href: href,
                               class: "p-menuitem-link",
+                              "aria-label": $options.label(item),
+                              "aria-disabled": $options.disabled(item),
+                              tabindex: isExactActive ? '0' : '-1',
                               onClick: $event => ($options.onItemClick($event, item, i, navigate)),
-                              role: "presentation"
+                              onKeydown: $event => ($options.onKeydownItem($event, item, i, navigate))
                             }, [
                               (item.icon)
                                 ? (openBlock(), createElementBlock("span", {
@@ -171,7 +295,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   }, null, 2))
                                 : createCommentVNode("", true),
                               createElementVNode("span", _hoisted_4, toDisplayString($options.label(item)), 1)
-                            ], 8, _hoisted_3)), [
+                            ], 40, _hoisted_3)), [
                               [_directive_ripple]
                             ])
                           : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
@@ -186,18 +310,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             : ($options.visible(item))
               ? (openBlock(), createElementBlock("li", {
                   key: 1,
+                  ref_for: true,
+                  ref: "tab",
                   class: normalizeClass($options.getItemClass(item, i)),
-                  role: "tab"
+                  role: "presentation"
                 }, [
                   (!_ctx.$slots.item)
                     ? withDirectives((openBlock(), createElementBlock("a", {
                         key: 0,
+                        ref_for: true,
+                        ref: "tabLink",
+                        role: "menuitem",
                         href: item.url,
                         class: "p-menuitem-link",
                         target: item.target,
+                        "aria-label": $options.label(item),
+                        "aria-disabled": $options.disabled(item),
+                        tabindex: $options.setTabIndex(i),
                         onClick: $event => ($options.onItemClick($event, item, i)),
-                        role: "presentation",
-                        tabindex: $options.disabled(item) ? null : '0'
+                        onKeydown: $event => ($options.onKeydownItem($event, item, i))
                       }, [
                         (item.icon)
                           ? (openBlock(), createElementBlock("span", {
@@ -206,7 +337,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             }, null, 2))
                           : createCommentVNode("", true),
                         createElementVNode("span", _hoisted_6, toDisplayString($options.label(item)), 1)
-                      ], 8, _hoisted_5)), [
+                      ], 40, _hoisted_5)), [
                         [_directive_ripple]
                       ])
                     : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
@@ -218,7 +349,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ], 64))
       }), 128)),
       createElementVNode("li", _hoisted_7, null, 512)
-    ], 512)
+    ], 8, _hoisted_2)
   ]))
 }
 

package/tabmenu/tabmenu.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e}from"primevue/utils";import t from"primevue/ripple";import{resolveComponent as n,resolveDirective as i,openBlock as a,createElementBlock as l,createElementVNode as s,Fragment as o,renderList as r,createBlock as d,withCtx as m,normalizeClass as p,normalizeStyle as u,withDirectives as c,createCommentVNode as b,toDisplayString as h,resolveDynamicComponent as f}from"vue";var x={name:"TabMenu",emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},methods:{onItemClick(e,t,n,i){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&i&&i(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,updateInkBar(){let t=this.$refs.nav.children,n=!1;for(let i=0;i<t.length;i++){let a=t[i];e.hasClass(a,"p-highlight")&&(this.$refs.inkbar.style.width=e.getWidth(a)+"px",this.$refs.inkbar.style.left=e.getOffset(a).left-e.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:t}};const v={class:"p-tabmenu p-component"},y={ref:"nav",class:"p-tabmenu-nav p-reset",role:"tablist"},k=["href","onClick"],g={class:"p-menuitem-text"},I=["href","target","onClick","tabindex"],C={class:"p-menuitem-text"},w={ref:"inkbar",class:"p-tabmenu-ink-bar"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: 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    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),x.render=function(e,t,x,$,_,B){const T=n("router-link"),E=i("ripple");return a(),l("div",v,[s("ul",y,[(a(!0),l(o,null,r(x.model,((t,n)=>(a(),l(o,{key:B.label(t)+"_"+n.toString()},[t.to&&!B.disabled(t)?(a(),d(T,{key:0,to:t.to,custom:""},{default:m((({navigate:i,href:o,isActive:r,isExactActive:m})=>[B.visible(t)?(a(),l("li",{key:0,class:p(B.getRouteItemClass(t,r,m)),style:u(t.style),role:"tab"},[e.$slots.item?(a(),d(f(e.$slots.item),{key:1,item:t},null,8,["item"])):c((a(),l("a",{key:0,href:o,class:"p-menuitem-link",onClick:e=>B.onItemClick(e,t,n,i),role:"presentation"},[t.icon?(a(),l("span",{key:0,class:p(B.getItemIcon(t))},null,2)):b("",!0),s("span",g,h(B.label(t)),1)],8,k)),[[E]])],6)):b("",!0)])),_:2},1032,["to"])):B.visible(t)?(a(),l("li",{key:1,class:p(B.getItemClass(t,n)),role:"tab"},[e.$slots.item?(a(),d(f(e.$slots.item),{key:1,item:t},null,8,["item"])):c((a(),l("a",{key:0,href:t.url,class:"p-menuitem-link",target:t.target,onClick:e=>B.onItemClick(e,t,n),role:"presentation",tabindex:B.disabled(t)?null:"0"},[t.icon?(a(),l("span",{key:0,class:p(B.getItemIcon(t))},null,2)):b("",!0),s("span",C,h(B.label(t)),1)],8,I)),[[E]])],2)):b("",!0)],64)))),128)),s("li",w,null,512)],512)])};export{x as default};
+import e from"primevue/ripple";import{DomHandler as t}from"primevue/utils";import{resolveComponent as n,resolveDirective as a,openBlock as i,createElementBlock as l,createElementVNode as s,Fragment as r,renderList as d,createBlock as o,withCtx as m,normalizeClass as b,normalizeStyle as u,withDirectives as c,createCommentVNode as p,toDisplayString as f,resolveDynamicComponent as h}from"vue";var x={name:"TabMenu",emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},methods:{onItemClick(e,t,n,a){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&a&&a(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},onKeydownItem(e,t,n){let a=n,i={};const l=this.$refs.tabLink;switch(e.code){case"ArrowRight":i=this.findNextItem(this.$refs.tab,a),a=i.i;break;case"ArrowLeft":i=this.findPrevItem(this.$refs.tab,a),a=i.i;break;case"End":i=this.findPrevItem(this.$refs.tab,this.model.length),a=i.i,e.preventDefault();break;case"Home":i=this.findNextItem(this.$refs.tab,-1),a=i.i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(l)}l[a]&&l[n]&&(l[n].tabIndex="-1",l[a].tabIndex="0",l[a].focus())},findNextItem(e,n){let a=n+1;if(a>=e.length)return{nextItem:e[e.length],i:e.length};let i=e[a];return i?t.hasClass(i,"p-disabled")?this.findNextItem(e,a):{nextItem:i,i:a}:null},findPrevItem(e,n){let a=n-1;if(a<0)return{nextItem:e[0],i:0};let i=e[a];return i?t.hasClass(i,"p-disabled")?this.findPrevItem(e,a):{prevItem:i,i:a}:null},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,setDefaultTabIndexes(e){setTimeout((()=>{e.forEach((e=>{e.tabIndex=t.hasClass(e.parentElement,"p-highlight")?"0":"-1"}))}),300)},setTabIndex(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar(){let e=this.$refs.nav.children,n=!1;for(let a=0;a<e.length;a++){let i=e[a];t.hasClass(i,"p-highlight")&&(this.$refs.inkbar.style.width=t.getWidth(i)+"px",this.$refs.inkbar.style.left=t.getOffset(i).left-t.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:e}};const v={class:"p-tabmenu p-component"},y=["aria-labelledby","aria-label"],I=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],g={class:"p-menuitem-text"},k=["href","target","aria-label","aria-disabled","tabindex","onClick","onKeydown"],w={class:"p-menuitem-text"},C={ref:"inkbar",class:"p-tabmenu-ink-bar"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: 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    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),x.render=function(e,t,x,$,T,_){const E=n("router-link"),B=a("ripple");return i(),l("div",v,[s("ul",{ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},[(i(!0),l(r,null,d(x.model,((t,n)=>(i(),l(r,{key:_.label(t)+"_"+n.toString()},[t.to&&!_.disabled(t)?(i(),o(E,{key:0,to:t.to,custom:""},{default:m((({navigate:a,href:r,isActive:d,isExactActive:m})=>[_.visible(t)?(i(),l("li",{key:0,ref_for:!0,ref:"tab",class:b(_.getRouteItemClass(t,d,m)),style:u(t.style),role:"presentation"},[e.$slots.item?(i(),o(h(e.$slots.item),{key:1,item:t},null,8,["item"])):c((i(),l("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:r,class:"p-menuitem-link","aria-label":_.label(t),"aria-disabled":_.disabled(t),tabindex:m?"0":"-1",onClick:e=>_.onItemClick(e,t,n,a),onKeydown:e=>_.onKeydownItem(e,t,n,a)},[t.icon?(i(),l("span",{key:0,class:b(_.getItemIcon(t))},null,2)):p("",!0),s("span",g,f(_.label(t)),1)],40,I)),[[B]])],6)):p("",!0)])),_:2},1032,["to"])):_.visible(t)?(i(),l("li",{key:1,ref_for:!0,ref:"tab",class:b(_.getItemClass(t,n)),role:"presentation"},[e.$slots.item?(i(),o(h(e.$slots.item),{key:1,item:t},null,8,["item"])):c((i(),l("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":_.label(t),"aria-disabled":_.disabled(t),tabindex:_.setTabIndex(n),onClick:e=>_.onItemClick(e,t,n),onKeydown:e=>_.onKeydownItem(e,t,n)},[t.icon?(i(),l("span",{key:0,class:b(_.getItemIcon(t))},null,2)):p("",!0),s("span",w,f(_.label(t)),1)],40,k)),[[B]])],2)):p("",!0)],64)))),128)),s("li",C,null,512)],8,y)])};export{x as default};