@nanoporetech-digital/components 3.2.0 → 3.3.1

package/dist/collection/components/table/table.css

@@ -12,25 +12,80 @@
 }
 @charset "UTF-8";
 nano-table {
+  /**
+   * @prop --max-col-width: Default 200px;
+
+   * @prop --color: Deafults to var(--nano-color-mediumgrey, #68767e);
+   * @prop --font-size: Deafults to 0.87rem;
+   * @prop --cell-line-height: Deafults to 1.5;
+
+   * @prop --border-color: Deafults to var(--nano-color-palegrey, #b5aea7);
+   * @prop --border-style: Deafults to thin solid var(--border-color);
+   * @prop --border-tint-color: Deafults to var(--nano-color-blue, #90c6e7);
+   * @prop --border-tint-style: Deafults to 2px solid var(--border-tint-color);
+
+   * @prop --cell-bg-rgb: Deafults to var(--nano-color-white-rgb, 255 255 255);
+   * @prop --head-bg-rgb: Deafults to var(--cell-bg-rgb);
+   * @prop --foot-bg-rgb: Deafults to var(--cell-bg-rgb);
+   * @prop --th-row-bg-rgb: Deafults to var(--cell-bg-rgb);
+   * @prop --ordered-bg-rgb: Deafults to var(--nano-color-offwhite-rgb, 249 249 251);
+
+   * @prop --td-padding-start: Deafults to 0.625rem;
+   * @prop --td-padding-end: Deafults to 0.625rem;
+   * @prop --td-padding-top: Deafults to 0.5rem;
+   * @prop --td-padding-bottom: Deafults to 0.4125rem;
+
+   * @prop --th-padding-start: Deafults to 0.625rem;
+   * @prop --th-padding-end: Deafults to 0.625rem;
+   * @prop --th-padding-top: Deafults to 0.875rem;
+   * @prop --th-padding-bottom: Deafults to 0.6875rem;
+
+   * @prop --td-padding-v: Deafults to var(--td-padding-top) var(--td-padding-bottom);
+   * @prop --td-padding-h: Deafults to var(--td-padding-start) var(--td-padding-end);
+
+   * @prop --th-padding-v: Deafults to var(--th-padding-top) var(--th-padding-bottom);
+   * @prop --th-padding-h: Deafults to var(--th-padding-start) var(--th-padding-end);
+
+   * @prop --foot-th-padding-v: Deafults to var(--td-padding-top) var(--td-padding-bottom);
+   * @prop --foot-th-padding-h: Deafults to var(--td-padding-start) var(--td-padding-end);
+
+   * @prop --head-th-padding-v: Deafults to var(--th-padding-top) var(--th-padding-bottom);
+   * @prop --head-th-padding-h: Deafults to var(--th-padding-start) var(--th-padding-end);
+
+   * @prop --bookend-col-padding: Deafults to 2rem;
+  */
   display: block;
   width: 100%;
   --max-col-width: 200px;
   --color: var(--nano-color-mediumgrey, #68767e);
   --font-size: 0.87rem;
   --cell-line-height: 1.5;
-  --border-color: var(--nano-color-palegrey, #b5aea7);
-  --border-style: 1px solid var(--border-color);
-  --border-tint-color: var(--nano-color-blue, #90c6e7);
-  --border-tint-style: 2px solid var(--border-tint-color);
+  --thead-font-size: 0.95rem;
+  --border-color: #dddbda;
+  --border-style: thin solid var(--border-color);
+  --border-tint-color: #0084a9;
+  --border-tint-style: 3px solid var(--border-tint-color);
   --cell-bg-rgb: var(--nano-color-white-rgb, 255 255 255);
-  --head-bg-rgb: var(--cell-bg-rgb);
-  --foot-bg-rgb: var(--cell-bg-rgb);
+  --head-bg-rgb: 250, 250, 249;
+  --foot-bg-rgb: var(--head-bg-rgb);
   --th-row-bg-rgb: var(--cell-bg-rgb);
   --ordered-bg-rgb: var(--nano-color-offwhite-rgb, 249 249 251);
-  --td-padding: 0.5rem 0.625rem 0.4125rem;
-  --th-padding: 0.875rem 0.625rem 0.6875rem;
-  --head-th-padding: var(--th-padding);
-  --foot-th-padding: var(--td-padding);
+  --td-padding-start: 0.625rem;
+  --td-padding-end: 0.625rem;
+  --td-padding-top: 0.5rem;
+  --td-padding-bottom: 0.4125rem;
+  --th-padding-start: 0.625rem;
+  --th-padding-end: 0.625rem;
+  --th-padding-top: 0.875rem;
+  --th-padding-bottom: 0.6875rem;
+  --td-padding-v: var(--td-padding-top) var(--td-padding-bottom);
+  --td-padding-h: var(--td-padding-start) var(--td-padding-end);
+  --th-padding-v: var(--th-padding-top) var(--th-padding-bottom);
+  --th-padding-h: var(--th-padding-start) var(--th-padding-end);
+  --foot-th-padding-v: var(--th-padding-top) var(--th-padding-bottom);
+  --foot-th-padding-h: var(--th-padding-start) var(--th-padding-end);
+  --head-th-padding-v: var(--th-padding-top) var(--th-padding-bottom);
+  --head-th-padding-h: var(--th-padding-start) var(--th-padding-end);
   --bookend-col-padding: 2rem;
 }
 
@@ -42,8 +97,10 @@ nano-table {
   border-spacing: 0 0;
   border-collapse: separate;
   background: rgb(var(--cell-bg-rgb));
-  -webkit-border-end: 1px solid transparent;
-          border-inline-end: 1px solid transparent;
+  border-inline-end: 1px solid transparent;
+  border-block-start: 1px solid transparent;
+  position: relative;
+  z-index: 1;
 }
 .nano-tbl__wrap {
   display: table;
@@ -59,13 +116,12 @@ nano-table {
   overflow: hidden;
   padding: 0;
   position: absolute;
+  position: relative;
 }
 .nano-tbl__ordered {
   background-color: var(--ordered-bg);
-  -webkit-border-start: var(--border-style);
-          border-inline-start: var(--border-style);
-  -webkit-border-end: var(--border-style);
-          border-inline-end: var(--border-style);
+  border-inline-start: var(--border-style);
+  border-inline-end: var(--border-style);
 }
 .nano-tbl__order-btn {
   padding: 0;
@@ -74,22 +130,15 @@ nano-table {
   font: inherit;
   background: none;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   color: inherit;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   gap: 10px;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   width: 100%;
 }
 .nano-tbl__status-icons {
   margin-inline: auto 10px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   gap: 10px;
 }
@@ -99,7 +148,6 @@ nano-table {
   inset-block-start: 0;
   inset-inline: 0;
   z-index: 10;
-  -webkit-transition: scale 0.25s;
   transition: scale 0.25s;
   scale: 0;
   width: 100%;
@@ -123,34 +171,49 @@ nano-table {
 .nano-tbl__td, .nano-tbl__th {
   line-height: var(--cell-line-height);
   text-align: start;
-  -webkit-border-after: var(--border-style);
-          border-block-end: var(--border-style);
+  border-block-start: var(--border-style);
   max-width: var(--max-col-width);
   background-color: rgb(var(--cell-bg-rgb));
 }
+tbody:first-of-type tr:first-child .nano-tbl__td, tbody:first-of-type tr:first-child .nano-tbl__th {
+  border-block-start: none;
+}
+tbody:last-of-type tr:last-child .nano-tbl__td, tbody:last-of-type tr:last-child .nano-tbl__th {
+  border-block-end: var(--border-style);
+}
 .md .nano-tbl__td:first-child .nano-tbl__cell-content, .md .nano-tbl__th:first-child .nano-tbl__cell-content {
-  -webkit-padding-start: var(--bookend-col-padding) !important;
-          padding-inline-start: var(--bookend-col-padding) !important;
+  padding-inline-start: var(--bookend-col-padding);
 }
 .md .nano-tbl__td:last-child .nano-tbl__cell-content, .md .nano-tbl__th:last-child .nano-tbl__cell-content {
-  -webkit-padding-end: var(--bookend-col-padding) !important;
-          padding-inline-end: var(--bookend-col-padding) !important;
+  padding-inline-end: var(--bookend-col-padding);
+}
+@media (max-width: 768px) {
+  .nano-tbl__td:first-child .nano-tbl__cell-content, .nano-tbl__th:first-child .nano-tbl__cell-content {
+    padding-inline-start: var(--td-padding-start) !important;
+  }
+  .nano-tbl__td:last-child .nano-tbl__cell-content, .nano-tbl__th:last-child .nano-tbl__cell-content {
+    padding-inline-end: var(--td-padding-end) !important;
+  }
 }
 thead .nano-tbl__td, thead .nano-tbl__th {
   font-weight: 800;
   background: rgba(var(--head-bg-rgb), 90%);
+  font-size: var(--thead-font-size);
+  border-block-start: none;
 }
 thead .nano-tbl__td .nano-tbl__cell-content, thead .nano-tbl__th .nano-tbl__cell-content {
-  padding: var(--head-th-padding);
+  padding-block: var(--head-th-padding-v);
+  padding-inline: var(--head-th-padding-h);
 }
 tfoot .nano-tbl__td, tfoot .nano-tbl__th {
   font-weight: 800;
-  -webkit-border-after: none;
-          border-block-end: none;
+  border-block-end: none;
   background: rgba(var(--foot-bg-rgb), 90%);
+  font-size: var(--thead-font-size);
 }
 tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell-content {
-  padding: var(--foot-th-padding);
+  padding-block: var(--foot-th-padding-v);
+  padding-inline: var(--foot-th-padding-h);
 }
 .nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {
   background-color: rgba(var(--ordered-bg-rgb), 0.8) !important;
@@ -159,7 +222,8 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: var(--td-padding);
+  padding-block: var(--td-padding-v);
+  padding-inline: var(--td-padding-h);
 }
 .nano-tbl tbody {
   will-change: scroll-position;
@@ -181,15 +245,13 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 }
 .nano-tbl__pin--start {
   inset-inline: -1px auto;
-  -webkit-transition: max-width 0.25s;
   transition: max-width 0.25s;
 }
 .nano-tbl__pin--start::after {
   content: "";
   position: absolute;
   inset: 0;
-  -webkit-box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 5px 1px 4px 0 rgba(0, 0, 0, 0.2);
   opacity: 0;
   z-index: -1;
 }
@@ -225,8 +287,7 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
   content: "";
   position: absolute;
   inset: 0;
-  -webkit-box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: -5px 1px 4px 0 rgba(0, 0, 0, 0.2);
   opacity: 0;
   z-index: -1;
 }
@@ -247,8 +308,7 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 }
 .nano-tbl__pinned--bottom .nano-tbl__pin--bottom {
   z-index: 5;
-  -webkit-border-before: var(--border-tint-style);
-          border-block-start: var(--border-tint-style);
+  border-block-start: var(--border-tint-style) !important;
 }
 .nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start {
   z-index: 6;
@@ -263,25 +323,25 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
   z-index: 6;
 }
 .nano-tbl thead tr:last-of-type td,
-.nano-tbl thead tr:last-of-type th,
-.nano-tbl tfoot tr:last-of-type td,
-.nano-tbl tfoot tr:last-of-type th {
-  -webkit-border-after: var(--border-tint-style);
-          border-block-end: var(--border-tint-style);
+.nano-tbl thead tr:last-of-type th {
+  border-block-end: var(--border-tint-style);
+}
+.nano-tbl tfoot tr:first-of-type td,
+.nano-tbl tfoot tr:first-of-type th {
+  border-block-start: none;
 }
 .nano-tbl .unlimited-width {
   max-width: none;
 }
 .nano-tbl__spinner {
   font-size: 1.5rem;
-  -webkit-transition: scale 0.25s;
   transition: scale 0.25s;
   scale: 0;
   padding: 0.5rem;
   position: absolute;
   inset-block-end: 0;
   inset-inline-start: calc(50% - 0.75rem);
-  z-index: -1;
+  z-index: 0;
 }
 .nano-tbl__spinner--show {
   scale: 1;

package/dist/collection/components/table/table.js

@@ -24,20 +24,21 @@ function perMark(name, end = false) {
 let id = 0;
 /**
  * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
- * - Built-in search
- * - Built-in column filter
- * - Built-in column sort
- * - Easily swap in API / async based search / filter & sort
- * - Pin headers, footers, rows, columns
- * - Add custom rendering at every level
- * - Add custom properties at every level
+ *
+ *- Built-in search
+ *- Built-in column filter
+ *- Built-in column sort
+ *- Easily swap in API / async based search / filter & sort
+ *- Pin headers, footers, rows, columns
+ *- 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.
  */
 export class Table {
   constructor() {
     this.debounceSetLoading = (l) => {
-      this._loading = l;
+      this._loading = !!this.store.data.state.rows.length ? l : true;
     };
     this.renderId = 'tbl-' + id++;
     this.filters = [];
@@ -141,7 +142,7 @@ export class Table {
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
-    this._loading = true;
+    this._loading = false;
     this.placeholderSize = 5;
     this.rows = undefined;
     this.columns = [];
@@ -168,20 +169,25 @@ export class Table {
     this.debounceSetLoading(l);
   }
   handleRowsChange() {
-    if (!this.rows)
+    if (!this.rows) {
+      this.loading = true;
       return;
+    }
     this.loading = true;
     Promise.resolve(this.rows).then(async (rows) => {
       await storeSetData(this.host, rows);
+      // reset everything
+      this.currentFilters = '';
+      this.currentSort = '';
+      await this.columnInit();
       if (!this.isReady) {
-        await this.columnInit();
         this.setInitialBlockDimension();
       }
       this.loading = false;
     });
   }
-  handleColsChange() {
-    storeSetConfig(this.host, this.columns);
+  async handleColsChange() {
+    await storeSetConfig(this.host, this.columns);
     if (this.isReady)
       this.columnInit();
   }
@@ -357,8 +363,8 @@ export class Table {
     if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {
       this.host.scrollIntoView();
     }
-    if (element)
-      element.scrollIntoView({ block: 'start' });
+    if (element && !isInViewport(element, 1))
+      setTimeout(() => element.scrollIntoView({ block: 'start' }), 500);
     if (scrollX)
       this.scrollParent.scrollLeft = scrollX;
     if (scrollBehaviour)
@@ -375,7 +381,7 @@ export class Table {
    * So we just estimate for now
    */
   setInitialBlockDimension() {
-    if (!this.blockElements.length)
+    if (!this.blockElements?.length)
       return;
     perMark('blockDims');
     const finishResizing = new Promise((resolve) => {
@@ -529,17 +535,15 @@ export class Table {
   }
   render() {
     this.blockElements = [];
-    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md" }, h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", { indeterminate: true, class: {
+    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md" }, h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", { indeterminate: true, class: {
         [`${CSSNAMESPACE}__progress-bar`]: true,
-        [`${CSSNAMESPACE}__progress-bar--show`]: this.loading,
+        [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
       } }), h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: {
         [`${CSSNAMESPACE}__caption`]: true,
         [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
       }, id: 'table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnOrderClick: this.sortStart, onColumnPinned: this.handleColumnPinned }),
-    ]))), this.loading &&
-      !this.blocks.length &&
-      [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+    ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
         this.setupBlockIO(tb, blockIndex);
       }, class: {
@@ -551,10 +555,10 @@ export class Table {
     })) : (h("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
       } }))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
-      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }),
+      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnOrderClick: this.sortStart }),
     ]))))), !!this.blocks.length && (h("nano-spinner", { type: "circle", class: {
         [`${CSSNAMESPACE}__spinner`]: true,
-        [`${CSSNAMESPACE}__spinner--show`]: this.loading,
+        [`${CSSNAMESPACE}__spinner--show`]: this._loading,
       } }))))));
   }
   static get is() { return "nano-table"; }
@@ -647,7 +651,7 @@ export class Table {
         "setter": true,
         "attribute": "loading",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "placeholderSize": {
         "type": "number",