@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Table/Table.svelte

@@ -1,95 +1,164 @@
 <!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) -->
-<script>import { onMount } from "svelte";
-export let data;
-export let title = null;
-export let dek = null;
-export let notes = null;
-export let source = null;
-export let includedFields = Object.keys(data[0]).filter(
-  (f) => f !== "searchStr"
-);
-export let truncated = false;
-export let truncateLength = 5;
-export let paginated = false;
-export let pageSize = 25;
-export let searchable = false;
-export let searchPlaceholder = "Search in table";
-export let filterField;
-export let filterLabel;
-export let sortable = false;
-export let sortField = Object.keys(data[0])[0];
-export let sortableFields = Object.keys(data[0]).filter(
-  (f) => f !== "searchStr"
-);
-export let sortDirection = "ascending";
-export let fieldFormatters = {};
-export let width = "normal";
-export let id = "";
-let cls = "";
-export { cls as class };
-import Block from "../Block/Block.svelte";
-import Pagination from "./Pagination.svelte";
-import SearchInput from "../SearchInput/SearchInput.svelte";
-import Select from "./Select.svelte";
-import SortArrow from "./SortArrow.svelte";
-import { filterArray, paginateArray, getOptions } from "./utils.js";
-let showAll = false;
-let pageNumber = 1;
-let searchText = "";
-const filterList = filterField ? getOptions(data, filterField) : void 0;
-let filterValue = "";
-$: filteredData = filterArray(data, searchText, filterField, filterValue);
-$: sortedData = sortArray(filteredData, sortField, sortDirection);
-$: currentPageData = truncated ? showAll ? sortedData : sortedData.slice(0, truncateLength + 1) : paginated ? paginateArray(sortedData, pageSize, pageNumber) : sortedData;
-function toggleTruncate(_event) {
-  showAll = !showAll;
-}
-function handleSearchInput(event) {
-  searchText = event.detail.value;
-  pageNumber = 1;
-}
-function handleFilterInput(event) {
-  const value = event.detail.value;
-  filterValue = value === "All" ? "" : value;
-  pageNumber = 1;
-}
-function handleSort(event) {
-  if (!sortable) return;
-  sortField = event.target.getAttribute("data-field");
-  sortDirection = sortDirection === "ascending" ? "descending" : "ascending";
-}
-function sortArray(array, column, direction) {
-  if (!sortable) return array;
-  return array.sort((a, b) => {
-    if (a[column] < b[column]) {
-      return direction === "ascending" ? -1 : 1;
-    } else if (a[column] > b[column]) {
-      return direction === "ascending" ? 1 : -1;
-    } else {
-      return 0;
-    }
-  });
-}
-function formatValue(item, field) {
-  const value = item[field];
-  if (field in fieldFormatters) {
-    const func = fieldFormatters[field];
-    return func(value);
-  } else {
-    return value;
+<script lang="ts">
+  /** Import local helpers */
+  import Block from '../Block/Block.svelte';
+  import Pagination from './components/Pagination.svelte';
+  import Select from './components/Select.svelte';
+  import SortArrow from './components/SortArrow.svelte';
+  import SearchInput from '../SearchInput/SearchInput.svelte';
+  import {
+    filterArray,
+    paginateArray,
+    getOptions,
+    sortArray,
+    formatValue,
+    type FieldFormatters,
+  } from './utils';
+
+  // Types
+  import type { Option } from '../@types/global';
+
+  interface Props<T extends Record<string, unknown>> {
+    /** Data for the table as an array. */
+    data: T[];
+
+    /** A title that runs above the table. */
+    title?: string;
+    /** A block of text that runs above the table. */
+    dek?: string;
+    /** A footnote that runs below the table. */
+    notes?: string;
+    /** A source line that runs below the table. */
+    source?: string;
+    /** List of the fields to include in the table. By default everything goes. */
+    includedFields?: string[];
+    /** Whether or not the table is cutoff after a set number of rows. */
+    truncated?: boolean;
+    /** If the table is truncated, how many rows to allow before the cutoff. */
+    truncateLength?: number;
+    /** Whether or not the table is paginated after a set number of rows. */
+    paginated?: boolean;
+    /** The default page size. */
+    pageSize?: number;
+    /** Whether or not searches are allowed. */
+    searchable?: boolean;
+    /** The placeholder text that appears in the search box. */
+    searchPlaceholder?: string;
+    /**  A field to offer uses as an interactive filter. */
+    filterField?: string;
+    /** The label to place above the filter box. */
+    filterLabel?: string;
+    /** Whether or not sorts are allowed. */
+    sortable?: boolean;
+    /** The column to sort by. By default it's the first header. */
+    sortField?: string;
+    /** The columns that are allowed to sort. It's all of them by default. */
+    sortableFields?: string[];
+    /** The direction of the sort. By default it's ascending. */
+    sortDirection?: 'ascending' | 'descending';
+    /** Custom field formatting functions. Should be keyed to the name of the field. */
+    fieldFormatters?: FieldFormatters<T>;
+    /** Width of the component within the text well. */
+    width?: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
   }
-}
-onMount(() => {
-  data.forEach((d) => {
-    d.searchStr = includedFields.map((field) => d[field]).join(" ").toLowerCase();
+
+  let {
+    data,
+    title,
+    dek,
+    notes,
+    source,
+    includedFields = Object.keys(data[0]).filter((f) => f !== 'searchStr'),
+    truncated = false,
+    truncateLength = 5,
+    paginated = false,
+    pageSize = 25,
+    searchable = false,
+    searchPlaceholder = 'Search in table',
+    filterField = '',
+    filterLabel,
+    sortable = false,
+    sortField = Object.keys(data[0])[0],
+    sortableFields = Object.keys(data[0]).filter((f) => f !== 'searchStr'),
+    sortDirection = $bindable('ascending'),
+    fieldFormatters,
+    width = 'normal',
+    id = '',
+    class: cls = '',
+  }: Props<Record<string, unknown>> = $props();
+
+  /** Set truncate, filtering and pagination configuration */
+  let showAll = $state(false);
+  let pageNumber = $state(1);
+  let searchText = $state('');
+  let filterList = $derived(
+    filterField ? getOptions(data, filterField) : undefined
+  );
+  let filterValue = $state('');
+
+  /** Helper functions that modify variables within this component */
+  //* * Handle show all, search, filter, sort and pagination events */
+  function toggleTruncate() {
+    showAll = !showAll;
+  }
+
+  /** Filters table data based on the input value in the search bar */
+  function handleSearchInput(newSearchText: string) {
+    searchText = newSearchText;
+    pageNumber = 1;
+  }
+
+  function handleFilterInput(newSearchText: string) {
+    filterValue = newSearchText === 'All' ? '' : newSearchText;
+    pageNumber = 1;
+  }
+
+  function handleSort(event: MouseEvent) {
+    if (!sortable) return;
+    sortField = (event.target as HTMLElement).getAttribute('data-field') || '';
+    sortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
+  }
+
+  /** Add the `searchStr` field to data */
+  let searchableData = $derived.by(() => {
+    return data.map((d) => {
+      return {
+        ...d,
+        searchStr: includedFields
+          .map((field) => d[field])
+          .join(' ')
+          .toLowerCase(),
+      };
+    });
+  });
+  /** Set up the data pipeline */
+  let filteredData = $derived.by(() =>
+    filterArray(searchableData, searchText, filterField, filterValue)
+  );
+
+  let sortedData = $derived.by(() =>
+    sortArray(filteredData, sortField, sortDirection, sortable)
+  );
+
+  let currentPageData = $derived.by(() => {
+    if (truncated) {
+      return showAll ? sortedData : sortedData.slice(0, truncateLength + 1);
+    }
+    if (paginated) {
+      return paginateArray(sortedData, pageSize, pageNumber);
+    }
+    return sortedData;
   });
-});
 </script>
 
 <Block {width} {id} class="fmy-6 {cls}">
-  <article class="table-wrapper">
+  <div class="table-wrapper">
     {#if title || dek || searchable || filterList}
-      <header class="table--header w-full">
+      <div class="table--header w-full">
         {#if title}
           <h3 class="table--header--title">{@html title}</h3>
         {/if}
@@ -101,31 +170,28 @@ onMount(() => {
             {#if filterList}
               <div class="table--header--filter">
                 <Select
-                  label="{filterLabel || filterField}"
-                  options="{filterList}"
-                  on:select="{handleFilterInput}"
+                  label={filterLabel || filterField}
+                  options={filterList as Option[]}
+                  onselect={handleFilterInput}
                 />
               </div>
             {/if}
             {#if searchable}
               <div class="table--header--search">
-                <SearchInput
-                  bind:searchPlaceholder
-                  on:search="{handleSearchInput}"
-                />
+                <SearchInput {searchPlaceholder} onsearch={handleSearchInput} />
               </div>
             {/if}
           </nav>
         {/if}
-      </header>
+      </div>
     {/if}
-    <section class="table w-full">
+    <div class="table w-full">
       <table
         class="w-full"
         class:paginated
-        class:truncated="{truncated &&
+        class:truncated={truncated &&
           !showAll &&
-          data.length > truncateLength}"
+          searchableData.length > truncateLength}
       >
         <thead class="table--thead">
           <tr>
@@ -133,23 +199,20 @@ onMount(() => {
               <th
                 scope="col"
                 class="table--thead--th h4 pl-0 py-2 pr-2"
-                class:sortable="{sortable && sortableFields.includes(field)}"
-                class:sort-ascending="{sortable &&
+                class:sortable={sortable && sortableFields.includes(field)}
+                class:sort-ascending={sortable &&
                   sortField === field &&
-                  sortDirection === 'ascending'}"
-                class:sort-descending="{sortable &&
+                  sortDirection === 'ascending'}
+                class:sort-descending={sortable &&
                   sortField === field &&
-                  sortDirection === 'descending'}"
-                data-field="{field}"
-                on:click="{handleSort}"
+                  sortDirection === 'descending'}
+                data-field={field}
+                onclick={handleSort}
               >
                 {field}
                 {#if sortable && sortableFields.includes(field)}
                   <div class="table--thead--sortarrow fml-1 avoid-clicks">
-                    <SortArrow
-                      bind:sortDirection
-                      active="{sortField === field}"
-                    />
+                    <SortArrow {sortDirection} active={sortField === field} />
                   </div>
                 {/if}
               </th>
@@ -158,22 +221,22 @@ onMount(() => {
         </thead>
         <tbody class="table--tbody">
           {#each currentPageData as item, idx}
-            <tr data-row-index="{idx}">
+            <tr data-row-index={idx}>
               {#each includedFields as field}
                 <td
                   class="body-note pl-0 py-2 pr-2"
-                  data-row-index="{idx}"
-                  data-field="{field}"
-                  data-value="{item[field]}"
+                  data-row-index={idx}
+                  data-field={field}
+                  data-value={item[field]}
                 >
-                  {@html formatValue(item, field)}
+                  {@html formatValue(item, field, fieldFormatters)}
                 </td>
               {/each}
             </tr>
           {/each}
           {#if searchable && searchText && currentPageData.length === 0}
             <tr>
-              <td class="no-results" colspan="{includedFields.length}">
+              <td class="no-results" colspan={includedFields.length}>
                 No results found for "{searchText}"
               </td>
             </tr>
@@ -183,7 +246,7 @@ onMount(() => {
           <tfoot class="table--tfoot">
             {#if notes}
               <tr>
-                <td class="" colspan="{includedFields.length}">
+                <td class="" colspan={includedFields.length}>
                   <div class="fmt-2">
                     {@html notes}
                   </div>
@@ -192,7 +255,7 @@ onMount(() => {
             {/if}
             {#if source}
               <tr>
-                <td class="" colspan="{includedFields.length}">
+                <td class="" colspan={includedFields.length}>
                   <div class="fmt-1">
                     {@html source}
                   </div>
@@ -202,26 +265,30 @@ onMount(() => {
           </tfoot>
         {/if}
       </table>
-    </section>
-    {#if truncated && data.length > truncateLength}
+    </div>
+    {#if truncated && searchableData.length > truncateLength}
       <nav
         aria-label="Show all button"
         class="show-all flex items-center justify-center fmt-2"
       >
-        <button class="body-caption" on:click="{toggleTruncate}"
-          >{#if showAll}Show fewer rows{:else}Show {data.length -
-              truncateLength} more rows{/if}</button
-        >
+        <button class="body-caption" onclick={toggleTruncate}>
+          {#if showAll}
+            Show fewer rows
+          {:else}
+            Show {searchableData.length - truncateLength}
+            more rows
+          {/if}
+        </button>
       </nav>
     {/if}
     {#if paginated}
       <Pagination
         bind:pageNumber
         bind:pageSize
-        bind:pageLength="{currentPageData.length}"
-        bind:n="{sortedData.length}"
+        pageLength={currentPageData.length}
+        n={sortedData.length}
       />{/if}
-  </article>
+  </div>
 </Block>
 
 <style>/* Generated from 
@@ -231,42 +298,42 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 */
 /* Scales by 1.125 */
-section.table {
+.table {
   overflow-x: auto;
 }
 
-section.table table {
+.table table {
   background-color: transparent;
   border-collapse: separate;
   border-spacing: 0;
 }
-section.table table thead tr th {
+.table table thead tr th {
   border-bottom: 1px solid var(--theme-colour-text-primary);
   background-color: var(--theme-colour-background);
   text-align: inherit;
 }
-section.table table thead tr th.sortable {
+.table table thead tr th.sortable {
   cursor: pointer;
   white-space: nowrap;
 }
-section.table table thead tr th .table--thead--sortarrow {
+.table table thead tr th .table--thead--sortarrow {
   display: inline-block;
   position: relative;
   top: 5px;
 }
-section.table table tbody td {
+.table table tbody td {
   font-size: var(--theme-font-size-sm);
   font-weight: 400;
   vertical-align: top;
   border-bottom: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
 }
-section.table table tbody td.no-results {
+.table table tbody td.no-results {
   color: var(--theme-colour-text-secondary);
 }
-section.table table tfoot.table--tfoot tr {
+.table table tfoot.table--tfoot tr {
   border-bottom: 0;
 }
-section.table table tfoot.table--tfoot td {
+.table table tfoot.table--tfoot td {
   font-family: var(--theme-font-family-note);
   color: var(--theme-colour-text-secondary);
   font-size: var(--theme-font-size-xs);
@@ -275,7 +342,7 @@ section.table table tfoot.table--tfoot td {
   margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
   margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
-section.table table.truncated tbody tr:last-child:not(:first-child) {
+.table table.truncated tbody tr:last-child:not(:first-child) {
   border-bottom: none;
   mask-image: linear-gradient(to bottom, var(--theme-colour-text-primary) 0%, transparent 100%);
   -webkit-mask-image: linear-gradient(to bottom, var(--theme-colour-text-primary) 0%, transparent 100%);

package/dist/components/Table/Table.svelte.d.ts

@@ -1,95 +1,51 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * A source for the data.
-           * @type []
-           * @required
-           */ data: [];
-        /**
-           * A title that runs above the table.
-           * @type {string}
-           */ title?: string | null;
-        /**
-           * A block of text that runs above the table.
-           * @type {string}
-           */ dek?: string | null;
-        /**
-           * A footnote that runs below the table.
-           * @type {string}
-           */ notes?: string | null;
-        /**
-           * A source line that runs below the table.
-           * @type {string}
-           */ source?: string | null;
-        /**
-           * list of the fields to include in the table. By default everything goes.
-           * @type []
-           */ includedFields?: string[];
-        /**
-           * Whether or not the table is cutoff after a set number of rows.
-           * @type {boolean}
-           */ truncated?: boolean;
-        /**
-           * If the table is truncated, how many rows to allow before the cutoff.
-           * @type {number}
-           */ truncateLength?: number;
-        /**
-           * Whether or not the table is paginated after a set number of rows.
-           * @type {boolean}
-           */ paginated?: boolean;
-        /**
-           * The default page size.
-           * @type {number}
-           */ pageSize?: number;
-        /**
-           * Whether or not searches are allowed.
-           * @type {boolean}
-           */ searchable?: boolean;
-        /**
-           * The placeholder text that appears in the search box.
-           * @type {string}
-           */ searchPlaceholder?: string;
-        /**
-           * A field to offer uses as an interactive filter.
-           * @type {string}
-           */ filterField: string;
-        /**
-           * The label to place above the filter box
-           * @type {string}
-           */ filterLabel: string;
-        /**
-           * Whether or not sorts are allowed.
-           * @type {boolean}
-           */ sortable?: boolean;
-        /**
-           * The column to sort by. By default it's the first header.
-           * @type {string}
-           */ sortField?: string;
-        /**
-           * The columns that are allowed to sort. It's all of them by default.
-           * @type {string}
-           */ sortableFields?: string[];
-        sortDirection?: "ascending" | "descending";
-        /**
-           * Custom field formatting functions. Should be keyed to the name of the field.
-           * @type {object}
-           */ fieldFormatters?: object;
-        width?: "normal" | "wide" | "wider" | "widest" | "fluid";
-        /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-/** `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) */
-export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+import { type FieldFormatters } from './utils';
+interface Props<T extends Record<string, unknown>> {
+    /** Data for the table as an array. */
+    data: T[];
+    /** A title that runs above the table. */
+    title?: string;
+    /** A block of text that runs above the table. */
+    dek?: string;
+    /** A footnote that runs below the table. */
+    notes?: string;
+    /** A source line that runs below the table. */
+    source?: string;
+    /** List of the fields to include in the table. By default everything goes. */
+    includedFields?: string[];
+    /** Whether or not the table is cutoff after a set number of rows. */
+    truncated?: boolean;
+    /** If the table is truncated, how many rows to allow before the cutoff. */
+    truncateLength?: number;
+    /** Whether or not the table is paginated after a set number of rows. */
+    paginated?: boolean;
+    /** The default page size. */
+    pageSize?: number;
+    /** Whether or not searches are allowed. */
+    searchable?: boolean;
+    /** The placeholder text that appears in the search box. */
+    searchPlaceholder?: string;
+    /**  A field to offer uses as an interactive filter. */
+    filterField?: string;
+    /** The label to place above the filter box. */
+    filterLabel?: string;
+    /** Whether or not sorts are allowed. */
+    sortable?: boolean;
+    /** The column to sort by. By default it's the first header. */
+    sortField?: string;
+    /** The columns that are allowed to sort. It's all of them by default. */
+    sortableFields?: string[];
+    /** The direction of the sort. By default it's ascending. */
+    sortDirection?: 'ascending' | 'descending';
+    /** Custom field formatting functions. Should be keyed to the name of the field. */
+    fieldFormatters?: FieldFormatters<T>;
+    /** Width of the component within the text well. */
+    width?: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
 }
-export {};
+/** `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) */
+declare const Table: import("svelte").Component<Props<Record<string, unknown>>, {}, "sortDirection">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Table/components/LeftArrow.svelte.d.ts

@@ -0,0 +1,26 @@
+export default LeftArrow;
+type LeftArrow = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const LeftArrow: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}