@progress/kendo-vue-layout
Version:
224 lines (223 loc) • 6.23 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
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as g, createVNode as n, h as T } from "vue";
import { TabStripNavigation as o } from "./TabStripNavigation.mjs";
import { TabStripContent as k } from "./TabStripContent.mjs";
import { templateRendering as l, getListeners as h, Keys as i, validatePackage as v, shouldShowValidationUI as y, classNames as S, kendoThemeMaps as w, WatermarkOverlay as x, getDefaultSlots as N } from "@progress/kendo-vue-common";
import { packageMetadata as d } from "../package-metadata.mjs";
const R = /* @__PURE__ */ g({
name: "KendoTabStrip",
emits: {
select: null
},
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
};
},
computed: {
compTabs() {
return this.tabs !== void 0 ? this.tabs.map(function(t) {
const e = l.call(this, t.content, h.call(this)), a = l.call(this, t.titleRender, h.call(this));
return {
...t,
content: e,
titleRender: a
};
}, this) : this.currentTabs;
}
},
provide() {
return {
addRenderTitle: this.addRenderTitle,
addTab: this.addTab,
removeTab: this.removeTab
};
},
created() {
this.keyBinding = {
[i.left]: () => this.prevNavigatableTab(),
[i.right]: () => this.nextNavigatableTab(),
[i.down]: () => this.nextNavigatableTab(),
[i.up]: () => this.prevNavigatableTab(),
[i.home]: () => 0,
[i.end]: () => this.compTabs.length - 1
}, v(d), this.showLicenseWatermark = y(d);
},
watch: {
selected(t, e) {
this.$props.animation && (this.currentShowAll = !1, this.$nextTick(function() {
this.currentShowAll = !0;
}));
}
},
methods: {
addRenderTitle(t, e) {
const a = this.compTabs.findIndex((s) => s.tabId === t);
this.compTabs[a].titleRender = e;
},
addTab(t) {
this.currentTabs.push(t);
},
removeTab(t) {
const e = this.currentTabs.findIndex((a) => a.tabId === t);
this.currentTabs.splice(e, 1);
},
onSelect(t) {
this.$props.selected !== t && this.$emit("select", {
selected: t
});
},
onKeyDown(t) {
let e;
switch (t.keyCode) {
case i.left:
e = this.keyBinding[this.invertKeys(i.left, i.right)];
break;
case i.right:
e = this.keyBinding[this.invertKeys(i.right, i.left)];
break;
case i.up:
e = this.keyBinding[i.up];
break;
case i.down:
e = this.keyBinding[i.down];
break;
case i.home:
e = this.keyBinding[i.home];
break;
case i.end:
e = this.keyBinding[i.end];
break;
}
e && (t.preventDefault(), this.onSelect(e()));
},
invertKeys(t, e) {
return this.$el && getComputedStyle(this.$el).direction === "rtl" || !1 ? e : t;
},
firstNavigatableTab() {
const t = this.compTabs.length;
if (t) {
for (let e = 0; e < t; e++)
if (!this.compTabs[e].disabled)
return e;
}
},
lastNavigatableTab() {
const t = this.compTabs.length;
if (t) {
for (let e = t - 1; e > 0; e--)
if (!this.compTabs[e].disabled)
return e;
}
},
prevNavigatableTab() {
const t = this.compTabs.length, {
selected: e
} = this.$props, a = e ? e - 1 : -1;
if (a < 0)
return this.lastNavigatableTab();
if (t)
for (let s = a; s > -1; s--) {
if (!this.compTabs[s].disabled)
return s;
if (s === 0)
return this.lastNavigatableTab();
}
},
nextNavigatableTab() {
const t = this.compTabs.length, {
selected: e
} = this.$props, a = e ? e + 1 : 1;
if (a >= t)
return this.firstNavigatableTab();
if (t)
for (let s = a; s < t; s++) {
if (!this.compTabs[s].disabled)
return s;
if (s + 1 === t)
return this.firstNavigatableTab();
}
}
},
render() {
const {
tabPosition: t,
size: e,
tabIndex: a = 0
} = this.$props, s = t === "bottom", c = S("k-widget", "k-pos-relative", "k-tabstrip", {
[`k-tabstrip-${w.sizeMap[e] || e}`]: e,
"k-tabstrip-left": t === "left",
"k-tabstrip-right": t === "right",
"k-tabstrip-bottom": t === "bottom",
"k-tabstrip-top": t === "top"
}), b = this.showLicenseWatermark ? n(x, null, null) : null, p = function(m) {
const {
selected: r
} = m, u = N(this), f = {
index: r,
animation: this.$props.animation,
tabs: this.compTabs,
hasTabs: this.tabs !== void 0,
selected: r,
showAll: this.currentShowAll
};
return T(k, {
...f
}, u);
};
return n("div", {
dir: this.$props.dir,
class: c
}, [!s && n(o, {
tabs: this.compTabs,
selected: this.$props.selected,
tabAlignment: this.$props.tabAlignment,
onSelect: this.onSelect,
onKeydown: this.onKeyDown,
tabIndex: a
}, null), p.call(this, this.$props), s && n(o, {
tabs: this.compTabs,
tabAlignment: this.$props.tabAlignment,
selected: this.$props.selected,
onSelect: this.onSelect,
onKeydown: this.onKeyDown,
tabIndex: a
}, null), b]);
}
});
export {
R as TabStrip
};