Converted Body, TBody, Tbody/Row and Tbody/Row/Cell to glimmer

CHANGELOG.md

@@ -1,3 +1,13 @@
+# v
+
+#### 🚨 Breaking Changes
+
+- cells no longer support the ability to specify `visible` on the cells themselves. Please set `visible` on the column
+
+#### ✨ Features
+
+- Converted components to user glimmer syntax [#345](https://github.com/miguelcobain/ember-yeti-table/pull/345) [#351](https://github.com/miguelcobain/ember-yeti-table/pull/351)
+
 # v1.7.0
 
 #### ✨ Features

addon/components/yeti-table/body.hbs

@@ -3,7 +3,7 @@
 
     {{#each @data as |rowData index|}}
       {{yield
-        (hash row=(component "ember-yeti-table@yeti-table/tbody/row" theme=@theme onClick=this.onRowClick columns=@columns))
+        (hash row=(component "ember-yeti-table@yeti-table/tbody/row" theme=@theme onClick=@onRowClick columns=@columns))
         rowData
         index}}
     {{/each}}
@@ -13,7 +13,7 @@
     {{#each @data as |rowData|}}
       <EmberYetiTable@YetiTable::Tbody::Row
         @theme={{@theme}}
-        @onClick={{if this.onRowClick (fn this.handleRowClick rowData)}} @columns={{@columns}} as |row|>
+        @onClick={{if @onRowClick (fn this.handleRowClick rowData)}} @columns={{@columns}} as |row|>
 
           {{#each @columns as |column|}}
             <row.cell @class={{column.columnClass}}>

addon/components/yeti-table/body.js

@@ -1,7 +1,7 @@
-import { tagName } from '@ember-decorators/component';
-import Component from '@ember/component';
 import { action } from '@ember/object';
 
+import Component from '@glimmer/component';
+
 /**
   Renders a `<tbody>` element and yields the row component, row data and index.
   ```hbs
@@ -31,24 +31,17 @@ import { action } from '@ember/object';
   @yield {Object} rowData - one item in the data array
   @yield {number} index
 */
-@tagName('')
 class Body extends Component {
-  theme;
-
-  data;
-
-  columns;
-
-  parent;
   /**
    * Adds a click action to each row, called with the clicked row's data as an argument.
    * Can be used with both the blockless and block invocations.
+   *
+   * @argument {function} onRowClick
    */
-  onRowClick;
 
   @action
   handleRowClick(rowData) {
-    this.onRowClick?.(rowData);
+    this.args.onRowClick?.(rowData);
   }
 }
 

addon/components/yeti-table/tbody.hbs

@@ -1,6 +1,6 @@
 <tbody class={{@theme.tbody}} ...attributes>
   {{yield
-    (hash row=(component "ember-yeti-table@yeti-table/tbody/row" theme=@theme onClick=this.onRowClick columns=@columns))
+    (hash row=(component "ember-yeti-table@yeti-table/tbody/row" theme=@theme onClick=@onRowClick columns=@columns))
     @data
   }}
 </tbody>

addon/components/yeti-table/tbody.js

@@ -1,5 +1,4 @@
-import { tagName } from '@ember-decorators/component';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
 /**
   Renders a `<tbody>` element and yields the row component and data. You must iterate each row
@@ -28,21 +27,14 @@ import Component from '@ember/component';
   @yield {Component} body.row - the row component
   @yield {Array} data
 */
-@tagName('')
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 class TBody extends Component {
-  theme;
-
-  data;
-
-  columns;
-
-  parent;
-
   /**
    * Adds a click action to each row, called with the clicked row's data as an argument.
    * Can be used with both the blockless and block invocations.
+   *
+   * @argument {fucntion} onRowClick
    */
-  onRowClick;
 }
 
 export default TBody;

addon/components/yeti-table/tbody/row.js

@@ -1,8 +1,7 @@
-import { tagName } from '@ember-decorators/component';
-import { A } from '@ember/array';
-import Component from '@ember/component';
 import { action } from '@ember/object';
 
+import Component from '@glimmer/component';
+
 /**
   Renders a `<tr>` element and yields the cell component.
   ```hbs
@@ -18,7 +17,7 @@ import { action } from '@ember/object';
     </row.cell>
   </body.row>
   ```
-  Remember you can cutomize each `<tr>` class or `@onClick` handler based on the row data
+  Remember you can customize each `<tr>` class or `@onClick` handler based on the row data
   because you have access to it from the body component.
 
   ```hbs
@@ -40,44 +39,36 @@ import { action } from '@ember/object';
   @yield {object} row
   @yield {Component} row.cell - the cell component
 */
-@tagName('')
 class TBodyRow extends Component {
-  theme;
-
-  columns;
-
   /**
    * Adds a click action to the row.
+   *
+   * @argument {function} onClick
    */
-  onClick;
 
-  cells = A();
+  cells = [];
 
   registerCell(cell) {
-    let columns = this.get('columns');
-    let prop = cell.get('prop');
+    let columns = this.args.columns;
+    let index = this.cells.length;
 
-    if (prop) {
-      let column = columns.findBy('prop', prop);
-      cell.set('column', column);
-    } else {
-      let index = this.get('cells.length');
-      let column = columns[index];
-      cell.set('column', column);
-    }
+    let column = columns[index];
 
-    this.get('cells').addObject(cell);
+    this.cells.push(cell);
+
+    return column;
   }
 
   unregisterCell(cell) {
-    this.get('cells').removeObject(cell);
+    let cells = this.cells;
+    let index = cells.indexOf(cell);
+
+    cells.splice(index, 1);
   }
 
   @action
   handleClick() {
-    if (this.get('onClick')) {
-      this.get('onClick')(...arguments);
-    }
+    this.args.onClick?.(...arguments);
   }
 }
 

addon/components/yeti-table/tbody/row/cell.hbs

@@ -1,4 +1,4 @@
-{{#if this.visible}}
+{{#if this.column.visible}}
   <td class="{{@class}} {{this.column.columnClass}} {{@theme.tbodyCell}}" ...attributes>
     {{yield}}
   </td>

addon/components/yeti-table/tbody/row/cell.js

@@ -1,6 +1,4 @@
-import { tagName } from '@ember-decorators/component';
-import Component from '@ember/component';
-import { reads } from '@ember/object/computed';
+import Component from '@glimmer/component';
 
 /**
   Renders a `<td>` element (if its corresponding column definition has `@visible={{true}}`).
@@ -10,32 +8,18 @@ import { reads } from '@ember/object/computed';
   </row.cell>
   ```
 */
-@tagName('')
 class TBodyCell extends Component {
-  theme;
+  // Assigned when the cell is registered
+  column = undefined;
 
-  parent;
-
-  /**
-   * Controls the visibility of the current cell. Keep in mind that this property
-   * won't just hide the column using css. The DOM for the column will be removed.
-   * Defaults to the `visible` argument of the corresponding column.
-   */
-  @reads('column.visible')
-  visible;
-
-  init() {
-    super.init(...arguments);
-    if (this.get('parent')) {
-      this.get('parent').registerCell(this);
-    }
+  constructor() {
+    super(...arguments);
+    this.column = this.args.parent?.registerCell(this);
   }
 
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
-    if (this.get('parent')) {
-      this.get('parent').unregisterCell(this);
-    }
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.args.parent?.unregisterCell(this);
   }
 }