@progress/kendo-vue-layout
Version:
9 lines (8 loc) • 4.66 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),l=require("./TabStripNavigation.js"),g=require("./TabStripContent.js"),s=require("@progress/kendo-vue-common"),r=require("../package-metadata.js"),m=n.defineComponent({name:"KendoTabStrip",emits:{select:e=>!0},props:{animation:{type:Boolean,default:!0},size:{type:String,default:"medium"},selected:Number,tabPosition:{type:String,default:"top"},tabAlignment:{type:String,default:"start"},tabs:{type:Array,default:void 0},tabIndex:Number,dir:String},data(){return{currentShowAll:!0,currentTabs:[],showLicenseWatermark:!1,licenseMessage:void 0}},computed:{compTabs(){return this.tabs!==void 0?this.tabs.map(function(e){const t=s.templateRendering.call(this,e.content,s.getListeners.call(this)),a=s.templateRendering.call(this,e.titleRender,s.getListeners.call(this));return{...e,content:t,titleRender:a}},this):this.currentTabs}},provide(){return{addRenderTitle:this.addRenderTitle,addTab:this.addTab,removeTab:this.removeTab}},created(){this.keyBinding={[s.Keys.left]:()=>this.prevNavigatableTab(),[s.Keys.right]:()=>this.nextNavigatableTab(),[s.Keys.down]:()=>this.nextNavigatableTab(),[s.Keys.up]:()=>this.prevNavigatableTab(),[s.Keys.home]:()=>0,[s.Keys.end]:()=>this.compTabs.length-1},s.validatePackage(r.packageMetadata),this.showLicenseWatermark=s.shouldShowValidationUI(r.packageMetadata),this.licenseMessage=s.getLicenseMessage(r.packageMetadata)},watch:{selected(e,t){this.$props.animation&&(this.currentShowAll=!1,this.$nextTick(function(){this.currentShowAll=!0}))}},methods:{addRenderTitle(e,t){const a=this.compTabs.findIndex(i=>i.tabId===e);this.compTabs[a].titleRender=t},addTab(e){this.currentTabs.push(e)},removeTab(e){const t=this.currentTabs.findIndex(a=>a.tabId===e);this.currentTabs.splice(t,1)},onSelect(e){this.$props.selected!==e&&this.$emit("select",{selected:e})},onKeyDown(e){let t;switch(e.keyCode){case s.Keys.left:t=this.keyBinding[this.invertKeys(s.Keys.left,s.Keys.right)];break;case s.Keys.right:t=this.keyBinding[this.invertKeys(s.Keys.right,s.Keys.left)];break;case s.Keys.up:t=this.keyBinding[s.Keys.up];break;case s.Keys.down:t=this.keyBinding[s.Keys.down];break;case s.Keys.home:t=this.keyBinding[s.Keys.home];break;case s.Keys.end:t=this.keyBinding[s.Keys.end];break}t&&(e.preventDefault(),this.onSelect(t()))},invertKeys(e,t){return this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1?t:e},firstNavigatableTab(){const e=this.compTabs.length;if(e){for(let t=0;t<e;t++)if(!this.compTabs[t].disabled)return t}},lastNavigatableTab(){const e=this.compTabs.length;if(e){for(let t=e-1;t>0;t--)if(!this.compTabs[t].disabled)return t}},prevNavigatableTab(){const e=this.compTabs.length,{selected:t}=this.$props,a=t?t-1:-1;if(a<0)return this.lastNavigatableTab();if(e)for(let i=a;i>-1;i--){if(!this.compTabs[i].disabled)return i;if(i===0)return this.lastNavigatableTab()}},nextNavigatableTab(){const e=this.compTabs.length,{selected:t}=this.$props,a=t?t+1:1;if(a>=e)return this.firstNavigatableTab();if(e)for(let i=a;i<e;i++){if(!this.compTabs[i].disabled)return i;if(i+1===e)return this.firstNavigatableTab()}}},render(){const{tabPosition:e,size:t,tabIndex:a=0}=this.$props,i=e==="bottom",d=s.classNames("k-widget","k-pos-relative","k-tabstrip",{[`k-tabstrip-${s.kendoThemeMaps.sizeMap[t]||t}`]:t,"k-tabstrip-left":e==="left","k-tabstrip-right":e==="right","k-tabstrip-bottom":e==="bottom","k-tabstrip-top":e==="top"}),c=this.showLicenseWatermark?n.createVNode(s.WatermarkOverlay,{message:this.licenseMessage},null):null,h=function(b){const{selected:o}=b,p=s.getDefaultSlots(this),u={index:o,animation:this.$props.animation,tabs:this.compTabs,hasTabs:this.tabs!==void 0,selected:o,showAll:this.currentShowAll};return n.h(g.TabStripContent,{...u},p)};return n.createVNode("div",{dir:this.$props.dir,class:d},[!i&&n.createVNode(l.TabStripNavigation,{tabs:this.compTabs,selected:this.$props.selected,tabAlignment:this.$props.tabAlignment,onSelect:this.onSelect,onKeydown:this.onKeyDown,tabIndex:a},null),h.call(this,this.$props),i&&n.createVNode(l.TabStripNavigation,{tabs:this.compTabs,tabAlignment:this.$props.tabAlignment,selected:this.$props.selected,onSelect:this.onSelect,onKeydown:this.onKeyDown,tabIndex:a},null),c])}});exports.TabStrip=m;