@triptyk/ember-yeti-table 3.0.0 → 3.0.2

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

@@ -1,55 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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/column.gjs

@@ -1,260 +0,0 @@
-import { isArray } from '@ember/array';
-import { assert } from '@ember/debug';
-
-import Component from '@glimmer/component';
-import { modifier } from 'ember-modifier';
-import { localCopy } from 'tracked-toolbox';
-
-/**
-  An important component yielded from the header or head.row component that is used to define
-  a column of the table.
-
-  ```hbs
-  <table.header as |header|>
-    <header.column @prop="firstName" as |column|>
-      First name
-      {{if column.isAscSorted "(sorted asc)"}}
-      {{if column.isDescSorted "(sorted desc)"}}
-    </header.column>
-  </table.header>
-  ```
-
-  ```hbs
-  <table.thead as |head|>
-    <head.row as |row|>
-      <row.column @prop="firstName" as |column|>
-        First name
-        {{if column.isAscSorted "(sorted asc)"}}
-        {{if column.isDescSorted "(sorted desc)"}}
-      </row.column>
-    </head.row>
-  </table.thead>
-  ```
-
-  @class Column
-  @yield {object} column
-  @yield {boolean} column.isSorted - `true` if column is sorted ascending or descending
-  @yield {boolean} column.isAscSorted - `true` if column is sorted ascending
-  @yield {boolean} column.isDescSorted - `true` if column is sorted descending
-*/
-import { on } from '@ember/modifier';
-import { fn, hash } from '@ember/helper';
-
-export default class Column extends Component {
-  <template>
-    {{! template-lint-disable no-invalid-interactive }}
-    {{#if this.visible}}
-      <th
-        role={{if this.sortable "button"}}
-        class="{{@class}}
-          {{@theme.theadCell}}
-          {{if this.sortable @theme.sorting.columnSortable}}
-          {{if this.isSorted @theme.sorting.columnSorted}}
-          {{if this.isAscSorted @theme.sorting.columnSortedAsc}}
-          {{if this.isDescSorted @theme.sorting.columnSortedDesc}}"
-        {{on "click" (if this.sortable (fn @onClick this) this.noop)}}
-        {{this.updateName}}
-        ...attributes
-      >
-        {{yield
-          (hash
-            isSorted=this.isSorted
-            isAscSorted=this.isAscSorted
-            isDescSorted=this.isDescSorted
-          )
-        }}
-      </th>
-    {{/if}}
-  </template>
-  /**
-   * An important argument that Yeti Table uses to tie this column to a certain property on
-   * each row object of the original `@data` (or `@loadFunction`) that was passed in.
-   *
-   * This is the argument that Yeti Table uses to filter and sort the data.
-   *
-   * This argument also allows Yeti Table to keep itself up to date when the original
-   * data changes. NOTE: If this property is a nested property (one that contains periods),
-   * the table will not update when this property changes. This is due to `@each` only supporting
-   * one level of properties.
-   *
-   * If you don't need sorting, filtering or automatic table unrolling (using the blockless
-   * body component), then this property is optional.
-   *
-   * @argument prop
-   * @type {String}
-   */
-  get prop() {
-    return this.args.prop;
-  }
-
-  /**
-   * Set to `false` to hide the entire column across all rows. Keep in mind that this property
-   * won't just hide the column using css. The DOM for the column will be removed. Defaults to `true`.
-   *
-   * @argument visible
-   * @type {Boolean}
-   */
-  @localCopy('args.visible', true)
-  visible;
-
-  /**
-   * Used to turn off sorting clicking on this column (clicks won't toggle sorting anymore).
-   * Useful on avatar columns, for example, where a sorting order doesn't really make sense.
-   * Defaults to the `<YetiTable>` `@sortable` argument (which in turn defaults to `true`).
-   *
-   * @argument sortable
-   * @type Boolean
-   */
-  @localCopy('args.sortable', true)
-  sortable;
-
-  /**
-   * Optionally use an `asc` or `desc` string on this argument to turn on ascending or descending sorting
-   * on this column. Useful to turn on default sortings on the table.
-
-   * @argument sort
-   * @type {String}
-   */
-  @localCopy('args.sort')
-  sort;
-
-  /**
-   * Use `@sortSequence` to customize the sequence in which the sorting order will cycle when
-   * clicking on this column header. You can either pass in a comma-separated string or an array
-   * of strings. Accepted values are `'asc'`, `'desc'` and `'unsorted'`. The default value is `['asc', 'desc']`
-   * or whatever the global table sortSequence value is.
-   *
-   * @argument sortSequence
-   * @type Array
-   */
-
-  /**
-   * Used to turn off filtering for this column. When `false`, Yeti Table won't look for
-   * values on this column. Defaults to `true`.
-   *
-   * @argument filterable
-   * @type {Boolean}
-   */
-  @localCopy('args.filterable', true)
-  filterable;
-
-  /**
-   * The column filter. If passed in, Yeti Table will search this column for rows that contain this
-   * string and show those rows.
-   *
-   * The column definitions `@filter` argument is subtractive, meaning that it will filter out rows
-   * from the subset that passes the general `@filter`.
-   *
-   * @argument filter
-   * @type {String}
-   */
-  get filter() {
-    return this.args.filter;
-  }
-
-  /**
-   * An optional function to customize the filtering logic *on this column*. This function should return true
-   * or false to either include or exclude the row on the resulting set. If this function depends
-   * on a value, pass that value as the `@filterUsing` argument.
-   *
-   * This function will be called with two arguments:
-   * - `value` - the current data cell to use for filtering
-   * - `filterUsing` - the value you passed in as `@filterUsing`
-   *
-   * @argument filterFunction
-   * @type {Function}
-   */
-  get filterFunction() {
-    return this.args.filterFunction;
-  }
-
-  /**
-   * If you `@filterFunction` function depends on a different value (other that `@filter`)
-   * to show, pass it in this argument. Yeti Table uses this argument to know when to recalculate
-   * the fitlered rows.
-   *
-   * @argument filterUsing
-   * @type {String}
-   */
-  get filterUsing() {
-    return this.args.filterUsing;
-  }
-
-  /**
-   * Used to add a class to all the cells in this column.
-   *
-   * @argument columnClass
-   * @type {String}
-   */
-  get columnClass() {
-    return this.args.columnClass;
-  }
-
-  /**
-   * This property is a human-readable representation of the name of the column.
-   * It defaults to the trimmed `textContent` of the `<th>` element, but can be overridden
-   * by using a `@name="your custom name"` argument.
-   *
-   * @argument name
-   * @type {String}
-   */
-  @localCopy('args.name')
-  name;
-
-  /**
-   * An optional function to be invoked whenever this column is clicked
-   *
-   * This function will be called with two arguments:
-   * - `column` - the column that was clicked
-   *
-   * @argument onClick
-   * @type {Function}
-   */
-
-  get isAscSorted() {
-    return this.sort === 'asc';
-  }
-
-  get isDescSorted() {
-    return this.sort === 'desc';
-  }
-
-  get isSorted() {
-    return this.isAscSorted || this.isDescSorted;
-  }
-
-  get normalizedSortSequence() {
-    let sortSequence = this.args.sortSequence;
-    assert(
-      '@sortSequence must be either a comma-separated string or an array. Got `${sortSequence}.`',
-      isArray(sortSequence) || typeof sortSequence === 'string',
-    );
-
-    if (isArray(sortSequence)) {
-      return sortSequence;
-    } else if (typeof sortSequence === 'string') {
-      return sortSequence.split(',').map((s) => s.trim());
-    } else {
-      return [];
-    }
-  }
-
-  constructor() {
-    super(...arguments);
-
-    this.args.parent?.registerColumn(this);
-  }
-
-  willDestroy() {
-    super.willDestroy(...arguments);
-    this.args.parent?.unregisterColumn(this);
-  }
-
-  updateName = modifier((element) => {
-    if (!this.args.name) {
-      this.name = element.textContent.trim();
-    }
-  });
-
-  noop = () => {};
-}

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

@@ -1,71 +0,0 @@
-import Component from '@glimmer/component';
-
-/**
-  Renders a `<tr>` element and yields the column and cell component.
-  ```hbs
-  <table.thead as |head|>
-    <head.row as |row|>
-      <row.column @prop="firstName" as |column|>
-        First name
-        {{if column.isAscSorted "(sorted asc)"}}
-        {{if column.isDescSorted "(sorted desc)"}}
-      </row.column>
-    </head.row>
-  </table.thead>
-  ```
-
-  @class THeadRow
-  @yield {Component} column
-  @yield {Component} cell
-*/
-
-import Column from './row/column.gjs';
-import Cell from './row/cell.gjs';
-import { hash } from '@ember/helper';
-
-export default class THeadRow extends Component {
-  <template>
-    <tr class="{{@trClass}} {{@theme.theadRow}} {{@theme.row}}" ...attributes>
-      {{yield
-        (hash
-          column=(component
-            Column
-            sortable=@sortable
-            sortSequence=@sortSequence
-            onClick=@onColumnClick
-            theme=@theme
-            parent=@parent
-          )
-          cell=(component Cell theme=@theme parent=this)
-        )
-      }}
-    </tr>
-  </template>
-
-  cells = [];
-
-  registerCell(cell) {
-    let column;
-
-    if (cell.prop) {
-      column = this.args.columns.findBy('prop', cell.prop);
-      cell.column = column;
-    } else {
-      let index = this.cells.length;
-      column = this.args.columns[index];
-
-      return column;
-    }
-
-    this.cells.push(cell);
-
-    return column;
-  }
-
-  unregisterCell(cell) {
-    let cells = this.cells;
-    let index = cells.indexOf(cell);
-
-    cells.splice(index, 1);
-  }
-}

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

@@ -1,45 +0,0 @@
-/**
-  Renders a `<thead>` element and yields the row component.
-
-  ```hbs
-  <table.thead as |head|>
-    <head.row as |row|>
-      <row.column @prop="firstName" as |column|>
-        First name
-        {{if column.isAscSorted "(sorted asc)"}}
-        {{if column.isDescSorted "(sorted desc)"}}
-      </row.column>
-    </head.row>
-  </table.thead>
-  ```
-
-  @class THead
-  @yield {object} head
-  @yield {Component} head.row
-*/
-import { hash } from '@ember/helper';
-import THead from './thead/row.gjs';
-
-<template>
-  <thead class={{@theme.thead}} ...attributes>
-    {{yield
-      (hash
-        row=(component
-          THead
-          sortable=@sortable
-          sortSequence=@sortSequence
-          onColumnClick=@onColumnClick
-          columns=@columns
-          theme=@theme
-          parent=@parent
-        )
-      )
-    }}
-  </thead>
-</template>
-/**
- * Adds a click action to the thead, called with the clicked column as an argument.
- *
- * @argument onColumnClick - action that is called when the column header is clicked
- * @type Function
- */