@triptyk/ember-yeti-table 3.0.0 → 3.0.1

package/src/components/yeti-table/{body.gjs → body.gts}

@@ -1,44 +1,60 @@
 import { action } from '@ember/object';
-
 import Component from '@glimmer/component';
 
+import { fn, get, hash } from '@ember/helper';
+
+import type { WithBoundArgs } from '@glint/template';
+
+import TBodyRow from './tbody/row.gts';
+import type {
+  ColumnDefinition,
+  Row,
+  RowClickHandler,
+  Theme,
+} from '../../types.ts';
+
 /**
   Renders a `<tbody>` element and yields the row component, row data and index.
-  ```hbs
-  <table.body as |body 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>
-  </table.body>
-  ```
-  It can also be used as a blockless component to let yeti table automatically
-  unroll thee rows for you, based on the `@prop` arguments you passed in to the
-  column definition components.
-  ```hbs
-  <table.body/>
-  ```
-  Remember that this component's block will be rendered once per each item in the `@data` array.
 
   @class Body
-  @yield {object} body
-  @yield {Component} body.row - the row component
-  @yield {Object} rowData - one item in the data array
-  @yield {number} index
 */
 
-// template imports
-import { fn, get, hash } from '@ember/helper';
-import TBodyRow from './tbody/row.gjs';
+export interface BodySignature {
+  Element: HTMLTableSectionElement;
+  Args: {
+    theme?: Theme;
+    data?: Row[];
+    columns?: ColumnDefinition[];
+    onRowClick?: RowClickHandler;
+  };
+  Blocks: {
+    default: [
+      { row: WithBoundArgs<typeof TBodyRow, 'theme' | 'onClick' | 'columns'> },
+      Row,
+      number,
+    ];
+  };
+}
+
+export default class Body extends Component<BodySignature> {
+  @action
+  handleRowClick(rowData: Row): void {
+    this.args.onRowClick?.(rowData);
+  }
+
+  asContent = (value: unknown): string => {
+    if (value == null) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'boolean') {
+      return String(value);
+    }
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return '';
+    }
+  };
 
-export default class Body extends Component {
   <template>
     <tbody class={{@theme.tbody}} ...attributes>
       {{#if (has-block)}}
@@ -68,9 +84,9 @@ export default class Body extends Component {
             {{#each @columns as |column|}}
               <row.cell @class={{column.columnClass}}>
                 {{#if column.prop}}
-                  {{get rowData column.prop}}
+                  {{this.asContent (get rowData column.prop)}}
                 {{else}}
-                  {{rowData}}
+                  {{this.asContent rowData}}
                 {{/if}}
               </row.cell>
             {{/each}}
@@ -79,16 +95,4 @@ export default class Body extends Component {
       {{/if}}
     </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
-   */
-
-  @action
-  handleRowClick(rowData) {
-    this.args.onRowClick?.(rowData);
-  }
 }

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

@@ -0,0 +1,67 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import { hash } from '@ember/helper';
+
+import type { WithBoundArgs } from '@glint/template';
+
+import Column from './thead/row/column.gts';
+import type { ColumnParent } from './thead/row/column.gts';
+import type { ColumnDefinition, SortDirection, Theme } from '../../types.ts';
+
+/**
+  Renders a `<thead>` element and yields the column component.
+
+  @class Header
+*/
+
+export interface HeaderSignature {
+  Element: HTMLTableSectionElement;
+  Args: {
+    trClass?: string;
+    theme?: Theme;
+    sortable?: boolean;
+    sortSequence?: SortDirection[] | string;
+    columns?: ColumnDefinition[];
+    onColumnClick?: (column: Column, e: MouseEvent) => void;
+    parent?: ColumnParent;
+  };
+  Blocks: {
+    default: [
+      {
+        column: WithBoundArgs<
+          typeof Column,
+          'sortable' | 'sortSequence' | 'onClick' | 'parent' | 'theme'
+        >;
+      },
+    ];
+  };
+}
+
+export default class Header extends Component<HeaderSignature> {
+  @action
+  onColumnClickHeader(column: Column, e: MouseEvent): void {
+    if (this.args.onColumnClick && column.sortable) {
+      this.args.onColumnClick(column, e);
+    }
+  }
+
+  <template>
+    <thead class={{@theme.thead}} ...attributes>
+      <tr class="{{@trClass}} {{@theme.theadRow}} {{@theme.row}}">
+        {{yield
+          (hash
+            column=(component
+              Column
+              sortable=@sortable
+              sortSequence=@sortSequence
+              onClick=this.onColumnClickHeader
+              parent=@parent
+              theme=@theme
+            )
+          )
+        }}
+      </tr>
+    </thead>
+  </template>
+}

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

@@ -0,0 +1,118 @@
+import { action } from '@ember/object';
+import { helper } from '@ember/component/helper';
+import Component from '@glimmer/component';
+import { localCopy } from 'tracked-toolbox';
+
+import { on } from '@ember/modifier';
+
+import type { PaginationActions, PaginationData, Theme } from '../../types.ts';
+import { uniqueId } from '@ember/helper';
+
+/**
+  Simple pagination controls component that is included to help you get started quickly.
+
+  @class Pagination
+*/
+
+export interface PaginationSignature {
+  Element: HTMLDivElement;
+  Args: {
+    theme?: Theme;
+    paginationData: PaginationData;
+    paginationActions: PaginationActions;
+    disabled?: boolean;
+    pageSizes?: number[];
+    showInfo?: boolean;
+    showPageSizeSelector?: boolean;
+    showButtons?: boolean;
+  };
+  Blocks: { default: [] };
+}
+
+export default class Pagination extends Component<PaginationSignature> {
+  isPaginationNumberSelected = helper(([number]: [number]) => {
+    return number === this.args.paginationData.pageSize;
+  });
+
+  get shouldDisablePrevious(): boolean {
+    return !!this.args.paginationData.isFirstPage || !!this.args.disabled;
+  }
+
+  get shouldDisableNext(): boolean {
+    return !!this.args.paginationData.isLastPage || !!this.args.disabled;
+  }
+
+  @localCopy('args.pageSizes', [10, 15, 20, 25])
+  pageSizes!: number[];
+
+  @localCopy('args.showInfo', true)
+  showInfo!: boolean;
+
+  @localCopy('args.showPageSizeSelector', true)
+  showPageSizeSelector!: boolean;
+
+  @localCopy('args.showButtons', true)
+  showButtons!: boolean;
+
+  @action
+  changePageSize(ev: Event): void {
+    const target = ev.target as HTMLSelectElement;
+    this.args.paginationActions.changePageSize(target.value);
+  }
+
+  <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}}>
+          {{#let (uniqueId) as |selectId|}}
+            <label for="page-size-select-{{selectId}}">Rows per page:</label>
+            <select
+              id="page-size-select-{{selectId}}"
+              disabled={{@disabled}}
+              {{on "change" this.changePageSize}}
+            >
+              {{#each this.pageSizes as |pageSize|}}
+                <option
+                  value={{pageSize}}
+                  selected={{this.isPaginationNumberSelected pageSize}}
+                >{{pageSize}}</option>
+              {{/each}}
+            </select>
+          {{/let}}
+        </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>
+}

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

@@ -0,0 +1,27 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import type { Theme } from '../../types.ts';
+
+/**
+  A simple component that just renders the `<table>` element with the correct
+  theme classes.
+
+  @class Table
+*/
+
+export interface TableSignature {
+  Element: HTMLTableElement;
+  Args: {
+    theme?: Theme;
+    parent?: unknown;
+  };
+  Blocks: { default: [] };
+}
+
+const Table: TemplateOnlyComponent<TableSignature> = <template>
+  <table class={{@theme.table}} ...attributes>
+    {{yield}}
+  </table>
+</template>;
+
+export default Table;

package/src/components/yeti-table/tbody/row/{cell.gjs → cell.gts}

@@ -1,5 +1,10 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import type Owner from '@ember/owner';
+
+import { hash } from '@ember/helper';
+
+import type { ColumnDefinition, Theme } from '../../../../types.ts';
 
 /**
   @class TBodyCell
@@ -18,34 +23,48 @@ import { tracked } from '@glimmer/tracking';
   ```
 */
 
-import { hash } from '@ember/helper';
+export interface TBodyCellParent {
+  registerCell(cell: TBodyCell): number;
+  unregisterCell(cell: TBodyCell): void;
+}
 
-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>
+export interface TBodyCellSignature {
+  Element: HTMLTableCellElement;
+  Args: {
+    class?: string;
+    theme?: Theme;
+    parent?: TBodyCellParent;
+    columns?: ColumnDefinition[];
+  };
+  Blocks: { default: [{ prop: string | undefined }] };
+}
 
+export default class TBodyCell extends Component<TBodyCellSignature> {
   @tracked
-  index;
+  index: number | undefined;
 
-  get column() {
-    return this.args.columns[this.index] || {};
+  get column(): ColumnDefinition {
+    return this.args.columns?.[this.index ?? -1] ?? {};
   }
 
-  constructor() {
-    super(...arguments);
+  constructor(owner: Owner, args: TBodyCellSignature['Args']) {
+    super(owner, args);
     this.index = this.args.parent?.registerCell(this);
   }
 
-  willDestroy() {
-    super.willDestroy(...arguments);
+  willDestroy(): void {
+    super.willDestroy();
     this.args.parent?.unregisterCell(this);
   }
+
+  <template>
+    {{#if this.column.visible}}
+      <td
+        class="{{@class}} {{this.column.columnClass}} {{@theme.tbodyCell}}"
+        ...attributes
+      >
+        {{yield (hash prop=this.column.prop)}}
+      </td>
+    {{/if}}
+  </template>
 }

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

@@ -0,0 +1,76 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+
+import type { WithBoundArgs } from '@glint/template';
+
+import Cell from './row/cell.gts';
+import type {
+  ColumnDefinition,
+  RowClickHandler,
+  Theme,
+} from '../../../types.ts';
+
+/**
+  Renders a `<tr>` element and yields the cell component.
+
+  @class TBodyRow
+  @yield {object} row
+  @yield {Component} row.cell - the cell component
+*/
+
+interface TBodyCellLike {
+  index?: number;
+}
+
+export interface TBodyRowSignature {
+  Element: HTMLTableRowElement;
+  Args: {
+    theme?: Theme;
+    columns?: ColumnDefinition[];
+    onClick?: RowClickHandler;
+  };
+  Blocks: {
+    default: [
+      { cell: WithBoundArgs<typeof Cell, 'theme' | 'parent' | 'columns'> },
+    ];
+  };
+}
+
+export default class TBodyRow extends Component<TBodyRowSignature> {
+  cells: TBodyCellLike[] = [];
+
+  registerCell(cell: TBodyCellLike): number {
+    const index = this.cells.length;
+    this.cells.push(cell);
+    return index;
+  }
+
+  unregisterCell(cell: TBodyCellLike): void {
+    const cells = this.cells;
+    const index = cells.indexOf(cell);
+
+    cells.splice(index, 1);
+  }
+
+  @action
+  handleClick(event: MouseEvent): void {
+    this.args.onClick?.(event);
+  }
+
+  <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>
+}

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

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+
+import { hash } from '@ember/helper';
+
+import type { WithBoundArgs } from '@glint/template';
+
+import TBodyRow from './tbody/row.gts';
+import type {
+  ColumnDefinition,
+  Row,
+  RowClickHandler,
+  Theme,
+} from '../../types.ts';
+
+/**
+  Renders a `<tbody>` element and yields the row component and data. You must iterate each row.
+
+  @class TBody
+*/
+
+export interface TBodySignature {
+  Element: HTMLTableSectionElement;
+  Args: {
+    theme?: Theme;
+    data?: Row[];
+    columns?: ColumnDefinition[];
+    onRowClick?: RowClickHandler;
+  };
+  Blocks: {
+    default: [
+      {
+        row: WithBoundArgs<typeof TBodyRow, 'theme' | 'onClick' | 'columns'>;
+      },
+      Row[] | undefined,
+    ];
+  };
+}
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class TBody extends Component<TBodySignature> {
+  <template>
+    <tbody class={{@theme.tbody}} ...attributes>
+      {{yield
+        (hash
+          row=(component
+            TBodyRow theme=@theme onClick=@onRowClick columns=@columns
+          )
+        )
+        @data
+      }}
+    </tbody>
+  </template>
+}

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

@@ -0,0 +1,64 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import type Owner from '@ember/owner';
+
+import type { ColumnDefinition, Theme } from '../../../../types.ts';
+
+/**
+  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 interface TFootCellParent {
+  registerCell(cell: TFootCell): number;
+  unregisterCell(cell: TFootCell): void;
+}
+
+export interface TFootCellSignature {
+  Element: HTMLTableCellElement;
+  Args: {
+    class?: string;
+    theme?: Theme;
+    parent?: TFootCellParent;
+    columns?: ColumnDefinition[];
+  };
+  Blocks: { default: [] };
+}
+
+export default class TFootCell extends Component<TFootCellSignature> {
+  @tracked
+  index: number | undefined;
+
+  get column(): ColumnDefinition | undefined {
+    return this.args.columns?.[this.index ?? -1];
+  }
+
+  constructor(owner: Owner, args: TFootCellSignature['Args']) {
+    super(owner, args);
+
+    this.index = this.args.parent?.registerCell(this);
+  }
+
+  willDestroy(): void {
+    super.willDestroy();
+    this.args.parent?.unregisterCell(this);
+  }
+
+  <template>
+    {{#if this.column.visible}}
+      <td class="{{@class}} {{@theme.tfootCell}}" ...attributes>
+        {{yield}}
+      </td>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+
+import { hash } from '@ember/helper';
+
+import type { WithBoundArgs } from '@glint/template';
+
+import Cell from './row/cell.gts';
+import type { ColumnDefinition, Theme } from '../../../types.ts';
+
+/**
+  Renders a `<tr>` element and yields cell component.
+
+  @class TFootRow
+  @yield {object} row
+  @yield {Component} row.cell
+*/
+
+interface TFootCellLike {
+  index?: number;
+}
+
+export interface TFootRowSignature {
+  Element: HTMLTableRowElement;
+  Args: {
+    class?: string;
+    theme?: Theme;
+    columns?: ColumnDefinition[];
+    parent?: unknown;
+  };
+  Blocks: {
+    default: [
+      { cell: WithBoundArgs<typeof Cell, 'theme' | 'parent' | 'columns'> },
+    ];
+  };
+}
+
+export default class TFootRow extends Component<TFootRowSignature> {
+  cells: TFootCellLike[] = [];
+
+  registerCell(cell: TFootCellLike): number {
+    const index = this.cells.length;
+    this.cells.push(cell);
+    return index;
+  }
+
+  unregisterCell(cell: TFootCellLike): void {
+    const cells = this.cells;
+    const index = cells.indexOf(cell);
+    cells.splice(index, 1);
+  }
+
+  <template>
+    <tr class="{{@class}} {{@theme.tfootRow}} {{@theme.row}}" ...attributes>
+      {{yield
+        (hash cell=(component Cell theme=@theme parent=this columns=@columns))
+      }}
+    </tr>
+  </template>
+}