Nav component proposal

addon/components/mdl-nav-content.js

@@ -0,0 +1,11 @@
+import BaseComponent from './-base-toplevel-component';
+import layout from '../templates/components/mdl-nav-content';
+
+export default BaseComponent.extend({
+
+  layout,
+  _jsClass: false,
+  tagName: 'main',
+  primaryClassName: 'layout__content'
+
+});

addon/components/mdl-nav-drawer.js

@@ -0,0 +1,11 @@
+import BaseComponent from './-base-toplevel-component';
+import layout from '../templates/components/mdl-nav-drawer';
+
+export default BaseComponent.extend({
+
+  layout,
+  _jsClass: false,
+  tagName: 'div',
+  primaryClassName: 'layout__drawer'
+
+});

addon/components/mdl-nav-header.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+import layout from '../templates/components/mdl-nav-header';
+import ShadowSupport from '../mixins/shadow-support';
+
+const { Component } = Ember;
+
+export default Component.extend(ShadowSupport, {
+
+  layout,
+  tagName: 'header',
+  classNames: ['mdl-layout__header'],
+  classNameBindings: [
+    'waterfallMenu:mdl-layout__header--waterfall',
+    'scroll:mdl-layout__header--scroll',
+    'transparent:mdl-layout__header--transparent'
+  ],
+  waterfallMenu: false,
+  scroll: false,
+  transparent: false
+
+});

addon/components/mdl-nav-item.js

@@ -1,10 +1,10 @@
 import Ember from 'ember';
-import ChildComponentSupport from 'ember-composability/mixins/child-component-support';
-import ClickActionSupport from '../mixins/click-action-support';
-import MdlNav from './mdl-nav';
-
-export default Ember.Component.extend(ChildComponentSupport, ClickActionSupport, {
-  _parentComponentTypes: Ember.A([MdlNav]),
-  inDrawer: true,
-  inHeader: true
-});
+import layout from '../templates/components/mdl-nav-item';
+
+const { Component } = Ember;
+
+export default Component.extend({
+
+  layout
+
+});

addon/components/mdl-nav-menu.js

@@ -0,0 +1,11 @@
+import BaseComponent from './-base-toplevel-component';
+import layout from '../templates/components/mdl-nav-menu';
+
+export default BaseComponent.extend({
+
+  layout,
+  _jsClass: false,
+  tagName: 'nav',
+  primaryClassName: 'navigation'
+
+});

addon/components/mdl-nav.js

@@ -1,54 +1,21 @@
-import Ember from 'ember';
-import ParentComponentSupport from 'ember-composability/mixins/parent-component-support';
 import BaseComponent from './-base-toplevel-component';
 import layout from '../templates/components/mdl-nav';
 
-let { computed, computed: { oneWay } } = Ember;
-
-export default BaseComponent.extend(ParentComponentSupport, {
+export default BaseComponent.extend({
   primaryClassName: 'layout',
-  composableChildrenDebounceTime: 1,
   classNameBindings: [
     'fixedHeader:mdl-layout--fixed-header:mdl-layout--overlay-drawer-button',
     'fixedDrawer:mdl-layout--fixed-drawer'
   ],
   layout,
-  title: null,
-  mobileTitle: oneWay('title'),
   fixedHeader: false,
   fixedDrawer: false,
-  transparent: false,
-  waterfallMenu: false,
-  scrollHeader: false,
-  includeHeader: true,
-  includeHeaderLinks: true,
-  includeDrawer: true,
-  includeDrawerTitle: true,
   _mdlComponent: null,
-  _drawerNavItems: computed('composableChildren.[]', '[email protected]', function() {
-    return Ember.A(this.get('composableChildren').filter(x => x.inDrawer));
-  }),
-  _headerNavItems: computed('composableChildren.[]', '[email protected]', function() {
-    return Ember.A(this.get('composableChildren').filter(x => x.inHeader));
-  }),
-
-  _headerClassString: computed('waterfallMenu', function() {
-    let classes = ['mdl-layout__header'];
-    if (this.get('waterfallMenu')) {
-      classes.push('mdl-layout__header--waterfall');
-    }
-    if (this.get('scrollHeader')) {
-      classes.push('mdl-layout__header--scroll');
-    }
-    if (this.get('transparent')) {
-      classes.push('mdl-layout__header--transparent');
-    }
-    return classes.join(' ');
-  }),
 
   didInsertElement() {
     this._super(...arguments);
     let mdlnav = new window.MaterialLayout(this.get('element'));
     this.set('_mdlComponent', mdlnav);
   }
-});
+
+});

addon/components/mdl-table-col.js

@@ -15,7 +15,7 @@ export default BaseComponent.extend(ChildComponentSupport, {
     if (isEmpty(childComponents)) {
       return true;
     } else {
-      const labels = parentComponent.getComposableChildren().map(x => x.label);
+      const labels = parentComponent.getComposableChildren().map((x) => x.label);
       return labels.indexOf(this.get('label')) < 0;
     }
   }

addon/components/mdl-tabs.js

@@ -15,15 +15,15 @@ export default BaseComponent.extend(ParentComponentSupport, RippleSupport, {
     this._super(...arguments);
     let mdltabs = new window.MaterialTabs(this.get('element'));
     this.set('_mdlComponent', mdltabs);
-    let [activeTab] = this.get('composableChildren').filter(x => x.title === this.get('active'));
+    let [activeTab] = this.get('composableChildren').filter((x) => x.title === this.get('active'));
     if (activeTab) {
       activeTab.set('isActive', true);
     }
   },
 
   actions: {
     tabClicked(tab) {
-      let [activeTab] = this.get('composableChildren').filter(x => x.title === this.get('active'));
+      let [activeTab] = this.get('composableChildren').filter((x) => x.title === this.get('active'));
       if (activeTab) {
         activeTab.set('isActive', false);
       }

addon/templates/components/mdl-nav-content.hbs

@@ -0,0 +1 @@
+{{ yield }}

addon/templates/components/mdl-nav-drawer.hbs

@@ -0,0 +1,4 @@
+{{#if mobileTitle}}
+  <span class="mdl-layout-title">{{ mobileTitle }}</span>
+{{/if}}
+{{ yield }}

addon/templates/components/mdl-nav-header.hbs

@@ -0,0 +1,3 @@
+<div class="mdl-layout__header-row">
+  {{ yield }}
+</div>

addon/templates/components/mdl-nav-item.hbs

@@ -0,0 +1 @@
+{{link-to name route class="mdl-navigation__link"}}

addon/templates/components/mdl-nav-menu.hbs

@@ -0,0 +1 @@
+{{ yield }}

addon/templates/components/mdl-nav.hbs

@@ -1,32 +1 @@
-{{#if includeHeader}}
-<header class={{_headerClassString}}>
-  <div class="mdl-layout__header-row">
-    <span class="mdl-layout-title">{{title}}</span>
-    <div class="mdl-layout-spacer"></div>
-    {{#if includeHeaderLinks}}
-    <nav class="mdl-navigation mdl-layout--large-screen-only">
-      {{#each _headerNavItems as |navItem|}}
-        {{link-to navItem.name navItem.route class='mdl-navigation__link'}}
-      {{/each}}
-    </nav>
-    {{/if}}
-  </div>
-</header>
-{{/if}}
-{{#if includeDrawer}}
-<div class="mdl-layout__drawer">
-  {{#if includeDrawerTitle}}
-  <span class="mdl-layout-title">{{mobileTitle}}</span>
-  {{/if}}
-  <nav class="mdl-navigation">
-    {{#each _drawerNavItems as |navItem|}}
-      {{link-to navItem.name navItem.route class='mdl-navigation__link'}}
-    {{/each}}
-  </nav>
-</div>
-{{/if}}
-<main class="mdl-layout__content">
-  <div class="page-content">
-    {{yield}}
-  </div>
-</main>
+{{ yield }}

app/components/mdl-nav-content.js

@@ -0,0 +1 @@
+export { default } from 'ember-material-lite/components/mdl-nav-content';

app/components/mdl-nav-drawer.js

@@ -0,0 +1 @@
+export { default } from 'ember-material-lite/components/mdl-nav-drawer';

app/components/mdl-nav-header.js

@@ -0,0 +1 @@
+export { default } from 'ember-material-lite/components/mdl-nav-header';

app/components/mdl-nav-menu.js

@@ -0,0 +1 @@
+export { default } from 'ember-material-lite/components/mdl-nav-menu';

tests/dummy/app/templates/application.hbs

@@ -1,25 +1,41 @@
-{{#x-nav title='Ember Material Design Lite'
-  mobileTitle='Ember MDL'
-  includeHeaderItems=false
-  includeDrawerTitle=false
-  fixedHeader=true
-  fixedDrawer=true}}
-    {{mdl-nav-item name='Badges'    inHeader=false route='badges'}}
-    {{mdl-nav-item name='Buttons'   inHeader=false route='buttons'}}
-    {{mdl-nav-item name='Cards'     inHeader=false route='cards'}}
-    {{mdl-nav-item name='Footers'   inHeader=false route='footer'}}
-    {{mdl-nav-item name='Icons'     inHeader=false route='icons'}}
-    {{mdl-nav-item name='Inputs'    inHeader=false route='textfields'}}
-    {{mdl-nav-item name='Menus'     inHeader=false route='menus'}}
-    {{mdl-nav-item name='Nav'       inHeader=false route='navs'}}
-    {{mdl-nav-item name='Progress'  inHeader=false route='progress'}}
-    {{mdl-nav-item name='Sliders'   inHeader=false route='sliders'}}
-    {{mdl-nav-item name='Table'     inHeader=false route='table'}}
-    {{mdl-nav-item name='Tabs'      inHeader=false route='tabs'}}
-    {{mdl-nav-item name='Toggles'   inHeader=false route='toggles'}}
-    {{mdl-nav-item name='Tooltips'  inHeader=false route='tooltips'}}
-  <div class="mdl-grid">
+{{#mdl-nav fixedHeader=true fixedDrawer=true}}
+  {{#mdl-nav-header}}
+    <span class="mdl-layout-title">Ember Material Design Lite</span>
+    <div class="mdl-layout-spacer"></div>
+    {{#mdl-nav-menu class="mdl-layout--large-screen-only"}}
+      <a class='mdl-navigation__link github-link' href='https://github.com/truenorth/ember-material-lite' target='_blank'>
+        <i class="material-icons">code</i>
+        GitHub
+      </a>
+    {{/mdl-nav-menu}}
+  {{/mdl-nav-header}}
 
-    {{outlet}}
-  </div>
-{{/x-nav}}
+  {{#mdl-nav-drawer}}
+    {{#mdl-nav-menu}}
+      {{mdl-nav-item name='Badges'   route='badges'}}
+      {{mdl-nav-item name='Buttons'  route='buttons'}}
+      {{mdl-nav-item name='Cards'    route='cards'}}
+      {{mdl-nav-item name='Footers'  route='footer'}}
+      {{mdl-nav-item name='Icons'    route='icons'}}
+      {{mdl-nav-item name='Inputs'   route='textfields'}}
+      {{mdl-nav-item name='Menus'    route='menus'}}
+      {{mdl-nav-item name='Nav'      route='navs'}}
+      {{mdl-nav-item name='Progress' route='progress'}}
+      {{mdl-nav-item name='Sliders'  route='sliders'}}
+      {{mdl-nav-item name='Table'    route='table'}}
+      {{mdl-nav-item name='Tabs'     route='tabs'}}
+      {{mdl-nav-item name='Toggles'  route='toggles'}}
+      {{mdl-nav-item name='Tooltips' route='tooltips'}}
+      <a class='mdl-navigation__link github-link drawer' href='https://github.com/truenorth/ember-material-lite' target='_blank'>
+        {{ mdl-icon icon="code" }}
+        GitHub
+      </a>
+    {{/mdl-nav-menu}}
+  {{/mdl-nav-drawer}}
+
+  {{#mdl-nav-content}}
+    <div class="mdl-grid">
+      {{ outlet }}
+    </div>
+  {{/mdl-nav-content}}
+{{/mdl-nav}}

tests/dummy/app/templates/snippets/mdl-button-basic.hbs

@@ -1,4 +1,4 @@
 {{#mdl-button}} Basic {{/mdl-button}}
 {{mdl-button text='Inline'}}
 {{mdl-button text='Accent' isAccent=true}}
-{{#mdl-button isColored=false}}Colorless{{/mdl-button}}
+{{#mdl-button isColored=false}}Colorless{{/mdl-button}}

tests/dummy/app/templates/snippets/mdl-nav-drawer-only.hbs

@@ -1,15 +1,20 @@
-{{#mdl-nav
-  title='Fixed Drawer'
-  includeHeader=false
-  fixedDrawer=true}}
-  {{mdl-nav-item name='Buttons'   route='buttons'}}
-  {{mdl-nav-item name='Tabs'      route='tabs'}}
-  {{mdl-nav-item name='Nav'       route='navs'}}
-  <div class="mdl-grid">
-  	<div class="mdl-cell mdl-cell--12-col">
-    Bacon ipsum dolor amet pork loin cow pancetta, t-bone leberkas jerky pork belly. Corned beef kielbasa t-bone, ham prosciutto ribeye chicken filet mignon pork loin turducken flank short ribs beef pancetta kevin. Swine pancetta salami frankfurter alcatra filet mignon. Bresaola pastrami hamburger turkey short loin. Andouille pig turducken, pork chop ham tongue pork capicola. Swine venison brisket, pork belly turkey doner chicken rump short loin.
-	Tail shoulder cupim, tenderloin bacon short ribs ball tip alcatra sirloin ground round salami spare ribs kevin. Ground round meatball chuck kevin sirloin jerky tail ham. Filet mignon beef brisket boudin ball tip meatloaf shank. Tail tri-tip shankle bacon short ribs pork chop fatback cupim prosciutto andouille sausage turducken chicken filet mignon. Salami jowl fatback shank spare ribs. Boudin ground round ham, ball tip meatloaf tenderloin beef.
-	Fatback flank ball tip corned beef. Ball tip spare ribs kielbasa bresaola turkey venison salami leberkas chicken jerky picanha sausage pork. Shoulder doner frankfurter jerky corned beef, alcatra beef ribs venison flank brisket short loin. Pastrami porchetta shoulder, short ribs ground round jowl doner meatball meatloaf sirloin. Capicola leberkas jowl, sausage pancetta chuck ham hock swine tail pork chop venison porchetta jerky brisket. Pig shankle filet mignon shank meatball. Prosciutto drumstick leberkas spare ribs, bacon ball tip pork chop hamburger t-bone.
-	</div>
-  </div>
+{{#mdl-nav fixedDrawer=true}}
+  {{#mdl-nav-drawer}}
+    <span class="mdl-layout-title">Drawer only</span>
+    {{#mdl-nav-menu}}
+      {{mdl-nav-item name='Buttons' route='buttons'}}
+      {{mdl-nav-item name='Tabs'    route='tabs'}}
+      {{mdl-nav-item name='Nav'     route='navs'}}
+    {{/mdl-nav-menu}}
+  {{/mdl-nav-drawer}}
+
+  {{#mdl-nav-content}}
+    <div class="mdl-grid">
+      <div class="mdl-cell mdl-cell--12-col">
+        Bacon ipsum dolor amet pork loin cow pancetta, t-bone leberkas jerky pork belly. Corned beef kielbasa t-bone, ham prosciutto ribeye chicken filet mignon pork loin turducken flank short ribs beef pancetta kevin. Swine pancetta salami frankfurter alcatra filet mignon. Bresaola pastrami hamburger turkey short loin. Andouille pig turducken, pork chop ham tongue pork capicola. Swine venison brisket, pork belly turkey doner chicken rump short loin.
+        Tail shoulder cupim, tenderloin bacon short ribs ball tip alcatra sirloin ground round salami spare ribs kevin. Ground round meatball chuck kevin sirloin jerky tail ham. Filet mignon beef brisket boudin ball tip meatloaf shank. Tail tri-tip shankle bacon short ribs pork chop fatback cupim prosciutto andouille sausage turducken chicken filet mignon. Salami jowl fatback shank spare ribs. Boudin ground round ham, ball tip meatloaf tenderloin beef.
+        Fatback flank ball tip corned beef. Ball tip spare ribs kielbasa bresaola turkey venison salami leberkas chicken jerky picanha sausage pork. Shoulder doner frankfurter jerky corned beef, alcatra beef ribs venison flank brisket short loin. Pastrami porchetta shoulder, short ribs ground round jowl doner meatball meatloaf sirloin. Capicola leberkas jowl, sausage pancetta chuck ham hock swine tail pork chop venison porchetta jerky brisket. Pig shankle filet mignon shank meatball. Prosciutto drumstick leberkas spare ribs, bacon ball tip pork chop hamburger t-bone.
+      </div>
+    </div>
+  {{/mdl-nav-content}}
 {{/mdl-nav}}