primevue/tabview/tabview.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

import{DomHandler as e}from"primevue/utils";import t from"primevue/ripple";import{resolveDirective as n,openBlock as a,createElementBlock as i,normalizeClass as s,createElementVNode as l,withDirectives as o,createCommentVNode as r,Fragment as d,renderList as c,toDisplayString as p,createBlock as b,resolveDynamicComponent as v,vShow as h}from"vue";var u={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}},data(){return{d_activeIndex:this.activeIndex,backwardIsDisabled:!0,forwardIsDisabled:!1}},watch:{activeIndex(e){this.d_activeIndex=e,this.updateScrollBar(e)}},updated(){this.updateInkBar()},mounted(){this.updateInkBar()},methods:{onTabClick(e,t){this.isTabDisabled(this.tabs[t])||t===this.d_activeIndex||(this.d_activeIndex=t,this.$emit("update:activeIndex",this.d_activeIndex),this.$emit("tab-change",{originalEvent:e,index:t}),this.updateScrollBar(t)),this.$emit("tab-click",{originalEvent:e,index:t})},onTabKeydown(e,t){13===e.which&&this.onTabClick(e,t)},updateInkBar(){let t=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=e.getWidth(t)+"px",this.$refs.inkbar.style.left=e.getOffset(t).left-e.getOffset(this.$refs.nav).left+"px"},updateScrollBar(e){this.$refs.nav.children[e].scrollIntoView({block:"nearest"})},updateButtonState(){const t=this.$refs.content,{scrollLeft:n,scrollWidth:a}=t,i=e.getWidth(t);this.backwardIsDisabled=0===n,this.forwardIsDisabled=parseInt(n)===a-i},getKey:(e,t)=>e.props&&e.props.header?e.props.header:t,isTabDisabled:e=>e.props&&e.props.disabled,isTabPanel:e=>"TabPanel"===e.type.name,onScroll(e){this.scrollable&&this.updateButtonState(),e.preventDefault()},getVisibleButtonWidths(){const{prevBtn:t,nextBtn:n}=this.$refs;return[t,n].reduce(((t,n)=>n?t+e.getWidth(n):t),0)},navBackward(){const t=this.$refs.content,n=e.getWidth(t)-this.getVisibleButtonWidths(),a=t.scrollLeft-n;t.scrollLeft=a<=0?0:a},navForward(){const t=this.$refs.content,n=e.getWidth(t)-this.getVisibleButtonWidths(),a=t.scrollLeft+n,i=t.scrollWidth-n;t.scrollLeft=a>=i?i:a}},computed:{contentClasses(){return["p-tabview p-component",{"p-tabview-scrollable":this.scrollable}]},prevButtonClasses:()=>["p-tabview-nav-prev p-tabview-nav-btn p-link"],nextButtonClasses:()=>["p-tabview-nav-next p-tabview-nav-btn p-link"],tabs(){const e=[];return this.$slots.default().forEach((t=>{this.isTabPanel(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isTabPanel(t)&&e.push(t)}))})),e}},directives:{ripple:t}};const f={class:"p-tabview-nav-container"},w=[l("span",{class:"pi pi-chevron-left"},null,-1)],x={ref:"nav",class:"p-tabview-nav",role:"tablist"},k=["onClick","onKeydown","tabindex","aria-selected"],y={key:0,class:"p-tabview-title"},m={ref:"inkbar",class:"p-tabview-ink-bar"},g=[l("span",{class:"pi pi-chevron-right"},null,-1)],B={class:"p-tabview-panels"},I={key:0,class:"p-tabview-panel",role:"tabpanel"};!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    -ms-scroll-chaining: contain auto;\n        overscroll-behavior: contain auto;\n}\n.p-tabview-nav {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-tabview-nav-link {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabview-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabview-nav-link: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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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"),u.render=function(e,t,u,C,T,$){const D=n("ripple");return a(),i("div",{class:s($.contentClasses)},[l("div",f,[u.scrollable&&!T.backwardIsDisabled?o((a(),i("button",{key:0,ref:"prevBtn",class:s($.prevButtonClasses),onClick:t[0]||(t[0]=(...e)=>$.navBackward&&$.navBackward(...e)),type:"button"},w,2)),[[D]]):r("",!0),l("div",{ref:"content",class:"p-tabview-nav-content",onScroll:t[1]||(t[1]=(...e)=>$.onScroll&&$.onScroll(...e))},[l("ul",x,[(a(!0),i(d,null,c($.tabs,((e,t)=>(a(),i("li",{role:"presentation",key:$.getKey(e,t),class:s([{"p-highlight":T.d_activeIndex===t,"p-disabled":$.isTabDisabled(e)}])},[o((a(),i("a",{role:"tab",class:"p-tabview-nav-link",onClick:e=>$.onTabClick(e,t),onKeydown:e=>$.onTabKeydown(e,t),tabindex:$.isTabDisabled(e)?null:"0","aria-selected":T.d_activeIndex===t},[e.props&&e.props.header?(a(),i("span",y,p(e.props.header),1)):r("",!0),e.children&&e.children.header?(a(),b(v(e.children.header),{key:1})):r("",!0)],40,k)),[[D]])],2)))),128)),l("li",m,null,512)],512)],544),u.scrollable&&!T.forwardIsDisabled?o((a(),i("button",{key:1,ref:"nextBtn",class:s($.nextButtonClasses),onClick:t[2]||(t[2]=(...e)=>$.navForward&&$.navForward(...e)),type:"button"},g,2)),[[D]]):r("",!0)]),l("div",B,[(a(!0),i(d,null,c($.tabs,((e,t)=>(a(),i(d,{key:$.getKey(e,t)},[u.lazy&&T.d_activeIndex!==t?r("",!0):o((a(),i("div",I,[(a(),b(v(e)))],512)),[[h,!!u.lazy||T.d_activeIndex===t]])],64)))),128))])],2)};export{u as default};