primevue 3.30.0 → 3.30.2

package/tabmenu/tabmenu.esm.js

@@ -89,6 +89,8 @@ var script = {
   },
   mounted: function mounted() {
     this.updateInkBar();
+    var activeItem = this.findActiveItem();
+    activeItem && (activeItem.tabIndex = '0');
   },
   updated: function updated() {
     this.updateInkBar();
@@ -127,105 +129,104 @@ var script = {
         index: index
       });
     },
-    onKeydownItem: function onKeydownItem(event, index) {
-      var i = index;
-      var foundElement = {};
-      var tabLinkRef = this.$refs.tabLink;
+    onKeydownItem: function onKeydownItem(event, item, index, navigate) {
       switch (event.code) {
         case 'ArrowRight':
           {
-            foundElement = this.findNextItem(this.$refs.tab, i);
-            i = foundElement.i;
+            this.navigateToNextItem(event.target);
+            event.preventDefault();
             break;
           }
         case 'ArrowLeft':
           {
-            foundElement = this.findPrevItem(this.$refs.tab, i);
-            i = foundElement.i;
+            this.navigateToPrevItem(event.target);
+            event.preventDefault();
             break;
           }
-        case 'End':
+        case 'Home':
           {
-            foundElement = this.findPrevItem(this.$refs.tab, this.model.length);
-            i = foundElement.i;
+            this.navigateToFirstItem(event.target);
             event.preventDefault();
             break;
           }
-        case 'Home':
+        case 'End':
           {
-            foundElement = this.findNextItem(this.$refs.tab, -1);
-            i = foundElement.i;
+            this.navigateToLastItem(event.target);
             event.preventDefault();
             break;
           }
         case 'Space':
         case 'Enter':
           {
-            if (event.currentTarget) {
-              event.currentTarget.click();
-            }
+            this.onItemClick(event, item, index, navigate);
             event.preventDefault();
             break;
           }
         case 'Tab':
           {
-            this.setDefaultTabIndexes(tabLinkRef);
+            this.onTabKey();
             break;
           }
       }
-      if (tabLinkRef[i] && tabLinkRef[index]) {
-        tabLinkRef[index].tabIndex = '-1';
-        tabLinkRef[i].tabIndex = '0';
-        tabLinkRef[i].focus();
-      }
     },
-    findNextItem: function findNextItem(items, index) {
-      var i = index + 1;
-      if (i >= items.length) {
-        return {
-          nextItem: items[items.length],
-          i: items.length
-        };
-      }
-      var nextItem = items[i];
-      if (nextItem) return DomHandler.getAttribute(nextItem, 'data-p-disabled') ? this.findNextItem(items, i) : {
-        nextItem: nextItem,
-        i: i
-      };else return null;
+    navigateToNextItem: function navigateToNextItem(target) {
+      var nextItem = this.findNextItem(target);
+      nextItem && this.setFocusToMenuitem(target, nextItem);
+    },
+    navigateToPrevItem: function navigateToPrevItem(target) {
+      var prevItem = this.findPrevItem(target);
+      prevItem && this.setFocusToMenuitem(target, prevItem);
+    },
+    navigateToFirstItem: function navigateToFirstItem(target) {
+      var firstItem = this.findFirstItem(target);
+      firstItem && this.setFocusToMenuitem(target, firstItem);
+    },
+    navigateToLastItem: function navigateToLastItem(target) {
+      var lastItem = this.findLastItem(target);
+      lastItem && this.setFocusToMenuitem(target, lastItem);
     },
-    findPrevItem: function findPrevItem(items, index) {
-      var i = index - 1;
-      if (i < 0) {
-        return {
-          nextItem: items[0],
-          i: 0
-        };
+    findNextItem: function findNextItem(item) {
+      var nextItem = item.parentElement.nextElementSibling;
+      return nextItem ? DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? this.findNextItem(nextItem.children[0]) : nextItem.children[0] : null;
+    },
+    findPrevItem: function findPrevItem(item) {
+      var prevItem = item.parentElement.previousElementSibling;
+      return prevItem ? DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0] : null;
+    },
+    findFirstItem: function findFirstItem() {
+      var firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+      return firstSibling ? firstSibling.children[0] : null;
+    },
+    findLastItem: function findLastItem() {
+      var siblings = DomHandler.find(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+      return siblings ? siblings[siblings.length - 1].children[0] : null;
+    },
+    findActiveItem: function findActiveItem() {
+      var activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+      return activeItem ? activeItem.children[0] : null;
+    },
+    setFocusToMenuitem: function setFocusToMenuitem(target, focusableItem) {
+      target.tabIndex = '-1';
+      focusableItem.tabIndex = '0';
+      focusableItem.focus();
+    },
+    onTabKey: function onTabKey() {
+      var activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+      var focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="action"][tabindex="0"]');
+      if (focusedItem !== activeItem.children[0]) {
+        activeItem && (activeItem.children[0].tabIndex = '0');
+        focusedItem.tabIndex = '-1';
       }
-      var prevItem = items[i];
-      if (prevItem) return DomHandler.getAttribute(prevItem, 'data-p-disabled') ? this.findPrevItem(items, i) : {
-        prevItem: prevItem,
-        i: i
-      };else return null;
     },
     visible: function visible(item) {
       return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
     },
     disabled: function disabled(item) {
-      return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+      return typeof item.disabled === 'function' ? item.disabled() : item.disabled === true;
     },
     label: function label(item) {
       return typeof item.label === 'function' ? item.label() : item.label;
     },
-    setDefaultTabIndexes: function setDefaultTabIndexes(tabLinkRef) {
-      setTimeout(function () {
-        tabLinkRef.forEach(function (item) {
-          item.tabIndex = DomHandler.getAttribute(item.parentElement, 'data-p-highlight') ? '0' : '-1';
-        });
-      }, 300);
-    },
-    setTabIndex: function setTabIndex(index) {
-      return this.d_activeIndex === index ? '0' : '-1';
-    },
     updateInkBar: function updateInkBar() {
       var tabs = this.$refs.nav.children;
       var inkHighlighted = false;
@@ -243,15 +244,6 @@ var script = {
       }
     }
   },
-  computed: {
-    focusableItems: function focusableItems() {
-      var _this2 = this;
-      return (this.model || []).reduce(function (result, item) {
-        _this2.visible(item) && !_this2.disabled(item) && result.push(item);
-        return result;
-      }, []);
-    }
-  },
   directives: {
     ripple: Ripple
   }
@@ -259,9 +251,9 @@ var script = {
 
 var _hoisted_1 = ["aria-labelledby", "aria-label"];
 var _hoisted_2 = ["data-p-highlight", "data-p-disabled"];
-var _hoisted_3 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
+var _hoisted_3 = ["href", "aria-label", "aria-disabled", "onClick", "onKeydown"];
 var _hoisted_4 = ["onClick", "onKeydown", "data-p-highlight", "data-p-disabled"];
-var _hoisted_5 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
+var _hoisted_5 = ["href", "target", "aria-label", "aria-disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_router_link = resolveComponent("router-link");
   var _directive_ripple = resolveDirective("ripple");
@@ -275,7 +267,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     role: "menubar",
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel
-  }, _ctx.ptm('menu')), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.focusableItems, function (item, i) {
+  }, _ctx.ptm('menu')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model, function (item, i) {
     return openBlock(), createElementBlock(Fragment, {
       key: $options.label(item) + '_' + i.toString()
     }, [item.to && !$options.disabled(item) ? (openBlock(), createBlock(_component_router_link, {
@@ -311,12 +303,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "class": _ctx.cx('action'),
           "aria-label": $options.label(item),
           "aria-disabled": $options.disabled(item),
-          tabindex: isExactActive ? '0' : '-1',
+          tabindex: -1,
           onClick: function onClick($event) {
             return $options.onItemClick($event, item, i, navigate);
           },
           onKeydown: function onKeydown($event) {
-            return $options.onKeydownItem($event, i, navigate);
+            return $options.onKeydownItem($event, item, i, navigate);
           }
         }, $options.getPTOptions('action', i)), [_ctx.$slots.itemicon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.itemicon), {
           key: 0,
@@ -347,7 +339,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         return $options.onItemClick($event, item, i);
       },
       onKeydown: function onKeydown($event) {
-        return $options.onKeydownItem($event, i);
+        return $options.onKeydownItem($event, item, i);
       }
     }, $options.getPTOptions('menuitem', i), {
       "data-p-highlight": $data.d_activeIndex === i,
@@ -362,7 +354,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       target: item.target,
       "aria-label": $options.label(item),
       "aria-disabled": $options.disabled(item),
-      tabindex: $options.setTabIndex(i)
+      tabindex: -1
     }, $options.getPTOptions('action', i)), [_ctx.$slots.itemicon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.itemicon), {
       key: 0,
       item: item,

package/tabmenu/tabmenu.esm.min.js

@@ -1 +1 @@
-import e from"primevue/ripple";import{DomHandler as t}from"primevue/utils";import n from"primevue/basecomponent";import{useStyle as i}from"primevue/usestyle";import{resolveComponent as a,resolveDirective as l,openBlock as r,createElementBlock as s,mergeProps as o,createElementVNode as d,Fragment as c,renderList as u,createBlock as m,withCtx as b,withDirectives as f,resolveDynamicComponent as p,normalizeClass as h,createCommentVNode as x,toDisplayString as v}from"vue";var g=i("\n.p-tabmenu {\n    overflow-x: auto;\n}\n\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n",{name:"tabmenu",manual:!0}),y={name:"TabMenu",extends:{name:"BaseTabMenu",extends:n,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}},css:{classes:{root:"p-tabmenu p-component",menu:"p-tabmenu-nav p-reset",menuitem:function(e){var t=e.instance;return["p-tabmenuitem",{"p-highlight":(e.props.exact?e.isExactActive:e.isActive)||t.d_activeIndex===e.index,"p-disabled":t.disabled(e.item)}]},action:"p-menuitem-link",icon:"p-menuitem-icon",label:"p-menuitem-text",inkbar:"p-tabmenu-ink-bar"},loadStyle:g.load},provide:function(){return{$parentInstance:this}}},emits:["update:activeIndex","tab-change"],timeout:null,data:function(){return{d_activeIndex:this.activeIndex}},watch:{$route:function(){var e=this;this.timeout=setTimeout((function(){return e.updateInkBar()}),50)},activeIndex:function(e){this.d_activeIndex=e}},mounted:function(){this.updateInkBar()},updated:function(){this.updateInkBar()},beforeUnmount:function(){clearTimeout(this.timeout)},methods:{getPTOptions:function(e,t){return this.ptm(e,{context:{order:t}})},onItemClick:function(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}))},onKeydownItem:function(e,t){var n=t,i=this.$refs.tabLink;switch(e.code){case"ArrowRight":n=this.findNextItem(this.$refs.tab,n).i;break;case"ArrowLeft":n=this.findPrevItem(this.$refs.tab,n).i;break;case"End":n=this.findPrevItem(this.$refs.tab,this.model.length).i,e.preventDefault();break;case"Home":n=this.findNextItem(this.$refs.tab,-1).i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(i)}i[n]&&i[t]&&(i[t].tabIndex="-1",i[n].tabIndex="0",i[n].focus())},findNextItem:function(e,n){var i=n+1;if(i>=e.length)return{nextItem:e[e.length],i:e.length};var a=e[i];return a?t.getAttribute(a,"data-p-disabled")?this.findNextItem(e,i):{nextItem:a,i:i}:null},findPrevItem:function(e,n){var i=n-1;if(i<0)return{nextItem:e[0],i:0};var a=e[i];return a?t.getAttribute(a,"data-p-disabled")?this.findPrevItem(e,i):{prevItem:a,i:i}:null},visible:function(e){return"function"==typeof e.visible?e.visible():!1!==e.visible},disabled:function(e){return"function"==typeof e.disabled?e.disabled():e.disabled},label:function(e){return"function"==typeof e.label?e.label():e.label},setDefaultTabIndexes:function(e){setTimeout((function(){e.forEach((function(e){e.tabIndex=t.getAttribute(e.parentElement,"data-p-highlight")?"0":"-1"}))}),300)},setTabIndex:function(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar:function(){for(var e=this.$refs.nav.children,n=!1,i=0;i<e.length;i++){var a=e[i];t.getAttribute(a,"data-p-highlight")&&(this.$refs.inkbar.style.width=t.getWidth(a)+"px",this.$refs.inkbar.style.left=t.getOffset(a).left-t.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},computed:{focusableItems:function(){var e=this;return(this.model||[]).reduce((function(t,n){return e.visible(n)&&!e.disabled(n)&&t.push(n),t}),[])}},directives:{ripple:e}},k=["aria-labelledby","aria-label"],I=["data-p-highlight","data-p-disabled"],$=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],T=["onClick","onKeydown","data-p-highlight","data-p-disabled"],w=["href","target","aria-label","aria-disabled","tabindex"];y.render=function(e,t,n,i,g,y){var _=a("router-link"),A=l("ripple");return r(),s("div",o({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"tabmenu"}),[d("ul",o({ref:"nav",class:e.cx("menu"),role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(r(!0),s(c,null,u(y.focusableItems,(function(t,n){return r(),s(c,{key:y.label(t)+"_"+n.toString()},[t.to&&!y.disabled(t)?(r(),m(_,{key:0,to:t.to,custom:""},{default:b((function(i){var a=i.navigate,l=i.href,c=i.isActive,u=i.isExactActive;return[y.visible(t)?(r(),s("li",o({key:0,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,isActive:c,isExactActive:u}),t.class],style:t.style,role:"presentation"},y.getPTOptions("menuitem",n),{"data-p-highlight":e.exact?u:c,"data-p-disabled":y.disabled(t)}),[e.$slots.item?(r(),m(p(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):f((r(),s("a",o({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:l,class:e.cx("action"),"aria-label":y.label(t),"aria-disabled":y.disabled(t),tabindex:u?"0":"-1",onClick:function(e){return y.onItemClick(e,t,n,a)},onKeydown:function(e){return y.onKeydownItem(e,n,a)}},y.getPTOptions("action",n)),[e.$slots.itemicon?(r(),m(p(e.$slots.itemicon),{key:0,item:t,class:h([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(r(),s("span",o({key:1,class:[e.cx("icon"),t.icon]},y.getPTOptions("icon",n)),null,16)):x("",!0),d("span",o({class:e.cx("label")},y.getPTOptions("label",n)),v(y.label(t)),17)],16,$)),[[A]])],16,I)):x("",!0)]})),_:2},1032,["to"])):y.visible(t)?(r(),s("li",o({key:1,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,index:n}),t.class],role:"presentation",onClick:function(e){return y.onItemClick(e,t,n)},onKeydown:function(e){return y.onKeydownItem(e,n)}},y.getPTOptions("menuitem",n),{"data-p-highlight":g.d_activeIndex===n,"data-p-disabled":y.disabled(t)}),[e.$slots.item?(r(),m(p(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):f((r(),s("a",o({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:e.cx("action"),target:t.target,"aria-label":y.label(t),"aria-disabled":y.disabled(t),tabindex:y.setTabIndex(n)},y.getPTOptions("action",n)),[e.$slots.itemicon?(r(),m(p(e.$slots.itemicon),{key:0,item:t,class:h([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(r(),s("span",o({key:1,class:[e.cx("icon"),t.icon]},y.getPTOptions("icon",n)),null,16)):x("",!0),d("span",o({class:e.cx("label")},y.getPTOptions("label",n)),v(y.label(t)),17)],16,w)),[[A]])],16,T)):x("",!0)],64)})),128)),d("li",o({ref:"inkbar",role:"none",class:e.cx("inkbar")},e.ptm("inkbar")),null,16)],16,k)],16)};export{y as default};
+import e from"primevue/ripple";import{DomHandler as t}from"primevue/utils";import n from"primevue/basecomponent";import{useStyle as i}from"primevue/usestyle";import{resolveComponent as a,resolveDirective as l,openBlock as r,createElementBlock as s,mergeProps as o,createElementVNode as d,Fragment as c,renderList as u,createBlock as m,withCtx as f,withDirectives as p,resolveDynamicComponent as b,normalizeClass as h,createCommentVNode as v,toDisplayString as x}from"vue";var g=i("\n.p-tabmenu {\n    overflow-x: auto;\n}\n\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n",{name:"tabmenu",manual:!0}),I={name:"TabMenu",extends:{name:"BaseTabMenu",extends:n,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}},css:{classes:{root:"p-tabmenu p-component",menu:"p-tabmenu-nav p-reset",menuitem:function(e){var t=e.instance;return["p-tabmenuitem",{"p-highlight":(e.props.exact?e.isExactActive:e.isActive)||t.d_activeIndex===e.index,"p-disabled":t.disabled(e.item)}]},action:"p-menuitem-link",icon:"p-menuitem-icon",label:"p-menuitem-text",inkbar:"p-tabmenu-ink-bar"},loadStyle:g.load},provide:function(){return{$parentInstance:this}}},emits:["update:activeIndex","tab-change"],timeout:null,data:function(){return{d_activeIndex:this.activeIndex}},watch:{$route:function(){var e=this;this.timeout=setTimeout((function(){return e.updateInkBar()}),50)},activeIndex:function(e){this.d_activeIndex=e}},mounted:function(){this.updateInkBar();var e=this.findActiveItem();e&&(e.tabIndex="0")},updated:function(){this.updateInkBar()},beforeUnmount:function(){clearTimeout(this.timeout)},methods:{getPTOptions:function(e,t){return this.ptm(e,{context:{order:t}})},onItemClick:function(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}))},onKeydownItem:function(e,t,n,i){switch(e.code){case"ArrowRight":this.navigateToNextItem(e.target),e.preventDefault();break;case"ArrowLeft":this.navigateToPrevItem(e.target),e.preventDefault();break;case"Home":this.navigateToFirstItem(e.target),e.preventDefault();break;case"End":this.navigateToLastItem(e.target),e.preventDefault();break;case"Space":case"Enter":this.onItemClick(e,t,n,i),e.preventDefault();break;case"Tab":this.onTabKey()}},navigateToNextItem:function(e){var t=this.findNextItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToPrevItem:function(e){var t=this.findPrevItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToFirstItem:function(e){var t=this.findFirstItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToLastItem:function(e){var t=this.findLastItem(e);t&&this.setFocusToMenuitem(e,t)},findNextItem:function(e){var n=e.parentElement.nextElementSibling;return n?!0===t.getAttribute(n,"data-p-disabled")?this.findNextItem(n.children[0]):n.children[0]:null},findPrevItem:function(e){var n=e.parentElement.previousElementSibling;return n?!0===t.getAttribute(n,"data-p-disabled")?this.findPrevItem(n.children[0]):n.children[0]:null},findFirstItem:function(){var e=t.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e.children[0]:null},findLastItem:function(){var e=t.find(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e[e.length-1].children[0]:null},findActiveItem:function(){var e=t.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');return e?e.children[0]:null},setFocusToMenuitem:function(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},onTabKey:function(){var e=t.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'),n=t.findSingle(this.$refs.nav,'[data-pc-section="action"][tabindex="0"]');n!==e.children[0]&&(e&&(e.children[0].tabIndex="0"),n.tabIndex="-1")},visible:function(e){return"function"==typeof e.visible?e.visible():!1!==e.visible},disabled:function(e){return"function"==typeof e.disabled?e.disabled():!0===e.disabled},label:function(e){return"function"==typeof e.label?e.label():e.label},updateInkBar:function(){for(var e=this.$refs.nav.children,n=!1,i=0;i<e.length;i++){var a=e[i];t.getAttribute(a,"data-p-highlight")&&(this.$refs.inkbar.style.width=t.getWidth(a)+"px",this.$refs.inkbar.style.left=t.getOffset(a).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}},y=["aria-labelledby","aria-label"],k=["data-p-highlight","data-p-disabled"],T=["href","aria-label","aria-disabled","onClick","onKeydown"],$=["onClick","onKeydown","data-p-highlight","data-p-disabled"],w=["href","target","aria-label","aria-disabled"];I.render=function(e,t,n,i,g,I){var A=a("router-link"),P=l("ripple");return r(),s("div",o({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"tabmenu"}),[d("ul",o({ref:"nav",class:e.cx("menu"),role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(r(!0),s(c,null,u(e.model,(function(t,n){return r(),s(c,{key:I.label(t)+"_"+n.toString()},[t.to&&!I.disabled(t)?(r(),m(A,{key:0,to:t.to,custom:""},{default:f((function(i){var a=i.navigate,l=i.href,c=i.isActive,u=i.isExactActive;return[I.visible(t)?(r(),s("li",o({key:0,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,isActive:c,isExactActive:u}),t.class],style:t.style,role:"presentation"},I.getPTOptions("menuitem",n),{"data-p-highlight":e.exact?u:c,"data-p-disabled":I.disabled(t)}),[e.$slots.item?(r(),m(b(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):p((r(),s("a",o({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:l,class:e.cx("action"),"aria-label":I.label(t),"aria-disabled":I.disabled(t),tabindex:-1,onClick:function(e){return I.onItemClick(e,t,n,a)},onKeydown:function(e){return I.onKeydownItem(e,t,n,a)}},I.getPTOptions("action",n)),[e.$slots.itemicon?(r(),m(b(e.$slots.itemicon),{key:0,item:t,class:h([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(r(),s("span",o({key:1,class:[e.cx("icon"),t.icon]},I.getPTOptions("icon",n)),null,16)):v("",!0),d("span",o({class:e.cx("label")},I.getPTOptions("label",n)),x(I.label(t)),17)],16,T)),[[P]])],16,k)):v("",!0)]})),_:2},1032,["to"])):I.visible(t)?(r(),s("li",o({key:1,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,index:n}),t.class],role:"presentation",onClick:function(e){return I.onItemClick(e,t,n)},onKeydown:function(e){return I.onKeydownItem(e,t,n)}},I.getPTOptions("menuitem",n),{"data-p-highlight":g.d_activeIndex===n,"data-p-disabled":I.disabled(t)}),[e.$slots.item?(r(),m(b(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):p((r(),s("a",o({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:e.cx("action"),target:t.target,"aria-label":I.label(t),"aria-disabled":I.disabled(t),tabindex:-1},I.getPTOptions("action",n)),[e.$slots.itemicon?(r(),m(b(e.$slots.itemicon),{key:0,item:t,class:h([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(r(),s("span",o({key:1,class:[e.cx("icon"),t.icon]},I.getPTOptions("icon",n)),null,16)):v("",!0),d("span",o({class:e.cx("label")},I.getPTOptions("label",n)),x(I.label(t)),17)],16,w)),[[P]])],16,$)):v("",!0)],64)})),128)),d("li",o({ref:"inkbar",role:"none",class:e.cx("inkbar")},e.ptm("inkbar")),null,16)],16,y)],16)};export{I as default};

package/tabmenu/tabmenu.js

@@ -92,6 +92,8 @@ this.primevue.tabmenu = (function (Ripple, utils, BaseComponent, usestyle, vue)
       },
       mounted: function mounted() {
         this.updateInkBar();
+        var activeItem = this.findActiveItem();
+        activeItem && (activeItem.tabIndex = '0');
       },
       updated: function updated() {
         this.updateInkBar();
@@ -130,105 +132,104 @@ this.primevue.tabmenu = (function (Ripple, utils, BaseComponent, usestyle, vue)
             index: index
           });
         },
-        onKeydownItem: function onKeydownItem(event, index) {
-          var i = index;
-          var foundElement = {};
-          var tabLinkRef = this.$refs.tabLink;
+        onKeydownItem: function onKeydownItem(event, item, index, navigate) {
           switch (event.code) {
             case 'ArrowRight':
               {
-                foundElement = this.findNextItem(this.$refs.tab, i);
-                i = foundElement.i;
+                this.navigateToNextItem(event.target);
+                event.preventDefault();
                 break;
               }
             case 'ArrowLeft':
               {
-                foundElement = this.findPrevItem(this.$refs.tab, i);
-                i = foundElement.i;
+                this.navigateToPrevItem(event.target);
+                event.preventDefault();
                 break;
               }
-            case 'End':
+            case 'Home':
               {
-                foundElement = this.findPrevItem(this.$refs.tab, this.model.length);
-                i = foundElement.i;
+                this.navigateToFirstItem(event.target);
                 event.preventDefault();
                 break;
               }
-            case 'Home':
+            case 'End':
               {
-                foundElement = this.findNextItem(this.$refs.tab, -1);
-                i = foundElement.i;
+                this.navigateToLastItem(event.target);
                 event.preventDefault();
                 break;
               }
             case 'Space':
             case 'Enter':
               {
-                if (event.currentTarget) {
-                  event.currentTarget.click();
-                }
+                this.onItemClick(event, item, index, navigate);
                 event.preventDefault();
                 break;
               }
             case 'Tab':
               {
-                this.setDefaultTabIndexes(tabLinkRef);
+                this.onTabKey();
                 break;
               }
           }
-          if (tabLinkRef[i] && tabLinkRef[index]) {
-            tabLinkRef[index].tabIndex = '-1';
-            tabLinkRef[i].tabIndex = '0';
-            tabLinkRef[i].focus();
-          }
         },
-        findNextItem: function findNextItem(items, index) {
-          var i = index + 1;
-          if (i >= items.length) {
-            return {
-              nextItem: items[items.length],
-              i: items.length
-            };
-          }
-          var nextItem = items[i];
-          if (nextItem) return utils.DomHandler.getAttribute(nextItem, 'data-p-disabled') ? this.findNextItem(items, i) : {
-            nextItem: nextItem,
-            i: i
-          };else return null;
+        navigateToNextItem: function navigateToNextItem(target) {
+          var nextItem = this.findNextItem(target);
+          nextItem && this.setFocusToMenuitem(target, nextItem);
+        },
+        navigateToPrevItem: function navigateToPrevItem(target) {
+          var prevItem = this.findPrevItem(target);
+          prevItem && this.setFocusToMenuitem(target, prevItem);
+        },
+        navigateToFirstItem: function navigateToFirstItem(target) {
+          var firstItem = this.findFirstItem(target);
+          firstItem && this.setFocusToMenuitem(target, firstItem);
+        },
+        navigateToLastItem: function navigateToLastItem(target) {
+          var lastItem = this.findLastItem(target);
+          lastItem && this.setFocusToMenuitem(target, lastItem);
         },
-        findPrevItem: function findPrevItem(items, index) {
-          var i = index - 1;
-          if (i < 0) {
-            return {
-              nextItem: items[0],
-              i: 0
-            };
+        findNextItem: function findNextItem(item) {
+          var nextItem = item.parentElement.nextElementSibling;
+          return nextItem ? utils.DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? this.findNextItem(nextItem.children[0]) : nextItem.children[0] : null;
+        },
+        findPrevItem: function findPrevItem(item) {
+          var prevItem = item.parentElement.previousElementSibling;
+          return prevItem ? utils.DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0] : null;
+        },
+        findFirstItem: function findFirstItem() {
+          var firstSibling = utils.DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+          return firstSibling ? firstSibling.children[0] : null;
+        },
+        findLastItem: function findLastItem() {
+          var siblings = utils.DomHandler.find(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+          return siblings ? siblings[siblings.length - 1].children[0] : null;
+        },
+        findActiveItem: function findActiveItem() {
+          var activeItem = utils.DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+          return activeItem ? activeItem.children[0] : null;
+        },
+        setFocusToMenuitem: function setFocusToMenuitem(target, focusableItem) {
+          target.tabIndex = '-1';
+          focusableItem.tabIndex = '0';
+          focusableItem.focus();
+        },
+        onTabKey: function onTabKey() {
+          var activeItem = utils.DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+          var focusedItem = utils.DomHandler.findSingle(this.$refs.nav, '[data-pc-section="action"][tabindex="0"]');
+          if (focusedItem !== activeItem.children[0]) {
+            activeItem && (activeItem.children[0].tabIndex = '0');
+            focusedItem.tabIndex = '-1';
           }
-          var prevItem = items[i];
-          if (prevItem) return utils.DomHandler.getAttribute(prevItem, 'data-p-disabled') ? this.findPrevItem(items, i) : {
-            prevItem: prevItem,
-            i: i
-          };else return null;
         },
         visible: function visible(item) {
           return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled: function disabled(item) {
-          return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+          return typeof item.disabled === 'function' ? item.disabled() : item.disabled === true;
         },
         label: function label(item) {
           return typeof item.label === 'function' ? item.label() : item.label;
         },
-        setDefaultTabIndexes: function setDefaultTabIndexes(tabLinkRef) {
-          setTimeout(function () {
-            tabLinkRef.forEach(function (item) {
-              item.tabIndex = utils.DomHandler.getAttribute(item.parentElement, 'data-p-highlight') ? '0' : '-1';
-            });
-          }, 300);
-        },
-        setTabIndex: function setTabIndex(index) {
-          return this.d_activeIndex === index ? '0' : '-1';
-        },
         updateInkBar: function updateInkBar() {
           var tabs = this.$refs.nav.children;
           var inkHighlighted = false;
@@ -246,15 +247,6 @@ this.primevue.tabmenu = (function (Ripple, utils, BaseComponent, usestyle, vue)
           }
         }
       },
-      computed: {
-        focusableItems: function focusableItems() {
-          var _this2 = this;
-          return (this.model || []).reduce(function (result, item) {
-            _this2.visible(item) && !_this2.disabled(item) && result.push(item);
-            return result;
-          }, []);
-        }
-      },
       directives: {
         ripple: Ripple__default["default"]
       }
@@ -262,9 +254,9 @@ this.primevue.tabmenu = (function (Ripple, utils, BaseComponent, usestyle, vue)
 
     var _hoisted_1 = ["aria-labelledby", "aria-label"];
     var _hoisted_2 = ["data-p-highlight", "data-p-disabled"];
-    var _hoisted_3 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
+    var _hoisted_3 = ["href", "aria-label", "aria-disabled", "onClick", "onKeydown"];
     var _hoisted_4 = ["onClick", "onKeydown", "data-p-highlight", "data-p-disabled"];
-    var _hoisted_5 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
+    var _hoisted_5 = ["href", "target", "aria-label", "aria-disabled"];
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       var _component_router_link = vue.resolveComponent("router-link");
       var _directive_ripple = vue.resolveDirective("ripple");
@@ -278,7 +270,7 @@ this.primevue.tabmenu = (function (Ripple, utils, BaseComponent, usestyle, vue)
         role: "menubar",
         "aria-labelledby": _ctx.ariaLabelledby,
         "aria-label": _ctx.ariaLabel
-      }, _ctx.ptm('menu')), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.focusableItems, function (item, i) {
+      }, _ctx.ptm('menu')), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.model, function (item, i) {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: $options.label(item) + '_' + i.toString()
         }, [item.to && !$options.disabled(item) ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -314,12 +306,12 @@ this.primevue.tabmenu = (function (Ripple, utils, BaseComponent, usestyle, vue)
               "class": _ctx.cx('action'),
               "aria-label": $options.label(item),
               "aria-disabled": $options.disabled(item),
-              tabindex: isExactActive ? '0' : '-1',
+              tabindex: -1,
               onClick: function onClick($event) {
                 return $options.onItemClick($event, item, i, navigate);
               },
               onKeydown: function onKeydown($event) {
-                return $options.onKeydownItem($event, i, navigate);
+                return $options.onKeydownItem($event, item, i, navigate);
               }
             }, $options.getPTOptions('action', i)), [_ctx.$slots.itemicon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemicon), {
               key: 0,
@@ -350,7 +342,7 @@ this.primevue.tabmenu = (function (Ripple, utils, BaseComponent, usestyle, vue)
             return $options.onItemClick($event, item, i);
           },
           onKeydown: function onKeydown($event) {
-            return $options.onKeydownItem($event, i);
+            return $options.onKeydownItem($event, item, i);
           }
         }, $options.getPTOptions('menuitem', i), {
           "data-p-highlight": $data.d_activeIndex === i,
@@ -365,7 +357,7 @@ this.primevue.tabmenu = (function (Ripple, utils, BaseComponent, usestyle, vue)
           target: item.target,
           "aria-label": $options.label(item),
           "aria-disabled": $options.disabled(item),
-          tabindex: $options.setTabIndex(i)
+          tabindex: -1
         }, $options.getPTOptions('action', i)), [_ctx.$slots.itemicon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemicon), {
           key: 0,
           item: item,

package/tabmenu/tabmenu.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tabmenu=function(e,t,n,i,a){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(e),o=l(n),s=i.useStyle("\n.p-tabmenu {\n    overflow-x: auto;\n}\n\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n",{name:"tabmenu",manual:!0}),c={name:"TabMenu",extends:{name:"BaseTabMenu",extends:o.default,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}},css:{classes:{root:"p-tabmenu p-component",menu:"p-tabmenu-nav p-reset",menuitem:function(e){var t=e.instance;return["p-tabmenuitem",{"p-highlight":(e.props.exact?e.isExactActive:e.isActive)||t.d_activeIndex===e.index,"p-disabled":t.disabled(e.item)}]},action:"p-menuitem-link",icon:"p-menuitem-icon",label:"p-menuitem-text",inkbar:"p-tabmenu-ink-bar"},loadStyle:s.load},provide:function(){return{$parentInstance:this}}},emits:["update:activeIndex","tab-change"],timeout:null,data:function(){return{d_activeIndex:this.activeIndex}},watch:{$route:function(){var e=this;this.timeout=setTimeout((function(){return e.updateInkBar()}),50)},activeIndex:function(e){this.d_activeIndex=e}},mounted:function(){this.updateInkBar()},updated:function(){this.updateInkBar()},beforeUnmount:function(){clearTimeout(this.timeout)},methods:{getPTOptions:function(e,t){return this.ptm(e,{context:{order:t}})},onItemClick:function(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}))},onKeydownItem:function(e,t){var n=t,i=this.$refs.tabLink;switch(e.code){case"ArrowRight":n=this.findNextItem(this.$refs.tab,n).i;break;case"ArrowLeft":n=this.findPrevItem(this.$refs.tab,n).i;break;case"End":n=this.findPrevItem(this.$refs.tab,this.model.length).i,e.preventDefault();break;case"Home":n=this.findNextItem(this.$refs.tab,-1).i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(i)}i[n]&&i[t]&&(i[t].tabIndex="-1",i[n].tabIndex="0",i[n].focus())},findNextItem:function(e,n){var i=n+1;if(i>=e.length)return{nextItem:e[e.length],i:e.length};var a=e[i];return a?t.DomHandler.getAttribute(a,"data-p-disabled")?this.findNextItem(e,i):{nextItem:a,i:i}:null},findPrevItem:function(e,n){var i=n-1;if(i<0)return{nextItem:e[0],i:0};var a=e[i];return a?t.DomHandler.getAttribute(a,"data-p-disabled")?this.findPrevItem(e,i):{prevItem:a,i:i}:null},visible:function(e){return"function"==typeof e.visible?e.visible():!1!==e.visible},disabled:function(e){return"function"==typeof e.disabled?e.disabled():e.disabled},label:function(e){return"function"==typeof e.label?e.label():e.label},setDefaultTabIndexes:function(e){setTimeout((function(){e.forEach((function(e){e.tabIndex=t.DomHandler.getAttribute(e.parentElement,"data-p-highlight")?"0":"-1"}))}),300)},setTabIndex:function(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar:function(){for(var e=this.$refs.nav.children,n=!1,i=0;i<e.length;i++){var a=e[i];t.DomHandler.getAttribute(a,"data-p-highlight")&&(this.$refs.inkbar.style.width=t.DomHandler.getWidth(a)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(a).left-t.DomHandler.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},computed:{focusableItems:function(){var e=this;return(this.model||[]).reduce((function(t,n){return e.visible(n)&&!e.disabled(n)&&t.push(n),t}),[])}},directives:{ripple:r.default}},d=["aria-labelledby","aria-label"],m=["data-p-highlight","data-p-disabled"],u=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],p=["onClick","onKeydown","data-p-highlight","data-p-disabled"],b=["href","target","aria-label","aria-disabled","tabindex"];return c.render=function(e,t,n,i,l,r){var o=a.resolveComponent("router-link"),s=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"tabmenu"}),[a.createElementVNode("ul",a.mergeProps({ref:"nav",class:e.cx("menu"),role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(r.focusableItems,(function(t,n){return a.openBlock(),a.createElementBlock(a.Fragment,{key:r.label(t)+"_"+n.toString()},[t.to&&!r.disabled(t)?(a.openBlock(),a.createBlock(o,{key:0,to:t.to,custom:""},{default:a.withCtx((function(i){var l=i.navigate,o=i.href,c=i.isActive,d=i.isExactActive;return[r.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:0,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,isActive:c,isExactActive:d}),t.class],style:t.style,role:"presentation"},r.getPTOptions("menuitem",n),{"data-p-highlight":e.exact?d:c,"data-p-disabled":r.disabled(t)}),[e.$slots.item?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:o,class:e.cx("action"),"aria-label":r.label(t),"aria-disabled":r.disabled(t),tabindex:d?"0":"-1",onClick:function(e){return r.onItemClick(e,t,n,l)},onKeydown:function(e){return r.onKeydownItem(e,n,l)}},r.getPTOptions("action",n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:[e.cx("icon"),t.icon]},r.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},r.getPTOptions("label",n)),a.toDisplayString(r.label(t)),17)],16,u)),[[s]])],16,m)):a.createCommentVNode("",!0)]})),_:2},1032,["to"])):r.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:1,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,index:n}),t.class],role:"presentation",onClick:function(e){return r.onItemClick(e,t,n)},onKeydown:function(e){return r.onKeydownItem(e,n)}},r.getPTOptions("menuitem",n),{"data-p-highlight":l.d_activeIndex===n,"data-p-disabled":r.disabled(t)}),[e.$slots.item?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:e.cx("action"),target:t.target,"aria-label":r.label(t),"aria-disabled":r.disabled(t),tabindex:r.setTabIndex(n)},r.getPTOptions("action",n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:[e.cx("icon"),t.icon]},r.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},r.getPTOptions("label",n)),a.toDisplayString(r.label(t)),17)],16,b)),[[s]])],16,p)):a.createCommentVNode("",!0)],64)})),128)),a.createElementVNode("li",a.mergeProps({ref:"inkbar",role:"none",class:e.cx("inkbar")},e.ptm("inkbar")),null,16)],16,d)],16)},c}(primevue.ripple,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);
+this.primevue=this.primevue||{},this.primevue.tabmenu=function(e,t,n,i,a){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),r=l(n),s=i.useStyle("\n.p-tabmenu {\n    overflow-x: auto;\n}\n\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n",{name:"tabmenu",manual:!0}),c={name:"TabMenu",extends:{name:"BaseTabMenu",extends:r.default,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}},css:{classes:{root:"p-tabmenu p-component",menu:"p-tabmenu-nav p-reset",menuitem:function(e){var t=e.instance;return["p-tabmenuitem",{"p-highlight":(e.props.exact?e.isExactActive:e.isActive)||t.d_activeIndex===e.index,"p-disabled":t.disabled(e.item)}]},action:"p-menuitem-link",icon:"p-menuitem-icon",label:"p-menuitem-text",inkbar:"p-tabmenu-ink-bar"},loadStyle:s.load},provide:function(){return{$parentInstance:this}}},emits:["update:activeIndex","tab-change"],timeout:null,data:function(){return{d_activeIndex:this.activeIndex}},watch:{$route:function(){var e=this;this.timeout=setTimeout((function(){return e.updateInkBar()}),50)},activeIndex:function(e){this.d_activeIndex=e}},mounted:function(){this.updateInkBar();var e=this.findActiveItem();e&&(e.tabIndex="0")},updated:function(){this.updateInkBar()},beforeUnmount:function(){clearTimeout(this.timeout)},methods:{getPTOptions:function(e,t){return this.ptm(e,{context:{order:t}})},onItemClick:function(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}))},onKeydownItem:function(e,t,n,i){switch(e.code){case"ArrowRight":this.navigateToNextItem(e.target),e.preventDefault();break;case"ArrowLeft":this.navigateToPrevItem(e.target),e.preventDefault();break;case"Home":this.navigateToFirstItem(e.target),e.preventDefault();break;case"End":this.navigateToLastItem(e.target),e.preventDefault();break;case"Space":case"Enter":this.onItemClick(e,t,n,i),e.preventDefault();break;case"Tab":this.onTabKey()}},navigateToNextItem:function(e){var t=this.findNextItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToPrevItem:function(e){var t=this.findPrevItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToFirstItem:function(e){var t=this.findFirstItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToLastItem:function(e){var t=this.findLastItem(e);t&&this.setFocusToMenuitem(e,t)},findNextItem:function(e){var n=e.parentElement.nextElementSibling;return n?!0===t.DomHandler.getAttribute(n,"data-p-disabled")?this.findNextItem(n.children[0]):n.children[0]:null},findPrevItem:function(e){var n=e.parentElement.previousElementSibling;return n?!0===t.DomHandler.getAttribute(n,"data-p-disabled")?this.findPrevItem(n.children[0]):n.children[0]:null},findFirstItem:function(){var e=t.DomHandler.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e.children[0]:null},findLastItem:function(){var e=t.DomHandler.find(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e[e.length-1].children[0]:null},findActiveItem:function(){var e=t.DomHandler.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');return e?e.children[0]:null},setFocusToMenuitem:function(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},onTabKey:function(){var e=t.DomHandler.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'),n=t.DomHandler.findSingle(this.$refs.nav,'[data-pc-section="action"][tabindex="0"]');n!==e.children[0]&&(e&&(e.children[0].tabIndex="0"),n.tabIndex="-1")},visible:function(e){return"function"==typeof e.visible?e.visible():!1!==e.visible},disabled:function(e){return"function"==typeof e.disabled?e.disabled():!0===e.disabled},label:function(e){return"function"==typeof e.label?e.label():e.label},updateInkBar:function(){for(var e=this.$refs.nav.children,n=!1,i=0;i<e.length;i++){var a=e[i];t.DomHandler.getAttribute(a,"data-p-highlight")&&(this.$refs.inkbar.style.width=t.DomHandler.getWidth(a)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(a).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:o.default}},d=["aria-labelledby","aria-label"],m=["data-p-highlight","data-p-disabled"],u=["href","aria-label","aria-disabled","onClick","onKeydown"],p=["onClick","onKeydown","data-p-highlight","data-p-disabled"],f=["href","target","aria-label","aria-disabled"];return c.render=function(e,t,n,i,l,o){var r=a.resolveComponent("router-link"),s=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"tabmenu"}),[a.createElementVNode("ul",a.mergeProps({ref:"nav",class:e.cx("menu"),role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(e.model,(function(t,n){return a.openBlock(),a.createElementBlock(a.Fragment,{key:o.label(t)+"_"+n.toString()},[t.to&&!o.disabled(t)?(a.openBlock(),a.createBlock(r,{key:0,to:t.to,custom:""},{default:a.withCtx((function(i){var l=i.navigate,r=i.href,c=i.isActive,d=i.isExactActive;return[o.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:0,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,isActive:c,isExactActive:d}),t.class],style:t.style,role:"presentation"},o.getPTOptions("menuitem",n),{"data-p-highlight":e.exact?d:c,"data-p-disabled":o.disabled(t)}),[e.$slots.item?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:r,class:e.cx("action"),"aria-label":o.label(t),"aria-disabled":o.disabled(t),tabindex:-1,onClick:function(e){return o.onItemClick(e,t,n,l)},onKeydown:function(e){return o.onKeydownItem(e,t,n,l)}},o.getPTOptions("action",n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:[e.cx("icon"),t.icon]},o.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},o.getPTOptions("label",n)),a.toDisplayString(o.label(t)),17)],16,u)),[[s]])],16,m)):a.createCommentVNode("",!0)]})),_:2},1032,["to"])):o.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:1,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,index:n}),t.class],role:"presentation",onClick:function(e){return o.onItemClick(e,t,n)},onKeydown:function(e){return o.onKeydownItem(e,t,n)}},o.getPTOptions("menuitem",n),{"data-p-highlight":l.d_activeIndex===n,"data-p-disabled":o.disabled(t)}),[e.$slots.item?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:e.cx("action"),target:t.target,"aria-label":o.label(t),"aria-disabled":o.disabled(t),tabindex:-1},o.getPTOptions("action",n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:[e.cx("icon"),t.icon]},o.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},o.getPTOptions("label",n)),a.toDisplayString(o.label(t)),17)],16,f)),[[s]])],16,p)):a.createCommentVNode("",!0)],64)})),128)),a.createElementVNode("li",a.mergeProps({ref:"inkbar",role:"none",class:e.cx("inkbar")},e.ptm("inkbar")),null,16)],16,d)],16)},c}(primevue.ripple,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/tabpanel/TabPanel.d.ts

@@ -12,7 +12,7 @@ import { ComponentHooks } from '../basecomponent';
 import { TabViewPassThroughOptions } from '../tabview';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type TabPanelPassThroughOptionType = TabPanelPassThroughAttributes | ((options: TabPanelPassThroughMethodOptions) => TabPanelPassThroughAttributes) | null | undefined;
+export declare type TabPanelPassThroughOptionType = TabPanelPassThroughAttributes | ((options: TabPanelPassThroughMethodOptions) => TabPanelPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
@@ -119,6 +119,22 @@ export interface TabPanelContext {
      * Current index of the tab.
      */
     index: number;
+    /**
+     * Count of tabs
+     */
+    count: number;
+    /**
+     * Whether the tab is first.
+     */
+    first: boolean;
+    /**
+     * Whether the tab is last.
+     */
+    last: boolean;
+    /**
+     * Whether the tab is active.
+     */
+    active: boolean;
 }
 
 /**

package/tabview/TabView.d.ts

@@ -12,7 +12,7 @@ import { ComponentHooks } from '../basecomponent';
 import { TabPanelPassThroughOptionType } from '../tabpanel';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type TabViewPassThroughOptionType = TabViewPassThroughAttributes | ((options: { props: TabViewProps; state: TabViewState }) => TabViewPassThroughAttributes) | null | undefined;
+export declare type TabViewPassThroughOptionType = TabViewPassThroughAttributes | ((options: { props: TabViewProps; state: TabViewState }) => TabViewPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom tab change event.
@@ -83,8 +83,13 @@ export interface TabViewPassThroughOptions {
     panelContainer?: TabViewPassThroughOptionType;
     /**
      * Uses to pass attributes to TabPanel helper components.
+     * @deprecated since v3.30.1. Use 'tabpanel' property instead.
      */
     tab?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to TabPanel helper components.
+     */
+    tabpanel?: TabPanelPassThroughOptionType;
     /**
      * Uses to manage all lifecycle hooks
      * @see {@link BaseComponent.ComponentHooks}