@spectric/ui 0.0.25 → 0.0.27

package/src/components/table/header.ts

@@ -39,7 +39,7 @@ export class TableHeaderElement<T>
     this.addDisposableListener(
       () => document.body,
       "mouseup",
-      this._handleResizeEnd
+      this._handleResizeEnd,
     );
   }
   protected createRenderRoot(): HTMLElement | DocumentFragment {
@@ -68,7 +68,7 @@ export class TableHeaderElement<T>
         composed: true,
         bubbles: true,
         detail: column,
-      })
+      }),
     );
   };
   _handleResizeStart = (event: MouseEvent, column: ColumnSettings<T>) => {
@@ -83,13 +83,13 @@ export class TableHeaderElement<T>
       this._resizeStart.column.width = this._resizeStart.column.width + delta;
     } else {
       let cell = (this._resizeStart.event.target as HTMLDivElement).closest(
-        "td"
+        "th",
       ) as HTMLTableCellElement;
       this._resizeStart.column.width =
         cell.getBoundingClientRect().width + delta;
     }
     this.dispatchEvent(
-      new CustomEvent("columnResize", { detail: this._resizeStart.column })
+      new CustomEvent("columnResize", { detail: this._resizeStart.column }),
     );
     //We wrap this to ensure any sort events get fired before we are done FIXME?
     requestAnimationFrame(() => {
@@ -128,8 +128,8 @@ export class TableHeaderElement<T>
       column.sortDirection === TableSortDirection.ascending
         ? ARROW_UP
         : column.sortDirection == TableSortDirection.descending
-        ? ARROW_DOWN
-        : ``;
+          ? ARROW_DOWN
+          : ``;
     let sortClass = column.sortDirection || TableSortDirection.none;
     let resizable = column.allowResize || column.allowResize === undefined;
     let resizeHandle = resizable
@@ -145,7 +145,7 @@ export class TableHeaderElement<T>
     if (typeof title == "function") {
       title = title(this.table) || undefined;
     }
-    return html` <td
+    return html` <th
       @click=${() => this._handleSortChange(column)}
       style="${columnWidth}"
     >
@@ -154,7 +154,7 @@ export class TableHeaderElement<T>
         ${title}
         <span class="sort-direction ${sortClass}">${sortDirection}</span>
       </div>
-    </td>`;
+    </th>`;
   }
 }
 

package/src/components/table/table.css

@@ -1,99 +1,109 @@
-spectric-table{
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    line-height: 1;
+spectric-table {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  line-height: 1;
 }
-spectric-table .table-wrapper{
-    overflow: auto;
-    flex-grow: 1;
-    position: relative;
+spectric-table .table-wrapper {
+  overflow: auto;
+  flex-grow: 1;
+  position: relative;
 }
-spectric-table tr{
-    text-align: center;
+spectric-table tr {
+  text-align: center;
 }
 
-spectric-table tr.odd{
-    background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 90%);
-}
-spectric-table spectric-table-virtual-body tr:hover{
-    background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
+spectric-table tr.odd {
+  background-color: color-mix(
+    in srgb,
+    var(--spectric-primary, #1ea7fd),
+    transparent 90%
+  );
+}
+spectric-table spectric-table-virtual-body tr:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--spectric-primary, #1ea7fd),
+    transparent 70%
+  );
+}
+spectric-table spectric-table-virtual-body tr.virtual-scroll-spacer:hover {
+  background-color: unset;
 }
 
 spectric-table spectric-table-virtual-body tr {
-    height: var(--rowHeight);
+  height: var(--rowHeight);
 }
-spectric-table td{
-   padding:1px;
-   border: 1px solid transparent;
+spectric-table td {
+  padding: 1px;
+  border: 1px solid transparent;
 }
-spectric-table spectric-table-virtual-body td{
-   height: var(--rowHeight);
+spectric-table spectric-table-virtual-body td {
+  height: var(--rowHeight);
 }
 
-spectric-table div[role="table"]{
-    display: table;
-    min-width: 100%;
+spectric-table div[role="table"] {
+  display: table;
+  min-width: 100%;
 }
 
-spectric-table-cell{
-    display: contents;
-    vertical-align: middle;
+spectric-table-cell {
+  display: contents;
+  vertical-align: middle;
 }
-spectric-table-cell td{
-    position: relative;
+spectric-table-cell td {
+  position: relative;
 }
 
 spectric-table td:hover:has(.hasActions) {
-    border: 1px solid var(--spectric-primary, #1ea7fd);
+  border: 1px solid var(--spectric-primary, #1ea7fd);
 }
 
-spectric-table-cell .table-cell-actions{
-    position: absolute;
-    display: flex;
-    width: 100%;
-    flex-direction: row-reverse;
-    visibility: hidden;
-    z-index: 1;
+spectric-table-cell .table-cell-actions {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  flex-direction: row-reverse;
+  visibility: hidden;
+  z-index: 1;
 }
-spectric-table-cell .table-cell-actions.tiny{
-    top: -10px;
+spectric-table-cell .table-cell-actions.tiny {
+  top: -10px;
 }
-spectric-table-cell .table-cell-actions.xxsmall{
-    top: -16px;
+spectric-table-cell .table-cell-actions.xxsmall {
+  top: -16px;
 }
-spectric-table-cell td:hover .table-cell-actions{
-    visibility: unset;
+spectric-table-cell td:hover .table-cell-actions {
+  visibility: unset;
 }
-spectric-table .table-checkbox-single spectric-button{
-    --button-border-radius: 50%;
+spectric-table .table-checkbox-single spectric-button {
+  --button-border-radius: 50%;
 }
-spectric-input.table-checkbox-single[checked] spectric-button{
-    --text-on-color: transparent;
-    border-radius: 50%;
-    position: relative;
+spectric-input.table-checkbox-single[checked] spectric-button {
+  --text-on-color: transparent;
+  border-radius: 50%;
+  position: relative;
 }
 spectric-input.table-checkbox-single[checked] spectric-button::before {
-    position: absolute;
-    content: " ";
-    height: 50%;
-    width: 50%;
-    left: 25%;
-    top: 25%;
-    border-radius: 50%;
-    z-index: 1;
-    box-shadow: 0px 0px 0px 4px var(--input-color);
+  position: absolute;
+  content: " ";
+  height: 50%;
+  width: 50%;
+  left: 25%;
+  top: 25%;
+  border-radius: 50%;
+  z-index: 1;
+  box-shadow: 0px 0px 0px 4px var(--input-color);
 }
 
-
-spectric-table .cell-contents{
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--lineClamp,1);
-    -webkit-box-pack: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--fontSize);
-    line-height: calc(var(--lineClamp) * var(--fontSize));
-    height: var(--rowHeight);
-}
+spectric-table .cell-contents {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lineClamp, 1);
+  -webkit-box-pack: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--fontSize);
+  line-height: calc(var(--lineClamp) * var(--fontSize));
+  height: var(--rowHeight);
+}

package/src/components/table/table.ts

@@ -21,6 +21,7 @@ export type { TableProps, TableEvents };
 export type DomRenderable =
   | HTMLElement
   | TemplateResult
+  | TemplateResult<any>[]
   | string
   | number
   | null
@@ -72,7 +73,7 @@ export type ColumnSettings<T> = {
   render?: (
     row: T,
     index: number,
-    table: SpectricTableElement<T>
+    table: SpectricTableElement<T>,
   ) => DomRenderable;
   /**
    * Custom comparator function for sorting
@@ -98,7 +99,7 @@ export type DomEvent<T> = Event & {
 
 export const TD_BorderAndPadding = 4;
 const TABLE_CREATED_SELECTION_COLUMN = Symbol(
-  "spectric-table-selection-column"
+  "spectric-table-selection-column",
 );
 /**
  * React example
@@ -134,6 +135,17 @@ export class SpectricTableElement<T = any>
   @property({ type: Number, reflect: true })
   fontSize: number = 16;
 
+  @property({ type: Number, reflect: false })
+  virtualBodyBuffer: number = 100;
+
+  /**
+   * Function that allows you to set the row class name programatically
+   */
+  @property({ type: Object, attribute: false })
+  getRowClass = (_row: T, index: number) => {
+    return index % 2 === 0 ? "odd" : "";
+  };
+
   protected cellActionButtonSize: ButtonSizesTypes = "xxsmall";
   getCellActionButtonSize() {
     return this.cellActionButtonSize;
@@ -143,7 +155,7 @@ export class SpectricTableElement<T = any>
       //let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
       let sorts = (props.sortOrder || []).map(
         (key) =>
-          props.columns.find((col) => col.key === key) as ColumnSettings<T>
+          props.columns.find((col) => col.key === key) as ColumnSettings<T>,
       );
       let rows = [...data]; // Need to copy the array to prevent mutating the ordering of the original data
       if (sorts.length) {
@@ -190,7 +202,7 @@ export class SpectricTableElement<T = any>
     this.dispatchEvent(
       new CustomEvent<PaginationChangeProps>("paginationChange", {
         detail: e.detail,
-      })
+      }),
     );
     this._emitChange();
   };
@@ -236,7 +248,7 @@ export class SpectricTableElement<T = any>
     this.dispatchEvent(
       new CustomEvent<TableDataOptions<T>>("change", {
         detail: { pagination, columns, sortOrder },
-      })
+      }),
     );
   };
   //@ts-ignore
@@ -254,7 +266,7 @@ export class SpectricTableElement<T = any>
     // Because lit reuses dom elements for speed/effeciency it wont update unless the props are a different object.
     //  So we set the selection colum to a "new object" to force the rerender
     let index = this.columns.findIndex(
-      (col) => col[TABLE_CREATED_SELECTION_COLUMN]
+      (col) => col[TABLE_CREATED_SELECTION_COLUMN],
     );
     if (index !== -1) {
       this.columns[index] = { ...this.selectColumnConfig };
@@ -293,7 +305,7 @@ export class SpectricTableElement<T = any>
       });
       //Wait for the smooth scroll to complete. Scroll to doesn't return a promise so we must manually check periodically
       for (let wait = 0; wait < 100; wait++) {
-        await new Promise((resolve) => setTimeout(resolve, 10));
+        await new Promise((resolve) => requestAnimationFrame(resolve));
         if (wrapper.scrollTop == scrollPosition) {
           console.log("Scroll complete");
           break;
@@ -304,12 +316,12 @@ export class SpectricTableElement<T = any>
         requestAnimationFrame(() => {
           let rows = [...body.querySelectorAll("tr")];
           rows = rows.filter(
-            (row) => row.querySelector("spectric-table-cell")?.index === index
+            (row) => row.querySelector("spectric-table-cell")?.index === index,
           );
           if (rows.length) {
             rows[0].animate(
               [{ backgroundColor: "red" }, { backgroundColor: "unset" }],
-              { duration: 200, iterations: 5 }
+              { duration: 200, iterations: 5 },
             );
           }
         });
@@ -373,7 +385,7 @@ export class SpectricTableElement<T = any>
           }
           table.setSelected([...table.selected]);
           table.dispatchEvent(
-            new CustomEvent("selected", { detail: [...table.selected] })
+            new CustomEvent("selected", { detail: [...table.selected] }),
           );
         }}
       ></spectric-input>`;
@@ -398,7 +410,7 @@ export class SpectricTableElement<T = any>
     }
     if (changedProperties.has("select")) {
       let selectIndex = this.columns.findIndex(
-        (col) => col[TABLE_CREATED_SELECTION_COLUMN]
+        (col) => col[TABLE_CREATED_SELECTION_COLUMN],
       );
       if (this.select !== TableSelectOptions.none) {
         this.forceRefreshofSelectionColumn();
@@ -419,7 +431,7 @@ export class SpectricTableElement<T = any>
       ) {
         this.setSelected([this.selected[0]]);
         this.dispatchEvent(
-          new CustomEvent("selected", { detail: [this.selected[0]] })
+          new CustomEvent("selected", { detail: [this.selected[0]] }),
         );
       }
     }
@@ -442,6 +454,7 @@ export class SpectricTableElement<T = any>
             @columnResize=${this._handleColumnResize}
           ></spectric-table-header>
           <spectric-table-virtual-body
+            .buffer=${this.virtualBodyBuffer}
             .columns=${columns}
             .data=${this.data}
             .table=${this}

package/src/components/table/virtualBody.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import {
   HTMLElementTagWithEvents,
@@ -41,6 +41,8 @@ export class TableVirtualBodyElement<T>
   @property({ type: Object, attribute: false })
   table!: SpectricTableElement<T>;
   columnsMeasured: boolean = false;
+  @property({ type: Number, attribute: false })
+  buffer: number = 100;
   constructor() {
     super();
     let lastScroll = 0;
@@ -56,10 +58,10 @@ export class TableVirtualBodyElement<T>
         }
         lastScroll = scrollTop;
         this.startIndex = Math.floor(scrollTop / this.rowHeight);
-      }
+      },
     );
   }
-  protected updated(): void {
+  protected update(changedProperties: PropertyValues): void {
     if (this.columnsMeasured === false) {
       let tr = this.querySelector("tr");
       let cells = tr?.querySelectorAll("spectric-table-cell td");
@@ -78,48 +80,34 @@ export class TableVirtualBodyElement<T>
         }
       }
     }
+    super.update(changedProperties);
   }
+
   protected createRenderRoot(): HTMLElement | DocumentFragment {
     return this;
   }
   protected render(): unknown {
     let totalRows = this.data.length;
-    let buffer = 10; // Have a buffer of rows to prevent column jitter
-    let headerHeight = this.table.querySelector(
-      "spectric-table-header"
-    )!.clientHeight;
+    let buffer = this.buffer / 2; // Have a buffer of rows to prevent column jitter
     let viewport = this.table.querySelector(".table-wrapper")!;
-    let startIndex = Math.max(this.startIndex, 0);
-    const rowsThatFit = Math.ceil(
-      (viewport.clientHeight - headerHeight) / this.rowHeight
+    const scrollTop = viewport.scrollTop;
+    const start = Math.max(0, Math.floor(scrollTop / this.rowHeight) - buffer);
+    const end = Math.min(
+      totalRows,
+      Math.ceil((scrollTop + viewport.clientHeight) / this.rowHeight) + buffer,
     );
-    const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
-    const visibleRows = endIndex - startIndex;
     let totalHeight = totalRows * this.rowHeight;
-    let beforeHeight =
-      startIndex * this.rowHeight +
-      (viewport.scrollTop - startIndex * this.rowHeight);
-    if (endIndex === totalRows) {
-      beforeHeight = startIndex * this.rowHeight;
-    }
-    let visibleHeight = visibleRows * this.rowHeight;
-    let afterHeight = totalHeight - beforeHeight - visibleHeight;
-    let spacerElementBefore =
-      startIndex != 0
-        ? html` <tr
-            style="height:${beforeHeight}px"
-            class="virtual-scroll-spacer"
-          >
-            <td colspan="${this.columns.length}"></td>
-          </tr>`
-        : null;
+    let beforeHeight = start * this.rowHeight;
+    let afterHeight = (totalRows - end) * this.rowHeight;
 
+    let spacerElementBefore = html` <tr
+      style="height:${beforeHeight}px"
+      class="virtual-scroll-spacer"
+    ></tr>`;
     let spacerElementAfter = html` <tr
       style="height:${afterHeight}px"
       class="virtual-scroll-spacer"
-    >
-      <td colspan="${this.columns.length}"></td>
-    </tr>`;
+    ></tr>`;
     return html`
       <div
         style="height:${totalHeight}px;position: absolute;overflow-x: hidden;overflow-y: hidden;z-index:-1;width:1px;"
@@ -127,28 +115,25 @@ export class TableVirtualBodyElement<T>
       <tbody>
         ${spacerElementBefore}
       </tbody>
-      <div
-        style="display:table-row-group;max-height:${visibleHeight}px; overflow:hidden;"
-      >
+      <div style="display:table-row-group;overflow:hidden;">
         ${repeat(
-          this.data.slice(Math.max(startIndex, 0), endIndex),
-          (row, index) => html` <tr
-            class="${(index + startIndex) % 2 === 0 ? "odd" : ""}"
-          >
-            ${repeat(this.columns, (col) => {
-              return html`<spectric-table-cell
-                .column=${col}
-                .row=${row}
-                .index=${index + startIndex}
-                .columns=${this.columns}
-                .table=${this.table}
-              ></spectric-table-cell>`;
-            })}
-          </tr>`
+          this.data.slice(Math.max(start, 0), end),
+          (row, index) =>
+            html` <tr class="${this.table.getRowClass(row, index + start)}">
+              ${repeat(this.columns, (col) => {
+                return html`<spectric-table-cell
+                  .column=${col}
+                  .row=${row}
+                  .index=${index + start}
+                  .columns=${this.columns}
+                  .table=${this.table}
+                ></spectric-table-cell>`;
+              })}
+            </tr>`,
         )}
       </div>
       <tbody>
-        ${afterHeight > 0 ? spacerElementAfter : null}
+        ${spacerElementAfter}
       </tbody>
     `;
   }

package/src/stories/QueryBar.stories.ts

@@ -9,17 +9,18 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
 import { filterByColumn } from "./fixtures/data";
+import { createRef, ref } from "lit/directives/ref.js";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-var code = "";
 
 const meta = {
   title: "UI/Query",
   tags: ["autodocs"],
   component: "spectric-query",
   render: (args) => {
+    const code = createRef<HTMLPreElement>();
     const [_, updateArgs] = useArgs();
     const fakevalues = async (field, text) => {
-      if (!args.fields.find((f) => f.name === field)) {
+      if (!args.fields || !args.fields.find((f) => f.name === field)) {
         return [];
       }
       return filterByColumn(field, text);
@@ -30,16 +31,15 @@ const meta = {
         .getValuesForField=${fakevalues}
         value=${ifDefined(args.value)}
         @change=${(e: CustomEvent<any>) => {
-          code = e.detail;
+          if (code.value) {
+            code.value.innerText = JSON.stringify(e.detail, null, 2);
+          }
           updateArgs({ ...args });
         }}
-        outputLanguage=${args.outputLanguage}
+        .outputLanguage=${args.outputLanguage}
       >
       </spectric-query>
-      <pre>
-    ${JSON.stringify(code, null, 2)}
-  </pre
-      >
+      <pre ${ref(code)}></pre>
     `;
   },
   argTypes: {
@@ -50,6 +50,7 @@ const meta = {
   },
   args: {
     outputLanguage: "toDSL",
+    value: "",
     fields: [
       { name: "test", type: "string" },
       { name: "test_num", type: "number" },