@spectric/ui 0.0.10 → 0.0.11

package/dist/components/pagination/pagination.d.ts

@@ -4,11 +4,11 @@ import { ButtonSizesTypes } from '../Button';
 export declare const PaginationElementTag = "spectric-pagination";
 export type { PaginationProps, PaginationChangeProps, PaginationEvents };
 interface PaginationChangeProps {
-    page: number;
-    pageSize: number;
+    page?: number;
+    pageSize?: number;
 }
 interface PaginationProps extends PaginationChangeProps {
-    size: ButtonSizesTypes;
+    size?: ButtonSizesTypes;
     totalItems?: number;
     pageSizeOptions?: number[];
 }
@@ -42,7 +42,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link PaginationElement}
              */
             [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
         }
@@ -51,7 +51,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link PaginationElement}
                  */
                 [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
             }

package/dist/components/table/cell.d.ts

@@ -55,4 +55,5 @@ declare global {
         }
     }
 }
+export declare const rowGetValue: (context: Record<string, any>, key: string) => any;
 export {};

package/dist/components/table/header.d.ts

@@ -11,10 +11,11 @@ interface HeaderProps<T> {
 export declare class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
     columns: ColumnSettings<T>[];
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _handleSortChange: (column: ColumnSettings<T>) => void;
     protected render(): unknown;
 }
 interface TableHeaderEvents {
-    'sort': (event: CustomEvent<ColumnSettings<any>>) => void;
+    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/table/sorting.d.ts

@@ -0,0 +1,5 @@
+import { ColumnSettings } from './table';
+/**
+ * Creates a chain of sort functions so you can perform multi column sorting.
+ */
+export declare const createSortChain: <T>(sorts: ColumnSettings<T>[]) => ((a: T, b: T) => number | undefined)[];

package/dist/components/table/table.d.ts

@@ -5,22 +5,52 @@ import { FilterEvent } from './cell';
 export declare const TableElementTag = "spectric-table";
 export type { TableProps, TableEvents };
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null;
+export declare enum TableSelectOptions {
+    multi = "multi",
+    single = "single",
+    none = "none"
+}
+export declare enum TableSortOption {
+    multi = "multi",
+    single = "single"
+}
+export type TableSortOptionTypes = `${TableSortOption}`;
+export declare enum TableSortDirection {
+    ascending = "ascending",
+    decending = "decending",
+    none = "none"
+}
+export type TableSortDirectionTypes = `${TableSortDirection}`;
 export type ColumnSettings<T> = {
     width?: number;
     whiteSpace?: "nowrap";
     hidden?: boolean;
     sortable?: boolean;
+    sortDirection?: TableSortDirectionTypes;
     filterable?: boolean;
     title?: DomRenderable;
+    /**
+     * Key to used for getting data from an object for a cell
+     */
     key?: string;
+    /**
+     * Render function to render a table cell for displaying custom html
+     */
     render?: (row: T, table: TableElement<T>) => DomRenderable;
+    /**
+     * Custom comparator function for sorting
+     */
+    compareFn?: ((a: T, b: T) => number) | undefined;
 };
-type TableSelectOptions = "multi" | "single";
-interface TableProps<T> {
+export type TableSelectOptionsTypes = `${TableSelectOptions}`;
+export interface TableDataOptions<T> {
     pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
+}
+interface TableProps<T> extends TableDataOptions<T> {
     data: T[];
-    select?: TableSelectOptions;
+    select: TableSelectOptionsTypes;
+    sort?: TableSortOptionTypes;
 }
 type DomEvent<T> = Event & {
     target: T;
@@ -32,13 +62,16 @@ type DomEvent<T> = Event & {
  */
 export declare class TableElement<T> extends LitElement implements TableProps<T> {
     data: T[];
-    pagination?: PaginationProps | undefined;
+    pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
-    select?: TableSelectOptions;
+    select: TableSelectOptionsTypes;
+    sort: TableSortOptionTypes;
+    static getDefaultDataSorterAndPaginatior<T>(data: T[]): (props: TableDataOptions<T>) => T[];
     private _handlePaginationChange;
+    private _handleSortChange;
     private _emitChange;
     private __DO_NOT_USE_filter;
-    selected: T[];
+    private selected;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
     protected render(): unknown;
@@ -56,7 +89,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TableElement}
              */
             [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
         }
@@ -65,7 +98,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TableElement}
                  */
                 [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
             }

package/dist/components/tooltip/tooltip.d.ts

@@ -77,7 +77,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TooltipElement}
              */
             [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
         }
@@ -86,7 +86,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TooltipElement}
                  */
                 [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
             }

package/dist/custom-elements.json

@@ -2015,16 +2015,36 @@
     },
     {
       "name": "spectric-table-header",
-      "description": "Pagination Element\n\nProperties:\n\n  * `columns` {`ColumnSettings<T>[]`} - ",
-      "attributes": []
+      "description": "Pagination Element\n\nEvents:\n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\nProperties:\n\n  * `_handleSortChange` - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
+      "attributes": [
+        {
+          "name": "onsortChange",
+          "description": "`sortChange` {`CustomEvent<ColumnSettings<T>>`} - "
+        }
+      ]
     },
     {
       "name": "spectric-table",
-      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `select` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`TableSelectOptions | undefined`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - \n\n  * `select` {`TableSelectOptions | undefined`} - ",
+      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `data` {`T[]`} - \n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
       "attributes": [
         {
           "name": "select",
-          "description": "`select` {`TableSelectOptions | undefined`} - \n\nProperty: select",
+          "description": "`select` {`\"none\" | \"multi\" | \"single\"`} - \n\nProperty: select\n\nDefault: none",
+          "values": [
+            {
+              "name": "none"
+            },
+            {
+              "name": "multi"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
+        {
+          "name": "sort",
+          "description": "`sort` {`\"multi\" | \"single\"`} - \n\nProperty: sort\n\nDefault: single",
           "values": [
             {
               "name": "multi"
@@ -2036,15 +2056,15 @@
         },
         {
           "name": "onchange",
-          "description": "`change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - "
+          "description": "`change` {`CustomEvent<TableDataOptions<T>>`} - "
         },
         {
           "name": "onfilter",
           "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
         },
         {
-          "name": "onselect",
-          "description": "`select` {`CustomEvent<T[]>`} - "
+          "name": "onselected",
+          "description": "`selected` {`CustomEvent<T[]>`} - "
         }
       ]
     },
@@ -2095,7 +2115,7 @@
     },
     {
       "name": "spectric-storybook-example-content",
-      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `pagination` {`{ page: number; pageSize: number; size: string; totalItems: number; }`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
+      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dataSorter` - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `columns` {`ColumnSettings<TestData>[]`} - \n\n  * `pagination` {`PaginationProps`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
       "attributes": [
         {
           "name": "frameWidth",