@nanoporetech-digital/components 3.3.4 → 3.5.0

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

@@ -8,10 +8,12 @@ import type { TableTypes } from '../../interface';
  *- Built-in column sort
  *- Easily swap in API / async based search / filter & sort
  *- Pin headers, footers, rows, columns
+ *- Drag-&-Drop columns to re-order
  *- Add custom rendering at every level
  *- Add custom properties at every level
  *
  * @slot caption - The table's caption. You must either use this or the `caption` attribute.
+ * @slot no-results - text to display when search or filtering yields no results
  */
 export declare class Table implements ComponentInterface {
   constructor();
@@ -65,6 +67,18 @@ export declare class Table implements ComponentInterface {
    * A good use-case would be performing the sort on a server / via fetch.
    * Then on success, updating the table's data via the `rows` property */
   customSortFn?: (property: TableTypes.Prop, order: TableTypes.Order) => Promise<void>;
+  /**
+   * The default sortable option for all columns.
+   * `true` will enable column sorting unless you set `sortable: false` on a column
+   * `false` will disable column sorting unless you set `sortable: true` on a column
+   */
+  defaultSort: boolean;
+  /**
+   * The default draggable option for all columns.
+   * `true` will enable column drag-to-reorder unless you set `draggable: false` on a column
+   * `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
+   */
+  defaultColDraggable: boolean;
   handleSearchTermChange(): void;
   /** Fired whenever a block is activated by scrolling into view / becoming visible
    * This could be leveraged for infinite scrolling / to fetch more data.
@@ -86,8 +100,20 @@ export declare class Table implements ComponentInterface {
     column: TableTypes.Prop;
     order: TableTypes.Order;
   }>;
+  /** Fired when a column has started dragging */
+  nanoTblColDrag: EventEmitter<{
+    column: TableTypes.Prop;
+  }>;
+  /** Fired when a column has been dropped (after dragging)
+   * `event.preventDefault()` to stop column re-order. */
+  nanoTblColDrop: EventEmitter<{
+    fromCol: TableTypes.Prop;
+    toCol: TableTypes.Prop;
+    fromIndex: number;
+    toIndex: number;
+  }>;
   /** Fired before a column is filtered.
-   * `event.preventDefault()` to stop filtering.  */
+   * `event.preventDefault()` to stop filtering. */
   nanoTblBeforeFilter: EventEmitter<{
     filters: TableTypes.Filter[];
   }>;
@@ -119,6 +145,11 @@ export declare class Table implements ComponentInterface {
    * @returns a promise which resolves when complete
    */
   addFilters(filters: TableTypes.Filter[], additive?: boolean): Promise<void>;
+  /** Remove filters from a column
+   * @param columnNames - the filters to apply
+   * @returns a promise which resolves when complete
+   */
+  removeFilters(columnNames: TableTypes.Prop[]): Promise<void>;
   host: HTMLNanoTableElement;
   private renderId;
   private store;
@@ -127,6 +158,7 @@ export declare class Table implements ComponentInterface {
   private currentSort;
   private tableEle;
   private topAnchorEle;
+  private tableWrapperEle;
   /** `tr` elements split into units - defined by `perPage`
     These are show / hidden for perf */
   blocks: TableTypes.TBody[];
@@ -145,6 +177,8 @@ export declare class Table implements ComponentInterface {
   private _isReady;
   scrollListener(): void;
   private handleReady;
+  private colDrag;
+  private colDrop;
   /**
    * Start a sort - can be cancelled by `preventDefault`
    * @param order - column order
@@ -197,6 +231,7 @@ export declare class Table implements ComponentInterface {
   /** Process slotted content */
   private processSlots;
   private handleColumnPinned;
+  private handleResizeChange;
   componentWillLoad(): Promise<void>;
   connectedCallback(): void;
   componentDidLoad(): void;

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

@@ -0,0 +1,16 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import type { TableTypes } from '../../interface';
+declare type TableColHeadProps = {
+  column: TableTypes.ColumnConfig;
+  headRenderer: TableTypes.HeadFootRenderer;
+  onColumnSortClick?: (order: TableTypes.Order, column: TableTypes.Prop, el: HTMLTableCellElement) => void;
+  onColumnPinned?: TableTypes.PinnedCb;
+  onColumnDrag?: (column: TableTypes.Prop, el: HTMLTableCellElement) => void;
+  onColumnDrop?: (fromColumn: TableTypes.Prop, toColumn: TableTypes.Prop, el: HTMLTableCellElement) => void;
+  defaults: {
+    draggable?: boolean;
+    sortable?: boolean;
+  };
+};
+export declare const TableColHead: FunctionalComponent<TableColHeadProps>;
+export {};

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

@@ -0,0 +1,15 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import type { TableTypes } from '../../interface';
+declare type TableRowProps = {
+  rowRenderer: TableTypes.RowRenderer;
+  rowIndex: number;
+  row: TableTypes.RowData;
+  onColumnPinned?: TableTypes.PinnedCb;
+};
+export declare const TableRow: FunctionalComponent<TableRowProps>;
+declare type TableHeadFootProps = {
+  rowRenderer: TableTypes.HeadFootRenderer;
+  onColumnPinned?: TableTypes.PinnedCb;
+};
+export declare const TableHeadFootRow: FunctionalComponent<TableHeadFootProps>;
+export {};

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

@@ -1,3 +1,102 @@
+import { VNode } from '../../stencil-public-runtime';
+import type { TableTypes } from '../../interface';
+declare type ValidRenderTypes = 'tr' | 'th' | 'td';
+/**
+ * Get a model object for custom cell / property renderers.
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex - the current column index being rendered
+ * @returns a model object which will be passed to custom renderers
+ */
+export declare function colDataModel(rowIndex: number, colIndex: number): TableTypes.ColumnDataSchemaModel;
+/**
+ * Get a model object for custom row renderers.
+ * @param rowIndex
+ * @returns a model object passed to custom row renderers
+ */
+export declare function rowDataModel(rowIndex: number): TableTypes.RowDataSchemaModel;
+/**
+ * Merges 2 objects of properties together
+ * @param current - property object
+ * @param extra - additional object property
+ * @returns - merged properties that can be applied to a node
+ */
+export declare function mergeProperties<T extends TableTypes.CellProps | TableTypes.CellProps>(current: T, extra: T): T;
+/**
+ * Returns the current nano-table's stores.
+ * @returns the current nano-table stores
+ */
+export declare function fetchStores(): import("./table.store").TableStores;
+/**
+ * Merges any defined cell properties with properties
+ * required by `nano-table` functionality
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex = the current column index being rendered
+ * @param defaultProps - default properties required by `nano-table`
+ * @returns - the merged properties that will be applied to a node
+ */
+export declare function mergeCellProperties(rowIndex: number, colIndex: number, defaultProps: TableTypes.CellProps): TableTypes.CellProps;
+/**
+ * Renders a table header (within a thead) using a custom template if set.
+ * @param col - the current column config object
+ * @returns - a JSX node
+ */
+export declare function colheadFootRender(col: TableTypes.ColumnConfig): VNode;
+/**
+ * Adds element to Intersection Observer. Fires when element changes on the x axis
+ * @param el - an element to observe
+ * @param pos - the edge to watch (start or end)
+ * @param cb - callback when an intersection state changes.
+ */
+export declare function addHObserver(el: HTMLTableCellElement, pos: TableTypes.Position, cb: TableTypes.PinnedCb): void;
+/**
+ * Adds element to Intersection Observer. Fires when element changes on the y axis
+ * @param el - an element to observe
+ * @param pos - the edge to watch (start or end)
+ * @param cb - callback when an intersection state changes.
+ */
+export declare function addVObserver(el: HTMLTableCellElement, pos: TableTypes.Position, cb: TableTypes.PinnedCb): void;
+/**
+ * Renders a class string or map for pinned classes on the v axis.
+ * @param type - element tagName
+ * @param vPinned - whether element is currently pinned vertically to top or bottom
+ * @param toString - render as a string (defaults to class map)
+ */
+export declare function headerPinClasses(type: ValidRenderTypes, vPinned?: TableTypes.Position, toString?: false): {
+  [key: string]: boolean;
+};
+export declare function headerPinClasses(type: ValidRenderTypes, vPinned?: TableTypes.Position, toString?: true): string;
+/**
+ * Turns a class map {'string': boolean} to class string
+ * @param classes - the class map to convert
+ * @returns a class string
+ */
+export declare function classListToStr(classes: {
+  [key: string]: boolean;
+}): string;
+/**
+ * Detects the current scroll speed as a number.
+ * Use within a scroll listener
+ */
 export declare const detectScrollSpeed: () => number;
+/**
+ * Attempts to find the closes scrolling parental element
+ * @param element - the element from which to traverse up the DOM
+ * @returns - the closest scrolling parental element
+ */
 export declare function findScrollParent(element: HTMLElement): HTMLElement;
+/**
+ * Checks whether an element is currently viewable within the viewport
+ * @param el - element to check
+ * @param percentVisible - the percentage of the element that should be within the viewport
+ * @returns true if the element's area percentage is visible
+ */
 export declare function isInViewport(el: Element, percentVisible?: number): boolean;
+/**
+ * Immutable array re-order
+ * @param from - the index to move from
+ * @param to - the index to move to
+ * @param arr - the array to re-order
+ * @returns - a new, re-orderd array
+ */
+export declare function arrMove(from: number, to: number, arr: any[]): any[];
+export {};

package/dist/types/components.d.ts

@@ -587,6 +587,8 @@ export namespace Components {
          */
         "setFocus": (day?: boolean, forceFocusVisible?: boolean) => Promise<void>;
     }
+    interface NanoDemo {
+    }
     interface NanoDetails {
         /**
           * Color to use from your application's color palette.
@@ -2031,6 +2033,14 @@ export namespace Components {
     property: TableTypes.Prop,
     order: TableTypes.Order
   ) => Promise<void>;
+        /**
+          * The default draggable option for all columns. `true` will enable column drag-to-reorder unless you set `draggable: false` on a column `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
+         */
+        "defaultColDraggable": boolean;
+        /**
+          * The default sortable option for all columns. `true` will enable column sorting unless you set `sortable: false` on a column `false` will disable column sorting unless you set `sortable: true` on a column
+         */
+        "defaultSort": boolean;
         /**
           * Used for custom tfoot row rendering
          */
@@ -2051,6 +2061,12 @@ export namespace Components {
           * When loading rows asynchronously, this will render this number of placeholder rows
          */
         "placeholderSize": number;
+        /**
+          * Remove filters from a column
+          * @param columnNames - the filters to apply
+          * @returns a promise which resolves when complete
+         */
+        "removeFilters": (columnNames: TableTypes.Prop[]) => Promise<void>;
         /**
           * Remove any column filters currently applied
           * @returns a promise which resolves when complete
@@ -2368,6 +2384,12 @@ declare global {
         prototype: HTMLNanoDatePickerElement;
         new (): HTMLNanoDatePickerElement;
     };
+    interface HTMLNanoDemoElement extends Components.NanoDemo, HTMLStencilElement {
+    }
+    var HTMLNanoDemoElement: {
+        prototype: HTMLNanoDemoElement;
+        new (): HTMLNanoDemoElement;
+    };
     interface HTMLNanoDetailsElement extends Components.NanoDetails, HTMLStencilElement {
     }
     var HTMLNanoDetailsElement: {
@@ -2598,6 +2620,7 @@ declare global {
         "nano-datalist": HTMLNanoDatalistElement;
         "nano-date-input": HTMLNanoDateInputElement;
         "nano-date-picker": HTMLNanoDatePickerElement;
+        "nano-demo": HTMLNanoDemoElement;
         "nano-details": HTMLNanoDetailsElement;
         "nano-dialog": HTMLNanoDialogElement;
         "nano-drawer": HTMLNanoDrawerElement;
@@ -3219,6 +3242,8 @@ declare namespace LocalJSX {
          */
         "selectedDate"?: string;
     }
+    interface NanoDemo {
+    }
     interface NanoDetails {
         /**
           * Color to use from your application's color palette.
@@ -4752,6 +4777,14 @@ declare namespace LocalJSX {
     property: TableTypes.Prop,
     order: TableTypes.Order
   ) => Promise<void>;
+        /**
+          * The default draggable option for all columns. `true` will enable column drag-to-reorder unless you set `draggable: false` on a column `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
+         */
+        "defaultColDraggable"?: boolean;
+        /**
+          * The default sortable option for all columns. `true` will enable column sorting unless you set `sortable: false` on a column `false` will disable column sorting unless you set `sortable: true` on a column
+         */
+        "defaultSort"?: boolean;
         /**
           * Used for custom tfoot row rendering
          */
@@ -4800,6 +4833,21 @@ declare namespace LocalJSX {
         "onNanoTblBlockRendered"?: (event: NanoTableCustomEvent<{
     block: number;
     totalBlocks: number;
+  }>) => void;
+        /**
+          * Fired when a column has started dragging
+         */
+        "onNanoTblColDrag"?: (event: NanoTableCustomEvent<{
+    column: TableTypes.Prop;
+  }>) => void;
+        /**
+          * Fired when a column has been dropped (after dragging) `event.preventDefault()` to stop column re-order.
+         */
+        "onNanoTblColDrop"?: (event: NanoTableCustomEvent<{
+    fromCol: TableTypes.Prop;
+    toCol: TableTypes.Prop;
+    fromIndex: number;
+    toIndex: number;
   }>) => void;
         /**
           * Fired when the table has done it's first complete render
@@ -4910,6 +4958,7 @@ declare namespace LocalJSX {
         "nano-datalist": NanoDatalist;
         "nano-date-input": NanoDateInput;
         "nano-date-picker": NanoDatePicker;
+        "nano-demo": NanoDemo;
         "nano-details": NanoDetails;
         "nano-dialog": NanoDialog;
         "nano-drawer": NanoDrawer;
@@ -4965,6 +5014,7 @@ declare module "@stencil/core" {
             "nano-datalist": LocalJSX.NanoDatalist & JSXBase.HTMLAttributes<HTMLNanoDatalistElement>;
             "nano-date-input": LocalJSX.NanoDateInput & JSXBase.HTMLAttributes<HTMLNanoDateInputElement>;
             "nano-date-picker": LocalJSX.NanoDatePicker & JSXBase.HTMLAttributes<HTMLNanoDatePickerElement>;
+            "nano-demo": LocalJSX.NanoDemo & JSXBase.HTMLAttributes<HTMLNanoDemoElement>;
             "nano-details": LocalJSX.NanoDetails & JSXBase.HTMLAttributes<HTMLNanoDetailsElement>;
             "nano-dialog": LocalJSX.NanoDialog & JSXBase.HTMLAttributes<HTMLNanoDialogElement>;
             "nano-drawer": LocalJSX.NanoDrawer & JSXBase.HTMLAttributes<HTMLNanoDrawerElement>;

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-12-06T14:07:21",
+  "timestamp": "2022-12-14T09:05:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.19.4",
@@ -3913,6 +3913,38 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/demo/demo.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-demo",
+      "readme": "# nano-demo\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "nano-table"
+      ],
+      "dependencyGraph": {
+        "nano-demo": [
+          "nano-table"
+        ],
+        "nano-table": [
+          "nano-resize-observe",
+          "nano-progress-bar",
+          "nano-skeleton",
+          "nano-spinner",
+          "nano-icon"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/details/details.tsx",
       "encapsulation": "shadow",
@@ -14651,11 +14683,15 @@
       "encapsulation": "none",
       "tag": "nano-table",
       "readme": "# nano-table\n\n\n",
-      "docs": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level",
+      "docs": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Drag-&-Drop columns to re-order\n- Add custom rendering at every level\n- Add custom properties at every level",
       "docsTags": [
         {
           "name": "slot",
           "text": "caption - The table's caption. You must either use this or the `caption` attribute."
+        },
+        {
+          "name": "slot",
+          "text": "no-results - text to display when search or filtering yields no results"
         }
       ],
       "usage": {},
@@ -14748,6 +14784,44 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "defaultColDraggable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "default-col-draggable",
+          "reflectToAttr": false,
+          "docs": "The default draggable option for all columns.\n`true` will enable column drag-to-reorder unless you set `draggable: false` on a column\n`false` will disable column drag-to-reorder unless you set `draggable: true` on a column",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "defaultSort",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "default-sort",
+          "reflectToAttr": false,
+          "docs": "The default sortable option for all columns.\n`true` will enable column sorting unless you set `sortable: false` on a column\n`false` will disable column sorting unless you set `sortable: true` on a column",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "footRender",
           "type": "HeadFootRenderer",
@@ -15000,6 +15074,26 @@
             }
           ]
         },
+        {
+          "name": "removeFilters",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": "a promise which resolves when complete"
+          },
+          "signature": "removeFilters(columnNames: TableTypes.Prop[]) => Promise<void>",
+          "parameters": [],
+          "docs": "Remove filters from a column",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "columnNames - the filters to apply"
+            },
+            {
+              "name": "returns",
+              "text": "a promise which resolves when complete"
+            }
+          ]
+        },
         {
           "name": "resetFilters",
           "returns": {
@@ -15097,6 +15191,24 @@
           "docs": "Fired whenever a block is activated by scrolling into view / becoming visible\nThis could be leveraged for infinite scrolling / to fetch more data.",
           "docsTags": []
         },
+        {
+          "event": "nanoTblColDrag",
+          "detail": "{ column: keyof RowData; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when a column has started dragging",
+          "docsTags": []
+        },
+        {
+          "event": "nanoTblColDrop",
+          "detail": "{ fromCol: keyof RowData; toCol: keyof RowData; fromIndex: number; toIndex: number; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when a column has been dropped (after dragging)\n`event.preventDefault()` to stop column re-order.",
+          "docsTags": []
+        },
         {
           "event": "nanoTblReady",
           "detail": "any",
@@ -15271,10 +15383,16 @@
         {
           "name": "caption",
           "docs": "The table's caption. You must either use this or the `caption` attribute."
+        },
+        {
+          "name": "no-results",
+          "docs": "text to display when search or filtering yields no results"
         }
       ],
       "parts": [],
-      "dependents": [],
+      "dependents": [
+        "nano-demo"
+      ],
       "dependencies": [
         "nano-resize-observe",
         "nano-progress-bar",
@@ -15289,6 +15407,9 @@
           "nano-skeleton",
           "nano-spinner",
           "nano-icon"
+        ],
+        "nano-demo": [
+          "nano-table"
         ]
       }
     },

package/docs-vscode.json

@@ -787,6 +787,14 @@
         }
       ]
     },
+    {
+      "name": "nano-demo",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": []
+    },
     {
       "name": "nano-details",
       "description": {
@@ -2678,7 +2686,7 @@
       "name": "nano-table",
       "description": {
         "kind": "markdown",
-        "value": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level"
+        "value": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Drag-&-Drop columns to re-order\n- Add custom rendering at every level\n- Add custom properties at every level"
       },
       "attributes": [
         {
@@ -2689,6 +2697,14 @@
           "name": "caption",
           "description": "A descriptive title of the table.\nYou must use this or the `slot=\"caption\"` for accessibility"
         },
+        {
+          "name": "default-col-draggable",
+          "description": "The default draggable option for all columns.\n`true` will enable column drag-to-reorder unless you set `draggable: false` on a column\n`false` will disable column drag-to-reorder unless you set `draggable: true` on a column"
+        },
+        {
+          "name": "default-sort",
+          "description": "The default sortable option for all columns.\n`true` will enable column sorting unless you set `sortable: false` on a column\n`false` will disable column sorting unless you set `sortable: true` on a column"
+        },
         {
           "name": "loading",
           "description": "Will show a loading state when true.\nWill be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "3.3.4",
+  "version": "3.5.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -124,5 +124,5 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "59e02809095738c85ea5ac94d026f355c0c12d51"
+  "gitHead": "db9b61df848239b02e70f1e75de62e2409fb6d4e"
 }