@triptyk/ember-yeti-table 3.0.0 → 3.0.1

package/src/types.ts

@@ -0,0 +1,94 @@
+export type SortDirection = 'asc' | 'desc';
+
+export interface Sort {
+  prop: string;
+  direction: SortDirection;
+}
+
+export type FilterFunction = (value: unknown, filterUsing?: unknown) => boolean;
+
+export type RowFilterFunction = (row: Row, filterUsing?: unknown) => boolean;
+
+export type Row = Record<string, unknown>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type RowClickHandler = (...args: any[]) => void;
+
+export interface ColumnDefinition {
+  prop?: string;
+  filter?: string;
+  filterFunction?: FilterFunction;
+  filterUsing?: unknown;
+  filterable?: boolean;
+  sortable?: boolean;
+  visible?: boolean;
+  sort?: SortDirection | null;
+  columnClass?: string;
+  name?: string;
+}
+
+export interface ThemeSorting {
+  columnSortable: string;
+  columnSorted: string;
+  columnSortedAsc: string;
+  columnSortedDesc: string;
+}
+
+export interface ThemePagination {
+  controls: string;
+  info: string;
+  pageSize: string;
+  next: string;
+  previous: string;
+}
+
+export interface Theme {
+  table: string;
+  row: string;
+  thead: string;
+  theadRow: string;
+  theadCell: string;
+  tbody: string;
+  tbodyRow: string;
+  tbodyCell: string;
+  tfoot: string;
+  tfootRow: string;
+  tfootCell: string;
+  sorting: ThemeSorting;
+  pagination: ThemePagination;
+}
+
+export interface PaginationData {
+  pageSize: number;
+  pageNumber: number;
+  pageStart: number;
+  pageEnd: number;
+  isFirstPage: boolean;
+  isLastPage?: boolean;
+  totalRows?: number;
+  totalPages?: number;
+}
+
+export interface PaginationActions {
+  previousPage: () => void;
+  nextPage: () => void;
+  goToPage: (page: number) => void;
+  changePageSize: (size: number | string) => void;
+}
+
+export interface LoadDataParams {
+  paginationData?: PaginationData;
+  sortData: Array<{
+    prop: string | undefined;
+    direction: SortDirection | null | undefined;
+  }>;
+  filterData: {
+    filter: string;
+    filterUsing: unknown;
+    columnFilters: Array<{
+      prop: string | undefined;
+      filter: string | undefined;
+      filterUsing: unknown;
+    }>;
+  };
+}

package/src/utils/{create-regex.js → create-regex.ts}

@@ -24,21 +24,21 @@ const ESCAPE_REGEX = new RegExp(
   'g',
 );
 
-function escapeRegex(val) {
+function escapeRegex(val: string): string {
   return val.replace(ESCAPE_REGEX, '\\$1');
 }
 
 export default function createRegex(
-  search,
+  search: string | null | undefined,
   regex = false,
   smart = true,
   caseInsensitive = true,
-) {
+): RegExp | undefined {
   if (isBlank(search)) {
     return;
   }
 
-  search = regex ? search : escapeRegex(search);
+  let normalized = regex ? (search as string) : escapeRegex(search as string);
 
   if (smart) {
     /* For smart filtering we want to allow the search to work regardless of
@@ -48,18 +48,18 @@ export default function createRegex(
      *
      * ^(?=.*?\bone\b)(?=.*?\btwo three\b)(?=.*?\bfour\b).*$
      */
-    let words = search.match(/"[^"]+"|[^ ]+/g) || [''];
-    let a = words.map((word) => {
+    const words = normalized.match(/"[^"]+"|[^ ]+/g) || [''];
+    const a = words.map((word) => {
       if (word.charAt(0) === '"') {
-        let m = word.match(/^"(.*)"$/);
-        word = m ? m[1] : word;
+        const m = word.match(/^"(.*)"$/);
+        word = m ? (m[1] as string) : word;
       }
 
       return word.replace('"', '');
     });
 
-    search = `^(?=.*?${a.join(')(?=.*?')}).*$`;
+    normalized = `^(?=.*?${a.join(')(?=.*?')}).*$`;
   }
 
-  return new RegExp(search, caseInsensitive ? 'i' : '');
+  return new RegExp(normalized, caseInsensitive ? 'i' : '');
 }

package/src/utils/filtering-utils.ts

@@ -0,0 +1,91 @@
+import { isEmpty } from '@ember/utils';
+import { get } from '@ember/object';
+
+import createRegex from './create-regex.ts';
+import type { ColumnDefinition, Row, RowFilterFunction } from '../types.ts';
+
+function safeString(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 '';
+  }
+}
+
+function createColumnFilters(
+  columns: ColumnDefinition[],
+): Array<(row: Row) => boolean> {
+  const searcheableColumns = columns.filter((c) => {
+    return !isEmpty(c.filter) || !isEmpty(c.filterFunction);
+  });
+
+  return searcheableColumns.map((c) => {
+    const regex = createRegex(c.filter);
+
+    return (row: Row) => {
+      const value = c.prop ? get(row, c.prop) : undefined;
+      let passesRegex = true;
+
+      if (!isEmpty(c.filter)) {
+        passesRegex = regex ? regex.test(safeString(value)) : true;
+      }
+
+      let passesCustom = true;
+
+      if (!isEmpty(c.filterFunction)) {
+        passesCustom = c.filterFunction!(value, c.filterUsing);
+      }
+
+      return passesRegex && passesCustom;
+    };
+  });
+}
+
+export default function filterData(
+  data: Row[],
+  columns: ColumnDefinition[],
+  globalFilter?: string,
+  filterFunction?: RowFilterFunction,
+  filterUsing?: unknown,
+): Row[] {
+  if (isEmpty(data)) {
+    return [];
+  }
+
+  if (isEmpty(columns)) {
+    // bail out if there are no columns to filter
+    return data;
+  }
+
+  const globalRegex = createRegex(globalFilter, false, true, true);
+
+  const columnFilters = createColumnFilters(columns);
+
+  return data.filter((row) => {
+    let passesGeneral = true;
+
+    if (!isEmpty(globalRegex)) {
+      passesGeneral = columns.some((c) => {
+        return c.prop ? globalRegex!.test(safeString(get(row, c.prop))) : false;
+      });
+    }
+
+    let passesColumn = true;
+
+    if (!isEmpty(columnFilters)) {
+      passesColumn = columnFilters.every((fn) => fn(row));
+    }
+
+    const passesCustom = true;
+    if (!isEmpty(filterFunction)) {
+      passesColumn = filterFunction!(row, filterUsing);
+    }
+
+    return passesGeneral && passesColumn && passesCustom;
+  });
+}

package/src/utils/{sorting-utils.js → sorting-utils.ts}

@@ -1,19 +1,23 @@
 import { get } from '@ember/object';
 import { compare, isNone } from '@ember/utils';
 
-function merge(left, right, comparator) {
-  let mergedArray = [];
+import type { Sort } from '../types.ts';
+
+export type Comparator<T = unknown> = (a: T, b: T) => number;
+
+function merge<T>(left: T[], right: T[], comparator: Comparator<T>): T[] {
+  const mergedArray: T[] = [];
   let leftIndex = 0;
   let rightIndex = 0;
 
   while (leftIndex < left.length && rightIndex < right.length) {
-    let comparison = comparator(left[leftIndex], right[rightIndex]);
+    const comparison = comparator(left[leftIndex]!, right[rightIndex]!);
 
     if (comparison <= 0) {
-      mergedArray.push(left[leftIndex]);
+      mergedArray.push(left[leftIndex]!);
       leftIndex++;
     } else {
-      mergedArray.push(right[rightIndex]);
+      mergedArray.push(right[rightIndex]!);
       rightIndex++;
     }
   }
@@ -36,33 +40,38 @@ function merge(left, right, comparator) {
  * a general comparator. The built in sort function and Ember's sort functions
  * are not stable, and `_.sortBy` doesn't take a general comparator. Ideally
  * lodash would add a `_.sort` function whose API would mimic this function's.
- *
- * @function
- * @param {Array} array The array to be sorted
- * @param {Comparator} comparator The comparator function to compare elements with.
- * @return {Array} A sorted array
  */
-export function mergeSort(array, comparator = compare) {
+export function mergeSort<T>(
+  array: T[],
+  comparator: Comparator<T> = compare,
+): T[] {
   if (array.length <= 1) {
     return array;
   }
 
-  let middleIndex = Math.floor(array.length / 2);
-  let leftArray = mergeSort(array.slice(0, middleIndex), comparator);
-  let rightArray = mergeSort(array.slice(middleIndex), comparator);
+  const middleIndex = Math.floor(array.length / 2);
+  const leftArray = mergeSort(array.slice(0, middleIndex), comparator);
+  const rightArray = mergeSort(array.slice(middleIndex), comparator);
 
   return merge(leftArray, rightArray, comparator);
 }
 
-export function sortMultiple(itemA, itemB, sorts, compare) {
-  let compareValue;
+export function sortMultiple<T>(
+  itemA: T,
+  itemB: T,
+  sorts: Sort[],
+  compareFn: Comparator,
+): number {
+  let compareValue = 0;
 
-  for (let { prop, direction } of sorts) {
-    let valueA = get(itemA, prop);
-    let valueB = get(itemB, prop);
+  for (const { prop, direction } of sorts) {
+    const valueA = get(itemA as object, prop);
+    const valueB = get(itemB as object, prop);
 
     compareValue =
-      direction === 'asc' ? compare(valueA, valueB) : -compare(valueA, valueB);
+      direction === 'asc'
+        ? compareFn(valueA, valueB)
+        : -compareFn(valueA, valueB);
 
     if (compareValue !== 0) {
       break;
@@ -72,17 +81,17 @@ export function sortMultiple(itemA, itemB, sorts, compare) {
   return compareValue;
 }
 
-function isExactlyNaN(value) {
+function isExactlyNaN(value: unknown): boolean {
   return typeof value === 'number' && isNaN(value);
 }
 
-function isEmpty(value) {
+function isEmpty(value: unknown): boolean {
   return isNone(value) || isExactlyNaN(value);
 }
 
-function orderEmptyValues(itemA, itemB) {
-  let aIsEmpty = isEmpty(itemA);
-  let bIsEmpty = isEmpty(itemB);
+function orderEmptyValues(itemA: unknown, itemB: unknown): number {
+  const aIsEmpty = isEmpty(itemA);
+  const bIsEmpty = isEmpty(itemB);
 
   if (aIsEmpty && !bIsEmpty) {
     return -1;
@@ -97,7 +106,7 @@ function orderEmptyValues(itemA, itemB) {
   }
 }
 
-export function compareValues(itemA, itemB) {
+export function compareValues(itemA: unknown, itemB: unknown): number {
   if (isEmpty(itemA) || isEmpty(itemB)) {
     return orderEmptyValues(itemA, itemB);
   }

package/dist/_app_/themes/default-theme.js

@@ -1 +0,0 @@
-export { default } from "@triptyk/ember-yeti-table/themes/default-theme";

package/dist/_app_/utils/create-regex.js

@@ -1 +0,0 @@
-export { default } from "@triptyk/ember-yeti-table/utils/create-regex";

package/dist/_app_/utils/filtering-utils.js

@@ -1 +0,0 @@
-export { default } from "@triptyk/ember-yeti-table/utils/filtering-utils";

package/dist/_app_/utils/sorting-utils.js

@@ -1 +0,0 @@
-export { default } from "@triptyk/ember-yeti-table/utils/sorting-utils";

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

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

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

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

@@ -1,89 +0,0 @@
-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);
-  }
-}