Lots of fixes (about damn time!) (#163)

addon/components/cells/base.js

@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import layout from 'ember-light-table/templates/components/cells/base';
+import cssStyleify from 'ember-light-table/utils/css-styleify';
 
 const {
   Component,
@@ -20,16 +21,25 @@ const Cell = Component.extend({
   layout,
   tagName: 'td',
   classNames: ['lt-cell'],
-  attributeBindings: ['width'],
+  attributeBindings: ['style'],
   classNameBindings: ['align', 'isSorted', 'column.cellClassNames'],
 
-  width: computed.readOnly('column.width'),
   isSorted: computed.readOnly('column.sorted'),
 
+  style: computed('column.width', function() {
+    return cssStyleify(this.get('column').getProperties(['width']));
+  }),
+
   align: computed('column.align', function() {
     return `align-${this.get('column.align')}`;
   }).readOnly(),
 
+  /**
+   * @property table
+   * @type {Table}
+   */
+  table: null,
+
   /**
    * @property column
    * @type {Column}
@@ -65,7 +75,7 @@ const Cell = Component.extend({
       return format.call(this, rawValue);
     }
     return rawValue;
-  }).readOnly()
+  })
 });
 
 Cell.reopenClass({

addon/components/columns/base.js

@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import layout from 'ember-light-table/templates/components/columns/base';
+import cssStyleify from 'ember-light-table/utils/css-styleify';
 
 const {
   Component,
@@ -21,20 +22,29 @@ const Column = Component.extend({
   layout,
   tagName: 'th',
   classNames: ['lt-column'],
-  attributeBindings: ['width', 'colspan', 'rowspan'],
+  attributeBindings: ['style', 'colspan', 'rowspan'],
   classNameBindings: ['align', 'isGroupColumn:lt-group-column', 'isHideable', 'isSortable', 'isSorted', 'isResizable', 'column.classNames'],
 
-  width: computed.readOnly('column.width'),
   isGroupColumn: computed.readOnly('column.isGroupColumn'),
   isSortable: computed.readOnly('column.sortable'),
   isSorted: computed.readOnly('column.sorted'),
   isHideable: computed.readOnly('column.hideable'),
   isResizable: computed.readOnly('column.resizable'),
 
+  style: computed('column.width', function() {
+    return cssStyleify(this.get('column').getProperties(['width']));
+  }),
+
   align: computed('column.align', function () {
     return `align-${this.get('column.align')}`;
   }).readOnly(),
 
+  /**
+   * @property table
+   * @type {Table}
+   */
+  table: null,
+
   /**
    * @property column
    * @type {Column}

addon/components/light-table.js

@@ -1,12 +1,12 @@
 import Ember from 'ember';
 import layout from 'ember-light-table/templates/components/light-table';
 import Table from 'ember-light-table/classes/Table';
+import cssStyleify from 'ember-light-table/utils/css-styleify';
 
 const {
   assert,
   Component,
-  computed,
-  String:{htmlSafe}
+  computed
 } = Ember;
 
 /**
@@ -102,10 +102,7 @@ const LightTable = Component.extend({
   }).readOnly(),
 
   style: computed('height', function () {
-    let height = this.get('height');
-    if (height) {
-      return htmlSafe(`height:${this.get('height')};`);
-    }
+    return cssStyleify(this.getProperties(['height']));
   }),
 
   init() {

addon/components/lt-column-resizer.js

@@ -9,8 +9,8 @@ export default Ember.Component.extend({
   layout,
   classNameBindings: [':lt-column-resizer', 'isResizing'],
   column: null,
-  isResizing: false,
 
+  isResizing: false,
   startWidth: null,
   startX: null,
 
@@ -31,8 +31,16 @@ export default Ember.Component.extend({
     $(document).off('mouseup', this.__mouseUp);
   },
 
+  click(e) {
+    /*
+      Prevent click events from propagating (i.e. onColumnClick)
+     */
+    e.preventDefault();
+    e.stopPropagation();
+  },
+
   mouseDown(e) {
-    const $column = $(this.get('element')).parent('th');
+    const $column = this._getColumn();
 
     e.preventDefault();
     e.stopPropagation();
@@ -49,7 +57,10 @@ export default Ember.Component.extend({
       e.preventDefault();
       e.stopPropagation();
 
+      const $column = this._getColumn();
+
       this.set('isResizing', false);
+      this.set('column.width', `${$column.width()}px`);
       this.sendAction('columnResized', this.get('column.width'));
     }
   },
@@ -59,10 +70,15 @@ export default Ember.Component.extend({
       e.preventDefault();
       e.stopPropagation();
 
+      const $column = this._getColumn();
       const { startX, startWidth } = this.getProperties(['startX', 'startWidth']);
       const width = startWidth + (e.pageX - startX);
 
-      this.set('column.width', `${width}px`);
+      $column.width(`${width}px`);
     }
+  },
+
+  _getColumn() {
+    return $(this.get('element')).parent('th');
   }
 });

addon/styles/addon.css

@@ -1,8 +1,13 @@
 .ember-light-table {
   height: inherit;
   overflow: auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 
 .ember-light-table table {
@@ -29,13 +34,22 @@
 
 .ember-light-table .lt-head-wrap,
 .ember-light-table .lt-foot-wrap {
-  flex: 0 1 auto;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto;
 }
 
 .ember-light-table .lt-body-wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
 }
 
 .ember-light-table .lt-column {
@@ -44,7 +58,9 @@
 
 .ember-light-table .lt-scrollable {
   width: 100%;
-  flex: 1 0 auto;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
 }
 
 .ember-light-table .align-left {
@@ -65,7 +81,10 @@
 
 .ember-light-table .lt-column.is-sortable {
   cursor: pointer;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .ember-light-table .lt-column .lt-column-resizer {

addon/templates/components/cells/base.hbs

@@ -1,5 +1,5 @@
 {{#if column.cellComponent}}
-  {{component column.cellComponent tableActions=tableActions column=column row=row value=value}}
+  {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value rawValue=rawValue}}
 {{else}}
   {{value}}
 {{/if}}

addon/templates/components/lt-body.hbs

@@ -12,6 +12,7 @@
       {{else}}
         {{#each rows as |row|}}
           {{lt-row row columns
+            table=table
             tableActions=tableActions
             canExpand=canExpand
             canSelect=canSelect

addon/templates/components/lt-row.hbs

@@ -1,5 +1,6 @@
 {{#each columns as |column|}}
   {{component (concat 'light-table/cells/' column.cellType) column row
+    table=table
     rawValue=(get row column.valuePath)
     tableActions=tableActions}}
 {{/each}}

addon/utils/css-styleify.js

@@ -0,0 +1,20 @@
+import Ember from 'ember';
+
+const {
+  isPresent,
+  String: { dasherize, htmlSafe }
+} = Ember;
+
+export default function cssStyleify(hash = {}) {
+  let styles = [];
+
+  Object.keys(hash).forEach(key => {
+    let value = hash[key];
+
+    if(isPresent(value)) {
+      styles.push(`${dasherize(key)}: ${value}`);
+    }
+  });
+
+  return htmlSafe(styles.join('; '));
+}

ember-cli-build.js

@@ -4,8 +4,12 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   var app = new EmberAddon(defaults, {
-    snippetSearchPaths: ['addon','tests/dummy/app'],
-    snippetPaths: ['snippets','tests/dummy/snippets']
+    snippetSearchPaths: ['addon', 'tests/dummy/app'],
+    snippetPaths: ['snippets', 'tests/dummy/snippets'],
+    autoprefixer: {
+      browsers: ['last 2 versions'],
+      cascade: false
+    }
   });
 
   return app.toTree();

package.json

@@ -26,6 +26,7 @@
     "ember-ajax": "2.5.1",
     "ember-cli": "2.6.3",
     "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",

tests/integration/components/light-table/cells/base-test.js

@@ -1,14 +1,15 @@
 import Ember from 'ember';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import { Row, Column} from 'ember-light-table';
+import { Row, Column } from 'ember-light-table';
 
 moduleForComponent('light-table/cells/base', 'Integration | Component | Cells | base', {
   integration: true
 });
 
 test('it renders', function(assert) {
-  this.render(hbs`{{light-table/cells/base}}`);
+  this.set('column', new Column());
+  this.render(hbs`{{light-table/cells/base column=column}}`);
 
   assert.equal(this.$().text().trim(), '');
 });

tests/integration/components/light-table/columns/base-test.js

@@ -1,5 +1,6 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { Column } from 'ember-light-table';
 
 moduleForComponent('light-table/columns/base', 'Integration | Component | Columns | base', {
   integration: true
@@ -8,7 +9,7 @@ moduleForComponent('light-table/columns/base', 'Integration | Component | Column
 test('it renders', function(assert) {
   // Set any properties with this.set('myProperty', 'value');
   // Handle any actions with this.on('myAction', function(val) { ... });"
-
-  this.render(hbs`{{light-table/columns/base}}`);
+  this.set('column', new Column());
+  this.render(hbs`{{light-table/columns/base column=column}}`);
   assert.equal(this.$().text().trim(), '');
 });