primevue 3.16.2 → 3.18.0

package/tabmenu/tabmenu.js

@@ -1,5 +1,5 @@
 this.primevue = this.primevue || {};
-this.primevue.tabmenu = (function (utils, Ripple, vue) {
+this.primevue.tabmenu = (function (Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -10,7 +10,7 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
         name: 'TabMenu',
         emits: ['update:activeIndex', 'tab-change'],
         props: {
-    		model: {
+            model: {
                 type: Array,
                 default: null
             },
@@ -21,12 +21,28 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
             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() {
@@ -38,18 +54,11 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
         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;
                 }
 
@@ -74,62 +83,163 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
                     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 utils.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 utils.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 = utils.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 (utils.DomHandler.hasClass(tab, 'p-highlight')) {
                         this.$refs.inkbar.style.width = utils.DomHandler.getWidth(tab) + 'px';
-                        this.$refs.inkbar.style.left =  utils.DomHandler.getOffset(tab).left - utils.DomHandler.getOffset(this.$refs.nav).left + 'px';
+                        this.$refs.inkbar.style.left = utils.DomHandler.getOffset(tab).left - utils.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__default["default"]
+            ripple: Ripple__default["default"]
         }
     };
 
     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",
@@ -141,7 +251,13 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("ul", _hoisted_2, [
+        vue.createElementVNode("ul", {
+          ref: "nav",
+          class: "p-tabmenu-nav p-reset",
+          role: "menubar",
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel
+        }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
             return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: $options.label(item) + '_' + i.toString()
@@ -152,21 +268,29 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
                     to: item.to,
                     custom: ""
                   }, {
-                    default: vue.withCtx(({navigate, href, isActive, isExactActive}) => [
+                    default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
                       ($options.visible(item))
                         ? (vue.openBlock(), vue.createElementBlock("li", {
                             key: 0,
-                            class: vue.normalizeClass($options.getRouteItemClass(item,isActive,isExactActive)),
+                            ref_for: true,
+                            ref: "tab",
+                            class: vue.normalizeClass($options.getRouteItemClass(item, isActive, isExactActive)),
                             style: vue.normalizeStyle(item.style),
-                            role: "tab"
+                            role: "presentation"
                           }, [
                             (!_ctx.$slots.item)
                               ? vue.withDirectives((vue.openBlock(), vue.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)
                                     ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -175,7 +299,7 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
                                       }, null, 2))
                                     : vue.createCommentVNode("", true),
                                   vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.label(item)), 1)
-                                ], 8, _hoisted_3)), [
+                                ], 40, _hoisted_3)), [
                                   [_directive_ripple]
                                 ])
                               : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
@@ -190,18 +314,25 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
                 : ($options.visible(item))
                   ? (vue.openBlock(), vue.createElementBlock("li", {
                       key: 1,
+                      ref_for: true,
+                      ref: "tab",
                       class: vue.normalizeClass($options.getItemClass(item, i)),
-                      role: "tab"
+                      role: "presentation"
                     }, [
                       (!_ctx.$slots.item)
                         ? vue.withDirectives((vue.openBlock(), vue.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)
                               ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -210,7 +341,7 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
                                 }, null, 2))
                               : vue.createCommentVNode("", true),
                             vue.createElementVNode("span", _hoisted_6, vue.toDisplayString($options.label(item)), 1)
-                          ], 8, _hoisted_5)), [
+                          ], 40, _hoisted_5)), [
                             [_directive_ripple]
                           ])
                         : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
@@ -222,7 +353,7 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
             ], 64))
           }), 128)),
           vue.createElementVNode("li", _hoisted_7, null, 512)
-        ], 512)
+        ], 8, _hoisted_2)
       ]))
     }
 
@@ -260,4 +391,4 @@ this.primevue.tabmenu = (function (utils, Ripple, vue) {
 
     return script;
 
-})(primevue.utils, primevue.ripple, Vue);
+})(primevue.ripple, primevue.utils, Vue);

package/tabmenu/tabmenu.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tabmenu=function(e,t,n){"use strict";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"};return 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)])},i}(primevue.utils,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.tabmenu=function(e,t,n){"use strict";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"};return 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)])},l}(primevue.ripple,primevue.utils,Vue);

package/tabpanel/TabPanel.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface TabPanelProps {
@@ -6,6 +6,34 @@ export interface TabPanelProps {
      * Orientation of tab headers.
      */
     header?: string | undefined;
+    /**
+     * Inline style of the tab header.
+     */
+    headerStyle?: any;
+    /**
+     * Style class of the tab header.
+     */
+    headerClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLLiElement to the tab header.
+     */
+    headerProps?: LiHTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     */
+    headerActionProps?: AnchorHTMLAttributes | undefined;
+    /**
+     * Inline style of the tab content.
+     */
+    contentStyle?: any;
+    /**
+     * Style class of the tab content.
+     */
+    contentClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the tab content.
+     */
+    contentProps?: HTMLAttributes | undefined;
     /**
      * Whether the tab is disabled.
      */
@@ -23,14 +51,13 @@ export interface TabPanelSlots {
     header: () => VNode[];
 }
 
-export declare type TabPanelEmits = {
-}
+export declare type TabPanelEmits = {};
 
-declare class TabPanel extends ClassComponent<TabPanelProps, TabPanelSlots, TabPanelEmits> { }
+declare class TabPanel extends ClassComponent<TabPanelProps, TabPanelSlots, TabPanelEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TabPanel: GlobalComponentConstructor<TabPanel>
+        TabPanel: GlobalComponentConstructor<TabPanel>;
     }
 }
 
@@ -40,7 +67,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TabPanel](https://www.primefaces.org/primevue/showcase/#/tabpanel)
+ * - [TabPanel](https://www.primefaces.org/primevue/tabpanel)
  *
  */
 export default TabPanel;

package/tabpanel/TabPanel.vue

@@ -7,7 +7,14 @@ export default {
     name: 'TabPanel',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
-}
+};
 </script>

package/tabpanel/tabpanel.cjs.js

@@ -6,6 +6,13 @@ var script = {
     name: 'TabPanel',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
 };

package/tabpanel/tabpanel.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),r={name:"TabPanel",props:{header:null,disabled:Boolean}};r.render=function(r,l,n,a,o,t){return e.renderSlot(r.$slots,"default")},module.exports=r;
+"use strict";var e=require("vue"),l={name:"TabPanel",props:{header:null,headerStyle:null,headerClass:null,headerProps:null,headerActionProps:null,contentStyle:null,contentClass:null,contentProps:null,disabled:Boolean}};l.render=function(l,n,r,t,o,u){return e.renderSlot(l.$slots,"default")},module.exports=l;

package/tabpanel/tabpanel.esm.js

@@ -4,6 +4,13 @@ var script = {
     name: 'TabPanel',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
 };

package/tabpanel/tabpanel.esm.min.js

@@ -1 +1 @@
-import{renderSlot as e}from"vue";var a={name:"TabPanel",props:{header:null,disabled:Boolean}};a.render=function(a,r,l,n,o,t){return e(a.$slots,"default")};export{a as default};
+import{renderSlot as e}from"vue";var l={name:"TabPanel",props:{header:null,headerStyle:null,headerClass:null,headerProps:null,headerActionProps:null,contentStyle:null,contentClass:null,contentProps:null,disabled:Boolean}};l.render=function(l,n,r,a,t,o){return e(l.$slots,"default")};export{l as default};

package/tabpanel/tabpanel.js

@@ -6,6 +6,13 @@ this.primevue.tabpanel = (function (vue) {
         name: 'TabPanel',
         props: {
             header: null,
+            headerStyle: null,
+            headerClass: null,
+            headerProps: null,
+            headerActionProps: null,
+            contentStyle: null,
+            contentClass: null,
+            contentProps: null,
             disabled: Boolean
         }
     };

package/tabpanel/tabpanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tabpanel=function(e){"use strict";var r={name:"TabPanel",props:{header:null,disabled:Boolean}};return r.render=function(r,n,t,u,a,i){return e.renderSlot(r.$slots,"default")},r}(Vue);
+this.primevue=this.primevue||{},this.primevue.tabpanel=function(e){"use strict";var l={name:"TabPanel",props:{header:null,headerStyle:null,headerClass:null,headerProps:null,headerActionProps:null,contentStyle:null,contentClass:null,contentProps:null,disabled:Boolean}};return l.render=function(l,n,r,t,u,a){return e.renderSlot(l.$slots,"default")},l}(Vue);

package/tabview/TabView.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface TabViewChangeEvent {
@@ -15,7 +15,7 @@ export interface TabViewChangeEvent {
 /**
  * @extends TabViewChangeEvent
  */
-export interface TabViewClickEvent extends TabViewChangeEvent { }
+export interface TabViewClickEvent extends TabViewChangeEvent {}
 
 export interface TabViewProps {
     /**
@@ -30,6 +30,22 @@ export interface TabViewProps {
      * When enabled displays buttons at each side of the tab headers to scroll the tab list.
      */
     scrollable?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     */
+    selectOnFocus?: boolean | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the previous button.
+     */
+    previousButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the next button.
+     */
+    nextButtonProps?: ButtonHTMLAttributes | undefined;
 }
 
 export interface TabViewSlots {
@@ -55,13 +71,13 @@ export declare type TabViewEmits = {
      * @param {TabViewClickEvent} event - Custom tab click event.
      */
     'tab-click': (event: TabViewClickEvent) => void;
-}
+};
 
-declare class TabView extends ClassComponent<TabViewProps, TabViewSlots, TabViewEmits> { }
+declare class TabView extends ClassComponent<TabViewProps, TabViewSlots, TabViewEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TabView: GlobalComponentConstructor<TabView>
+        TabView: GlobalComponentConstructor<TabView>;
     }
 }
 
@@ -75,7 +91,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TabView](https://www.primefaces.org/primevue/showcase/#/tabview)
+ * - [TabView](https://www.primefaces.org/primevue/tabview)
  *
  */
 export default TabView;