@progress/kendo-vue-layout
Version:
227 lines (226 loc) • 6.35 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 f, createVNode as n, h as T } from "vue";
import { TabStripNavigation as l } from "./TabStripNavigation.mjs";
import { TabStripContent as k } from "./TabStripContent.mjs";
import { classNames as v, kendoThemeMaps as y, WatermarkOverlay as S, Keys as s, validatePackage as w, shouldShowValidationUI as x, getLicenseMessage as N, templateRendering as h, getListeners as d, getDefaultSlots as $ } from "@progress/kendo-vue-common";
import { packageMetadata as r } from "../package-metadata.mjs";
const C = /* @__PURE__ */ f({
name: "KendoTabStrip",
emits: {
select: (t) => !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(t) {
const e = h.call(this, t.content, d.call(this)), a = h.call(this, t.titleRender, d.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 = {
[s.left]: () => this.prevNavigatableTab(),
[s.right]: () => this.nextNavigatableTab(),
[s.down]: () => this.nextNavigatableTab(),
[s.up]: () => this.prevNavigatableTab(),
[s.home]: () => 0,
[s.end]: () => this.compTabs.length - 1
}, w(r), this.showLicenseWatermark = x(r), this.licenseMessage = N(r);
},
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((i) => i.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 s.left:
e = this.keyBinding[this.invertKeys(s.left, s.right)];
break;
case s.right:
e = this.keyBinding[this.invertKeys(s.right, s.left)];
break;
case s.up:
e = this.keyBinding[s.up];
break;
case s.down:
e = this.keyBinding[s.down];
break;
case s.home:
e = this.keyBinding[s.home];
break;
case s.end:
e = this.keyBinding[s.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 i = a; i > -1; i--) {
if (!this.compTabs[i].disabled)
return i;
if (i === 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 i = a; i < t; i++) {
if (!this.compTabs[i].disabled)
return i;
if (i + 1 === t)
return this.firstNavigatableTab();
}
}
},
render() {
const {
tabPosition: t,
size: e,
tabIndex: a = 0
} = this.$props, i = t === "bottom", c = v("k-widget", "k-pos-relative", "k-tabstrip", {
[`k-tabstrip-${y.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(S, {
message: this.licenseMessage
}, null) : null, p = function(m) {
const {
selected: o
} = m, g = $(this), u = {
index: o,
animation: this.$props.animation,
tabs: this.compTabs,
hasTabs: this.tabs !== void 0,
selected: o,
showAll: this.currentShowAll
};
return T(k, {
...u
}, g);
};
return n("div", {
dir: this.$props.dir,
class: c
}, [!i && n(l, {
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), i && n(l, {
tabs: this.compTabs,
tabAlignment: this.$props.tabAlignment,
selected: this.$props.selected,
onSelect: this.onSelect,
onKeydown: this.onKeyDown,
tabIndex: a
}, null), b]);
}
});
export {
C as TabStrip
};