Skip to content

Commit 3fac8d1

Browse files
author
Loz Jackson
authored
Add TabsComponent (#10)
* add iic-tabs component * update tabs components * update tabs component template * update dummy app * update uic-tabs component * update css * update dummy app * update changelog
1 parent 1221916 commit 3fac8d1

21 files changed

+544
-0
lines changed

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Change Log
22

3+
* [#10](https://github.com/lozjackson/ember-ui-components/pull/10) [FEATURE] Add `TabsComponent`.
4+
35
### v0.9.2 2016-11-06
46

57
* [#6](https://github.com/lozjackson/ember-ui-components/pull/6) Add util methods.

‎addon/components/uic-tabs.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/**
2+
@module ember-ui-components
3+
*/
4+
import Ember from 'ember';
5+
import layout from '../templates/components/uic-tabs';
6+
7+
const { computed: { alias }, get } = Ember;
8+
9+
/**
10+
@class TabsComponent
11+
@namespace Components
12+
*/
13+
export default Ember.Component.extend({
14+
layout,
15+
16+
/**
17+
@property classNames
18+
@type {Array}
19+
@private
20+
@default `['uic-tabs', 'tabs']`
21+
*/
22+
classNames: ['uic-tabs', 'tabs'],
23+
24+
/**
25+
## Tabs
26+
27+
Provide an array of tab objects, one for each tab. The tab objects can be
28+
`Ember.Object`s, `DS.Model`s, or POJOs.
29+
30+
Each tab object should have a `tabName` property.
31+
32+
```
33+
tabs: [
34+
{ tabName: 'First Tab', tabTemplate: 'my-first-tab' },
35+
{ tabName: 'Second Tab', tabTemplate: 'my-second-tab' }
36+
]
37+
```
38+
39+
```
40+
{{uic-tabs tabs=tabs}}
41+
```
42+
43+
@property tabs
44+
@type {Array}
45+
*/
46+
tabs: [],
47+
48+
/**
49+
## Default Tab Name
50+
51+
If the tab objects don't provide a `tabName` property then `defaultTabName`
52+
will be used for the tab names.
53+
54+
@property defaultTabName
55+
@type {String}
56+
@default `Untitled`
57+
*/
58+
defaultTabName: 'Untitled',
59+
60+
/**
61+
@property activeTab
62+
@type {Object}
63+
@private
64+
*/
65+
activeTab: null,
66+
67+
/**
68+
## Render All Tabs
69+
If this property is set to `true` then all tabs will be rendered at the same
70+
time. The inactive tabs will be hidden using CSS.
71+
72+
If `false` then only the active tab will be rendered.
73+
74+
75+
@property renderAllTabs
76+
@type {Boolean}
77+
@default `false`
78+
*/
79+
renderAllTabs: false,
80+
81+
/**
82+
@property tab
83+
@type {Object}
84+
*/
85+
tab: alias('activeTab'),
86+
87+
tabsChanged: Ember.observer('tabs.[]', function() {
88+
if (!this.get('activeTab')) {
89+
this.setDefaultTab();
90+
}
91+
}),
92+
93+
/**
94+
@method init
95+
@private
96+
*/
97+
init() {
98+
this._super(...arguments);
99+
if (!this.get('activeTab')) {
100+
this.setDefaultTab();
101+
}
102+
},
103+
104+
/**
105+
@method setDefaultTab
106+
@private
107+
*/
108+
setDefaultTab() {
109+
let tabs = get(this, 'tabs');
110+
if (tabs && get(tabs, 'length')) {
111+
let tab = get(tabs, 'firstObject') || tabs[0];
112+
if (tab) {
113+
this.selectTab(tab);
114+
}
115+
}
116+
},
117+
118+
/**
119+
@method selectTab
120+
@param {Object} tab
121+
@private
122+
*/
123+
selectTab(tab) {
124+
this.set('activeTab', tab);
125+
}
126+
});

‎addon/styles/ember-ui-components.css

+59
Original file line numberDiff line numberDiff line change
@@ -1299,6 +1299,65 @@ button.uic-close-button:hover {
12991299
}
13001300

13011301

1302+
/*
1303+
Tabs
1304+
*/
1305+
.uic-tabs {
1306+
position: relative;
1307+
}
1308+
.uic-tabs > ul {
1309+
position: relative;
1310+
margin:0px;
1311+
padding: 0 10px;
1312+
white-space: nowrap;
1313+
overflow-x: auto;
1314+
}
1315+
.uic-tabs > ul > li {
1316+
display:inline-block;
1317+
margin:0px;
1318+
padding:7px 10px;
1319+
height: 16px;
1320+
background: rgba(0,0,0,0.1);
1321+
cursor:pointer;
1322+
color:#999;
1323+
position:relative;
1324+
border-top: 1px solid rgb(197, 212, 226);
1325+
border-left: 1px solid rgb(197, 212, 226);
1326+
border-right: 1px solid rgb(197, 212, 226);
1327+
-moz-border-radius-topleft: 4px;
1328+
-moz-border-radius-topright: 4px;
1329+
-moz-border-radius-bottomright: 0px;
1330+
-moz-border-radius-bottomleft: 0px;
1331+
border-top-left-radius:4px;
1332+
border-top-right-radius: 4px;
1333+
border-bottom-right-radius: 0px;
1334+
border-bottom-left-radius: 0px;
1335+
}
1336+
.uic-tabs > ul > li.active {
1337+
background: #f9f9f9;
1338+
z-index:2;
1339+
color:#000;
1340+
}
1341+
.uic-tabs > div {
1342+
display:none;
1343+
position: relative;
1344+
top: -1px;
1345+
padding: 5px;
1346+
z-index:1;
1347+
}
1348+
.uic-tabs > div .uic-tabs > div {
1349+
padding: 5px 0;
1350+
}
1351+
.uic-tabs > div div.panel {
1352+
margin: 2px;
1353+
margin-bottom: 12px;
1354+
}
1355+
.uic-tabs > div.active {
1356+
display:block;
1357+
border: 1px solid rgba(197, 212, 226, 0);
1358+
border-top: 1px solid rgba(197, 212, 226, 0.5);
1359+
background: #f9f9f9;
1360+
}
13021361

13031362

13041363

‎addon/templates/components/uic-tabs.hbs

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<ul class="tab-header">
2+
{{#each tabs as |tab|}}
3+
<li {{action selectTab tab}} class="{{if (is-equal tab activeTab) 'active'}}">
4+
{{if tab.tabName tab.tabName defaultTabName}}
5+
</li>
6+
{{/each}}
7+
</ul>
8+
9+
{{#if renderAllTabs}}
10+
11+
{{#each tabs as |tab|}}
12+
13+
<div class="tab-body {{if (is-equal tab activeTab) 'active'}}">
14+
{{#if hasBlock}}
15+
{{yield tab}}
16+
{{else if tab.tabComponent}}
17+
{{component tab.tabComponent tab=tab}}
18+
{{else if tab.tabTemplate}}
19+
{{partial tab.tabTemplate}}
20+
{{/if}}
21+
</div>
22+
23+
{{/each}}
24+
25+
{{else}}
26+
27+
<div class="tab-body {{if (is-equal tab activeTab) 'active'}}">
28+
{{#if hasBlock}}
29+
{{yield tab}}
30+
{{else if tab.tabComponent}}
31+
{{component tab.tabComponent tab=tab}}
32+
{{else if tab.tabTemplate}}
33+
{{partial tab.tabTemplate}}
34+
{{/if}}
35+
</div>
36+
37+
{{/if}}

‎app/components/uic-tabs.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-ui-components/components/uic-tabs';

‎tests/dummy/app/components/my-first-tab.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Ember from 'ember';
2+
3+
export default Ember.Component.extend({
4+
// body
5+
});

‎tests/dummy/app/components/my-second-tab.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Ember from 'ember';
2+
3+
export default Ember.Component.extend({
4+
// body
5+
});

‎tests/dummy/app/controllers/tabs-component.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Ember from 'ember';
2+
3+
export default Ember.Controller.extend({
4+
5+
// BEGIN-SNIPPET tab-names
6+
tabs: [
7+
{ tabName: 'First Tab' },
8+
{ tabName: 'Second Tab' }
9+
],
10+
// END-SNIPPET
11+
12+
// BEGIN-SNIPPET array-of-pojos
13+
tabObjects: [
14+
{ tabName: 'Tab 1', someData: 'Content for tab 1...' },
15+
{ tabName: 'Tab 2', someData: 'Some other content for tab 2' }
16+
],
17+
// END-SNIPPET
18+
19+
// BEGIN-SNIPPET array-of-components
20+
tabComponents: [
21+
{ tabName: 'Tab 1', tabComponent: 'my-first-tab' },
22+
{ tabName: 'Tab 2', tabComponent: 'my-second-tab' }
23+
],
24+
// END-SNIPPET
25+
26+
// BEGIN-SNIPPET array-of-templates
27+
tabTemplates: [
28+
{ tabName: 'Tab 1', tabTemplate: 'my-first-tab' },
29+
{ tabName: 'Tab 2', tabTemplate: 'my-second-tab' }
30+
]
31+
// END-SNIPPET
32+
33+
34+
});

‎tests/dummy/app/router.js

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ Router.map(function() {
2121
this.route('modal');
2222
});
2323
this.route('modal-dialog-component');
24+
this.route('tabs-component');
2425
this.route('dialog-service');
2526
this.route('modal-service');
2627
this.route('button-class');

‎tests/dummy/app/templates/components/my-first-tab.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>First tab component</p>

‎tests/dummy/app/templates/components/my-second-tab.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>Second tab component</p>

‎tests/dummy/app/templates/index.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ The source code can be found on <a href="https://github.com/lozjackson/ember-ui-
6161
<li>
6262
{{link-to 'SlideMenu' 'slide-menu-component'}}
6363
</li>
64+
<li>
65+
{{link-to 'Tabs' 'tabs-component'}}
66+
</li>
6467
</ul>
6568
<h2>Services</h2>
6669
<ul>

‎tests/dummy/app/templates/menus/application.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
{{link-to 'ModalWindowComponent' 'modal-window-component' tagName="li"}}
1212
{{link-to 'SelectComponent' 'select-component' tagName="li"}}
1313
{{link-to 'SlideMenuComponent' 'slide-menu-component' tagName="li"}}
14+
{{link-to 'TabsComponent' 'tabs-component' tagName="li"}}
1415
{{link-to 'DialogService' 'dialog-service' tagName="li"}}
1516
{{link-to 'ButtonClass' 'button-class' tagName="li"}}
1617
{{link-to 'ButtonGroupClass' 'button-group-class' tagName="li"}}

‎tests/dummy/app/templates/my-first-tab.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>First tab</p>

‎tests/dummy/app/templates/my-second-tab.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>Second tab</p>

0 commit comments

Comments
 (0)