Add code snippets in dummy app

Fixes #2

bower.json

@@ -2,7 +2,7 @@
   "name": "ember-data-table-light",
   "dependencies": {
     "ember": "~2.6.0",
-    "ember-cli-shims": "0.1.1",
+    "ember-cli-shims": "~0.1.1",
     "ember-cli-test-loader": "0.2.2",
     "ember-qunit-notifications": "0.1.0",
     "es5-shim": "^4.5.8",

ember-cli-build.js

@@ -4,7 +4,8 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   var app = new EmberAddon(defaults, {
-    // Add options here
+    snippetSearchPaths: ['addon', 'tests/dummy/app'],
+    snippetPaths: ['snippets', 'tests/dummy/snippets']
   });
 
   // app.import('bower_components/font-awesome/css/font-awesome.css');

package.json

@@ -40,6 +40,8 @@
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-cli-yuidoc": "0.8.3",
+    "ember-code-snippet": "1.3.0",
+    "ember-composable-helpers": "0.26.2",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",

tests/dummy/app/controllers/editable.js

@@ -5,6 +5,8 @@ const {
 } = Ember;
 
 export default Controller.extend({
+  collapseCodeSnippet: true,
+  activeTab: 0,
   columns: [
     {
       label: 'First Name',
@@ -31,5 +33,11 @@ export default Controller.extend({
       label: 'Country',
       valuePath: 'country'
     }
-  ]
+  ],
+
+  actions: {
+    setActiveTab(tab) {
+      this.set('activeTab', tab);
+    }
+  }
 });

tests/dummy/app/controllers/index.js

@@ -6,6 +6,8 @@ const {
 } = Ember;
 
 export default Controller.extend({
+  collapseCodeSnippet: true,
+  activeTab: 0,
   columns: [
     CheckboxColumn,
     {
@@ -30,5 +32,11 @@ export default Controller.extend({
       label: 'Country',
       valuePath: 'country'
     }
-  ]
+  ],
+
+  actions: {
+    setActiveTab(tab) {
+      this.set('activeTab', tab);
+    }
+  }
 });

tests/dummy/app/templates/editable.hbs

@@ -1,22 +1,26 @@
 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="table-1">
-      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#code-snippet" aria-expanded="true" aria-controls="code-snippet">
+      <a role="button" {{action (toggle "collapseCodeSnippet" this)}} href="#code-snippet" aria-expanded="true" aria-controls="code-snippet">
         <h4 class="panel-title">Editable Example <span class="code-icon fa fa-code pull-right"></span></h4>
       </a>
     </div>
-    <div id="code-snippet" class="panel-collapse collapse" role="tabpanel" aria-labelledby="table-1">
+    {{#bs-collapse collapsed=collapseCodeSnippet id="code-snippet" class="panel-collapse" role="tabpanel" aria-labelledby="table-1"}}
       <div class="panel-body code-snippet">
        <ul class="nav nav-tabs" role="tablist">
-         <li role="presentation" class="active"><a href="#component" aria-controls="component" role="tab" data-toggle="tab">component.js</a></li>
-         <li role="presentation"><a href="#template" aria-controls="template" role="tab" data-toggle="tab">template.hbs</a></li>
+         <li role="presentation" class="{{if (eq activeTab 0) 'active'}}">
+           <a {{action "setActiveTab" 0}} href="#component" aria-controls="component" role="tab">component.js</a>
+         </li>
+         <li role="presentation" class="{{if (eq activeTab 1) 'active'}}">
+           <a {{action "setActiveTab" 1}} href="#template" aria-controls="template" role="tab">template.hbs</a>
+         </li>
        </ul>
        <div class="tab-content">
-         <div role="tabpanel" class="tab-pane fade in active" id="component">{{!code-snippet name="editable-table.js"}}</div>
-         <div role="tabpanel" class="tab-pane fade" id="template">{{!code-snippet name="editable-table.hbs"}}</div>
+         <div role="tabpanel" class="tab-pane fade {{if (eq activeTab 0) 'active in'}}" id="component">{{code-snippet name="editable-table.js"}}</div>
+         <div role="tabpanel" class="tab-pane fade {{if (eq activeTab 1) 'active in'}}" id="template">{{code-snippet name="editable-table.hbs"}}</div>
        </div>
       </div>
-    </div>
+    {{/bs-collapse}}
     <div class="panel-body table-container fixed-header">
       {{!-- BEGIN-SNIPPET editable-table --}}
       {{data-table 'user' columns=columns height='50vh'}}

tests/dummy/app/templates/index.hbs

@@ -1,22 +1,26 @@
-<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+<div class="panel-group" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="table-1">
-      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#code-snippet" aria-expanded="true" aria-controls="code-snippet">
+      <a role="button" {{action (toggle "collapseCodeSnippet" this)}} href="#code-snippet" aria-expanded="true" aria-controls="code-snippet">
         <h4 class="panel-title">Simple Example <span class="code-icon fa fa-code pull-right"></span></h4>
       </a>
     </div>
-    <div id="code-snippet" class="panel-collapse collapse" role="tabpanel" aria-labelledby="table-1">
+    {{#bs-collapse collapsed=collapseCodeSnippet id="code-snippet" class="panel-collapse" role="tabpanel" aria-labelledby="table-1"}}
       <div class="panel-body code-snippet">
        <ul class="nav nav-tabs" role="tablist">
-         <li role="presentation" class="active"><a href="#component" aria-controls="component" role="tab" data-toggle="tab">component.js</a></li>
-         <li role="presentation"><a href="#template" aria-controls="template" role="tab" data-toggle="tab">template.hbs</a></li>
+         <li role="presentation" class="{{if (eq activeTab 0) 'active'}}">
+           <a {{action "setActiveTab" 0}} href="#component" aria-controls="component" role="tab">component.js</a>
+         </li>
+         <li role="presentation" class="{{if (eq activeTab 1) 'active'}}">
+           <a {{action "setActiveTab" 1}} href="#template" aria-controls="template" role="tab">template.hbs</a>
+         </li>
        </ul>
        <div class="tab-content">
-         <div role="tabpanel" class="tab-pane fade in active" id="component">{{!code-snippet name="simple-table.js"}}</div>
-         <div role="tabpanel" class="tab-pane fade" id="template">{{!code-snippet name="simple-table.hbs"}}</div>
+         <div role="tabpanel" class="tab-pane fade {{if (eq activeTab 0) 'active in'}}" id="component">{{code-snippet name="simple-table.js"}}</div>
+         <div role="tabpanel" class="tab-pane fade {{if (eq activeTab 1) 'active in'}}" id="template">{{code-snippet name="simple-table.hbs"}}</div>
        </div>
       </div>
-    </div>
+    {{/bs-collapse}}
     <div class="panel-body table-container fixed-header">
       {{!-- BEGIN-SNIPPET simple-table --}}
       {{data-table 'user' columns=columns height='50vh'}}

tests/dummy/snippets/editable-table.js

@@ -0,0 +1,31 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  columns: [
+    {
+      label: 'First Name',
+      valuePath: 'firstName',
+      width: '150px',
+      cellType: 'editable'
+    },
+    {
+      label: 'Last Name',
+      valuePath: 'lastName',
+      width: '150px',
+      cellType: 'editable'
+    },
+    {
+      label: 'Address',
+      valuePath: 'address',
+      cellType: 'editable'
+    },
+    {
+      label: 'State',
+      valuePath: 'state'
+    },
+    {
+      label: 'Country',
+      valuePath: 'country'
+    }
+  ]
+});

tests/dummy/snippets/simple-table.js

@@ -0,0 +1,30 @@
+import Ember from 'ember';
+import CheckboxColumn from 'ember-data-table-light/columns/checkbox';
+
+export default Ember.Component.extend({
+  columns: [
+    CheckboxColumn,
+    {
+      label: 'First Name',
+      valuePath: 'firstName',
+      width: '150px'
+    },
+    {
+      label: 'Last Name',
+      valuePath: 'lastName',
+      width: '150px'
+    },
+    {
+      label: 'Address',
+      valuePath: 'address'
+    },
+    {
+      label: 'State',
+      valuePath: 'state'
+    },
+    {
+      label: 'Country',
+      valuePath: 'country'
+    }
+  ]
+});