@progress/kendo-vue-layout
Version:
85 lines (84 loc) • 2.6 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 o, createVNode as s } from "vue";
import { TabStripNavigationItem as p } from "./TabStripNavigationItem.mjs";
import { classNames as l } from "@progress/kendo-vue-common";
const m = (t) => Array.apply(null, Array(t)), u = /* @__PURE__ */ o({
name: "KendoTabStripNavigation",
emits: {
select: null,
keydown: null
},
props: {
tabs: Array,
selected: Number,
tabIndex: Number,
tabPosition: String,
tabAlignment: String,
onSelect: Function,
onKeydown: Function
},
computed: {
wrapperNavClasses() {
return {
"k-tabstrip-items-wrapper": !0,
"k-hstack": this.$props.tabPosition === "top" || this.$props.tabPosition === "bottom",
"k-vstack": this.$props.tabPosition === "left" || this.$props.tabPosition === "right"
};
},
navClasses() {
return l("k-tabstrip-items", {
"k-tabstrip-items-start": this.$props.tabAlignment === "start",
"k-tabstrip-items-center": this.$props.tabAlignment === "center",
"k-tabstrip-items-end": this.$props.tabAlignment === "end",
"k-tabstrip-items-stretched": this.$props.tabAlignment === "stretched",
"k-tabstrip-items-justify": this.$props.tabAlignment === "justify"
}, "k-reset");
}
},
render() {
const {
tabs: t,
selected: i
} = this.$props, n = t.length, r = function() {
return m(n).map(function(b, e, a) {
return s(p, {
key: e,
active: i === e,
disabled: t[e].disabled,
index: e,
title: t[e].title,
id: t[e].id,
titleRender: t[e].titleRender,
first: e === 0,
last: e === a.length - 1,
onSelect: this.onNavigationItemSelect
}, null);
}, this);
};
return s("div", {
class: this.wrapperNavClasses
}, [s("ul", {
class: this.navClasses,
role: "tablist",
tabindex: this.$props.tabIndex,
onKeydown: this.onKeyDown
}, [r.call(this)])]);
},
methods: {
onKeyDown(t) {
this.$emit("keydown", t);
},
onNavigationItemSelect(t) {
this.$emit("select", t);
}
}
});
export {
u as TabStripNavigation
};