Addon native classes

.eslintrc.js

@@ -33,8 +33,8 @@ module.exports = {
     'ember/no-observers': 'off',
     'ember/no-jquery': 'error',
     'ember/no-get': 'warn',
-    'ember/no-mixins': 'off',
-    'ember/no-new-mixins': 'off',
+    'ember/no-mixins': 'error',
+    'ember/no-new-mixins': 'error',
     'ember/require-tagless-components': 'off',
   },
 

addon/classes/Column.js

@@ -278,9 +278,9 @@ export default class Column extends EmberObject.extend({
    * @type {String}
    * @private
    */
-  columnId: computed(function () {
+  get columnId() {
     return guidFor(this);
-  }).readOnly(),
+  },
 
   /**
    * True if `hidden` or `responsiveHidden` is true.

addon/classes/Row.js

@@ -1,5 +1,4 @@
 import ObjectProxy from '@ember/object/proxy';
-import { computed } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import classic from 'ember-classic-decorator';
 
@@ -75,7 +74,7 @@ export default class Row extends ObjectProxy.extend({
    * @type {String}
    * @readOnly
    */
-  rowId: computed(function () {
+  get rowId() {
     return guidFor(this);
-  }).readOnly(),
+  },
 }) {}

addon/components/cells/base.js

@@ -1,6 +1,12 @@
-import Component from '@ember/component';
+import classic from 'ember-classic-decorator';
+import {
+  classNames,
+  attributeBindings,
+  classNameBindings,
+  tagName,
+} from '@ember-decorators/component';
 import { computed } from '@ember/object';
-import { readOnly } from '@ember/object/computed';
+import Component from '@ember/component';
 import { htmlSafe } from '@ember/template';
 
 /**
@@ -13,82 +19,87 @@ import { htmlSafe } from '@ember/template';
  * @class Base Cell
  */
 
-export default Component.extend({
-  tagName: 'td',
-  classNames: ['lt-cell'],
-  attributeBindings: ['style'],
-  classNameBindings: ['align', 'isSorted', 'column.cellClassNames'],
-
-  enableScaffolding: false,
+@classic
+@tagName('td')
+@classNames('lt-cell')
+@attributeBindings('style')
+@classNameBindings('align', 'isSorted', 'column.cellClassNames')
+export default class Base extends Component {
+  enableScaffolding = false;
 
-  isSorted: readOnly('column.sorted'),
+  get isSorted() {
+    return this.column.isSorted;
+  }
 
-  style: computed('enableScaffolding', 'column.width', function () {
+  @computed('enableScaffolding', 'column.width')
+  get style() {
     let column = this.column;
     let columnWidth = column.get('width');
 
     if (this.enableScaffolding || !column) {
-      return;
+      return undefined;
     }
 
     // For performance reasons, it's more interesting to bypass cssStyleify
     // since it leads to a lot of garbage collections
     // when displaying many cells
     return columnWidth ? htmlSafe(`width: ${columnWidth};`) : null;
-  }),
+  }
 
-  align: computed('column.align', function () {
+  @computed('column.align')
+  get align() {
     return `align-${this.column.align}`;
-  }),
+  }
 
   /**
    * @property table
    * @type {Table}
    */
-  table: null,
+  table = null;
 
   /**
    * @property column
    * @type {Column}
    */
-  column: null,
+  column = null;
 
   /**
    * @property row
    * @type {Row}
    */
-  row: null,
+  row = null;
 
   /**
    * @property tableActions
    * @type {Object}
    */
-  tableActions: null,
+  tableActions = null;
 
   /**
    * @property extra
    * @type {Object}
    */
-  extra: null,
+  extra = null;
 
   /**
    * @property rawValue
    * @type {Mixed}
    */
-  rawValue: null,
+  rawValue = null;
 
   /**
    * @property value
    * @type {Mixed}
    */
-  value: computed('column.format', 'rawValue', function () {
-    let rawValue = this.rawValue;
-    let format = this.column.format;
+  @computed('column.format', 'rawValue')
+  get value() {
+    const rawValue = this.rawValue;
+    const format = this.column.format;
 
     if (format && typeof format === 'function') {
       return format.call(this, rawValue);
     }
 
     return rawValue;
-  }),
-});
+  }
+}

addon/components/columns/base.hbs

@@ -26,6 +26,6 @@
     @table={{this.table}}
     @resizeOnDrag={{this.resizeOnDrag}}
     @isResizing={{mut this.isResizing}}
-    @onColumnResized={{action this.onColumnResized this.column}}
+    @onColumnResized={{fn this.columnResized this.column}}
   />
 {{/if}}

addon/components/columns/base.js

@@ -1,11 +1,18 @@
+import DraggableColumn from '../draggable-column';
+import classic from 'ember-classic-decorator';
+import {
+  classNames,
+  attributeBindings,
+  classNameBindings,
+  tagName,
+} from '@ember-decorators/component';
 import { set } from '@ember/object';
-import Component from '@ember/component';
 import { computed } from '@ember/object';
-import { oneWay, readOnly } from '@ember/object/computed';
 import { isEmpty } from '@ember/utils';
-import DraggableColumnMixin from 'ember-light-table/mixins/draggable-column';
 import cssStyleify from 'ember-light-table/utils/css-styleify';
 
+import { readOnly } from '@ember/object/computed';
+
 /**
  * @module Light Table
  * @submodule Column Types
@@ -16,80 +23,108 @@ import cssStyleify from 'ember-light-table/utils/css-styleify';
  * @class Base Column
  */
 
-export default Component.extend(DraggableColumnMixin, {
-  tagName: 'th',
-  classNames: ['lt-column'],
-  attributeBindings: ['style', 'colspan', 'rowspan'],
-  classNameBindings: [
-    'align',
-    'isGroupColumn:lt-group-column',
-    'isHideable',
-    'isSortable',
-    'isSorted',
-    'isResizable',
-    'isResizing',
-    'isDraggable',
-    'column.classNames',
-  ],
-
-  isGroupColumn: readOnly('column.isGroupColumn'),
-  isSortable: readOnly('column.sortable'),
-  isSorted: readOnly('column.sorted'),
-  isHideable: readOnly('column.hideable'),
-  isResizable: readOnly('column.resizable'),
-  isDraggable: readOnly('column.draggable'),
-  isResizing: false,
-
-  style: computed('column.width', function () {
+@classic
+@tagName('th')
+@classNames('lt-column')
+@attributeBindings('style', 'colspan', 'rowspan')
+@classNameBindings(
+  'align',
+  'isGroupColumn:lt-group-column',
+  'isHideable',
+  'isSortable',
+  'isSorted',
+  'isResizable',
+  'isResizing',
+  'isDraggable',
+  'column.classNames'
+)
+export default class Base extends DraggableColumn {
+  @computed('column.isGroupColumn')
+  get isGroupColumn() {
+    return this.column.isGroupColumn;
+  }
+
+  @readOnly('column.sortable')
+  get isSortable() {
+    return this.column.sortable;
+  }
+
+  @computed('column.sorted')
+  get isSorted() {
+    return this.column.sorted;
+  }
+
+  @computed('column.hideable')
+  get isHideable() {
+    return this.column.hideable;
+  }
+
+  @computed('column.resizable')
+  get isResizable() {
+    return this.column.resizable;
+  }
+
+  @computed('column.draggable')
+  get isDraggable() {
+    return this.column.draggable;
+  }
+
+  isResizing = false;
+
+  get style() {
     return cssStyleify(this.column.getProperties(['width']));
-  }),
+  }
 
-  align: computed('column.align', function () {
+  @computed('column.align')
+  get align() {
     return `align-${this.column.align}`;
-  }),
+  }
 
   /**
    * @property label
    * @type {String}
    */
-  label: oneWay('column.label'),
+  @computed('column.label')
+  get label() {
+    return this.column.label;
+  }
 
   /**
    * @property table
    * @type {Table}
    */
-  table: null,
+  table = null;
 
   /**
    * @property column
    * @type {Column}
    */
-  column: null,
+  column = null;
 
   /**
    * @property tableActions
    * @type {Object}
    */
-  tableActions: null,
+  tableActions = null;
 
   /**
    * @property extra
    * @type {Object}
    */
-  extra: null,
+  extra = null;
 
   /**
    * @property sortIcons
    * @type {Object}
    */
-  sortIcons: null,
+  sortIcons = null;
 
   /**
    * @property sortIconProperty
    * @type {String|null}
    * @private
    */
-  sortIconProperty: computed('column.{sortable,sorted,ascending}', function () {
+  @computed('column.{sortable,sorted,ascending}', function () {
     let sorted = this.column.sorted;
 
     if (sorted) {
@@ -99,22 +134,26 @@ export default Component.extend(DraggableColumnMixin, {
 
     let sortable = this.column.sortable;
     return sortable ? 'iconSortable' : null;
-  }),
+  })
+  sortIconProperty;
 
   /**
    * @property colspan
    * @type {Number}
    */
-  colspan: computed('column', 'column.visibleSubColumns.[]', function () {
-    let subColumns = this.column.visibleSubColumns;
-    return !isEmpty(subColumns) ? subColumns.length : 1;
-  }),
+  @computed('column', 'column.visibleSubColumns.[]', {
+    get() {
+      let subColumns = this.column.visibleSubColumns;
+      return !isEmpty(subColumns) ? subColumns.length : 1;
+    },
+  })
+  colspan;
 
   /**
    * @property rowspan
    * @type {Number}
    */
-  rowspan: computed('_rowspan', 'column.visibleSubColumns.[]', {
+  @computed('_rowspan', 'column.visibleSubColumns.[]', {
     get() {
       if (this._rowspan) {
         return this._rowspan;
@@ -127,5 +166,6 @@ export default Component.extend(DraggableColumnMixin, {
     set(key, value) {
       return set(this, '_rowspan', value);
     },
-  }),
-});
+  })
+  rowspan;
+}