-
Notifications
You must be signed in to change notification settings - Fork 4
/
uic-tabs.js
133 lines (110 loc) · 2.58 KB
/
uic-tabs.js
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
/**
@module ember-ui-components
*/
import Component from '@ember/component';
import layout from '../templates/components/uic-tabs';
import { get } from '@ember/object';
import { next } from '@ember/runloop';
import { alias } from '@ember/object/computed';
/**
@class TabsComponent
@namespace Components
*/
export default Component.extend({
layout,
/**
@property classNames
@type {Array}
@private
@default `['uic-tabs', 'tabs']`
*/
classNames: ['uic-tabs', 'tabs'],
/**
## Tabs
Provide an array of tab objects, one for each tab. The tab objects can be
`Ember.Object`s, `DS.Model`s, or POJOs.
Each tab object should have a `tabName` property.
```
tabs: [
{ tabName: 'First Tab', tabTemplate: 'my-first-tab' },
{ tabName: 'Second Tab', tabTemplate: 'my-second-tab' }
]
```
```
{{uic-tabs tabs=tabs}}
```
@property tabs
@type {Array}
*/
/**
## Default Tab Name
If the tab objects don't provide a `tabName` property then `defaultTabName`
will be used for the tab names.
@property defaultTabName
@type {String}
@default `Untitled`
*/
defaultTabName: 'Untitled',
/**
@property activeTab
@type {Object}
*/
activeTab: null,
/**
## Render All Tabs
If this property is set to `true` then all tabs will be rendered at the same
time. The inactive tabs will be hidden using CSS.
If `false` then only the active tab will be rendered.
@property renderAllTabs
@type {Boolean}
@default `false`
*/
renderAllTabs: false,
/**
Computed property.
@property tab
@type {Object}
*/
tab: alias('activeTab'),
/**
Returns the default tab. The first tab in the list, or `undefined`
if there are no tabs
@method getDefaultTab
@return {Object}
@private
*/
getDefaultTab() {
let tabs = get(this, 'tabs');
if (tabs && get(tabs, 'length')) {
return get(tabs, 'firstObject') || tabs[0];
}
},
/**
@method setActiveTab
@param {Object} tab
*/
setActiveTab(tab) {
if (this.isDestroyed || this.isDestroying) { return; }
this.set('activeTab', tab);
},
/**
@method _confirmActiveTab
@private
*/
_confirmActiveTab() {
let { activeTab, tabs } = this.getProperties('activeTab', 'tabs');
return activeTab && tabs.indexOf(activeTab) !== -1;
},
/**
@method _initActiveTab
@private
*/
_initActiveTab() {
if (!this._confirmActiveTab()) {
next(() => this.setActiveTab(this.getDefaultTab()));
}
},
didRender() {
this._initActiveTab();
}
});