@triptyk/ember-yeti-table 3.0.0 → 3.0.1

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

@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+
+import { hash } from '@ember/helper';
+
+import type { WithBoundArgs } from '@glint/template';
+
+import TFootRow from './tfoot/row.gts';
+import type { ColumnDefinition, Theme } from '../../types.ts';
+
+/**
+  Renders a `<tfoot>` element and yields the row component.
+
+  @class TTFoot
+*/
+
+export interface TFootSignature {
+  Element: HTMLTableSectionElement;
+  Args: {
+    theme?: Theme;
+    columns?: ColumnDefinition[];
+    parent?: unknown;
+  };
+  Blocks: {
+    default: [
+      { row: WithBoundArgs<typeof TFootRow, 'columns' | 'theme' | 'parent'> },
+    ];
+  };
+}
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class TFoot extends Component<TFootSignature> {
+  <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 → cell.gts}

@@ -1,4 +1,7 @@
 import Component from '@glimmer/component';
+import type Owner from '@ember/owner';
+
+import type { ColumnDefinition, Theme } from '../../../../types.ts';
 
 /**
   An component yielded from the head.row component that is used to define
@@ -28,25 +31,45 @@ import Component from '@glimmer/component';
   @yield {object} cell
 
  */
-export default class THeadCell extends Component {
-  <template>
-    {{#if this.column.visible}}
-      <th class="{{@class}} {{@theme.theadCell}}" ...attributes>
-        {{yield}}
-      </th>
-    {{/if}}
-  </template>
+export interface THeadCellParent {
+  registerCell(cell: THeadCell): ColumnDefinition | undefined;
+  unregisterCell(cell: THeadCell): void;
+}
+
+export interface THeadCellSignature {
+  Element: HTMLTableCellElement;
+  Args: {
+    class?: string;
+    theme?: Theme;
+    parent?: THeadCellParent;
+    prop?: string;
+  };
+  Blocks: { default: [] };
+}
 
+export default class THeadCell extends Component<THeadCellSignature> {
   // Assigned when the cell is registered
-  column = undefined;
+  column: ColumnDefinition | undefined = undefined;
 
-  constructor() {
-    super(...arguments);
+  constructor(owner: Owner, args: THeadCellSignature['Args']) {
+    super(owner, args);
     this.column = this.args.parent?.registerCell(this);
   }
 
-  willDestroy() {
-    super.willDestroy(...arguments);
+  willDestroy(): void {
+    super.willDestroy();
     this.args.parent?.unregisterCell(this);
   }
+
+  get prop(): string | undefined {
+    return this.args.prop;
+  }
+
+  <template>
+    {{#if this.column.visible}}
+      <th class="{{@class}} {{@theme.theadCell}}" ...attributes>
+        {{yield}}
+      </th>
+    {{/if}}
+  </template>
 }

package/src/components/yeti-table/thead/row/column.gts

@@ -0,0 +1,177 @@
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { localCopy } from 'tracked-toolbox';
+import type Owner from '@ember/owner';
+
+import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
+
+import type {
+  ColumnDefinition,
+  FilterFunction,
+  SortDirection,
+  Theme,
+} from '../../../../types.ts';
+
+/**
+  An important component yielded from the header or head.row component that is used to define
+  a column of the table.
+
+  @class Column
+*/
+
+export interface ColumnParent {
+  registerColumn(column: Column): void;
+  unregisterColumn(column: Column): void;
+}
+
+export interface ColumnSignature {
+  Element: HTMLTableCellElement;
+  Args: {
+    class?: string;
+    theme?: Theme;
+    prop?: string;
+    visible?: boolean;
+    sortable?: boolean;
+    sort?: SortDirection | null;
+    sortSequence?: SortDirection[] | string;
+    filterable?: boolean;
+    filter?: string;
+    filterFunction?: FilterFunction;
+    filterUsing?: unknown;
+    columnClass?: string;
+    name?: string;
+    onClick?: (column: Column, e: MouseEvent) => void;
+    parent?: ColumnParent;
+  };
+  Blocks: {
+    default: [
+      {
+        isSorted: boolean;
+        isAscSorted: boolean;
+        isDescSorted: boolean;
+      },
+    ];
+  };
+}
+
+export default class Column
+  extends Component<ColumnSignature>
+  implements ColumnDefinition
+{
+  get prop(): string | undefined {
+    return this.args.prop;
+  }
+
+  @localCopy('args.visible', true)
+  visible!: boolean;
+
+  @localCopy('args.sortable', true)
+  sortable!: boolean;
+
+  @localCopy('args.sort')
+  sort: SortDirection | null | undefined;
+
+  @localCopy('args.filterable', true)
+  filterable!: boolean;
+
+  get filter(): string | undefined {
+    return this.args.filter;
+  }
+
+  get filterFunction(): FilterFunction | undefined {
+    return this.args.filterFunction;
+  }
+
+  get filterUsing(): unknown {
+    return this.args.filterUsing;
+  }
+
+  get columnClass(): string | undefined {
+    return this.args.columnClass;
+  }
+
+  @localCopy('args.name')
+  name: string | undefined;
+
+  get isAscSorted(): boolean {
+    return this.sort === 'asc';
+  }
+
+  get isDescSorted(): boolean {
+    return this.sort === 'desc';
+  }
+
+  get isSorted(): boolean {
+    return this.isAscSorted || this.isDescSorted;
+  }
+
+  get normalizedSortSequence(): string[] {
+    const sortSequence = this.args.sortSequence;
+    assert(
+      '@sortSequence must be either a comma-separated string or an array. Got `${sortSequence}.`',
+      Array.isArray(sortSequence) || typeof sortSequence === 'string',
+    );
+
+    if (Array.isArray(sortSequence)) {
+      return sortSequence;
+    } else if (typeof sortSequence === 'string') {
+      return sortSequence.split(',').map((s: string) => s.trim());
+    } else {
+      return [];
+    }
+  }
+
+  constructor(owner: Owner, args: ColumnSignature['Args']) {
+    super(owner, args);
+
+    this.args.parent?.registerColumn(this);
+  }
+
+  willDestroy(): void {
+    super.willDestroy();
+    this.args.parent?.unregisterColumn(this);
+  }
+
+  updateName = modifier((element: Element) => {
+    if (!this.args.name) {
+      this.name = element.textContent?.trim();
+    }
+  });
+
+  @action
+  handleClick(e: MouseEvent): void {
+    if (this.sortable && this.args.onClick) {
+      this.args.onClick(this, e);
+    }
+  }
+
+  <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" this.handleClick}}
+        {{this.updateName}}
+        ...attributes
+      >
+        {{yield
+          (hash
+            isSorted=this.isSorted
+            isAscSorted=this.isAscSorted
+            isDescSorted=this.isDescSorted
+          )
+        }}
+      </th>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,105 @@
+import Component from '@glimmer/component';
+
+import { hash } from '@ember/helper';
+
+import type { WithBoundArgs } from '@glint/template';
+
+import Column from './row/column.gts';
+import type { ColumnParent } from './row/column.gts';
+import Cell from './row/cell.gts';
+import type { ColumnDefinition, SortDirection, Theme } from '../../../types.ts';
+
+/**
+  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
+*/
+
+interface THeadCellLike {
+  prop?: string;
+  column?: ColumnDefinition;
+}
+
+export interface THeadRowSignature {
+  Element: HTMLTableRowElement;
+  Args: {
+    trClass?: string;
+    theme?: Theme;
+    sortable?: boolean;
+    sortSequence?: SortDirection[] | string;
+    onColumnClick?: (column: Column, e: MouseEvent) => void;
+    columns: ColumnDefinition[];
+    parent?: ColumnParent;
+  };
+  Blocks: {
+    default: [
+      {
+        column: WithBoundArgs<
+          typeof Column,
+          'sortable' | 'sortSequence' | 'onClick' | 'theme' | 'parent'
+        >;
+        cell: WithBoundArgs<typeof Cell, 'theme' | 'parent'>;
+      },
+    ];
+  };
+}
+
+export default class THeadRow extends Component<THeadRowSignature> {
+  cells: THeadCellLike[] = [];
+
+  registerCell(cell: THeadCellLike): ColumnDefinition | undefined {
+    let column: ColumnDefinition | undefined;
+
+    if (cell.prop) {
+      column = this.args.columns.find((c) => c.prop === cell.prop);
+      cell.column = column;
+    } else {
+      const index = this.cells.length;
+      column = this.args.columns[index];
+
+      return column;
+    }
+
+    this.cells.push(cell);
+
+    return column;
+  }
+
+  unregisterCell(cell: THeadCellLike): void {
+    const cells = this.cells;
+    const index = cells.indexOf(cell);
+
+    cells.splice(index, 1);
+  }
+
+  <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>
+}

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

@@ -0,0 +1,65 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { hash } from '@ember/helper';
+
+import type { WithBoundArgs } from '@glint/template';
+
+import THeadRow from './thead/row.gts';
+import type 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 row component.
+
+  @class THead
+  @yield {object} head
+  @yield {Component} head.row
+*/
+
+export interface THeadSignature {
+  Element: HTMLTableSectionElement;
+  Args: {
+    theme?: Theme;
+    sortable?: boolean;
+    sortSequence?: SortDirection[] | string;
+    onColumnClick?: (column: Column, e: MouseEvent) => void;
+    columns: ColumnDefinition[];
+    parent?: ColumnParent;
+  };
+  Blocks: {
+    default: [
+      {
+        row: WithBoundArgs<
+          typeof THeadRow,
+          | 'sortable'
+          | 'sortSequence'
+          | 'onColumnClick'
+          | 'columns'
+          | 'theme'
+          | 'parent'
+        >;
+      },
+    ];
+  };
+}
+
+const THeadComponent: TemplateOnlyComponent<THeadSignature> = <template>
+  <thead class={{@theme.thead}} ...attributes>
+    {{yield
+      (hash
+        row=(component
+          THeadRow
+          sortable=@sortable
+          sortSequence=@sortSequence
+          onColumnClick=@onColumnClick
+          columns=@columns
+          theme=@theme
+          parent=@parent
+        )
+      )
+    }}
+  </thead>
+</template>;
+
+export default THeadComponent;