primevue 3.22.3 → 3.23.0

package/tabview/tabview.esm.min.js

@@ -1 +1 @@
-import e from"primevue/ripple";import{DomHandler as t,UniqueComponentId as n}from"primevue/utils";import{resolveDirective as a,openBlock as i,createElementBlock as s,normalizeClass as r,createElementVNode as o,withDirectives as l,mergeProps as d,createCommentVNode as c,Fragment as b,renderList as p,toDisplayString as h,createBlock as v,resolveDynamicComponent as u,vShow as f}from"vue";var g={name:"TabView",emits:["update:activeIndex","tab-change","tab-click"],props:{activeIndex:{type:Number,default:0},lazy:{type:Boolean,default:!1},scrollable:{type:Boolean,default:!1},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1},previousButtonProps:{type:null,default:null},nextButtonProps:{type:null,default:null}},data(){return{d_activeIndex:this.activeIndex,isPrevButtonDisabled:!0,isNextButtonDisabled:!1}},watch:{activeIndex(e){this.d_activeIndex=e,this.scrollInView({index:e})}},mounted(){this.updateInkBar(),this.scrollable&&this.updateButtonState()},updated(){this.updateInkBar()},methods:{isTabPanel:e=>"TabPanel"===e.type.name,isTabActive(e){return this.d_activeIndex===e},getTabProp:(e,t)=>e.props?e.props[t]:void 0,getKey(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId(e){return`${this.id}_${e}_header_action`},getTabContentId(e){return`${this.id}_${e}_content`},onScroll(e){this.scrollable&&this.updateButtonState(),e.preventDefault()},onPrevButtonClick(){const e=this.$refs.content,n=t.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft-n;e.scrollLeft=a<=0?0:a},onNextButtonClick(){const e=this.$refs.content,n=t.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft+n,i=e.scrollWidth-n;e.scrollLeft=a>=i?i:a},onTabClick(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown(e,t,n){switch(e.code){case"ArrowLeft":this.onTabArrowLeftKey(e);break;case"ArrowRight":this.onTabArrowRightKey(e);break;case"Home":this.onTabHomeKey(e);break;case"End":this.onTabEndKey(e);break;case"PageDown":this.onPageDownKey(e);break;case"PageUp":this.onPageUpKey(e);break;case"Enter":case"Space":this.onTabEnterKey(e,t,n)}},onTabArrowRightKey(e){const t=this.findNextHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowLeftKey(e){const t=this.findPrevHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey(e){const t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey(e){const t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onPageDownKey(e){this.scrollInView({index:this.$refs.nav.children.length-2}),e.preventDefault()},onPageUpKey(e){this.scrollInView({index:0}),e.preventDefault()},onTabEnterKey(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction(e,n=!1){const a=n?e:e.nextElementSibling;return a?t.hasClass(a,"p-disabled")||t.hasClass(a,"p-tabview-ink-bar")?this.findNextHeaderAction(a):t.findSingle(a,".p-tabview-header-action"):null},findPrevHeaderAction(e,n=!1){const a=n?e:e.previousElementSibling;return a?t.hasClass(a,"p-disabled")||t.hasClass(a,"p-tabview-ink-bar")?this.findPrevHeaderAction(a):t.findSingle(a,".p-tabview-header-action"):null},findFirstHeaderAction(){return this.findNextHeaderAction(this.$refs.nav.firstElementChild,!0)},findLastHeaderAction(){return this.findPrevHeaderAction(this.$refs.nav.lastElementChild,!0)},changeActiveIndex(e,t,n){this.getTabProp(t,"disabled")||this.d_activeIndex===n||(this.d_activeIndex=n,this.$emit("update:activeIndex",n),this.$emit("tab-change",{originalEvent:e,index:n}),this.scrollInView({index:n}))},changeFocusedTab(e,n){if(n&&(t.focus(n),this.scrollInView({element:n}),this.selectOnFocus)){const t=parseInt(n.parentElement.dataset.index,10),a=this.tabs[t];this.changeActiveIndex(e,a,t)}},scrollInView({element:e,index:t=-1}){const n=e||this.$refs.nav.children[t];n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest"})},updateInkBar(){let e=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=t.getWidth(e)+"px",this.$refs.inkbar.style.left=t.getOffset(e).left-t.getOffset(this.$refs.nav).left+"px"},updateButtonState(){const e=this.$refs.content,{scrollLeft:n,scrollWidth:a}=e,i=t.getWidth(e);this.isPrevButtonDisabled=0===n,this.isNextButtonDisabled=parseInt(n)===a-i},getVisibleButtonWidths(){const{prevBtn:e,nextBtn:n}=this.$refs;return[e,n].reduce(((e,n)=>n?e+t.getWidth(n):e),0)},getTabHeaderClass(e,t){return["p-tabview-header",this.getTabProp(e,"headerClass"),{"p-highlight":this.d_activeIndex===t,"p-disabled":this.getTabProp(e,"disabled")}]},getTabContentClass(e){return["p-tabview-panel",this.getTabProp(e,"contentClass")]}},computed:{contentClasses(){return["p-tabview p-component",{"p-tabview-scrollable":this.scrollable}]},tabs(){return this.$slots.default().reduce(((e,t)=>(this.isTabPanel(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isTabPanel(t)&&e.push(t)})),e)),[])},prevButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.previous:void 0},nextButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.next:void 0},id(){return this.$attrs.id||n()}},directives:{ripple:e}};const x={class:"p-tabview-nav-container"},y=["tabindex","aria-label"],w=[o("span",{class:"pi pi-chevron-left","aria-hidden":"true"},null,-1)],T={ref:"nav",class:"p-tabview-nav",role:"tablist"},m=["data-index"],k=["id","tabindex","aria-disabled","aria-selected","aria-controls","onClick","onKeydown"],P={key:0,class:"p-tabview-title"},B={ref:"inkbar",class:"p-tabview-ink-bar",role:"presentation","aria-hidden":"true"},A=["tabindex","aria-label"],C=[o("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)],I={class:"p-tabview-panels"},$=["aria-labelledby"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabview-nav-container {\n    position: relative;\n}\n.p-tabview-scrollable .p-tabview-nav-container {\n    overflow: hidden;\n}\n.p-tabview-nav-content {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    overscroll-behavior: contain auto;\n}\n.p-tabview-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex: 1 1 auto;\n}\n.p-tabview-header-action {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabview-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabview-header-action:focus {\n    z-index: 1;\n}\n.p-tabview-title {\n    line-height: 1;\n    white-space: nowrap;\n}\n.p-tabview-nav-btn {\n    position: absolute;\n    top: 0;\n    z-index: 2;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tabview-nav-prev {\n    left: 0;\n}\n.p-tabview-nav-next {\n    right: 0;\n}\n.p-tabview-nav-content::-webkit-scrollbar {\n    display: none;\n}\n"),g.render=function(e,t,n,g,K,H){const D=a("ripple");return i(),s("div",{class:r(H.contentClasses)},[o("div",x,[n.scrollable&&!K.isPrevButtonDisabled?l((i(),s("button",d({key:0,ref:"prevBtn",type:"button",class:"p-tabview-nav-prev p-tabview-nav-btn p-link",tabindex:n.tabindex,"aria-label":H.prevButtonAriaLabel,onClick:t[0]||(t[0]=(...e)=>H.onPrevButtonClick&&H.onPrevButtonClick(...e))},n.previousButtonProps),w,16,y)),[[D]]):c("",!0),o("div",{ref:"content",class:"p-tabview-nav-content",onScroll:t[1]||(t[1]=(...e)=>H.onScroll&&H.onScroll(...e))},[o("ul",T,[(i(!0),s(b,null,p(H.tabs,((e,t)=>(i(),s("li",d({key:H.getKey(e,t),style:H.getTabProp(e,"headerStyle"),class:H.getTabHeaderClass(e,t),role:"presentation","data-index":t},H.getTabProp(e,"headerProps")),[l((i(),s("a",d({id:H.getTabHeaderActionId(t),class:"p-tabview-nav-link p-tabview-header-action",tabindex:H.getTabProp(e,"disabled")||!H.isTabActive(t)?-1:n.tabindex,role:"tab","aria-disabled":H.getTabProp(e,"disabled"),"aria-selected":H.isTabActive(t),"aria-controls":H.getTabContentId(t),onClick:n=>H.onTabClick(n,e,t),onKeydown:n=>H.onTabKeyDown(n,e,t)},H.getTabProp(e,"headerActionProps")),[e.props&&e.props.header?(i(),s("span",P,h(e.props.header),1)):c("",!0),e.children&&e.children.header?(i(),v(u(e.children.header),{key:1})):c("",!0)],16,k)),[[D]])],16,m)))),128)),o("li",B,null,512)],512)],544),n.scrollable&&!K.isNextButtonDisabled?l((i(),s("button",d({key:1,ref:"nextBtn",type:"button",class:"p-tabview-nav-next p-tabview-nav-btn p-link",tabindex:n.tabindex,"aria-label":H.nextButtonAriaLabel,onClick:t[2]||(t[2]=(...e)=>H.onNextButtonClick&&H.onNextButtonClick(...e))},n.nextButtonProps),C,16,A)),[[D]]):c("",!0)]),o("div",I,[(i(!0),s(b,null,p(H.tabs,((e,t)=>(i(),s(b,{key:H.getKey(e,t)},[!n.lazy||H.isTabActive(t)?l((i(),s("div",d({key:0,style:H.getTabProp(e,"contentStyle"),class:H.getTabContentClass(e),role:"tabpanel","aria-labelledby":H.getTabHeaderActionId(t)},H.getTabProp(e,"contentProps")),[(i(),v(u(e)))],16,$)),[[f,!!n.lazy||H.isTabActive(t)]]):c("",!0)],64)))),128))])],2)};export{g as default};
+import e from"primevue/ripple";import{UniqueComponentId as t,DomHandler as n}from"primevue/utils";import{resolveDirective as a,openBlock as i,createElementBlock as s,normalizeClass as r,createElementVNode as o,withDirectives as l,mergeProps as d,createCommentVNode as c,Fragment as b,renderList as h,toDisplayString as p,createBlock as v,resolveDynamicComponent as u,vShow as f}from"vue";var g={name:"TabView",emits:["update:activeIndex","tab-change","tab-click"],props:{activeIndex:{type:Number,default:0},lazy:{type:Boolean,default:!1},scrollable:{type:Boolean,default:!1},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1},previousButtonProps:{type:null,default:null},nextButtonProps:{type:null,default:null}},data(){return{id:this.$attrs.id,d_activeIndex:this.activeIndex,isPrevButtonDisabled:!0,isNextButtonDisabled:!1}},watch:{"$attrs.id":function(e){this.id=e||t()},activeIndex(e){this.d_activeIndex=e,this.scrollInView({index:e})}},mounted(){this.id=this.id||t(),this.updateInkBar(),this.scrollable&&this.updateButtonState()},updated(){this.updateInkBar()},methods:{isTabPanel:e=>"TabPanel"===e.type.name,isTabActive(e){return this.d_activeIndex===e},getTabProp:(e,t)=>e.props?e.props[t]:void 0,getKey(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId(e){return`${this.id}_${e}_header_action`},getTabContentId(e){return`${this.id}_${e}_content`},onScroll(e){this.scrollable&&this.updateButtonState(),e.preventDefault()},onPrevButtonClick(){const e=this.$refs.content,t=n.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft-t;e.scrollLeft=a<=0?0:a},onNextButtonClick(){const e=this.$refs.content,t=n.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft+t,i=e.scrollWidth-t;e.scrollLeft=a>=i?i:a},onTabClick(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown(e,t,n){switch(e.code){case"ArrowLeft":this.onTabArrowLeftKey(e);break;case"ArrowRight":this.onTabArrowRightKey(e);break;case"Home":this.onTabHomeKey(e);break;case"End":this.onTabEndKey(e);break;case"PageDown":this.onPageDownKey(e);break;case"PageUp":this.onPageUpKey(e);break;case"Enter":case"Space":this.onTabEnterKey(e,t,n)}},onTabArrowRightKey(e){const t=this.findNextHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowLeftKey(e){const t=this.findPrevHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey(e){const t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey(e){const t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onPageDownKey(e){this.scrollInView({index:this.$refs.nav.children.length-2}),e.preventDefault()},onPageUpKey(e){this.scrollInView({index:0}),e.preventDefault()},onTabEnterKey(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction(e,t=!1){const a=t?e:e.nextElementSibling;return a?n.hasClass(a,"p-disabled")||n.hasClass(a,"p-tabview-ink-bar")?this.findNextHeaderAction(a):n.findSingle(a,".p-tabview-header-action"):null},findPrevHeaderAction(e,t=!1){const a=t?e:e.previousElementSibling;return a?n.hasClass(a,"p-disabled")||n.hasClass(a,"p-tabview-ink-bar")?this.findPrevHeaderAction(a):n.findSingle(a,".p-tabview-header-action"):null},findFirstHeaderAction(){return this.findNextHeaderAction(this.$refs.nav.firstElementChild,!0)},findLastHeaderAction(){return this.findPrevHeaderAction(this.$refs.nav.lastElementChild,!0)},changeActiveIndex(e,t,n){this.getTabProp(t,"disabled")||this.d_activeIndex===n||(this.d_activeIndex=n,this.$emit("update:activeIndex",n),this.$emit("tab-change",{originalEvent:e,index:n}),this.scrollInView({index:n}))},changeFocusedTab(e,t){if(t&&(n.focus(t),this.scrollInView({element:t}),this.selectOnFocus)){const n=parseInt(t.parentElement.dataset.index,10),a=this.tabs[n];this.changeActiveIndex(e,a,n)}},scrollInView({element:e,index:t=-1}){const n=e||this.$refs.nav.children[t];n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest"})},updateInkBar(){let e=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=n.getWidth(e)+"px",this.$refs.inkbar.style.left=n.getOffset(e).left-n.getOffset(this.$refs.nav).left+"px"},updateButtonState(){const e=this.$refs.content,{scrollLeft:t,scrollWidth:a}=e,i=n.getWidth(e);this.isPrevButtonDisabled=0===t,this.isNextButtonDisabled=parseInt(t)===a-i},getVisibleButtonWidths(){const{prevBtn:e,nextBtn:t}=this.$refs;return[e,t].reduce(((e,t)=>t?e+n.getWidth(t):e),0)},getTabHeaderClass(e,t){return["p-tabview-header",this.getTabProp(e,"headerClass"),{"p-highlight":this.d_activeIndex===t,"p-disabled":this.getTabProp(e,"disabled")}]},getTabContentClass(e){return["p-tabview-panel",this.getTabProp(e,"contentClass")]}},computed:{contentClasses(){return["p-tabview p-component",{"p-tabview-scrollable":this.scrollable}]},tabs(){return this.$slots.default().reduce(((e,t)=>(this.isTabPanel(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isTabPanel(t)&&e.push(t)})),e)),[])},prevButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.previous:void 0},nextButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.next:void 0}},directives:{ripple:e}};const x={class:"p-tabview-nav-container"},y=["tabindex","aria-label"],w=[o("span",{class:"pi pi-chevron-left","aria-hidden":"true"},null,-1)],T={ref:"nav",class:"p-tabview-nav",role:"tablist"},m=["data-index"],k=["id","tabindex","aria-disabled","aria-selected","aria-controls","onClick","onKeydown"],P={key:0,class:"p-tabview-title"},B={ref:"inkbar",class:"p-tabview-ink-bar",role:"presentation","aria-hidden":"true"},A=["tabindex","aria-label"],C=[o("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)],I={class:"p-tabview-panels"},$=["aria-labelledby"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabview-nav-container {\n    position: relative;\n}\n.p-tabview-scrollable .p-tabview-nav-container {\n    overflow: hidden;\n}\n.p-tabview-nav-content {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    overscroll-behavior: contain auto;\n}\n.p-tabview-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex: 1 1 auto;\n}\n.p-tabview-header-action {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabview-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabview-header-action:focus {\n    z-index: 1;\n}\n.p-tabview-title {\n    line-height: 1;\n    white-space: nowrap;\n}\n.p-tabview-nav-btn {\n    position: absolute;\n    top: 0;\n    z-index: 2;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tabview-nav-prev {\n    left: 0;\n}\n.p-tabview-nav-next {\n    right: 0;\n}\n.p-tabview-nav-content::-webkit-scrollbar {\n    display: none;\n}\n"),g.render=function(e,t,n,g,K,H){const D=a("ripple");return i(),s("div",{class:r(H.contentClasses)},[o("div",x,[n.scrollable&&!K.isPrevButtonDisabled?l((i(),s("button",d({key:0,ref:"prevBtn",type:"button",class:"p-tabview-nav-prev p-tabview-nav-btn p-link",tabindex:n.tabindex,"aria-label":H.prevButtonAriaLabel,onClick:t[0]||(t[0]=(...e)=>H.onPrevButtonClick&&H.onPrevButtonClick(...e))},n.previousButtonProps),w,16,y)),[[D]]):c("",!0),o("div",{ref:"content",class:"p-tabview-nav-content",onScroll:t[1]||(t[1]=(...e)=>H.onScroll&&H.onScroll(...e))},[o("ul",T,[(i(!0),s(b,null,h(H.tabs,((e,t)=>(i(),s("li",d({key:H.getKey(e,t),style:H.getTabProp(e,"headerStyle"),class:H.getTabHeaderClass(e,t),role:"presentation","data-index":t},H.getTabProp(e,"headerProps")),[l((i(),s("a",d({id:H.getTabHeaderActionId(t),class:"p-tabview-nav-link p-tabview-header-action",tabindex:H.getTabProp(e,"disabled")||!H.isTabActive(t)?-1:n.tabindex,role:"tab","aria-disabled":H.getTabProp(e,"disabled"),"aria-selected":H.isTabActive(t),"aria-controls":H.getTabContentId(t),onClick:n=>H.onTabClick(n,e,t),onKeydown:n=>H.onTabKeyDown(n,e,t)},H.getTabProp(e,"headerActionProps")),[e.props&&e.props.header?(i(),s("span",P,p(e.props.header),1)):c("",!0),e.children&&e.children.header?(i(),v(u(e.children.header),{key:1})):c("",!0)],16,k)),[[D]])],16,m)))),128)),o("li",B,null,512)],512)],544),n.scrollable&&!K.isNextButtonDisabled?l((i(),s("button",d({key:1,ref:"nextBtn",type:"button",class:"p-tabview-nav-next p-tabview-nav-btn p-link",tabindex:n.tabindex,"aria-label":H.nextButtonAriaLabel,onClick:t[2]||(t[2]=(...e)=>H.onNextButtonClick&&H.onNextButtonClick(...e))},n.nextButtonProps),C,16,A)),[[D]]):c("",!0)]),o("div",I,[(i(!0),s(b,null,h(H.tabs,((e,t)=>(i(),s(b,{key:H.getKey(e,t)},[!n.lazy||H.isTabActive(t)?l((i(),s("div",d({key:0,style:H.getTabProp(e,"contentStyle"),class:H.getTabContentClass(e),role:"tabpanel","aria-labelledby":H.getTabHeaderActionId(t)},H.getTabProp(e,"contentProps")),[(i(),v(u(e)))],16,$)),[[f,!!n.lazy||H.isTabActive(t)]]):c("",!0)],64)))),128))])],2)};export{g as default};

package/tabview/tabview.js

@@ -41,12 +41,16 @@ this.primevue.tabview = (function (Ripple, utils, vue) {
         },
         data() {
             return {
+                id: this.$attrs.id,
                 d_activeIndex: this.activeIndex,
                 isPrevButtonDisabled: true,
                 isNextButtonDisabled: false
             };
         },
         watch: {
+            '$attrs.id': function (newValue) {
+                this.id = newValue || utils.UniqueComponentId();
+            },
             activeIndex(newValue) {
                 this.d_activeIndex = newValue;
 
@@ -54,6 +58,8 @@ this.primevue.tabview = (function (Ripple, utils, vue) {
             }
         },
         mounted() {
+            this.id = this.id || utils.UniqueComponentId();
+
             this.updateInkBar();
             this.scrollable && this.updateButtonState();
         },
@@ -288,9 +294,6 @@ this.primevue.tabview = (function (Ripple, utils, vue) {
             },
             nextButtonAriaLabel() {
                 return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
-            },
-            id() {
-                return this.$attrs.id || utils.UniqueComponentId();
             }
         },
         directives: {

package/tabview/tabview.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tabview=function(e,t,n){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"TabView",emits:["update:activeIndex","tab-change","tab-click"],props:{activeIndex:{type:Number,default:0},lazy:{type:Boolean,default:!1},scrollable:{type:Boolean,default:!1},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1},previousButtonProps:{type:null,default:null},nextButtonProps:{type:null,default:null}},data(){return{d_activeIndex:this.activeIndex,isPrevButtonDisabled:!0,isNextButtonDisabled:!1}},watch:{activeIndex(e){this.d_activeIndex=e,this.scrollInView({index:e})}},mounted(){this.updateInkBar(),this.scrollable&&this.updateButtonState()},updated(){this.updateInkBar()},methods:{isTabPanel:e=>"TabPanel"===e.type.name,isTabActive(e){return this.d_activeIndex===e},getTabProp:(e,t)=>e.props?e.props[t]:void 0,getKey(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId(e){return`${this.id}_${e}_header_action`},getTabContentId(e){return`${this.id}_${e}_content`},onScroll(e){this.scrollable&&this.updateButtonState(),e.preventDefault()},onPrevButtonClick(){const e=this.$refs.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft-n;e.scrollLeft=a<=0?0:a},onNextButtonClick(){const e=this.$refs.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft+n,i=e.scrollWidth-n;e.scrollLeft=a>=i?i:a},onTabClick(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown(e,t,n){switch(e.code){case"ArrowLeft":this.onTabArrowLeftKey(e);break;case"ArrowRight":this.onTabArrowRightKey(e);break;case"Home":this.onTabHomeKey(e);break;case"End":this.onTabEndKey(e);break;case"PageDown":this.onPageDownKey(e);break;case"PageUp":this.onPageUpKey(e);break;case"Enter":case"Space":this.onTabEnterKey(e,t,n)}},onTabArrowRightKey(e){const t=this.findNextHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowLeftKey(e){const t=this.findPrevHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey(e){const t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey(e){const t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onPageDownKey(e){this.scrollInView({index:this.$refs.nav.children.length-2}),e.preventDefault()},onPageUpKey(e){this.scrollInView({index:0}),e.preventDefault()},onTabEnterKey(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction(e,n=!1){const a=n?e:e.nextElementSibling;return a?t.DomHandler.hasClass(a,"p-disabled")||t.DomHandler.hasClass(a,"p-tabview-ink-bar")?this.findNextHeaderAction(a):t.DomHandler.findSingle(a,".p-tabview-header-action"):null},findPrevHeaderAction(e,n=!1){const a=n?e:e.previousElementSibling;return a?t.DomHandler.hasClass(a,"p-disabled")||t.DomHandler.hasClass(a,"p-tabview-ink-bar")?this.findPrevHeaderAction(a):t.DomHandler.findSingle(a,".p-tabview-header-action"):null},findFirstHeaderAction(){return this.findNextHeaderAction(this.$refs.nav.firstElementChild,!0)},findLastHeaderAction(){return this.findPrevHeaderAction(this.$refs.nav.lastElementChild,!0)},changeActiveIndex(e,t,n){this.getTabProp(t,"disabled")||this.d_activeIndex===n||(this.d_activeIndex=n,this.$emit("update:activeIndex",n),this.$emit("tab-change",{originalEvent:e,index:n}),this.scrollInView({index:n}))},changeFocusedTab(e,n){if(n&&(t.DomHandler.focus(n),this.scrollInView({element:n}),this.selectOnFocus)){const t=parseInt(n.parentElement.dataset.index,10),a=this.tabs[t];this.changeActiveIndex(e,a,t)}},scrollInView({element:e,index:t=-1}){const n=e||this.$refs.nav.children[t];n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest"})},updateInkBar(){let e=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=t.DomHandler.getWidth(e)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(e).left-t.DomHandler.getOffset(this.$refs.nav).left+"px"},updateButtonState(){const e=this.$refs.content,{scrollLeft:n,scrollWidth:a}=e,i=t.DomHandler.getWidth(e);this.isPrevButtonDisabled=0===n,this.isNextButtonDisabled=parseInt(n)===a-i},getVisibleButtonWidths(){const{prevBtn:e,nextBtn:n}=this.$refs;return[e,n].reduce(((e,n)=>n?e+t.DomHandler.getWidth(n):e),0)},getTabHeaderClass(e,t){return["p-tabview-header",this.getTabProp(e,"headerClass"),{"p-highlight":this.d_activeIndex===t,"p-disabled":this.getTabProp(e,"disabled")}]},getTabContentClass(e){return["p-tabview-panel",this.getTabProp(e,"contentClass")]}},computed:{contentClasses(){return["p-tabview p-component",{"p-tabview-scrollable":this.scrollable}]},tabs(){return this.$slots.default().reduce(((e,t)=>(this.isTabPanel(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isTabPanel(t)&&e.push(t)})),e)),[])},prevButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.previous:void 0},nextButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.next:void 0},id(){return this.$attrs.id||t.UniqueComponentId()}},directives:{ripple:a(e).default}};const o={class:"p-tabview-nav-container"},r=["tabindex","aria-label"],l=[n.createElementVNode("span",{class:"pi pi-chevron-left","aria-hidden":"true"},null,-1)],s={ref:"nav",class:"p-tabview-nav",role:"tablist"},c=["data-index"],d=["id","tabindex","aria-disabled","aria-selected","aria-controls","onClick","onKeydown"],p={key:0,class:"p-tabview-title"},h={ref:"inkbar",class:"p-tabview-ink-bar",role:"presentation","aria-hidden":"true"},b=["tabindex","aria-label"],v=[n.createElementVNode("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)],u={class:"p-tabview-panels"},m=["aria-labelledby"];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],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabview-nav-container {\n    position: relative;\n}\n.p-tabview-scrollable .p-tabview-nav-container {\n    overflow: hidden;\n}\n.p-tabview-nav-content {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    overscroll-behavior: contain auto;\n}\n.p-tabview-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex: 1 1 auto;\n}\n.p-tabview-header-action {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabview-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabview-header-action:focus {\n    z-index: 1;\n}\n.p-tabview-title {\n    line-height: 1;\n    white-space: nowrap;\n}\n.p-tabview-nav-btn {\n    position: absolute;\n    top: 0;\n    z-index: 2;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tabview-nav-prev {\n    left: 0;\n}\n.p-tabview-nav-next {\n    right: 0;\n}\n.p-tabview-nav-content::-webkit-scrollbar {\n    display: none;\n}\n"),i.render=function(e,t,a,i,f,g){const w=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(g.contentClasses)},[n.createElementVNode("div",o,[a.scrollable&&!f.isPrevButtonDisabled?n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({key:0,ref:"prevBtn",type:"button",class:"p-tabview-nav-prev p-tabview-nav-btn p-link",tabindex:a.tabindex,"aria-label":g.prevButtonAriaLabel,onClick:t[0]||(t[0]=(...e)=>g.onPrevButtonClick&&g.onPrevButtonClick(...e))},a.previousButtonProps),l,16,r)),[[w]]):n.createCommentVNode("",!0),n.createElementVNode("div",{ref:"content",class:"p-tabview-nav-content",onScroll:t[1]||(t[1]=(...e)=>g.onScroll&&g.onScroll(...e))},[n.createElementVNode("ul",s,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.tabs,((e,t)=>(n.openBlock(),n.createElementBlock("li",n.mergeProps({key:g.getKey(e,t),style:g.getTabProp(e,"headerStyle"),class:g.getTabHeaderClass(e,t),role:"presentation","data-index":t},g.getTabProp(e,"headerProps")),[n.withDirectives((n.openBlock(),n.createElementBlock("a",n.mergeProps({id:g.getTabHeaderActionId(t),class:"p-tabview-nav-link p-tabview-header-action",tabindex:g.getTabProp(e,"disabled")||!g.isTabActive(t)?-1:a.tabindex,role:"tab","aria-disabled":g.getTabProp(e,"disabled"),"aria-selected":g.isTabActive(t),"aria-controls":g.getTabContentId(t),onClick:n=>g.onTabClick(n,e,t),onKeydown:n=>g.onTabKeyDown(n,e,t)},g.getTabProp(e,"headerActionProps")),[e.props&&e.props.header?(n.openBlock(),n.createElementBlock("span",p,n.toDisplayString(e.props.header),1)):n.createCommentVNode("",!0),e.children&&e.children.header?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.children.header),{key:1})):n.createCommentVNode("",!0)],16,d)),[[w]])],16,c)))),128)),n.createElementVNode("li",h,null,512)],512)],544),a.scrollable&&!f.isNextButtonDisabled?n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({key:1,ref:"nextBtn",type:"button",class:"p-tabview-nav-next p-tabview-nav-btn p-link",tabindex:a.tabindex,"aria-label":g.nextButtonAriaLabel,onClick:t[2]||(t[2]=(...e)=>g.onNextButtonClick&&g.onNextButtonClick(...e))},a.nextButtonProps),v,16,b)),[[w]]):n.createCommentVNode("",!0)]),n.createElementVNode("div",u,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.tabs,((e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:g.getKey(e,t)},[!a.lazy||g.isTabActive(t)?n.withDirectives((n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,style:g.getTabProp(e,"contentStyle"),class:g.getTabContentClass(e),role:"tabpanel","aria-labelledby":g.getTabHeaderActionId(t)},g.getTabProp(e,"contentProps")),[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e)))],16,m)),[[n.vShow,!!a.lazy||g.isTabActive(t)]]):n.createCommentVNode("",!0)],64)))),128))])],2)},i}(primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.tabview=function(e,t,n){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"TabView",emits:["update:activeIndex","tab-change","tab-click"],props:{activeIndex:{type:Number,default:0},lazy:{type:Boolean,default:!1},scrollable:{type:Boolean,default:!1},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1},previousButtonProps:{type:null,default:null},nextButtonProps:{type:null,default:null}},data(){return{id:this.$attrs.id,d_activeIndex:this.activeIndex,isPrevButtonDisabled:!0,isNextButtonDisabled:!1}},watch:{"$attrs.id":function(e){this.id=e||t.UniqueComponentId()},activeIndex(e){this.d_activeIndex=e,this.scrollInView({index:e})}},mounted(){this.id=this.id||t.UniqueComponentId(),this.updateInkBar(),this.scrollable&&this.updateButtonState()},updated(){this.updateInkBar()},methods:{isTabPanel:e=>"TabPanel"===e.type.name,isTabActive(e){return this.d_activeIndex===e},getTabProp:(e,t)=>e.props?e.props[t]:void 0,getKey(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId(e){return`${this.id}_${e}_header_action`},getTabContentId(e){return`${this.id}_${e}_content`},onScroll(e){this.scrollable&&this.updateButtonState(),e.preventDefault()},onPrevButtonClick(){const e=this.$refs.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft-n;e.scrollLeft=a<=0?0:a},onNextButtonClick(){const e=this.$refs.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft+n,i=e.scrollWidth-n;e.scrollLeft=a>=i?i:a},onTabClick(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown(e,t,n){switch(e.code){case"ArrowLeft":this.onTabArrowLeftKey(e);break;case"ArrowRight":this.onTabArrowRightKey(e);break;case"Home":this.onTabHomeKey(e);break;case"End":this.onTabEndKey(e);break;case"PageDown":this.onPageDownKey(e);break;case"PageUp":this.onPageUpKey(e);break;case"Enter":case"Space":this.onTabEnterKey(e,t,n)}},onTabArrowRightKey(e){const t=this.findNextHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowLeftKey(e){const t=this.findPrevHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey(e){const t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey(e){const t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onPageDownKey(e){this.scrollInView({index:this.$refs.nav.children.length-2}),e.preventDefault()},onPageUpKey(e){this.scrollInView({index:0}),e.preventDefault()},onTabEnterKey(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction(e,n=!1){const a=n?e:e.nextElementSibling;return a?t.DomHandler.hasClass(a,"p-disabled")||t.DomHandler.hasClass(a,"p-tabview-ink-bar")?this.findNextHeaderAction(a):t.DomHandler.findSingle(a,".p-tabview-header-action"):null},findPrevHeaderAction(e,n=!1){const a=n?e:e.previousElementSibling;return a?t.DomHandler.hasClass(a,"p-disabled")||t.DomHandler.hasClass(a,"p-tabview-ink-bar")?this.findPrevHeaderAction(a):t.DomHandler.findSingle(a,".p-tabview-header-action"):null},findFirstHeaderAction(){return this.findNextHeaderAction(this.$refs.nav.firstElementChild,!0)},findLastHeaderAction(){return this.findPrevHeaderAction(this.$refs.nav.lastElementChild,!0)},changeActiveIndex(e,t,n){this.getTabProp(t,"disabled")||this.d_activeIndex===n||(this.d_activeIndex=n,this.$emit("update:activeIndex",n),this.$emit("tab-change",{originalEvent:e,index:n}),this.scrollInView({index:n}))},changeFocusedTab(e,n){if(n&&(t.DomHandler.focus(n),this.scrollInView({element:n}),this.selectOnFocus)){const t=parseInt(n.parentElement.dataset.index,10),a=this.tabs[t];this.changeActiveIndex(e,a,t)}},scrollInView({element:e,index:t=-1}){const n=e||this.$refs.nav.children[t];n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest"})},updateInkBar(){let e=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=t.DomHandler.getWidth(e)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(e).left-t.DomHandler.getOffset(this.$refs.nav).left+"px"},updateButtonState(){const e=this.$refs.content,{scrollLeft:n,scrollWidth:a}=e,i=t.DomHandler.getWidth(e);this.isPrevButtonDisabled=0===n,this.isNextButtonDisabled=parseInt(n)===a-i},getVisibleButtonWidths(){const{prevBtn:e,nextBtn:n}=this.$refs;return[e,n].reduce(((e,n)=>n?e+t.DomHandler.getWidth(n):e),0)},getTabHeaderClass(e,t){return["p-tabview-header",this.getTabProp(e,"headerClass"),{"p-highlight":this.d_activeIndex===t,"p-disabled":this.getTabProp(e,"disabled")}]},getTabContentClass(e){return["p-tabview-panel",this.getTabProp(e,"contentClass")]}},computed:{contentClasses(){return["p-tabview p-component",{"p-tabview-scrollable":this.scrollable}]},tabs(){return this.$slots.default().reduce(((e,t)=>(this.isTabPanel(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isTabPanel(t)&&e.push(t)})),e)),[])},prevButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.previous:void 0},nextButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.next:void 0}},directives:{ripple:a(e).default}};const o={class:"p-tabview-nav-container"},r=["tabindex","aria-label"],l=[n.createElementVNode("span",{class:"pi pi-chevron-left","aria-hidden":"true"},null,-1)],s={ref:"nav",class:"p-tabview-nav",role:"tablist"},c=["data-index"],d=["id","tabindex","aria-disabled","aria-selected","aria-controls","onClick","onKeydown"],p={key:0,class:"p-tabview-title"},h={ref:"inkbar",class:"p-tabview-ink-bar",role:"presentation","aria-hidden":"true"},b=["tabindex","aria-label"],v=[n.createElementVNode("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)],u={class:"p-tabview-panels"},m=["aria-labelledby"];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],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabview-nav-container {\n    position: relative;\n}\n.p-tabview-scrollable .p-tabview-nav-container {\n    overflow: hidden;\n}\n.p-tabview-nav-content {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    overscroll-behavior: contain auto;\n}\n.p-tabview-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex: 1 1 auto;\n}\n.p-tabview-header-action {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabview-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabview-header-action:focus {\n    z-index: 1;\n}\n.p-tabview-title {\n    line-height: 1;\n    white-space: nowrap;\n}\n.p-tabview-nav-btn {\n    position: absolute;\n    top: 0;\n    z-index: 2;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tabview-nav-prev {\n    left: 0;\n}\n.p-tabview-nav-next {\n    right: 0;\n}\n.p-tabview-nav-content::-webkit-scrollbar {\n    display: none;\n}\n"),i.render=function(e,t,a,i,f,g){const w=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(g.contentClasses)},[n.createElementVNode("div",o,[a.scrollable&&!f.isPrevButtonDisabled?n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({key:0,ref:"prevBtn",type:"button",class:"p-tabview-nav-prev p-tabview-nav-btn p-link",tabindex:a.tabindex,"aria-label":g.prevButtonAriaLabel,onClick:t[0]||(t[0]=(...e)=>g.onPrevButtonClick&&g.onPrevButtonClick(...e))},a.previousButtonProps),l,16,r)),[[w]]):n.createCommentVNode("",!0),n.createElementVNode("div",{ref:"content",class:"p-tabview-nav-content",onScroll:t[1]||(t[1]=(...e)=>g.onScroll&&g.onScroll(...e))},[n.createElementVNode("ul",s,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.tabs,((e,t)=>(n.openBlock(),n.createElementBlock("li",n.mergeProps({key:g.getKey(e,t),style:g.getTabProp(e,"headerStyle"),class:g.getTabHeaderClass(e,t),role:"presentation","data-index":t},g.getTabProp(e,"headerProps")),[n.withDirectives((n.openBlock(),n.createElementBlock("a",n.mergeProps({id:g.getTabHeaderActionId(t),class:"p-tabview-nav-link p-tabview-header-action",tabindex:g.getTabProp(e,"disabled")||!g.isTabActive(t)?-1:a.tabindex,role:"tab","aria-disabled":g.getTabProp(e,"disabled"),"aria-selected":g.isTabActive(t),"aria-controls":g.getTabContentId(t),onClick:n=>g.onTabClick(n,e,t),onKeydown:n=>g.onTabKeyDown(n,e,t)},g.getTabProp(e,"headerActionProps")),[e.props&&e.props.header?(n.openBlock(),n.createElementBlock("span",p,n.toDisplayString(e.props.header),1)):n.createCommentVNode("",!0),e.children&&e.children.header?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.children.header),{key:1})):n.createCommentVNode("",!0)],16,d)),[[w]])],16,c)))),128)),n.createElementVNode("li",h,null,512)],512)],544),a.scrollable&&!f.isNextButtonDisabled?n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({key:1,ref:"nextBtn",type:"button",class:"p-tabview-nav-next p-tabview-nav-btn p-link",tabindex:a.tabindex,"aria-label":g.nextButtonAriaLabel,onClick:t[2]||(t[2]=(...e)=>g.onNextButtonClick&&g.onNextButtonClick(...e))},a.nextButtonProps),v,16,b)),[[w]]):n.createCommentVNode("",!0)]),n.createElementVNode("div",u,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.tabs,((e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:g.getKey(e,t)},[!a.lazy||g.isTabActive(t)?n.withDirectives((n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,style:g.getTabProp(e,"contentStyle"),class:g.getTabContentClass(e),role:"tabpanel","aria-labelledby":g.getTabHeaderActionId(t)},g.getTabProp(e,"contentProps")),[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e)))],16,m)),[[n.vShow,!!a.lazy||g.isTabActive(t)]]):n.createCommentVNode("",!0)],64)))),128))])],2)},i}(primevue.ripple,primevue.utils,Vue);

package/tag/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="containerClass" v-bind="$attrs">
+    <span :class="containerClass">
         <span v-if="icon" :class="iconClass"></span>
         <slot>
             <span class="p-tag-value">{{ value }}</span>

package/tag/tag.cjs.js

@@ -32,7 +32,9 @@ var script = {
 const _hoisted_1 = { class: "p-tag-value" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: $options.containerClass }, _ctx.$attrs), [
+  return (vue.openBlock(), vue.createElementBlock("span", {
+    class: vue.normalizeClass($options.containerClass)
+  }, [
     ($props.icon)
       ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
@@ -42,7 +44,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.renderSlot(_ctx.$slots, "default", {}, () => [
       vue.createElementVNode("span", _hoisted_1, vue.toDisplayString($props.value), 1)
     ])
-  ], 16))
+  ], 2))
 }
 
 function styleInject(css, ref) {

package/tag/tag.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),n={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const t={class:"p-tag-value"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),n.render=function(n,s,a,r,i,o){return e.openBlock(),e.createElementBlock("span",e.mergeProps({class:o.containerClass},n.$attrs),[a.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(o.iconClass)},null,2)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},(()=>[e.createElementVNode("span",t,e.toDisplayString(a.value),1)]))],16)},module.exports=n;
+"use strict";var e=require("vue"),n={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const t={class:"p-tag-value"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),n.render=function(n,s,a,i,r,o){return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(o.containerClass)},[a.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(o.iconClass)},null,2)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},(()=>[e.createElementVNode("span",t,e.toDisplayString(a.value),1)]))],2)},module.exports=n;

package/tag/tag.esm.js

@@ -1,4 +1,4 @@
-import { openBlock, createElementBlock, mergeProps, normalizeClass, createCommentVNode, renderSlot, createElementVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createElementVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'Tag',
@@ -30,7 +30,9 @@ var script = {
 const _hoisted_1 = { class: "p-tag-value" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("span", mergeProps({ class: $options.containerClass }, _ctx.$attrs), [
+  return (openBlock(), createElementBlock("span", {
+    class: normalizeClass($options.containerClass)
+  }, [
     ($props.icon)
       ? (openBlock(), createElementBlock("span", {
           key: 0,
@@ -40,7 +42,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default", {}, () => [
       createElementVNode("span", _hoisted_1, toDisplayString($props.value), 1)
     ])
-  ], 16))
+  ], 2))
 }
 
 function styleInject(css, ref) {

package/tag/tag.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as n,mergeProps as t,normalizeClass as s,createCommentVNode as a,renderSlot as i,createElementVNode as r,toDisplayString as o}from"vue";var l={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const c={class:"p-tag-value"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),l.render=function(l,d,p,u,g,h){return e(),n("span",t({class:h.containerClass},l.$attrs),[p.icon?(e(),n("span",{key:0,class:s(h.iconClass)},null,2)):a("",!0),i(l.$slots,"default",{},(()=>[r("span",c,o(p.value),1)]))],16)};export{l as default};
+import{openBlock as e,createElementBlock as n,normalizeClass as t,createCommentVNode as s,renderSlot as a,createElementVNode as i,toDisplayString as r}from"vue";var o={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const l={class:"p-tag-value"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),o.render=function(o,c,d,p,u,g){return e(),n("span",{class:t(g.containerClass)},[d.icon?(e(),n("span",{key:0,class:t(g.iconClass)},null,2)):s("",!0),a(o.$slots,"default",{},(()=>[i("span",l,r(d.value),1)]))],2)};export{o as default};

package/tag/tag.js

@@ -32,7 +32,9 @@ this.primevue.tag = (function (vue) {
     const _hoisted_1 = { class: "p-tag-value" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: $options.containerClass }, _ctx.$attrs), [
+      return (vue.openBlock(), vue.createElementBlock("span", {
+        class: vue.normalizeClass($options.containerClass)
+      }, [
         ($props.icon)
           ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
@@ -42,7 +44,7 @@ this.primevue.tag = (function (vue) {
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
           vue.createElementVNode("span", _hoisted_1, vue.toDisplayString($props.value), 1)
         ])
-      ], 16))
+      ], 2))
     }
 
     function styleInject(css, ref) {

package/tag/tag.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tag=function(e){"use strict";var t={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const n={class:"p-tag-value"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),t.render=function(t,s,a,i,r,o){return e.openBlock(),e.createElementBlock("span",e.mergeProps({class:o.containerClass},t.$attrs),[a.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(o.iconClass)},null,2)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},(()=>[e.createElementVNode("span",n,e.toDisplayString(a.value),1)]))],16)},t}(Vue);
+this.primevue=this.primevue||{},this.primevue.tag=function(e){"use strict";var n={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const t={class:"p-tag-value"};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),n.render=function(n,s,a,i,r,o){return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(o.containerClass)},[a.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(o.iconClass)},null,2)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},(()=>[e.createElementVNode("span",t,e.toDisplayString(a.value),1)]))],2)},n}(Vue);

package/tieredmenu/TieredMenu.vue

@@ -93,6 +93,7 @@ export default {
     searchValue: null,
     data() {
         return {
+            id: this.$attrs.id,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
             activeItemPath: [],
@@ -101,6 +102,9 @@ export default {
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
         activeItemPath(newPath) {
             if (!this.popup) {
                 if (ObjectUtils.isNotEmpty(newPath)) {
@@ -113,6 +117,9 @@ export default {
             }
         }
     },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
@@ -632,9 +639,6 @@ export default {
 
             return processedItem ? processedItem.items : this.processedItems;
         },
-        id() {
-            return this.$attrs.id || UniqueComponentId();
-        },
         focusedItemId() {
             return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
         }

package/tieredmenu/tieredmenu.cjs.js

@@ -310,6 +310,7 @@ var script = {
     searchValue: null,
     data() {
         return {
+            id: this.$attrs.id,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
             activeItemPath: [],
@@ -318,6 +319,9 @@ var script = {
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || utils.UniqueComponentId();
+        },
         activeItemPath(newPath) {
             if (!this.popup) {
                 if (utils.ObjectUtils.isNotEmpty(newPath)) {
@@ -330,6 +334,9 @@ var script = {
             }
         }
     },
+    mounted() {
+        this.id = this.id || utils.UniqueComponentId();
+    },
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
@@ -849,9 +856,6 @@ var script = {
 
             return processedItem ? processedItem.items : this.processedItems;
         },
-        id() {
-            return this.$attrs.id || utils.UniqueComponentId();
-        },
         focusedItemId() {
             return this.focusedItemInfo.index !== -1 ? `${this.id}${utils.ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
         }
@@ -885,13 +889,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: 0,
                 ref: $options.containerRef,
-                id: $options.id,
+                id: $data.id,
                 class: $options.containerClass,
                 onClick: _cache[0] || (_cache[0] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
               }, _ctx.$attrs), [
                 vue.createVNode(_component_TieredMenuSub, {
                   ref: $options.menubarRef,
-                  id: $options.id + '_list',
+                  id: $data.id + '_list',
                   class: "p-tieredmenu-root-list",
                   tabindex: !$props.disabled ? $props.tabindex : -1,
                   role: "menubar",
@@ -900,7 +904,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-disabled": $props.disabled || undefined,
                   "aria-orientation": "vertical",
                   "aria-activedescendant": $data.focused ? $options.focusedItemId : undefined,
-                  menuId: $options.id,
+                  menuId: $data.id,
                   focusedItemId: $data.focused ? $options.focusedItemId : undefined,
                   items: $options.processedItems,
                   template: _ctx.$slots.item,

package/tieredmenu/tieredmenu.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/overlayeventbus"),t=require("primevue/portal"),i=require("primevue/utils"),s=require("primevue/ripple"),n=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e),a=r(t),l={name:"TieredMenuSub",emits:["item-click","item-mouseenter"],props:{menuId:{type:String,default:null},focusedItemId:{type:String,default:null},items:{type:Array,default:null},level:{type:Number,default:0},template:{type:Function,default:null},activeItemPath:{type:Object,default:null},exact:{type:Boolean,default:!0}},methods:{getItemId(e){return`${this.menuId}_${e.key}`},getItemKey(e){return this.getItemId(e)},getItemProp:(e,t,s)=>e&&e.item?i.ObjectUtils.getItemValue(e.item[t],s):void 0,getItemLabel(e){return this.getItemProp(e,"label")},isItemActive(e){return this.activeItemPath.some((t=>t.key===e.key))},isItemVisible(e){return!1!==this.getItemProp(e,"visible")},isItemDisabled(e){return this.getItemProp(e,"disabled")},isItemFocused(e){return this.focusedItemId===this.getItemId(e)},isItemGroup:e=>i.ObjectUtils.isNotEmpty(e.items),onItemClick(e,t){this.getItemProp(t,"command",{originalEvent:e,item:t.item}),this.$emit("item-click",{originalEvent:e,processedItem:t,isFocus:!0})},onItemMouseEnter(e,t){this.$emit("item-mouseenter",{originalEvent:e,processedItem:t})},onItemActionClick(e,t){t&&t(e)},getAriaSetSize(){return this.items.filter((e=>this.isItemVisible(e)&&!this.getItemProp(e,"separator"))).length},getAriaPosInset(e){return e-this.items.slice(0,e).filter((e=>this.isItemVisible(e)&&this.getItemProp(e,"separator"))).length+1},getItemClass(e){return["p-menuitem",this.getItemProp(e,"class"),{"p-menuitem-active p-highlight":this.isItemActive(e),"p-focus":this.isItemFocused(e),"p-disabled":this.isItemDisabled(e)}]},getItemActionClass(e,t){return["p-menuitem-link",{"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},getItemIconClass(e){return["p-menuitem-icon",this.getItemProp(e,"icon")]},getSeparatorItemClass(e){return["p-menuitem-separator",this.getItemProp(e,"class")]}},directives:{ripple:r(s).default}};const d=["id","aria-label","aria-disabled","aria-expanded","aria-haspopup","aria-level","aria-setsize","aria-posinset"],c=["onClick","onMouseenter"],m=["href","onClick"],u={class:"p-menuitem-text"},h=["href","target"],I={class:"p-menuitem-text"},p={key:1,class:"p-submenu-icon pi pi-angle-right"},f=["id"];l.render=function(e,t,i,s,r,o){const a=n.resolveComponent("router-link"),l=n.resolveComponent("TieredMenuSub",!0),b=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("ul",null,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(i.items,((s,r)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:o.getItemKey(s)},[o.isItemVisible(s)&&!o.getItemProp(s,"separator")?(n.openBlock(),n.createElementBlock("li",{key:0,id:o.getItemId(s),style:n.normalizeStyle(o.getItemProp(s,"style")),class:n.normalizeClass(o.getItemClass(s)),role:"menuitem","aria-label":o.getItemLabel(s),"aria-disabled":o.isItemDisabled(s)||void 0,"aria-expanded":o.isItemGroup(s)?o.isItemActive(s):void 0,"aria-haspopup":o.isItemGroup(s)&&!o.getItemProp(s,"to")?"menu":void 0,"aria-level":i.level+1,"aria-setsize":o.getAriaSetSize(),"aria-posinset":o.getAriaPosInset(r)},[n.createElementVNode("div",{class:"p-menuitem-content",onClick:e=>o.onItemClick(e,s),onMouseenter:e=>o.onItemMouseEnter(e,s)},[i.template?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.template),{key:1,item:s.item},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[o.getItemProp(s,"to")&&!o.isItemDisabled(s)?(n.openBlock(),n.createBlock(a,{key:0,to:o.getItemProp(s,"to"),custom:""},{default:n.withCtx((({navigate:e,href:t,isActive:i,isExactActive:r})=>[n.withDirectives((n.openBlock(),n.createElementBlock("a",{href:t,class:n.normalizeClass(o.getItemActionClass(s,{isActive:i,isExactActive:r})),tabindex:"-1","aria-hidden":"true",onClick:t=>o.onItemActionClick(t,e)},[o.getItemProp(s,"icon")?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(o.getItemIconClass(s))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",u,n.toDisplayString(o.getItemLabel(s)),1)],10,m)),[[b]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:1,href:o.getItemProp(s,"url"),class:n.normalizeClass(o.getItemActionClass(s)),target:o.getItemProp(s,"target"),tabindex:"-1","aria-hidden":"true"},[o.getItemProp(s,"icon")?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(o.getItemIconClass(s))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",I,n.toDisplayString(o.getItemLabel(s)),1),o.isItemGroup(s)?(n.openBlock(),n.createElementBlock("span",p)):n.createCommentVNode("",!0)],10,h)),[[b]])],64))],40,c),o.isItemVisible(s)&&o.isItemGroup(s)?(n.openBlock(),n.createBlock(l,{key:0,id:o.getItemId(s)+"_list",role:"menu",class:"p-submenu-list",menuId:i.menuId,focusedItemId:i.focusedItemId,items:s.items,template:i.template,activeItemPath:i.activeItemPath,exact:i.exact,level:i.level+1,onItemClick:t[0]||(t[0]=t=>e.$emit("item-click",t)),onItemMouseenter:t[1]||(t[1]=t=>e.$emit("item-mouseenter",t))},null,8,["id","menuId","focusedItemId","items","template","activeItemPath","exact","level"])):n.createCommentVNode("",!0)],14,d)):n.createCommentVNode("",!0),o.isItemVisible(s)&&o.getItemProp(s,"separator")?(n.openBlock(),n.createElementBlock("li",{key:1,id:o.getItemId(s),style:n.normalizeStyle(o.getItemProp(s,"style")),class:n.normalizeClass(o.getSeparatorItemClass(s)),role:"separator"},null,14,f)):n.createCommentVNode("",!0)],64)))),128))])};var b={name:"TieredMenu",inheritAttrs:!1,emits:["focus","blur","before-show","before-hide","hide","show"],props:{popup:{type:Boolean,default:!1},model:{type:Array,default:null},appendTo:{type:String,default:"body"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},exact:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},outsideClickListener:null,scrollHandler:null,resizeListener:null,target:null,container:null,menubar:null,searchTimeout:null,searchValue:null,data(){return{focused:!1,focusedItemInfo:{index:-1,level:0,parentKey:""},activeItemPath:[],visible:!this.popup,dirty:!1}},watch:{activeItemPath(e){this.popup||(i.ObjectUtils.isNotEmpty(e)?(this.bindOutsideClickListener(),this.bindResizeListener()):(this.unbindOutsideClickListener(),this.unbindResizeListener()))}},beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.container&&this.autoZIndex&&i.ZIndexUtils.clear(this.container),this.target=null,this.container=null},methods:{getItemProp:(e,t)=>e?i.ObjectUtils.getItemValue(e[t]):void 0,getItemLabel(e){return this.getItemProp(e,"label")},isItemDisabled(e){return this.getItemProp(e,"disabled")},isItemGroup(e){return i.ObjectUtils.isNotEmpty(this.getItemProp(e,"items"))},isItemSeparator(e){return this.getItemProp(e,"separator")},getProccessedItemLabel(e){return e?this.getItemLabel(e.item):void 0},isProccessedItemGroup:e=>e&&i.ObjectUtils.isNotEmpty(e.items),toggle(e){this.visible?this.hide(e,!0):this.show(e)},show(e,t){this.popup&&(this.$emit("before-show"),this.visible=!0,this.target=this.target||e.currentTarget,this.relatedTarget=e.relatedTarget||null),this.focusedItemInfo={index:this.findFirstFocusedItemIndex(),level:0,parentKey:""},t&&i.DomHandler.focus(this.menubar)},hide(e,t){this.popup&&(this.$emit("before-hide"),this.visible=!1),this.activeItemPath=[],this.focusedItemInfo={index:-1,level:0,parentKey:""},t&&i.DomHandler.focus(this.relatedTarget||this.target||this.menubar),this.dirty=!1},onFocus(e){this.focused=!0,this.focusedItemInfo=-1!==this.focusedItemInfo.index?this.focusedItemInfo:{index:this.findFirstFocusedItemIndex(),level:0,parentKey:""},this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedItemInfo={index:-1,level:0,parentKey:""},this.searchValue="",this.dirty=!1,this.$emit("blur",e)},onKeyDown(e){if(this.disabled)return void e.preventDefault();const t=e.metaKey||e.ctrlKey;switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"ArrowUp":this.onArrowUpKey(e);break;case"ArrowLeft":this.onArrowLeftKey(e);break;case"ArrowRight":this.onArrowRightKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e);break;case"Space":this.onSpaceKey(e);break;case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e);break;case"Tab":this.onTabKey(e);break;case"PageDown":case"PageUp":case"Backspace":case"ShiftLeft":case"ShiftRight":break;default:!t&&i.ObjectUtils.isPrintableCharacter(e.key)&&this.searchItems(e,e.key)}},onItemChange(e){const{processedItem:t,isFocus:s}=e;if(i.ObjectUtils.isEmpty(t))return;const{index:n,key:r,level:o,parentKey:a,items:l}=t,d=i.ObjectUtils.isNotEmpty(l),c=this.activeItemPath.filter((e=>e.parentKey!==a&&e.parentKey!==r));d&&c.push(t),this.focusedItemInfo={index:n,level:o,parentKey:a},this.activeItemPath=c,d&&(this.dirty=!0),s&&i.DomHandler.focus(this.menubar)},onOverlayClick(e){o.default.emit("overlay-click",{originalEvent:e,target:this.target})},onItemClick(e){const{originalEvent:t,processedItem:s}=e,n=this.isProccessedItemGroup(s),r=i.ObjectUtils.isEmpty(s.parent);if(this.isSelected(s)){const{index:e,key:t,level:n,parentKey:o}=s;this.activeItemPath=this.activeItemPath.filter((e=>t!==e.key&&t.startsWith(e.key))),this.focusedItemInfo={index:e,level:n,parentKey:o},this.dirty=!r,i.DomHandler.focus(this.menubar)}else if(n)this.onItemChange(e);else{const e=r?s:this.activeItemPath.find((e=>""===e.parentKey));this.hide(t),this.changeFocusedItemIndex(t,e?e.index:-1),i.DomHandler.focus(this.menubar)}},onItemMouseEnter(e){this.dirty&&this.onItemChange(e)},onArrowDownKey(e){const t=-1!==this.focusedItemInfo.index?this.findNextItemIndex(this.focusedItemInfo.index):this.findFirstFocusedItemIndex();this.changeFocusedItemIndex(e,t),e.preventDefault()},onArrowUpKey(e){if(e.altKey){if(-1!==this.focusedItemInfo.index){const t=this.visibleItems[this.focusedItemInfo.index];!this.isProccessedItemGroup(t)&&this.onItemChange({originalEvent:e,processedItem:t})}this.popup&&this.hide(e,!0),e.preventDefault()}else{const t=-1!==this.focusedItemInfo.index?this.findPrevItemIndex(this.focusedItemInfo.index):this.findLastFocusedItemIndex();this.changeFocusedItemIndex(e,t),e.preventDefault()}},onArrowLeftKey(e){const t=this.visibleItems[this.focusedItemInfo.index],s=this.activeItemPath.find((e=>e.key===t.parentKey));i.ObjectUtils.isEmpty(t.parent)||(this.focusedItemInfo={index:-1,parentKey:s?s.parentKey:""},this.searchValue="",this.onArrowDownKey(e)),this.activeItemPath=this.activeItemPath.filter((e=>e.parentKey!==this.focusedItemInfo.parentKey)),e.preventDefault()},onArrowRightKey(e){const t=this.visibleItems[this.focusedItemInfo.index];this.isProccessedItemGroup(t)&&(this.onItemChange({originalEvent:e,processedItem:t}),this.focusedItemInfo={index:-1,parentKey:t.key},this.searchValue="",this.onArrowDownKey(e)),e.preventDefault()},onHomeKey(e){this.changeFocusedItemIndex(e,this.findFirstItemIndex()),e.preventDefault()},onEndKey(e){this.changeFocusedItemIndex(e,this.findLastItemIndex()),e.preventDefault()},onEnterKey(e){if(-1!==this.focusedItemInfo.index){const e=i.DomHandler.findSingle(this.menubar,`li[id="${this.focusedItemId}"]`),t=e&&i.DomHandler.findSingle(e,".p-menuitem-link");if(t?t.click():e&&e.click(),!this.popup){const e=this.visibleItems[this.focusedItemInfo.index];!this.isProccessedItemGroup(e)&&(this.focusedItemInfo.index=this.findFirstFocusedItemIndex())}}e.preventDefault()},onSpaceKey(e){this.onEnterKey(e)},onEscapeKey(e){this.hide(e,!0),!this.popup&&(this.focusedItemInfo.index=this.findFirstFocusedItemIndex()),e.preventDefault()},onTabKey(e){if(-1!==this.focusedItemInfo.index){const t=this.visibleItems[this.focusedItemInfo.index];!this.isProccessedItemGroup(t)&&this.onItemChange({originalEvent:e,processedItem:t})}this.hide()},onEnter(e){this.autoZIndex&&i.ZIndexUtils.set("menu",e,this.baseZIndex+this.$primevue.config.zIndex.menu),this.alignOverlay(),i.DomHandler.focus(this.menubar),this.scrollInView()},onAfterEnter(){this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.container=null,this.dirty=!1},onAfterLeave(e){this.autoZIndex&&i.ZIndexUtils.clear(e)},alignOverlay(){this.container.style.minWidth=i.DomHandler.getOuterWidth(this.target)+"px",i.DomHandler.absolutePosition(this.container,this.target)},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{const t=this.container&&!this.container.contains(e.target),i=!this.popup||!(this.target&&(this.target===e.target||this.target.contains(e.target)));t&&i&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i.ConnectedOverlayScrollHandler(this.target,(e=>{this.hide(e,!0)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=e=>{i.DomHandler.isTouchDevice()||this.hide(e,!0)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isItemMatched(e){return this.isValidItem(e)&&this.getProccessedItemLabel(e).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase())},isValidItem(e){return!!e&&!this.isItemDisabled(e.item)&&!this.isItemSeparator(e.item)},isValidSelectedItem(e){return this.isValidItem(e)&&this.isSelected(e)},isSelected(e){return this.activeItemPath.some((t=>t.key===e.key))},findFirstItemIndex(){return this.visibleItems.findIndex((e=>this.isValidItem(e)))},findLastItemIndex(){return i.ObjectUtils.findLastIndex(this.visibleItems,(e=>this.isValidItem(e)))},findNextItemIndex(e){const t=e<this.visibleItems.length-1?this.visibleItems.slice(e+1).findIndex((e=>this.isValidItem(e))):-1;return t>-1?t+e+1:e},findPrevItemIndex(e){const t=e>0?i.ObjectUtils.findLastIndex(this.visibleItems.slice(0,e),(e=>this.isValidItem(e))):-1;return t>-1?t:e},findSelectedItemIndex(){return this.visibleItems.findIndex((e=>this.isValidSelectedItem(e)))},findFirstFocusedItemIndex(){const e=this.findSelectedItemIndex();return e<0?this.findFirstItemIndex():e},findLastFocusedItemIndex(){const e=this.findSelectedItemIndex();return e<0?this.findLastItemIndex():e},searchItems(e,t){this.searchValue=(this.searchValue||"")+t;let i=-1,s=!1;return-1!==this.focusedItemInfo.index?(i=this.visibleItems.slice(this.focusedItemInfo.index).findIndex((e=>this.isItemMatched(e))),i=-1===i?this.visibleItems.slice(0,this.focusedItemInfo.index).findIndex((e=>this.isItemMatched(e))):i+this.focusedItemInfo.index):i=this.visibleItems.findIndex((e=>this.isItemMatched(e))),-1!==i&&(s=!0),-1===i&&-1===this.focusedItemInfo.index&&(i=this.findFirstFocusedItemIndex()),-1!==i&&this.changeFocusedItemIndex(e,i),this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout((()=>{this.searchValue="",this.searchTimeout=null}),500),s},changeFocusedItemIndex(e,t){this.focusedItemInfo.index!==t&&(this.focusedItemInfo.index=t,this.scrollInView())},scrollInView(e=-1){const t=-1!==e?`${this.id}_${e}`:this.focusedItemId,s=i.DomHandler.findSingle(this.menubar,`li[id="${t}"]`);s&&s.scrollIntoView&&s.scrollIntoView({block:"nearest",inline:"start"})},createProcessedItems(e,t=0,i={},s=""){const n=[];return e&&e.forEach(((e,r)=>{const o=(""!==s?s+"_":"")+r,a={item:e,index:r,level:t,key:o,parent:i,parentKey:s};a.items=this.createProcessedItems(e.items,t+1,a,o),n.push(a)})),n},containerRef(e){this.container=e},menubarRef(e){this.menubar=e?e.$el:void 0}},computed:{containerClass(){return["p-tieredmenu p-component",{"p-tieredmenu-overlay":this.popup,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},processedItems(){return this.createProcessedItems(this.model||[])},visibleItems(){const e=this.activeItemPath.find((e=>e.key===this.focusedItemInfo.parentKey));return e?e.items:this.processedItems},id(){return this.$attrs.id||i.UniqueComponentId()},focusedItemId(){return-1!==this.focusedItemInfo.index?`${this.id}${i.ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey)?"_"+this.focusedItemInfo.parentKey:""}_${this.focusedItemInfo.index}`:null}},components:{TieredMenuSub:l,Portal:a.default}};const v=["id"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&s.firstChild?s.insertBefore(n,s.firstChild):s.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-tieredmenu-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-tieredmenu ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-tieredmenu .p-submenu-list {\n    position: absolute;\n    min-width: 100%;\n    z-index: 1;\n    display: none;\n}\n.p-tieredmenu .p-menuitem-link {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-tieredmenu .p-menuitem-text {\n    line-height: 1;\n}\n.p-tieredmenu .p-menuitem {\n    position: relative;\n}\n.p-tieredmenu .p-menuitem-link .p-submenu-icon {\n    margin-left: auto;\n}\n.p-tieredmenu .p-menuitem-active > .p-submenu-list {\n    display: block;\n    left: 100%;\n    top: 0;\n}\n"),b.render=function(e,t,i,s,r,o){const a=n.resolveComponent("TieredMenuSub"),l=n.resolveComponent("Portal");return n.openBlock(),n.createBlock(l,{appendTo:i.appendTo,disabled:!i.popup},{default:n.withCtx((()=>[n.createVNode(n.Transition,{name:"p-connected-overlay",onEnter:o.onEnter,onAfterEnter:o.onAfterEnter,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave},{default:n.withCtx((()=>[r.visible?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,ref:o.containerRef,id:o.id,class:o.containerClass,onClick:t[0]||(t[0]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e))},e.$attrs),[n.createVNode(a,{ref:o.menubarRef,id:o.id+"_list",class:"p-tieredmenu-root-list",tabindex:i.disabled?-1:i.tabindex,role:"menubar","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,"aria-disabled":i.disabled||void 0,"aria-orientation":"vertical","aria-activedescendant":r.focused?o.focusedItemId:void 0,menuId:o.id,focusedItemId:r.focused?o.focusedItemId:void 0,items:o.processedItems,template:e.$slots.item,activeItemPath:r.activeItemPath,exact:i.exact,level:0,onFocus:o.onFocus,onBlur:o.onBlur,onKeydown:o.onKeyDown,onItemClick:o.onItemClick,onItemMouseenter:o.onItemMouseEnter},null,8,["id","tabindex","aria-label","aria-labelledby","aria-disabled","aria-activedescendant","menuId","focusedItemId","items","template","activeItemPath","exact","onFocus","onBlur","onKeydown","onItemClick","onItemMouseenter"])],16,v)):n.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])},module.exports=b;
+"use strict";var e=require("primevue/overlayeventbus"),t=require("primevue/portal"),i=require("primevue/utils"),s=require("primevue/ripple"),n=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e),a=o(t),l={name:"TieredMenuSub",emits:["item-click","item-mouseenter"],props:{menuId:{type:String,default:null},focusedItemId:{type:String,default:null},items:{type:Array,default:null},level:{type:Number,default:0},template:{type:Function,default:null},activeItemPath:{type:Object,default:null},exact:{type:Boolean,default:!0}},methods:{getItemId(e){return`${this.menuId}_${e.key}`},getItemKey(e){return this.getItemId(e)},getItemProp:(e,t,s)=>e&&e.item?i.ObjectUtils.getItemValue(e.item[t],s):void 0,getItemLabel(e){return this.getItemProp(e,"label")},isItemActive(e){return this.activeItemPath.some((t=>t.key===e.key))},isItemVisible(e){return!1!==this.getItemProp(e,"visible")},isItemDisabled(e){return this.getItemProp(e,"disabled")},isItemFocused(e){return this.focusedItemId===this.getItemId(e)},isItemGroup:e=>i.ObjectUtils.isNotEmpty(e.items),onItemClick(e,t){this.getItemProp(t,"command",{originalEvent:e,item:t.item}),this.$emit("item-click",{originalEvent:e,processedItem:t,isFocus:!0})},onItemMouseEnter(e,t){this.$emit("item-mouseenter",{originalEvent:e,processedItem:t})},onItemActionClick(e,t){t&&t(e)},getAriaSetSize(){return this.items.filter((e=>this.isItemVisible(e)&&!this.getItemProp(e,"separator"))).length},getAriaPosInset(e){return e-this.items.slice(0,e).filter((e=>this.isItemVisible(e)&&this.getItemProp(e,"separator"))).length+1},getItemClass(e){return["p-menuitem",this.getItemProp(e,"class"),{"p-menuitem-active p-highlight":this.isItemActive(e),"p-focus":this.isItemFocused(e),"p-disabled":this.isItemDisabled(e)}]},getItemActionClass(e,t){return["p-menuitem-link",{"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},getItemIconClass(e){return["p-menuitem-icon",this.getItemProp(e,"icon")]},getSeparatorItemClass(e){return["p-menuitem-separator",this.getItemProp(e,"class")]}},directives:{ripple:o(s).default}};const d=["id","aria-label","aria-disabled","aria-expanded","aria-haspopup","aria-level","aria-setsize","aria-posinset"],c=["onClick","onMouseenter"],m=["href","onClick"],u={class:"p-menuitem-text"},h=["href","target"],I={class:"p-menuitem-text"},p={key:1,class:"p-submenu-icon pi pi-angle-right"},f=["id"];l.render=function(e,t,i,s,o,r){const a=n.resolveComponent("router-link"),l=n.resolveComponent("TieredMenuSub",!0),b=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("ul",null,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(i.items,((s,o)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:r.getItemKey(s)},[r.isItemVisible(s)&&!r.getItemProp(s,"separator")?(n.openBlock(),n.createElementBlock("li",{key:0,id:r.getItemId(s),style:n.normalizeStyle(r.getItemProp(s,"style")),class:n.normalizeClass(r.getItemClass(s)),role:"menuitem","aria-label":r.getItemLabel(s),"aria-disabled":r.isItemDisabled(s)||void 0,"aria-expanded":r.isItemGroup(s)?r.isItemActive(s):void 0,"aria-haspopup":r.isItemGroup(s)&&!r.getItemProp(s,"to")?"menu":void 0,"aria-level":i.level+1,"aria-setsize":r.getAriaSetSize(),"aria-posinset":r.getAriaPosInset(o)},[n.createElementVNode("div",{class:"p-menuitem-content",onClick:e=>r.onItemClick(e,s),onMouseenter:e=>r.onItemMouseEnter(e,s)},[i.template?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.template),{key:1,item:s.item},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[r.getItemProp(s,"to")&&!r.isItemDisabled(s)?(n.openBlock(),n.createBlock(a,{key:0,to:r.getItemProp(s,"to"),custom:""},{default:n.withCtx((({navigate:e,href:t,isActive:i,isExactActive:o})=>[n.withDirectives((n.openBlock(),n.createElementBlock("a",{href:t,class:n.normalizeClass(r.getItemActionClass(s,{isActive:i,isExactActive:o})),tabindex:"-1","aria-hidden":"true",onClick:t=>r.onItemActionClick(t,e)},[r.getItemProp(s,"icon")?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(r.getItemIconClass(s))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",u,n.toDisplayString(r.getItemLabel(s)),1)],10,m)),[[b]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:1,href:r.getItemProp(s,"url"),class:n.normalizeClass(r.getItemActionClass(s)),target:r.getItemProp(s,"target"),tabindex:"-1","aria-hidden":"true"},[r.getItemProp(s,"icon")?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(r.getItemIconClass(s))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",I,n.toDisplayString(r.getItemLabel(s)),1),r.isItemGroup(s)?(n.openBlock(),n.createElementBlock("span",p)):n.createCommentVNode("",!0)],10,h)),[[b]])],64))],40,c),r.isItemVisible(s)&&r.isItemGroup(s)?(n.openBlock(),n.createBlock(l,{key:0,id:r.getItemId(s)+"_list",role:"menu",class:"p-submenu-list",menuId:i.menuId,focusedItemId:i.focusedItemId,items:s.items,template:i.template,activeItemPath:i.activeItemPath,exact:i.exact,level:i.level+1,onItemClick:t[0]||(t[0]=t=>e.$emit("item-click",t)),onItemMouseenter:t[1]||(t[1]=t=>e.$emit("item-mouseenter",t))},null,8,["id","menuId","focusedItemId","items","template","activeItemPath","exact","level"])):n.createCommentVNode("",!0)],14,d)):n.createCommentVNode("",!0),r.isItemVisible(s)&&r.getItemProp(s,"separator")?(n.openBlock(),n.createElementBlock("li",{key:1,id:r.getItemId(s),style:n.normalizeStyle(r.getItemProp(s,"style")),class:n.normalizeClass(r.getSeparatorItemClass(s)),role:"separator"},null,14,f)):n.createCommentVNode("",!0)],64)))),128))])};var b={name:"TieredMenu",inheritAttrs:!1,emits:["focus","blur","before-show","before-hide","hide","show"],props:{popup:{type:Boolean,default:!1},model:{type:Array,default:null},appendTo:{type:String,default:"body"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},exact:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},outsideClickListener:null,scrollHandler:null,resizeListener:null,target:null,container:null,menubar:null,searchTimeout:null,searchValue:null,data(){return{id:this.$attrs.id,focused:!1,focusedItemInfo:{index:-1,level:0,parentKey:""},activeItemPath:[],visible:!this.popup,dirty:!1}},watch:{"$attrs.id":function(e){this.id=e||i.UniqueComponentId()},activeItemPath(e){this.popup||(i.ObjectUtils.isNotEmpty(e)?(this.bindOutsideClickListener(),this.bindResizeListener()):(this.unbindOutsideClickListener(),this.unbindResizeListener()))}},mounted(){this.id=this.id||i.UniqueComponentId()},beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.container&&this.autoZIndex&&i.ZIndexUtils.clear(this.container),this.target=null,this.container=null},methods:{getItemProp:(e,t)=>e?i.ObjectUtils.getItemValue(e[t]):void 0,getItemLabel(e){return this.getItemProp(e,"label")},isItemDisabled(e){return this.getItemProp(e,"disabled")},isItemGroup(e){return i.ObjectUtils.isNotEmpty(this.getItemProp(e,"items"))},isItemSeparator(e){return this.getItemProp(e,"separator")},getProccessedItemLabel(e){return e?this.getItemLabel(e.item):void 0},isProccessedItemGroup:e=>e&&i.ObjectUtils.isNotEmpty(e.items),toggle(e){this.visible?this.hide(e,!0):this.show(e)},show(e,t){this.popup&&(this.$emit("before-show"),this.visible=!0,this.target=this.target||e.currentTarget,this.relatedTarget=e.relatedTarget||null),this.focusedItemInfo={index:this.findFirstFocusedItemIndex(),level:0,parentKey:""},t&&i.DomHandler.focus(this.menubar)},hide(e,t){this.popup&&(this.$emit("before-hide"),this.visible=!1),this.activeItemPath=[],this.focusedItemInfo={index:-1,level:0,parentKey:""},t&&i.DomHandler.focus(this.relatedTarget||this.target||this.menubar),this.dirty=!1},onFocus(e){this.focused=!0,this.focusedItemInfo=-1!==this.focusedItemInfo.index?this.focusedItemInfo:{index:this.findFirstFocusedItemIndex(),level:0,parentKey:""},this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedItemInfo={index:-1,level:0,parentKey:""},this.searchValue="",this.dirty=!1,this.$emit("blur",e)},onKeyDown(e){if(this.disabled)return void e.preventDefault();const t=e.metaKey||e.ctrlKey;switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"ArrowUp":this.onArrowUpKey(e);break;case"ArrowLeft":this.onArrowLeftKey(e);break;case"ArrowRight":this.onArrowRightKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e);break;case"Space":this.onSpaceKey(e);break;case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e);break;case"Tab":this.onTabKey(e);break;case"PageDown":case"PageUp":case"Backspace":case"ShiftLeft":case"ShiftRight":break;default:!t&&i.ObjectUtils.isPrintableCharacter(e.key)&&this.searchItems(e,e.key)}},onItemChange(e){const{processedItem:t,isFocus:s}=e;if(i.ObjectUtils.isEmpty(t))return;const{index:n,key:o,level:r,parentKey:a,items:l}=t,d=i.ObjectUtils.isNotEmpty(l),c=this.activeItemPath.filter((e=>e.parentKey!==a&&e.parentKey!==o));d&&c.push(t),this.focusedItemInfo={index:n,level:r,parentKey:a},this.activeItemPath=c,d&&(this.dirty=!0),s&&i.DomHandler.focus(this.menubar)},onOverlayClick(e){r.default.emit("overlay-click",{originalEvent:e,target:this.target})},onItemClick(e){const{originalEvent:t,processedItem:s}=e,n=this.isProccessedItemGroup(s),o=i.ObjectUtils.isEmpty(s.parent);if(this.isSelected(s)){const{index:e,key:t,level:n,parentKey:r}=s;this.activeItemPath=this.activeItemPath.filter((e=>t!==e.key&&t.startsWith(e.key))),this.focusedItemInfo={index:e,level:n,parentKey:r},this.dirty=!o,i.DomHandler.focus(this.menubar)}else if(n)this.onItemChange(e);else{const e=o?s:this.activeItemPath.find((e=>""===e.parentKey));this.hide(t),this.changeFocusedItemIndex(t,e?e.index:-1),i.DomHandler.focus(this.menubar)}},onItemMouseEnter(e){this.dirty&&this.onItemChange(e)},onArrowDownKey(e){const t=-1!==this.focusedItemInfo.index?this.findNextItemIndex(this.focusedItemInfo.index):this.findFirstFocusedItemIndex();this.changeFocusedItemIndex(e,t),e.preventDefault()},onArrowUpKey(e){if(e.altKey){if(-1!==this.focusedItemInfo.index){const t=this.visibleItems[this.focusedItemInfo.index];!this.isProccessedItemGroup(t)&&this.onItemChange({originalEvent:e,processedItem:t})}this.popup&&this.hide(e,!0),e.preventDefault()}else{const t=-1!==this.focusedItemInfo.index?this.findPrevItemIndex(this.focusedItemInfo.index):this.findLastFocusedItemIndex();this.changeFocusedItemIndex(e,t),e.preventDefault()}},onArrowLeftKey(e){const t=this.visibleItems[this.focusedItemInfo.index],s=this.activeItemPath.find((e=>e.key===t.parentKey));i.ObjectUtils.isEmpty(t.parent)||(this.focusedItemInfo={index:-1,parentKey:s?s.parentKey:""},this.searchValue="",this.onArrowDownKey(e)),this.activeItemPath=this.activeItemPath.filter((e=>e.parentKey!==this.focusedItemInfo.parentKey)),e.preventDefault()},onArrowRightKey(e){const t=this.visibleItems[this.focusedItemInfo.index];this.isProccessedItemGroup(t)&&(this.onItemChange({originalEvent:e,processedItem:t}),this.focusedItemInfo={index:-1,parentKey:t.key},this.searchValue="",this.onArrowDownKey(e)),e.preventDefault()},onHomeKey(e){this.changeFocusedItemIndex(e,this.findFirstItemIndex()),e.preventDefault()},onEndKey(e){this.changeFocusedItemIndex(e,this.findLastItemIndex()),e.preventDefault()},onEnterKey(e){if(-1!==this.focusedItemInfo.index){const e=i.DomHandler.findSingle(this.menubar,`li[id="${this.focusedItemId}"]`),t=e&&i.DomHandler.findSingle(e,".p-menuitem-link");if(t?t.click():e&&e.click(),!this.popup){const e=this.visibleItems[this.focusedItemInfo.index];!this.isProccessedItemGroup(e)&&(this.focusedItemInfo.index=this.findFirstFocusedItemIndex())}}e.preventDefault()},onSpaceKey(e){this.onEnterKey(e)},onEscapeKey(e){this.hide(e,!0),!this.popup&&(this.focusedItemInfo.index=this.findFirstFocusedItemIndex()),e.preventDefault()},onTabKey(e){if(-1!==this.focusedItemInfo.index){const t=this.visibleItems[this.focusedItemInfo.index];!this.isProccessedItemGroup(t)&&this.onItemChange({originalEvent:e,processedItem:t})}this.hide()},onEnter(e){this.autoZIndex&&i.ZIndexUtils.set("menu",e,this.baseZIndex+this.$primevue.config.zIndex.menu),this.alignOverlay(),i.DomHandler.focus(this.menubar),this.scrollInView()},onAfterEnter(){this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.container=null,this.dirty=!1},onAfterLeave(e){this.autoZIndex&&i.ZIndexUtils.clear(e)},alignOverlay(){this.container.style.minWidth=i.DomHandler.getOuterWidth(this.target)+"px",i.DomHandler.absolutePosition(this.container,this.target)},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{const t=this.container&&!this.container.contains(e.target),i=!this.popup||!(this.target&&(this.target===e.target||this.target.contains(e.target)));t&&i&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i.ConnectedOverlayScrollHandler(this.target,(e=>{this.hide(e,!0)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=e=>{i.DomHandler.isTouchDevice()||this.hide(e,!0)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isItemMatched(e){return this.isValidItem(e)&&this.getProccessedItemLabel(e).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase())},isValidItem(e){return!!e&&!this.isItemDisabled(e.item)&&!this.isItemSeparator(e.item)},isValidSelectedItem(e){return this.isValidItem(e)&&this.isSelected(e)},isSelected(e){return this.activeItemPath.some((t=>t.key===e.key))},findFirstItemIndex(){return this.visibleItems.findIndex((e=>this.isValidItem(e)))},findLastItemIndex(){return i.ObjectUtils.findLastIndex(this.visibleItems,(e=>this.isValidItem(e)))},findNextItemIndex(e){const t=e<this.visibleItems.length-1?this.visibleItems.slice(e+1).findIndex((e=>this.isValidItem(e))):-1;return t>-1?t+e+1:e},findPrevItemIndex(e){const t=e>0?i.ObjectUtils.findLastIndex(this.visibleItems.slice(0,e),(e=>this.isValidItem(e))):-1;return t>-1?t:e},findSelectedItemIndex(){return this.visibleItems.findIndex((e=>this.isValidSelectedItem(e)))},findFirstFocusedItemIndex(){const e=this.findSelectedItemIndex();return e<0?this.findFirstItemIndex():e},findLastFocusedItemIndex(){const e=this.findSelectedItemIndex();return e<0?this.findLastItemIndex():e},searchItems(e,t){this.searchValue=(this.searchValue||"")+t;let i=-1,s=!1;return-1!==this.focusedItemInfo.index?(i=this.visibleItems.slice(this.focusedItemInfo.index).findIndex((e=>this.isItemMatched(e))),i=-1===i?this.visibleItems.slice(0,this.focusedItemInfo.index).findIndex((e=>this.isItemMatched(e))):i+this.focusedItemInfo.index):i=this.visibleItems.findIndex((e=>this.isItemMatched(e))),-1!==i&&(s=!0),-1===i&&-1===this.focusedItemInfo.index&&(i=this.findFirstFocusedItemIndex()),-1!==i&&this.changeFocusedItemIndex(e,i),this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout((()=>{this.searchValue="",this.searchTimeout=null}),500),s},changeFocusedItemIndex(e,t){this.focusedItemInfo.index!==t&&(this.focusedItemInfo.index=t,this.scrollInView())},scrollInView(e=-1){const t=-1!==e?`${this.id}_${e}`:this.focusedItemId,s=i.DomHandler.findSingle(this.menubar,`li[id="${t}"]`);s&&s.scrollIntoView&&s.scrollIntoView({block:"nearest",inline:"start"})},createProcessedItems(e,t=0,i={},s=""){const n=[];return e&&e.forEach(((e,o)=>{const r=(""!==s?s+"_":"")+o,a={item:e,index:o,level:t,key:r,parent:i,parentKey:s};a.items=this.createProcessedItems(e.items,t+1,a,r),n.push(a)})),n},containerRef(e){this.container=e},menubarRef(e){this.menubar=e?e.$el:void 0}},computed:{containerClass(){return["p-tieredmenu p-component",{"p-tieredmenu-overlay":this.popup,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},processedItems(){return this.createProcessedItems(this.model||[])},visibleItems(){const e=this.activeItemPath.find((e=>e.key===this.focusedItemInfo.parentKey));return e?e.items:this.processedItems},focusedItemId(){return-1!==this.focusedItemInfo.index?`${this.id}${i.ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey)?"_"+this.focusedItemInfo.parentKey:""}_${this.focusedItemInfo.index}`:null}},components:{TieredMenuSub:l,Portal:a.default}};const v=["id"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&s.firstChild?s.insertBefore(n,s.firstChild):s.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-tieredmenu-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-tieredmenu ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-tieredmenu .p-submenu-list {\n    position: absolute;\n    min-width: 100%;\n    z-index: 1;\n    display: none;\n}\n.p-tieredmenu .p-menuitem-link {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-tieredmenu .p-menuitem-text {\n    line-height: 1;\n}\n.p-tieredmenu .p-menuitem {\n    position: relative;\n}\n.p-tieredmenu .p-menuitem-link .p-submenu-icon {\n    margin-left: auto;\n}\n.p-tieredmenu .p-menuitem-active > .p-submenu-list {\n    display: block;\n    left: 100%;\n    top: 0;\n}\n"),b.render=function(e,t,i,s,o,r){const a=n.resolveComponent("TieredMenuSub"),l=n.resolveComponent("Portal");return n.openBlock(),n.createBlock(l,{appendTo:i.appendTo,disabled:!i.popup},{default:n.withCtx((()=>[n.createVNode(n.Transition,{name:"p-connected-overlay",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:n.withCtx((()=>[o.visible?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,ref:r.containerRef,id:o.id,class:r.containerClass,onClick:t[0]||(t[0]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e))},e.$attrs),[n.createVNode(a,{ref:r.menubarRef,id:o.id+"_list",class:"p-tieredmenu-root-list",tabindex:i.disabled?-1:i.tabindex,role:"menubar","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,"aria-disabled":i.disabled||void 0,"aria-orientation":"vertical","aria-activedescendant":o.focused?r.focusedItemId:void 0,menuId:o.id,focusedItemId:o.focused?r.focusedItemId:void 0,items:r.processedItems,template:e.$slots.item,activeItemPath:o.activeItemPath,exact:i.exact,level:0,onFocus:r.onFocus,onBlur:r.onBlur,onKeydown:r.onKeyDown,onItemClick:r.onItemClick,onItemMouseenter:r.onItemMouseEnter},null,8,["id","tabindex","aria-label","aria-labelledby","aria-disabled","aria-activedescendant","menuId","focusedItemId","items","template","activeItemPath","exact","onFocus","onBlur","onKeydown","onItemClick","onItemMouseenter"])],16,v)):n.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])},module.exports=b;

package/tieredmenu/tieredmenu.esm.js

@@ -1,6 +1,6 @@
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import { ObjectUtils, ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
+import { ObjectUtils, UniqueComponentId, ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, normalizeClass, createElementVNode, createBlock, withCtx, withDirectives, createCommentVNode, toDisplayString, resolveDynamicComponent, createVNode, Transition, mergeProps } from 'vue';
 
@@ -302,6 +302,7 @@ var script = {
     searchValue: null,
     data() {
         return {
+            id: this.$attrs.id,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
             activeItemPath: [],
@@ -310,6 +311,9 @@ var script = {
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
         activeItemPath(newPath) {
             if (!this.popup) {
                 if (ObjectUtils.isNotEmpty(newPath)) {
@@ -322,6 +326,9 @@ var script = {
             }
         }
     },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
@@ -841,9 +848,6 @@ var script = {
 
             return processedItem ? processedItem.items : this.processedItems;
         },
-        id() {
-            return this.$attrs.id || UniqueComponentId();
-        },
         focusedItemId() {
             return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
         }
@@ -877,13 +881,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ? (openBlock(), createElementBlock("div", mergeProps({
                 key: 0,
                 ref: $options.containerRef,
-                id: $options.id,
+                id: $data.id,
                 class: $options.containerClass,
                 onClick: _cache[0] || (_cache[0] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
               }, _ctx.$attrs), [
                 createVNode(_component_TieredMenuSub, {
                   ref: $options.menubarRef,
-                  id: $options.id + '_list',
+                  id: $data.id + '_list',
                   class: "p-tieredmenu-root-list",
                   tabindex: !$props.disabled ? $props.tabindex : -1,
                   role: "menubar",
@@ -892,7 +896,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-disabled": $props.disabled || undefined,
                   "aria-orientation": "vertical",
                   "aria-activedescendant": $data.focused ? $options.focusedItemId : undefined,
-                  menuId: $options.id,
+                  menuId: $data.id,
                   focusedItemId: $data.focused ? $options.focusedItemId : undefined,
                   items: $options.processedItems,
                   template: _ctx.$slots.item,