Customizable components

addon/components/lt-body.js

@@ -174,6 +174,48 @@ export default Component.extend({
    */
   useVirtualScrollbar: false,
 
+  /**
+   * Allows to customize the component used to render rows
+   * 
+   * ```hbs
+   * {{#light-table table as |t|}}
+   *    {{t.body rowComponent=(component 'my-row')}}
+   * {{/light-table}}
+   * ```
+   * @property rowComponent
+   * @type {Ember.Component}
+   * @default null
+   */
+  rowComponent: null,
+
+  /**
+   * Allows to customize the component used to render spanned rows
+   * 
+   * ```hbs
+   * {{#light-table table as |t|}}
+   *    {{t.body spannedRowComponent=(component 'my-spanned-row')}}
+   * {{/light-table}}
+   * ```
+   * @property rowComponent
+   * @type {Ember.Component}
+   * @default null
+   */
+  spannedRowComponent: null,
+
+  /**
+   * Allows to customize the component used to render infinite loader
+   * 
+   * ```hbs
+   * {{#light-table table as |t|}}
+   *    {{t.body infinityComponent=(component 'my-infinity')}}
+   * {{/light-table}}
+   * ```
+   * @property rowComponent
+   * @type {Ember.Component}
+   * @default null
+   */
+  infinityComponent: null,
+
   rows: computed.readOnly('table.visibleRows'),
   columns: computed.readOnly('table.visibleColumns'),
   colspan: computed.readOnly('columns.length'),

addon/templates/components/light-table.hbs

@@ -1,5 +1,23 @@
 {{yield (hash
-  head=(component 'lt-head' tableId=elementId table=table tableActions=tableActions tableClassNames=tableClassNames sharedOptions=sharedOptions)
-  body=(component 'lt-body' tableId=elementId table=table tableActions=tableActions tableClassNames=tableClassNames sharedOptions=sharedOptions)
-  foot=(component 'lt-foot' tableId=elementId table=table tableActions=tableActions tableClassNames=tableClassNames sharedOptions=sharedOptions)
+  head=(component 'lt-head' 
+    tableId=elementId 
+    table=table 
+    tableActions=tableActions 
+    tableClassNames=tableClassNames 
+    sharedOptions=sharedOptions
+  )
+  body=(component 'lt-body' 
+    tableId=elementId 
+    table=table 
+    tableActions=tableActions 
+    tableClassNames=tableClassNames 
+    sharedOptions=sharedOptions
+  )
+  foot=(component 'lt-foot' 
+    tableId=elementId 
+    table=table 
+    tableActions=tableActions 
+    tableClassNames=tableClassNames 
+    sharedOptions=sharedOptions
+  )
 )}}

addon/templates/components/lt-body.hbs

@@ -1,43 +1,50 @@
-{{#lt-scrollable
-  tagName=''
-  virtualScrollbar=useVirtualScrollbar
-  autoHide=autoHideScrollbar
+{{#with (hash
+    row=(or rowComponent (component 'lt-row'))
+    spanned-row=(or spannedRowComponent (component 'lt-spanned-row'))
+    infinity=(or infinityComponent (component 'lt-infinity'))
+  ) as |lt|
 }}
-  <div id={{concat tableId '_inline_head'}} class="lt-inline lt-head"></div>
+  {{#lt-scrollable
+    tagName=''
+    virtualScrollbar=useVirtualScrollbar
+    autoHide=autoHideScrollbar
+  }}
+    <div id={{concat tableId '_inline_head'}} class="lt-inline lt-head"></div>
 
-  <table class={{tableClassNames}}>
-    <tbody class="lt-body">
-      {{#if overwrite}}
-        {{yield columns rows}}
-      {{else}}
-        {{#each rows as |row|}}
-          {{lt-row row columns
-            table=table
-            tableActions=tableActions
-            canExpand=canExpand
-            canSelect=canSelect
-            click=(action 'onRowClick' row)
-            doubleClick=(action 'onRowDoubleClick' row)}}
+    <table class={{tableClassNames}}>
+      <tbody class="lt-body">
+        {{#if overwrite}}
+          {{yield columns rows}}
+        {{else}}
+          {{#each rows as |row|}}
+            {{lt.row row columns
+              table=table
+              tableActions=tableActions
+              canExpand=canExpand
+              canSelect=canSelect
+              click=(action 'onRowClick' row)
+              doubleClick=(action 'onRowDoubleClick' row)}}
+
+            {{yield (hash
+              expanded-row=(component lt.spanned-row classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded)
+              loader=(component lt.spanned-row visible=false)
+              no-data=(component lt.spanned-row visible=false)
+            ) rows}}
+          {{/each}}
 
           {{yield (hash
-            expanded-row=(component 'lt-spanned-row' classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded)
-            loader=(component 'lt-spanned-row' visible=false)
-            no-data=(component 'lt-spanned-row' visible=false)
+            loader=(component lt.spanned-row classes='lt-is-loading' colspan=colspan)
+            no-data=(component lt.spanned-row classes='lt-no-data' colspan=colspan)
+            expanded-row=(component lt.spanned-row visible=false)
           ) rows}}
-        {{/each}}
-
-        {{yield (hash
-          loader=(component 'lt-spanned-row' classes='lt-is-loading' colspan=colspan)
-          no-data=(component 'lt-spanned-row' classes='lt-no-data' colspan=colspan)
-          expanded-row=(component 'lt-spanned-row' visible=false)
-        ) rows}}
-      {{/if}}
-    </tbody>
-  </table>
+        {{/if}}
+      </tbody>
+    </table>
 
-  {{#if onScrolledToBottom}}
-    {{lt-infinity rows=rows onScrolledToBottom=onScrolledToBottom scrollBuffer=scrollBuffer}}
-  {{/if}}
+    {{#if onScrolledToBottom}}
+      {{lt.infinity rows=rows onScrolledToBottom=onScrolledToBottom scrollBuffer=scrollBuffer}}
+    {{/if}}
 
-  <div id={{concat tableId '_inline_foot'}} class="lt-inline lt-foot"></div>
-{{/lt-scrollable}}
+    <div id={{concat tableId '_inline_foot'}} class="lt-inline lt-foot"></div>
+  {{/lt-scrollable}}
+{{/with}}

bower.json

@@ -10,10 +10,10 @@
     "jquery": "2.2.4"
   },
   "resolutions": {
-    "ember": "2.3.1"
+    "ember": "2.3.1",
+    "jquery": "2.2.4"
   },
   "devDependencies": {
-    "blanket": "5e94fc30f2e694bb5c3718ddcbf60d467f4b4d26",
     "ember-qunit-notifications": "0.1.0"
   }
 }

package.json

@@ -27,7 +27,6 @@
     "ember-cli": "^2.8.0",
     "ember-cli-app-version": "^2.0.0",
     "ember-cli-autoprefixer": "0.6.0",
-    "ember-cli-blanket": "0.9.9",
     "ember-cli-changelog": "0.3.4",
     "ember-cli-dependency-checker": "^1.2.0",
     "ember-cli-es5-shim": "0.3.0",
@@ -50,6 +49,7 @@
     "ember-font-awesome": "2.2.0",
     "ember-load-initializers": "^0.5.1",
     "ember-lodash": "0.0.10",
+    "ember-owner-test-utils": "0.1.1",
     "ember-resolver": "^2.0.3",
     "ember-truth-helpers": "1.2.0",
     "loader.js": "^4.0.1",

tests/index.html

@@ -13,7 +13,6 @@
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link rel="stylesheet" href="{{rootURL}}assets/dummy.css">
     <link rel="stylesheet" href="{{rootURL}}assets/test-support.css">
-    <style>#blanket-main { position: relative; z-index: 99999; }</style>
 
     {{content-for "head-footer"}}
     {{content-for "test-head-footer"}}
@@ -26,10 +25,7 @@
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/test-support.js"></script>
     <script src="{{rootURL}}assets/dummy.js"></script>
-    <script src="{{rootURL}}assets/blanket-options.js"></script>
-    <script src="{{rootURL}}assets/blanket-loader.js"></script>
     <script src="{{rootURL}}assets/tests.js"></script>
-    <script src="{{rootURL}}assets/test-loader.js"></script>
 
     {{content-for "body-footer"}}
     {{content-for "test-body-footer"}}