@spectric/ui 0.0.25 → 0.0.26

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,14 @@ export class SpectricTableElement<T = any>
   @property({ type: Number, reflect: true })
   fontSize: number = 16;
 
+  /**
+   * 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 +152,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 +199,7 @@ export class SpectricTableElement<T = any>
     this.dispatchEvent(
       new CustomEvent<PaginationChangeProps>("paginationChange", {
         detail: e.detail,
-      })
+      }),
     );
     this._emitChange();
   };
@@ -236,7 +245,7 @@ export class SpectricTableElement<T = any>
     this.dispatchEvent(
       new CustomEvent<TableDataOptions<T>>("change", {
         detail: { pagination, columns, sortOrder },
-      })
+      }),
     );
   };
   //@ts-ignore
@@ -254,7 +263,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 +302,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 +313,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 +382,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 +407,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 +428,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]] }),
         );
       }
     }

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,
@@ -56,10 +56,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,7 +78,9 @@ export class TableVirtualBodyElement<T>
         }
       }
     }
+    super.update(changedProperties);
   }
+
   protected createRenderRoot(): HTMLElement | DocumentFragment {
     return this;
   }
@@ -86,12 +88,12 @@ export class TableVirtualBodyElement<T>
     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"
+      "spectric-table-header",
     )!.clientHeight;
     let viewport = this.table.querySelector(".table-wrapper")!;
     let startIndex = Math.max(this.startIndex, 0);
     const rowsThatFit = Math.ceil(
-      (viewport.clientHeight - headerHeight) / this.rowHeight
+      (viewport.clientHeight - headerHeight) / this.rowHeight,
     );
     const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
     const visibleRows = endIndex - startIndex;
@@ -132,19 +134,20 @@ export class TableVirtualBodyElement<T>
       >
         ${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>`
+          (row, index) =>
+            html` <tr
+              class="${this.table.getRowClass(row, index + startIndex)}"
+            >
+              ${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>`,
         )}
       </div>
       <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" },

package/src/stories/fixtures/data.ts

@@ -136,6 +136,7 @@ export type TestData = {
     state: string;
   };
   years: number;
+  start: string;
 };
 export const tabledata: TestData[] = [
   {
@@ -144,6 +145,7 @@ export const tabledata: TestData[] = [
     contact: "123-4567",
     location: { country: "US", state: "VA" },
     years: 11,
+    start: "2025-12-19T20:22:42.008Z",
   },
   {
     name: "Kipp",
@@ -151,6 +153,7 @@ export const tabledata: TestData[] = [
     contact: "123-4567",
     location: { country: "UK", state: "N/A" },
     years: 5,
+    start: "2024-12-19T20:22:42.008Z",
   },
   {
     name: "Adam",
@@ -158,6 +161,7 @@ export const tabledata: TestData[] = [
     contact: "123-4567",
     location: { country: "US", state: "VA" },
     years: 19,
+    start: "2023-12-19T20:22:42.008Z",
   },
   {
     name: "Chris",
@@ -165,6 +169,7 @@ export const tabledata: TestData[] = [
     contact: "123-4567",
     location: { country: "US", state: "VA" },
     years: 27,
+    start: "2022-12-19T20:22:42.008Z",
   },
   {
     name: "Michael",
@@ -172,6 +177,7 @@ export const tabledata: TestData[] = [
     contact: "123-4567",
     location: { country: "US", state: "VA" },
     years: 3,
+    start: "2021-12-19T20:22:42.008Z",
   },
   {
     name: "Matt",
@@ -179,6 +185,7 @@ export const tabledata: TestData[] = [
     contact: "123-4567",
     location: { country: "US", state: "VA" },
     years: 9,
+    start: "2021-12-19T20:22:42.008Z",
   },
   {
     name: "Matt",
@@ -186,6 +193,7 @@ export const tabledata: TestData[] = [
     contact: "865-6343",
     location: { country: "UK", state: "VA" },
     years: 5,
+    start: "2025-11-19T20:22:42.008Z",
   },
   {
     name: "Matt",
@@ -193,6 +201,7 @@ export const tabledata: TestData[] = [
     contact: "253-6795",
     location: { country: "UK", state: "VA" },
     years: 15,
+    start: "2025-10-19T20:22:42.008Z",
   },
   {
     name: "Matt",
@@ -200,6 +209,7 @@ export const tabledata: TestData[] = [
     contact: "253-6795",
     location: { country: "US", state: "CO" },
     years: 1,
+    start: "2025-08-19T20:22:42.008Z",
   },
   {
     name: "Matt",
@@ -207,6 +217,7 @@ export const tabledata: TestData[] = [
     contact: "912-1230",
     location: { country: "UK", state: "VA" },
     years: 24,
+    start: "2025-07-19T20:22:42.008Z",
   },
   {
     name: "Grant",
@@ -214,6 +225,7 @@ export const tabledata: TestData[] = [
     contact: "123-4567",
     location: { country: "US", state: "VA" },
     years: 100,
+    start: "2022-01-19T20:22:42.008Z",
   },
 ];
 export const getTableColumns = () => {
@@ -229,28 +241,13 @@ export const getTableColumns = () => {
           onClick: (row, _column) => {
             alert(`Calling ${row.name} at ${row.contact}`);
           },
-          icon: html`<svg
-            width="16px"
-            height="16px"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g>
-              <path
-                d="M14.05 6C15.0268 6.19057 15.9244 6.66826 16.6281 7.37194C17.3318 8.07561 17.8095 8.97326 18 9.95M14.05 2C16.0793 2.22544 17.9716 3.13417 19.4163 4.57701C20.8609 6.01984 21.7721 7.91101 22 9.94M18.5 21C9.93959 21 3 14.0604 3 5.5C3 5.11378 3.01413 4.73086 3.04189 4.35173C3.07375 3.91662 3.08968 3.69907 3.2037 3.50103C3.29814 3.33701 3.4655 3.18146 3.63598 3.09925C3.84181 3 4.08188 3 4.56201 3H7.37932C7.78308 3 7.98496 3 8.15802 3.06645C8.31089 3.12515 8.44701 3.22049 8.55442 3.3441C8.67601 3.48403 8.745 3.67376 8.88299 4.05321L10.0491 7.26005C10.2096 7.70153 10.2899 7.92227 10.2763 8.1317C10.2643 8.31637 10.2012 8.49408 10.0942 8.64506C9.97286 8.81628 9.77145 8.93713 9.36863 9.17882L8 10C9.2019 12.6489 11.3501 14.7999 14 16L14.8212 14.6314C15.0629 14.2285 15.1837 14.0271 15.3549 13.9058C15.5059 13.7988 15.6836 13.7357 15.8683 13.7237C16.0777 13.7101 16.2985 13.7904 16.74 13.9509L19.9468 15.117C20.3262 15.255 20.516 15.324 20.6559 15.4456C20.7795 15.553 20.8749 15.6891 20.9335 15.842C21 16.015 21 16.2169 21 16.6207V19.438C21 19.9181 21 20.1582 20.9007 20.364C20.8185 20.5345 20.663 20.7019 20.499 20.7963C20.3009 20.9103 20.0834 20.9262 19.6483 20.9581C19.2691 20.9859 18.8862 21 18.5 21Z"
-                stroke="#000000"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              ></path>
-            </g>
-          </svg>`,
+          icon: "☎",
         },
       ],
     },
     { title: "Country", key: "location.country", filterable: true },
     { title: "Years Employed", key: "years", sortable: true },
+    { title: "Start Date", key: "start", sortable: true },
   ];
   return tablecolumns;
 };