Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 | 93x 93x 93x 93x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 20x 4x 3x 2x 20x 13x 8x 2x 2x 1x 1x 3x 1x 2x 1x 4x 2x 2x 2x 1x 3x 2x | import { ComponentRender } from '../zd-component/component-render';
import { ITab, ITabs, ITabsEvents } from './interfaces';
import { Tab } from './tab';
import { TabNotFoundError } from './tab-not-found';
/**
* Base class for Tabs component.
*/
export class Tabs extends ComponentRender implements ITabs {
public activeTabValue = 0;
public declare events: ITabsEvents;
public tabs: Tab[] = [];
/**
* Defines the component height. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public height: string | number = 'auto';
/**
* Defines the component min height. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public minHeight: string | number = 'auto';
/**
* Defines the component max height. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public maxHeight: string | number = 'none';
// Zeedhi v3
/**
* Applies specified color to the selected tabs.
*/
public color?: string | undefined = 'primary';
/**
* Applies specified color to the control’s background.
*/
public backgroudColor?: string;
/**
* Adjusts the vertical height used by the component.
*/
public dense?: boolean = true;
/**
* Changes the direction of the tabs. Can be either horizontal or vertical
*/
public direction?: 'horizontal' | 'vertical' = 'horizontal';
/**
* Puts all children components into a disabled state
*/
public disabled?: boolean = false;
/**
* Force v-tab’s to take up all available space
*/
public grow?: boolean = false;
/**
* Sets a maximum number of selections that can be made.
*/
public max?: number;
/* istanbul ignore next */
/**
* Create a new Tabs.
* @param props Tabs properties
*/
constructor(props: ITabs) {
super(props);
this.tabs = this.getTabs(props.tabs || []);
this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
this.height = this.getInitValue('height', props.height, this.height);
this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
this.color = this.getInitValue('color', props.color, this.color);
this.backgroudColor = this.getInitValue('backgroudColor', props.backgroudColor, this.backgroudColor);
this.dense = this.getInitValue('dense', props.dense, this.dense);
this.direction = this.getInitValue('direction', props.direction, this.direction);
this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
this.grow = this.getInitValue('grow', props.grow, this.grow);
this.max = this.getInitValue('max', props.max, this.max);
}
get activeTab() {
if (this.activeTabValue >= 0 && !this.tabs[this.activeTabValue]?.isVisible) {
const firstTabIndex = this.tabs.findIndex((tab) => tab.isVisible);
if (firstTabIndex > -1) {
this.activeTabValue = firstTabIndex;
}
}
return this.activeTabValue;
}
set activeTab(index: number) {
this.activeTabValue = index;
}
private getTabs(tabs: ITab[]) {
return tabs.map((tab) => new Tab(tab));
}
public getTab(name: string) {
const tab = this.tabs.find((item) => item.name === name);
if (!tab) {
throw new TabNotFoundError(name, this.name);
}
return tab;
}
/**
* Method for navigating to the next tab
* @param loop Defines if want a loop navigation
*/
public nextTab(loop = false) {
if (loop) {
this.activeTab = (this.activeTab + 1) % this.tabs.length;
} else if (this.activeTab < this.tabs.length - 1) {
this.activeTab += 1;
}
}
/**
* Method for navigating to the previous tab
* @param loop Defines if want a loop navigation
*/
public previousTab(loop = false) {
if (loop) {
const newTabIndex = (this.activeTab - 1) % this.tabs.length;
this.activeTab = newTabIndex >= 0 ? newTabIndex : newTabIndex + this.tabs.length;
} else if (this.activeTab > 0) {
this.activeTab -= 1;
}
}
/**
* Triggered before tab is change.
* @param event DOM event
* @param index Tab index
* @param element Tabs element
*/
public beforeChange(event?: Event, index?: number, element?: any) {
this.callEvent('beforeChange', {
event,
element,
tabIndex: index,
component: this,
});
}
/**
* Triggered when active tab changes
* @param event DOM event
* @param element Tabs element
*/
public change(event?: Event, element?: any) {
this.callEvent('change', { event, element, component: this });
}
}
|