refactor(argument): Update to use @argument

Refactors to use @argument, @type, and other new decorators. Cleans up
some unused code as well.

addon/components/ember-table-base-cell.js

@@ -3,15 +3,40 @@ import { addObserver, removeObserver } from '@ember/object/observers';
 import { htmlSafe } from '@ember/string';
 import { action, computed } from 'ember-decorators/object';
 import { get } from '@ember/object';
-import { property } from '../utils/class';
 import { scheduler, Token } from 'ember-raf-scheduler';
 
+import { tagName, attribute } from 'ember-decorators/component';
+import { argument } from '@ember-decorators/argument';
+import { type, optional } from '@ember-decorators/argument/type';
+
+@tagName('td')
 export default class EmberTableCell extends Component {
-  @property tagName = 'td';
-  @property attributeBindings = ['style:style'];
+  @argument
+  @type('any')
+  rowValue;
+
+  @argument
+  @type(optional('number'))
+  rowIndex;
+
+  @argument
+  @type('object')
+  column;
+
+  @argument
+  @type(optional('number'))
+  columnIndex;
 
-  init() {
-    super.init(...arguments);
+  @argument
+  @type(optional('number'))
+  numFixedColumns = 0;
+
+  @argument
+  @type(optional('object'))
+  cell;
+
+  constructor() {
+    super(...arguments);
 
     this.token = new Token();
   }
@@ -48,8 +73,9 @@ export default class EmberTableCell extends Component {
   @computed('columnIndex', 'numFixedColumns')
   get isFixed() {
     let numFixedColumns = this.get('numFixedColumns');
-    return this.get('columnIndex') === 0 && Number.isInteger(numFixedColumns)
-    && numFixedColumns !== 0;
+    return this.get('columnIndex') === 0
+      && Number.isInteger(numFixedColumns)
+      && numFixedColumns !== 0;
   }
 
   @computed('row', 'column.valuePath')
@@ -60,15 +86,20 @@ export default class EmberTableCell extends Component {
     return get(row, valuePath);
   }
 
+  @attribute
   @computed('column.width')
   get style() {
-    return htmlSafe(`width: ${this.get('column.width')}px; min-width: ${this.get('column.width')}px;`);
+    let width = this.get('column.width');
+
+    return htmlSafe(`width: ${width}px; min-width: ${width}px;`);
   }
 
   @computed('column.width', 'cellHeight')
   get fixedCellStyle() {
-    return htmlSafe(`width: ${this.get('column.width')}px; min-width: ${this.get('column.width')}px; \
-height: ${this.get('cellHeight')}px;`);
+    let width = this.get('column.width');
+    let height = this.get('cellHeight');
+
+    return htmlSafe(`width: ${width}px; min-width: ${width}px; height: ${height}px;`);
   }
 
   @action

addon/components/ember-table-cell.js

@@ -1,9 +1,15 @@
 import EmberTableBaseCell from './ember-table-base-cell';
-import { property } from '../utils/class';
+import { readOnly } from 'ember-decorators/object';
+import { alias } from 'ember-decorators/object/computed';
+import { className } from 'ember-decorators/component';
 
 import layout from '../templates/components/ember-table-cell';
 
 export default class EmberTableCell extends EmberTableBaseCell {
-  @property layout = layout;
-  @property classNameBindings = ['isFixed::et-td'];
+  layout = layout;
+
+  // We have to alias because the class name changes per base cell type
+  @className('', 'et-td')
+  @readOnly @alias('isFixed') _isFixed;
+
 }

addon/components/ember-table-footer.js

@@ -1,13 +1,25 @@
 import EmberTableBaseCell from './ember-table-base-cell';
-import { property } from '../utils/class';
-import { action, computed } from 'ember-decorators/object';
 import { get } from '@ember/object';
 
+import { action, computed, readOnly } from 'ember-decorators/object';
+import { alias } from 'ember-decorators/object/computed';
+import { className } from 'ember-decorators/component';
+import { argument } from '@ember-decorators/argument';
+import { type } from '@ember-decorators/argument/type';
+import { Action } from '@ember-decorators/argument/types';
+
 import layout from '../templates/components/ember-table-footer';
 
 export default class EmberTableFooter extends EmberTableBaseCell {
-  @property layout = layout;
-  @property classNameBindings = ['isFixed::et-tf'];
+  layout = layout;
+
+  // We have to alias because the class name changes per base cell type
+  @className('', 'et-tf')
+  @readOnly @alias('isFixed') _isFixed;
+
+  @argument
+  @type(Action)
+  onFooterEvent;
 
   @computed('column.valuePath', 'rowValue')
   get footerValue() {

addon/components/ember-table-header.js

@@ -1,8 +1,14 @@
 /* global Hammer */
 import EmberTableBaseCell from './ember-table-base-cell';
 
-import { property } from '../utils/class';
-import { action, computed } from 'ember-decorators/object';
+import { action, computed, readOnly } from 'ember-decorators/object';
+import { alias } from 'ember-decorators/object/computed';
+import { attribute, tagName, className } from 'ember-decorators/component';
+import { argument } from '@ember-decorators/argument';
+import { required } from '@ember-decorators/argument/validation';
+import { type } from '@ember-decorators/argument/type';
+import { Action } from '@ember-decorators/argument/types';
+
 import { isNone } from '@ember/utils';
 import { get } from '@ember/object';
 
@@ -13,30 +19,78 @@ const COLUMN_STATIC = 0;
 const COLUMN_RESIZE = 1;
 const COLUMN_REORDERING = 2;
 
+@tagName('th')
 export default class EmberTableHeader extends EmberTableBaseCell {
-  @property layout = layout;
-  @property tagName = 'th';
-  @property classNameBindings = ['isFixed::et-th'];
-  @property attributeBindings = ['style:style', 'rowSpan:rowspan', 'columnSpan:colspan'];
+  layout = layout;
+
+  // We have to alias because the class name changes per base cell type
+  @className('', 'et-th')
+  @readOnly @alias('isFixed') _isFixed;
+
+  @argument
+  @required
+  @type(Object)
+  column;
+
+  @argument
+  @required
+  @type('number')
+  columnIndex;
+
+  @argument
+  @required
+  @type('number')
+  width;
+
+  @argument
+  @type('boolean')
+  tableHasSubcolumns = false;
+
+  @argument
+  @type('number')
+  fixedColumnWidth = 0;
+
+  @argument
+  @type(Action)
+  onColumnResized;
+
+  @argument
+  @type(Action)
+  onColumnResizeEnded;
+
+  @argument
+  @type(Action)
+  onColumnReorder;
 
-  @property fixedColumnWidth = 0;
+  @argument
+  @type(Action)
+  onColumnReorderEnded;
+
+  @argument
+  @type(Action)
+  onHeaderEvent;
 
   /**
    * X position where user first touches on the header.
    */
-  @property _firstTouchX = -1;
+  _firstTouchX = -1;
 
   /**
    * X position where user last touches this component.
    */
-  @property _touchX = -1;
+  _touchX = -1;
 
   /**
    * A variable used for column resizing & ordering. When user press mouse at a point that's close
    * to column boundary (using some threshold), this variable set whether it's the left or right
    * column.
    */
-  @property _columnState = COLUMN_STATIC;
+  _columnState = COLUMN_STATIC;
+
+  /**
+   * An object that listens to touch/ press/ drag events.
+   */
+  _hammer = null;
 
   /**
    * Indicates if this column can be reordered or not. It's false by default.
@@ -51,6 +105,7 @@ export default class EmberTableHeader extends EmberTableBaseCell {
     return this.get('column.isReorderable') && !this.get('isFixed');
   }
 
+  @attribute
   @computed('column.subcolumns.length')
   get columnSpan() {
     let subcolumnsLength = get(this, 'column.subcolumns.length');
@@ -61,6 +116,7 @@ export default class EmberTableHeader extends EmberTableBaseCell {
     return subcolumnsLength;
   }
 
+  @attribute
   @computed('tableHasSubcolumns', 'column.subcolumns.length')
   get rowSpan() {
     if (this.get('tableHasSubcolumns') !== true) {
@@ -75,11 +131,6 @@ export default class EmberTableHeader extends EmberTableBaseCell {
     return 1;
   }
 
-  /**
-   * An object that listens to touch/ press/ drag events.
-   */
-  @property _hammer = null;
-
   didInsertElement() {
     super.didInsertElement(...arguments);
 

addon/components/ember-table-row.js

@@ -1,48 +1,53 @@
-import { get } from '@ember/object';
+import { get, set } from '@ember/object';
 import Component from '@ember/component';
-import { computed } from 'ember-decorators/object';
-import { classNames } from 'ember-decorators/component';
-import { property } from '../utils/class';
+import { computed, readOnly } from 'ember-decorators/object';
+import { alias } from 'ember-decorators/object/computed';
+import { attribute, className, classNames, tagName } from 'ember-decorators/component';
+
+import { argument } from '@ember-decorators/argument';
+import { required } from '@ember-decorators/argument/validation';
+import { type } from '@ember-decorators/argument/type';
 
 import layout from '../templates/components/ember-table-row';
 import { A as emberA } from '@ember/array';
-import { readOnly } from '@ember/object/computed';
 import { isNone } from '@ember/utils';
 
+@tagName('tr')
 @classNames('et-tr')
 export default class EmberTableRow extends Component {
-  @property layout = layout;
-  @property tagName = 'tr';
-
-  @property _cells = null;
-  @property classNameBindings = ['isSelected'];
-  @property attributeBindings = ['style:style'];
+  layout = layout;
 
   /**
    * Component that for table cell. This outer cell is a <td> component that wraps outside the
    * rendered cell view.
    */
-  @property _outerCellComponent = 'ember-table-cell';
-  @property _cells = null;
+  _outerCellComponent = 'ember-table-cell';
+  _cells = null;
 
-  @property selected = false;
+  @argument
+  @required
+  @type('object')
+  row;
 
-  @property columns = readOnly('row.api.columns');
-  @property cellProxyClass = readOnly('row.api.cellProxyClass');
-  @property cellCache = readOnly('row.api.cellCache');
-  @property numFixedColumns = readOnly('row.api.numFixedColumns');
-  @property selectedRows = readOnly('row.api.selectedRows');
+  @readOnly @alias('row.api.columns') columns;
+  @readOnly @alias('row.api.cellProxyClass') cellProxyClass;
+  @readOnly @alias('row.api.cellCache') cellCache;
+  @readOnly @alias('row.api.numFixedColumns') numFixedColumns;
+  @readOnly @alias('row.api.selectedRows') selectedRows;
 
-  @property rowValue = readOnly('row.value');
-  @property rowIndex = readOnly('row.index');
+  @readOnly @alias('row.value') rowValue;
+  @readOnly @alias('row.index') rowIndex;
+
+  constructor() {
+    super(...arguments);
 
-  init() {
-    super.init(...arguments);
     this._cells = emberA();
   }
 
   @computed('columns.[]')
   get cells() {
+    let CellProxyClass = this.get('cellProxyClass');
+
     let _rowComponent = this;
     let _cache = this.get('cellCache');
     let columns = this.get('columns');
@@ -52,7 +57,7 @@ export default class EmberTableRow extends Component {
 
     if (numColumns !== _cells.length) {
       while (_cells.length < numColumns) {
-        _cells.push(this.get('cellProxyClass').create({ _cache, _rowComponent }));
+        _cells.push(CellProxyClass.create({ _cache, _rowComponent }));
       }
 
       while (_cells.length > numColumns) {
@@ -64,20 +69,22 @@ export default class EmberTableRow extends Component {
       let cell = _cells[i];
       let column = columns.objectAt !== undefined ? columns.objectAt(i) : columns[i];
 
-      cell.set('column', column);
-      cell.set('columnIndex', i);
-      cell.set('row', this.get('row'));
-      cell.set('targetTable', this.get('row.api.targetObject'));
+      set(cell, 'column', column);
+      set(cell, 'columnIndex', i);
+      set(cell, 'row', this.get('row'));
+      set(cell, 'targetTable', this.get('row.api.targetObject'));
     }
 
     return _cells;
   }
 
+  @className
   @computed('selectedRows.[]', 'rowValue')
   get isSelected() {
     return this.get('selectedRows').indexOf(this.get('rowValue')) >= 0;
   }
 
+  @attribute
   @computed('row.api.staticRowHeight')
   get style() {
     let staticRowHeight = this.get('row.api.staticRowHeight');