primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)
2 lines (1 loc) • 3.97 kB
JavaScript
var e=require("primevue/utils"),t=require("primevue/ripple"),n=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={emits:["update:activeIndex","tab-change","tab-click"],props:{activeIndex:{type:Number,default:0}},data(){return{d_activeIndex:this.activeIndex}},watch:{activeIndex(e){this.d_activeIndex=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.$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.DomHandler.getWidth(t)+"px",this.$refs.inkbar.style.left=e.DomHandler.getOffset(t).left-e.DomHandler.getOffset(this.$refs.nav).left+"px"},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},computed:{tabs(){const e=[];return this.$slots.default().forEach((t=>{this.isTabPanel(t)?e.push(t):t.children.length>0&&t.children.forEach((t=>{this.isTabPanel(t)&&e.push(t)}))})),e}},directives:{ripple:i(t).default}};const s={class:"p-tabview p-component"},l={ref:"nav",class:"p-tabview-nav",role:"tablist"},r={key:0,class:"p-tabview-title"},o={ref:"inkbar",class:"p-tabview-ink-bar"},d={class:"p-tabview-panels"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\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 -ms-flex-wrap: wrap;\n flex-wrap: wrap;\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}\n"),a.render=function(e,t,i,a,c,p){const h=n.resolveDirective("ripple");return n.openBlock(),n.createBlock("div",s,[n.createVNode("ul",l,[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(p.tabs,((e,t)=>(n.openBlock(),n.createBlock("li",{role:"presentation",key:p.getKey(e,t),class:[{"p-highlight":c.d_activeIndex===t,"p-disabled":p.isTabDisabled(e)}]},[n.withDirectives(n.createVNode("a",{role:"tab",class:"p-tabview-nav-link",onClick:e=>p.onTabClick(e,t),onKeydown:e=>p.onTabKeydown(e,t),tabindex:p.isTabDisabled(e)?null:"0","aria-selected":c.d_activeIndex===t},[e.props&&e.props.header?(n.openBlock(),n.createBlock("span",r,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)],40,["onClick","onKeydown","tabindex","aria-selected"]),[[h]])],2)))),128)),n.createVNode("li",o,null,512)],512),n.createVNode("div",d,[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(p.tabs,((e,t)=>n.withDirectives((n.openBlock(),n.createBlock("div",{key:p.getKey(e,t),class:"p-tabview-panel",role:"tabpanel"},[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e)))],512)),[[n.vShow,c.d_activeIndex===t]]))),128))])])},module.exports=a;
;