@triptyk/ember-yeti-table 3.0.0

package/src/components/yeti-table/header.gjs

@@ -0,0 +1,54 @@
+import { action } from '@ember/object';
+
+import Component from '@glimmer/component';
+
+/**
+  Renders a `<thead>` element and yields the column component.
+  ```hbs
+  <table.header as |header|>
+    <header.column @prop="firstName">
+      First name
+    </header.column>
+    <header.column @prop="lastName">
+      Last name
+    </header.column>
+    <header.column @prop="points">
+      Points
+    </header.column>
+  </table.header>
+  ```
+
+  @class Header
+  @yield {object} header
+  @yield {Component} header.column       the column component
+*/
+
+import THead from './thead/row/column.gjs';
+import { hash } from '@ember/helper';
+
+export default class Header extends Component {
+  <template>
+    <thead class={{@theme.thead}} ...attributes>
+      <tr class="{{@trClass}} {{@theme.theadRow}} {{@theme.row}}">
+        {{yield
+          (hash
+            column=(component
+              THead
+              sortable=@sortable
+              sortSequence=@sortSequence
+              onClick=this.onColumnClickHeader
+              parent=@parent
+              theme=@theme
+            )
+          )
+        }}
+      </tr>
+    </thead>
+  </template>
+  @action
+  onColumnClickHeader(column, e) {
+    if (this.args.onColumnClick && column.sortable) {
+      this.args.onColumnClick(column, e);
+    }
+  }
+}

package/src/components/yeti-table/pagination.gjs

@@ -0,0 +1,155 @@
+import { action } from '@ember/object';
+import { helper } from '@ember/component/helper';
+import Component from '@glimmer/component';
+import { localCopy } from 'tracked-toolbox';
+
+/**
+  Simple pagination controls component that is included to help you get started quickly.
+  Yeti Table yields a lot of pagination data, so you shouldn't have a problem
+  creating your own pagination controls.
+
+  At any rate, this component tries to be as flexible as possible. Some arguments
+  are provided to customize how this component behaves.
+
+  If you want to render these controls on the table footer, you probably want
+  a footer row that always spans all rows. To do that you can use a `colspan` equal
+  to the yielded `visibleColumns.length` number. Example:
+
+  ```hbs
+  <YetiTable @data={{this.data}} @pagination={{true}} as |table|>
+    ...
+    <table.tfoot as |foot|>
+      <foot.row as |row|>
+        <row.cell colspan={{table.visibleColumns.length}}>
+          <table.pagination/>
+        </row.cell>
+      </foot.row>
+    </table.tfoot>
+  </YetiTable>
+  ```
+
+  @class Pagination
+*/
+import { on } from '@ember/modifier';
+import { guidFor } from '@ember/object/internals';
+
+export default class Pagination extends Component {
+  guid = guidFor(this);
+
+  <template>
+    <div class={{@theme.pagination.controls}} ...attributes>
+      {{#if this.showInfo}}
+        <div class={{@theme.pagination.info}}>
+          Showing
+          {{@paginationData.pageStart}}
+          to
+          {{@paginationData.pageEnd}}
+          of
+          {{@paginationData.totalRows}}
+          entries
+        </div>
+      {{/if}}
+
+      {{#if this.showPageSizeSelector}}
+        <div class={{@theme.pagination.pageSize}}>
+          <label for="page-size-select-{{this.guid}}">Rows per page:</label>
+          <select
+            id="page-size-select-{{this.guid}}"
+            disabled={{@disabled}}
+            {{on "change" this.changePageSize}}
+          >
+            {{#each this.pageSizes as |pageSize|}}
+              <option
+                value={{pageSize}}
+                selected={{this.isPaginationNumberSelected pageSize}}
+              >{{pageSize}}</option>
+            {{/each}}
+          </select>
+        </div>
+      {{/if}}
+
+      {{#if this.showButtons}}
+        <button
+          type="button"
+          class={{@theme.pagination.previous}}
+          disabled={{this.shouldDisablePrevious}}
+          {{on "click" @paginationActions.previousPage}}
+        >
+          Previous
+        </button>
+
+        <button
+          type="button"
+          class={{@theme.pagination.next}}
+          disabled={{this.shouldDisableNext}}
+          {{on "click" @paginationActions.nextPage}}
+        >
+          Next
+        </button>
+      {{/if}}
+    </div>
+  </template>
+  // theme;
+
+  // paginationData;
+
+  // paginationActions;
+
+  // disabled;
+
+  // helper function used, needed while working with ember <= 4.4. Works without helper function in ember > 4.4
+  isPaginationNumberSelected = helper(([number]) => {
+    return number === this.args.paginationData.pageSize;
+  });
+
+  get shouldDisablePrevious() {
+    return this.args.paginationData.isFirstPage || this.args.disabled;
+  }
+
+  get shouldDisableNext() {
+    return this.args.paginationData.isLastPage || this.args.disabled;
+  }
+
+  /**
+   * Array of page sizes to populate the page size `<select>`.
+   * Particularly useful with an array helper, e.g `@pageSizes={{array 10 12 23 50 100}}`
+   * Defaults to `[10, 15, 20, 25]`.
+   *
+   * @argument pageSizes
+   * @type {Number}
+   */
+  @localCopy('args.pageSizes', [10, 15, 20, 25])
+  pageSizes;
+
+  /**
+   * Used to show/hide some textual information about the current page. Defaults to `true`.
+   *
+   * @argument showInfo
+   * @type {Boolean}
+   */
+  @localCopy('args.showInfo', true)
+  showInfo;
+
+  /**
+   * Used to show/hide the page size selector. Defaults to `true`.
+   *
+   * @argument showPageSizeSelector
+   * @type {Boolean}
+   */
+  @localCopy('args.showPageSizeSelector', true)
+  showPageSizeSelector;
+
+  /**
+   * Used to show/hide the previous and next page buttons. Defaults to `true`.
+   *
+   * @argument showButtons
+   * @type {Boolean}
+   */
+  @localCopy('args.showButtons', true)
+  showButtons;
+
+  @action
+  changePageSize(ev) {
+    this.args.paginationActions.changePageSize(ev.target.value);
+  }
+}

package/src/components/yeti-table/table.gjs

@@ -0,0 +1,34 @@
+/**
+  A simple component that just renders the `<table>` element with the correct
+  theme classes.
+
+  This component should only be needed when using `@renderTableElement={{false}}` to render
+  the table element yourself. Please refer to the `@renderTableElement` documentation for
+  more information.
+
+  Example:
+
+  ```hbs
+  <YetiTable @data={{this.data}} @pagination={{true}} @renderTableElement={{false}} as |t|>
+
+    <t.table> {{!-- we render the given table component ourselves --}}
+      <t.header as |header|>
+        ...
+      </t.header>
+
+      <t.body/>
+    </t.table>
+
+    <t.pagination/> {{!-- pagination controls outside the <table> element --}}
+
+  </YetiTable>
+  ```
+
+  @class Table
+*/
+
+<template>
+  <table class={{@theme.table}} ...attributes>
+    {{yield}}
+  </table>
+</template>

package/src/components/yeti-table/tbody/row/cell.gjs

@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+/**
+  @class TBodyCell
+
+  Renders a `<td>` element (if its corresponding column definition has `@visible={{true}}`).
+  ```hbs
+  <row.cell>
+    {{person.firstName}}
+  </row.cell>
+
+  If the prop name was used when the column header was defined, it is yielded in a hash
+  ```hbs
+  <row.cell as |column|>
+    {{get person column.prop}}
+  </row.cell>
+  ```
+*/
+
+import { hash } from '@ember/helper';
+
+export default class TBodyCell extends Component {
+  <template>
+    {{#if this.column.visible}}
+      <td
+        class="{{@class}} {{this.column.columnClass}} {{@theme.tbodyCell}}"
+        ...attributes
+      >
+        {{yield (hash prop=this.column.prop)}}
+      </td>
+    {{/if}}
+  </template>
+
+  @tracked
+  index;
+
+  get column() {
+    return this.args.columns[this.index] || {};
+  }
+
+  constructor() {
+    super(...arguments);
+    this.index = this.args.parent?.registerCell(this);
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.args.parent?.unregisterCell(this);
+  }
+}

package/src/components/yeti-table/tbody/row.gjs

@@ -0,0 +1,89 @@
+import { action } from '@ember/object';
+
+import Component from '@glimmer/component';
+
+/**
+  Renders a `<tr>` element and yields the cell component.
+  ```hbs
+  <body.row as |row|>
+    <row.cell>
+      {{person.firstName}} #{{index}}
+    </row.cell>
+    <row.cell>
+      {{person.lastName}}
+    </row.cell>
+    <row.cell>
+      {{person.points}}
+    </row.cell>
+  </body.row>
+  ```
+  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
+  <table.body as |body person|>
+    <body.row class={{if person.isInvalid "error"}} as |row|>
+      <row.cell>
+        {{person.firstName}}
+      </row.cell>
+      <row.cell>
+        {{person.lastName}}
+      </row.cell>
+      <row.cell>
+        {{person.points}}
+      </row.cell>
+    </body.row>
+  </table.body>
+  ```
+
+  @class TBodyRow
+  @yield {object} row
+  @yield {Component} row.cell - the cell component
+*/
+// template imports
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import Cell from './row/cell.gjs';
+
+export default class TBodyRow extends Component {
+  <template>
+    {{! template-lint-disable no-invalid-interactive }}
+    <tr
+      class="{{@theme.tbodyRow}} {{@theme.row}}"
+      {{on "click" this.handleClick}}
+      role={{if @onClick "button"}}
+      ...attributes
+    >
+      {{yield
+        (hash cell=(component Cell theme=@theme parent=this columns=@columns))
+      }}
+    </tr>
+  </template>
+
+  /**
+   * Adds a click action to the row.
+   *
+   * @argument onClick
+   * @type Function
+   */
+
+  cells = [];
+
+  registerCell(cell) {
+    let index = this.cells.length;
+    this.cells.push(cell);
+    return index;
+  }
+
+  unregisterCell(cell) {
+    let cells = this.cells;
+    let index = cells.indexOf(cell);
+
+    cells.splice(index, 1);
+  }
+
+  @action
+  handleClick() {
+    this.args.onClick?.(...arguments);
+  }
+}

package/src/components/yeti-table/tbody.gjs

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+
+/**
+  Renders a `<tbody>` element and yields the row component and data. You must iterate each row
+  ```hbs
+  <table.tbody as |body data|>
+    {{#each data as |person index|}}
+      <body.row as |row|>
+        <row.cell>
+          {{person.firstName}} #{{index}}
+        </row.cell>
+        <row.cell>
+          {{person.lastName}}
+        </row.cell>
+        <row.cell>
+          {{person.points}}
+        </row.cell>
+      </body.row>
+    {{/each}}
+  </table.tbody>
+  ```
+  Remember that you must perform the {{#each}} to iterate over the `@data` array.
+
+ This component does not provide a blockless variation
+
+  @class TBody
+  @yield {object} body
+  @yield {Component} body.row - the row component
+  @yield {Array} data
+*/
+import { hash } from '@ember/helper';
+import TBodyRow from './tbody/row.gjs';
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class TBody extends Component {
+  <template>
+    <tbody class={{@theme.tbody}} ...attributes>
+      {{yield
+        (hash
+          row=(component
+            TBodyRow theme=@theme onClick=@onRowClick columns=@columns
+          )
+        )
+        @data
+      }}
+    </tbody>
+  </template>
+  /**
+   * 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 onRowClick
+   * @type Function
+   */
+}

package/src/components/yeti-table/tfoot/row/cell.gjs

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+/**
+  Renders a `<td>` element and yields for the developer to supply content.
+
+  ```hbs
+  <table.tfoot as |foot|>
+    <foot.row as |row|>
+      <row.cell>
+        Footer content
+      </row.cell>
+    </foot.row>
+  </table.tfoot>
+  ```
+  @class TFootCell
+ */
+
+export default class TFootCell extends Component {
+  <template>
+    {{#if this.column.visible}}
+      <td class="{{@class}} {{@theme.tfootCell}}" ...attributes>
+        {{yield}}
+      </td>
+    {{/if}}
+  </template>
+
+  @tracked
+  index;
+
+  get column() {
+    return this.args.columns[this.index];
+  }
+
+  constructor() {
+    super(...arguments);
+
+    this.index = this.args.parent?.registerCell(this);
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.args.parent?.unregisterCell(this);
+  }
+}

package/src/components/yeti-table/tfoot/row.gjs

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+
+/**
+  Renders a `<tr>` element and yields cell component.
+  ```hbs
+  <table.tfoot as |foot|>
+    <foot.row as |row|>
+      <row.cell>
+        Footer content
+      </row.cell>
+    </foot.row>
+  </table.tfoot>
+  ```
+
+  @class TFootRow
+  @yield {object} row
+  @yield {Component} row.cell
+*/
+
+import { hash } from '@ember/helper';
+import Cell from './row/cell.gjs';
+
+export default class TFootRow extends Component {
+  <template>
+    <tr class="{{@class}} {{@theme.tfootRow}} {{@theme.row}}" ...attributes>
+      {{yield
+        (hash cell=(component Cell theme=@theme parent=this columns=@columns))
+      }}
+    </tr>
+  </template>
+  cells = [];
+
+  registerCell(cell) {
+    let index = this.cells.length;
+    this.cells.push(cell);
+    return index;
+  }
+
+  unregisterCell(cell) {
+    let cells = this.cells;
+    let index = cells.indexOf(cell);
+    cells.splice(index, 1);
+  }
+}

package/src/components/yeti-table/tfoot.gjs

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+
+/**
+  Renders a `<tfoot>` element and yields the row component.
+  ```hbs
+  <table.tfoot as |foot|>
+    <foot.row as |row|>
+      <row.cell>
+        Footer content
+      </row.cell>
+    </foot.row>
+  </table.tfoot>
+  ```
+
+  @class TTFoot
+  @yield {object} footer
+  @yield {Component} footer.row
+*/
+import { hash } from '@ember/helper';
+import TFootRow from './tfoot/row.gjs';
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class TFoot extends Component {
+  <template>
+    <tfoot class={{@theme.tfoot}} ...attributes>
+      {{yield
+        (hash
+          row=(component TFootRow columns=@columns theme=@theme parent=@parent)
+        )
+      }}
+    </tfoot>
+  </template>
+}

package/src/components/yeti-table/thead/row/cell.gjs

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+
+/**
+  An component yielded from the head.row component that is used to define
+  a cell in a row of the head of the table. Would be used for filters or any other
+  additional information in the table head for a column
+
+  ```hbs
+  <table.thead as |head|>
+    <head.row as |row|>
+      <row.cell>
+        <input
+          class="input" type="search" placeholder="Search last name"
+          value={{this.lastNameFilter}}
+          {{on "input"
+            (pipe
+              (pick "target.value")
+              (fn (mut this.lastNameFilter))
+            )
+          }}
+          >
+      </row.cell>
+    </head.row>
+  </table.thead>
+  ```
+
+  @class THeadCell
+  @yield {object} cell
+
+ */
+export default class THeadCell extends Component {
+  <template>
+    {{#if this.column.visible}}
+      <th class="{{@class}} {{@theme.theadCell}}" ...attributes>
+        {{yield}}
+      </th>
+    {{/if}}
+  </template>
+
+  // Assigned when the cell is registered
+  column = undefined;
+
+  constructor() {
+    super(...arguments);
+    this.column = this.args.parent?.registerCell(this);
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.args.parent?.unregisterCell(this);
+  }
+}