primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 14.2 kB
JavaScript
"use strict";var e=require("primevue/icons/chevronleft"),t=require("primevue/icons/chevronright"),n=require("primevue/ripple"),a=require("primevue/utils"),i=require("vue"),r=require("primevue/basecomponent"),o=require("primevue/usestyle");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(e),s=c(t),d=c(n),p=c(r),u=o.useStyle("\n.p-tabview-nav-container {\n position: relative;\n}\n\n.p-tabview-scrollable .p-tabview-nav-container {\n overflow: hidden;\n}\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\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\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\n.p-tabview-ink-bar {\n display: none;\n z-index: 1;\n}\n\n.p-tabview-header-action:focus {\n z-index: 1;\n}\n\n.p-tabview-title {\n line-height: 1;\n white-space: nowrap;\n}\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\n.p-tabview-nav-prev {\n left: 0;\n}\n\n.p-tabview-nav-next {\n right: 0;\n}\n\n.p-tabview-nav-content::-webkit-scrollbar {\n display: none;\n}\n",{name:"tabview",manual:!0}),b={name:"TabView",extends:{name:"BaseTabView",extends:p.default,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},prevIcon:{type:String,default:void 0},nextIcon:{type:String,default:void 0}},css:{classes:{root:function(e){return["p-tabview p-component",{"p-tabview-scrollable":e.props.scrollable}]},navContainer:"p-tabview-nav-container",previousButton:"p-tabview-nav-prev p-tabview-nav-btn p-link",navContent:"p-tabview-nav-content",nav:"p-tabview-nav",tab:{header:function(e){var t=e.instance,n=e.tab,a=e.index;return["p-tabview-header",t.getTabProp(n,"headerClass"),{"p-highlight":t.d_activeIndex===a,"p-disabled":t.getTabProp(n,"disabled")}]},headerAction:"p-tabview-nav-link p-tabview-header-action",headerTitle:"p-tabview-title",content:function(e){return["p-tabview-panel",e.instance.getTabProp(e.tab,"contentClass")]}},inkbar:"p-tabview-ink-bar",nextButton:"p-tabview-nav-next p-tabview-nav-btn p-link",panelContainer:"p-tabview-panels"},loadStyle:u.load},provide:function(){return{$parentInstance:this}}},emits:["update:activeIndex","tab-change","tab-click"],data:function(){return{id:this.$attrs.id,d_activeIndex:this.activeIndex,isPrevButtonDisabled:!0,isNextButtonDisabled:!1}},watch:{"$attrs.id":function(e){this.id=e||a.UniqueComponentId()},activeIndex:function(e){this.d_activeIndex=e,this.scrollInView({index:e})}},mounted:function(){this.id=this.id||a.UniqueComponentId(),this.updateInkBar(),this.scrollable&&this.updateButtonState()},updated:function(){this.updateInkBar()},methods:{isTabPanel:function(e){return"TabPanel"===e.type.name},isTabActive:function(e){return this.d_activeIndex===e},getTabProp:function(e,t){return e.props?e.props[t]:void 0},getKey:function(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId:function(e){return"".concat(this.id,"_").concat(e,"_header_action")},getTabContentId:function(e){return"".concat(this.id,"_").concat(e,"_content")},getTabPT:function(e,t,n){var a=this.tabs.length,r={props:e.props,parent:{props:this.$props,state:this.$data},context:{index:n,count:a,first:0===n,last:n===a-1,active:this.isTabActive(n)}};return i.mergeProps(this.ptm("tab.".concat(t),{tab:r}),this.ptm("tabpanel.".concat(t),{tabpanel:r}),this.ptm("tabpanel.".concat(t),r),this.ptmo(this.getTabProp(e,"pt"),t,r))},onScroll:function(e){this.scrollable&&this.updateButtonState(),e.preventDefault()},onPrevButtonClick:function(){var e=this.$refs.content,t=a.DomHandler.getWidth(e),n=e.scrollLeft-t;e.scrollLeft=n<=0?0:n},onNextButtonClick:function(){var e=this.$refs.content,t=a.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),n=e.scrollLeft+t,i=e.scrollWidth-t;e.scrollLeft=n>=i?i:n},onTabClick:function(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown:function(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:function(e){var t=this.findNextHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowLeftKey:function(e){var t=this.findPrevHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey:function(e){var t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey:function(e){var t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onPageDownKey:function(e){this.scrollInView({index:this.$refs.nav.children.length-2}),e.preventDefault()},onPageUpKey:function(e){this.scrollInView({index:0}),e.preventDefault()},onTabEnterKey:function(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1]?e:e.nextElementSibling;return t?a.DomHandler.getAttribute(t,"data-p-disabled")||"inkbar"===a.DomHandler.getAttribute(t,"data-pc-section")?this.findNextHeaderAction(t):a.DomHandler.findSingle(t,'[data-pc-section="headeraction"]'):null},findPrevHeaderAction:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1]?e:e.previousElementSibling;return t?a.DomHandler.getAttribute(t,"data-p-disabled")||"inkbar"===a.DomHandler.getAttribute(t,"data-pc-section")?this.findPrevHeaderAction(t):a.DomHandler.findSingle(t,'[data-pc-section="headeraction"]'):null},findFirstHeaderAction:function(){return this.findNextHeaderAction(this.$refs.nav.firstElementChild,!0)},findLastHeaderAction:function(){return this.findPrevHeaderAction(this.$refs.nav.lastElementChild,!0)},changeActiveIndex:function(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:function(e,t){if(t&&(a.DomHandler.focus(t),this.scrollInView({element:t}),this.selectOnFocus)){var n=parseInt(t.parentElement.dataset.index,10);this.changeActiveIndex(e,this.tabs[n],n)}},scrollInView:function(e){var t=e.index,n=e.element||this.$refs.nav.children[void 0===t?-1:t];n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest"})},updateInkBar:function(){var e=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=a.DomHandler.getWidth(e)+"px",this.$refs.inkbar.style.left=a.DomHandler.getOffset(e).left-a.DomHandler.getOffset(this.$refs.nav).left+"px"},updateButtonState:function(){var e=this.$refs.content,t=e.scrollLeft,n=e.scrollWidth,i=a.DomHandler.getWidth(e);this.isPrevButtonDisabled=0===t,this.isNextButtonDisabled=parseInt(t)===n-i},getVisibleButtonWidths:function(){var e=this.$refs;return[e.prevBtn,e.nextBtn].reduce((function(e,t){return t?e+a.DomHandler.getWidth(t):e}),0)}},computed:{tabs:function(){var e=this;return this.$slots.default().reduce((function(t,n){return e.isTabPanel(n)?t.push(n):n.children&&n.children instanceof Array&&n.children.forEach((function(n){e.isTabPanel(n)&&t.push(n)})),t}),[])},prevButtonAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.previous:void 0},nextButtonAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.next:void 0}},directives:{ripple:d.default},components:{ChevronLeftIcon:l.default,ChevronRightIcon:s.default}};function v(e){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v(e)}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?h(Object(n),!0).forEach((function(t){m(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function m(e,t,n){return(t=g(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(e){var t=y(e,"string");return"symbol"===v(t)?t:String(t)}function y(e,t){if("object"!==v(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!==v(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var x=["tabindex","aria-label"],w=["data-p-highlight","data-p-disabled","data-pc-index","data-p-active"],P=["id","tabindex","aria-disabled","aria-selected","aria-controls","onClick","onKeydown"],k=["tabindex","aria-label"],T=["id","aria-labelledby","data-pc-index","data-p-active"];b.render=function(e,t,n,a,r,o){var c=i.resolveDirective("ripple");return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"tabview"}),[i.createElementVNode("div",i.mergeProps({class:e.cx("navContainer")},e.ptm("navContainer")),[e.scrollable&&!r.isPrevButtonDisabled?i.withDirectives((i.openBlock(),i.createElementBlock("button",i.mergeProps({key:0,ref:"prevBtn",type:"button",class:e.cx("previousButton"),tabindex:e.tabindex,"aria-label":o.prevButtonAriaLabel,onClick:t[0]||(t[0]=function(){return o.onPrevButtonClick&&o.onPrevButtonClick.apply(o,arguments)})},f(f({},e.previousButtonProps),e.ptm("previousButton")),{"data-pc-group-section":"navbutton"}),[i.renderSlot(e.$slots,"previcon",{},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.prevIcon?"span":"ChevronLeftIcon"),i.mergeProps({"aria-hidden":"true",class:e.prevIcon},e.ptm("previousIcon")),null,16,["class"]))]}))],16,x)),[[c]]):i.createCommentVNode("",!0),i.createElementVNode("div",i.mergeProps({ref:"content",class:e.cx("navContent"),onScroll:t[1]||(t[1]=function(){return o.onScroll&&o.onScroll.apply(o,arguments)})},e.ptm("navContent")),[i.createElementVNode("ul",i.mergeProps({ref:"nav",class:e.cx("nav"),role:"tablist"},e.ptm("nav")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(o.tabs,(function(t,n){return i.openBlock(),i.createElementBlock("li",i.mergeProps({key:o.getKey(t,n),style:o.getTabProp(t,"headerStyle"),class:e.cx("tab.header",{tab:t,index:n}),role:"presentation"},f(f(f({},o.getTabProp(t,"headerProps")),o.getTabPT(t,"root",n)),o.getTabPT(t,"header",n)),{"data-pc-name":"tabpanel","data-p-highlight":r.d_activeIndex===n,"data-p-disabled":o.getTabProp(t,"disabled"),"data-pc-index":n,"data-p-active":r.d_activeIndex===n}),[i.withDirectives((i.openBlock(),i.createElementBlock("a",i.mergeProps({id:o.getTabHeaderActionId(n),class:e.cx("tab.headerAction"),tabindex:o.getTabProp(t,"disabled")||!o.isTabActive(n)?-1:e.tabindex,role:"tab","aria-disabled":o.getTabProp(t,"disabled"),"aria-selected":o.isTabActive(n),"aria-controls":o.getTabContentId(n),onClick:function(e){return o.onTabClick(e,t,n)},onKeydown:function(e){return o.onTabKeyDown(e,t,n)}},f(f({},o.getTabProp(t,"headerActionProps")),o.getTabPT(t,"headerAction",n))),[t.props&&t.props.header?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:0,class:e.cx("tab.headerTitle")},o.getTabPT(t,"headerTitle",n)),i.toDisplayString(t.props.header),17)):i.createCommentVNode("",!0),t.children&&t.children.header?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(t.children.header),{key:1})):i.createCommentVNode("",!0)],16,P)),[[c]])],16,w)})),128)),i.createElementVNode("li",i.mergeProps({ref:"inkbar",class:e.cx("inkbar"),role:"presentation","aria-hidden":"true"},e.ptm("inkbar")),null,16)],16)],16),e.scrollable&&!r.isNextButtonDisabled?i.withDirectives((i.openBlock(),i.createElementBlock("button",i.mergeProps({key:1,ref:"nextBtn",type:"button",class:e.cx("nextButton"),tabindex:e.tabindex,"aria-label":o.nextButtonAriaLabel,onClick:t[2]||(t[2]=function(){return o.onNextButtonClick&&o.onNextButtonClick.apply(o,arguments)})},f(f({},e.nextButtonProps),e.ptm("nextButton")),{"data-pc-group-section":"navbutton"}),[i.renderSlot(e.$slots,"nexticon",{},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.nextIcon?"span":"ChevronRightIcon"),i.mergeProps({"aria-hidden":"true",class:e.nextIcon},e.ptm("nextIcon")),null,16,["class"]))]}))],16,k)),[[c]]):i.createCommentVNode("",!0)],16),i.createElementVNode("div",i.mergeProps({class:e.cx("panelContainer")},e.ptm("panelContainer")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(o.tabs,(function(t,n){return i.openBlock(),i.createElementBlock(i.Fragment,{key:o.getKey(t,n)},[!e.lazy||o.isTabActive(n)?i.withDirectives((i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,id:o.getTabContentId(n),style:o.getTabProp(t,"contentStyle"),class:e.cx("tab.content",{tab:t}),role:"tabpanel","aria-labelledby":o.getTabHeaderActionId(n)},f(f(f({},o.getTabProp(t,"contentProps")),o.getTabPT(t,"root",n)),o.getTabPT(t,"content",n)),{"data-pc-name":"tabpanel","data-pc-index":n,"data-p-active":r.d_activeIndex===n}),[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(t)))],16,T)),[[i.vShow,!!e.lazy||o.isTabActive(n)]]):i.createCommentVNode("",!0)],64)})),128))],16)],16)},module.exports=b;