30 lines
1.5 KiB
TypeScript
30 lines
1.5 KiB
TypeScript
import Vue, {CreateElement, VNode} from 'vue';
|
|
|
|
//tslint:disable-next-line:variable-name
|
|
const Tabs = Vue.extend({
|
|
props: ['value', 'tabs'],
|
|
render(this: Vue & {readonly value?: string, _v?: string, selected?: string, tabs: {readonly [key: string]: string}},
|
|
createElement: CreateElement): VNode {
|
|
let children: {[key: string]: string | VNode | undefined};
|
|
if(this.$slots['default'] !== undefined) {
|
|
children = {};
|
|
this.$slots['default']!.forEach((child, i) => {
|
|
if(child.context !== undefined) children[child.key !== undefined ? child.key : i] = child;
|
|
});
|
|
} else children = this.tabs;
|
|
const keys = Object.keys(children);
|
|
if(this._v !== this.value)
|
|
this.selected = this._v = this.value;
|
|
if(this._v === undefined || children[this._v] === undefined)
|
|
this.$emit('input', this._v = keys[0]);
|
|
if(this.selected !== this._v && children[this.selected!] !== undefined)
|
|
this.$emit('input', this._v = this.selected);
|
|
return createElement('div', {staticClass: 'nav-tabs-scroll'},
|
|
[createElement('ul', {staticClass: 'nav nav-tabs'}, keys.map((key) => createElement('li', {staticClass: 'nav-item'},
|
|
[createElement('a', {
|
|
staticClass: 'nav-link', class: {active: this._v === key}, on: { click: () => this.$emit('input', key) }
|
|
}, [children[key]!])])))]);
|
|
}
|
|
});
|
|
|
|
export default Tabs; |