@spectric/ui 0.0.20 → 0.0.21

package/src/components/table/__tests__/table.spec.ts

@@ -1,91 +1,179 @@
-import { test, expect } from '@playwright/test';
-import type { SpectricTableElement, TableEvents } from '../index';
-import type SpectricModule from "../../../index.ts"
+import { test, expect } from "@playwright/test";
+import type { SpectricTableElement, TableEvents } from "../index";
+import type SpectricModule from "../../../index.ts";
+import { SpectricInput } from "../../../index.ts";
 test.beforeEach(async ({ page }) => {
-  page.on('console', msg => { console.log(`Page[${msg.type()}]:` + msg.text()) });
+  page.on("console", (msg) => {
+    console.log(`Page[${msg.type()}]:` + msg.text());
+  });
   await page.addInitScript(() => {
     //@ts-ignore
     window.awaitEvent = function awaitEvent(target, event, trigger) {
       return new Promise((resolve, reject) => {
+        let timeout = setTimeout(reject, 400);
         const handleEvent = (...args) => {
+          clearTimeout(timeout);
           //@ts-ignore
-          target.removeEventListener(event, this)
-          resolve(args)
-        }
+          target.removeEventListener(event, this);
+          resolve(args);
+        };
         //@ts-ignore
-        target.addEventListener(event, handleEvent)
-        trigger()
-      })
-    }
-  })
-  await page.goto('http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--milti-select&viewMode=story');
+        target.addEventListener(event, handleEvent);
+        trigger();
+      });
+    };
+  });
 });
-test.describe("Spectric Table Tests", () => {
 
-  test('MultiSelect Table Select All/Deselect All ', async ({ page }) => {
-    let tableLocator = page.locator("spectric-table")
-    tableLocator.waitFor()
+test.describe("Spectric Table Tests", () => {
+  test("MultiSelect Table Select All/Deselect All ", async ({ page }) => {
+    await page.goto(
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--milti-select&viewMode=story"
+    );
+    let tableLocator = page.locator("spectric-table");
+    tableLocator.waitFor();
     var selected = await tableLocator.evaluate<number, SpectricTableElement>(
       async (table) => {
-        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-header spectric-input[variant='checkbox'] spectric-button")[0]
-        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
-        return event.detail.length
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-table-header spectric-input[variant='checkbox'] spectric-button"
+        )[0];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => selectAll.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
       }
-    )
-    await expect(selected, "All Selected").toBeGreaterThan(0)
+    );
+    await expect(selected, "All Selected").toBeGreaterThan(0);
 
     selected = await tableLocator.evaluate<number, SpectricTableElement>(
       async (table) => {
-        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-header spectric-input[variant='checkbox'] spectric-button")[0]
-        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
-        return event.detail.length
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-table-header spectric-input[variant='checkbox'] spectric-button"
+        )[0];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => selectAll.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
       }
-    )
-    await expect(selected, "None Selected").toBe(0)
+    );
+    await expect(selected, "None Selected").toBe(0);
 
     selected = await tableLocator.evaluate<number, SpectricTableElement>(
       async (table) => {
-        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button")[2]
-        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
-        return event.detail.length
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button"
+        )[2];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => selectAll.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
       }
-    )
-    await expect(selected, "One Selected").toBe(1)
+    );
+    await expect(selected, "One Selected").toBe(1);
 
     selected = await tableLocator.evaluate<number, SpectricTableElement>(
       async (table) => {
-        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button")[2]
-        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
-        return event.detail.length
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button"
+        )[2];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => selectAll.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
       }
-    )
-    await expect(selected, "One DeSelected").toBe(0)
+    );
+    await expect(selected, "One DeSelected").toBe(0);
   });
 
+  test("SingleSelect Table ensure only one is selected", async ({ page }) => {
+    await page.goto(
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--single-select&viewMode=story"
+    );
+    let tableLocator = page.locator("spectric-table");
+    tableLocator.waitFor();
+    var selected = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let select = table.querySelectorAll<HTMLElement>(
+          "spectric-input[variant='checkbox'].table-checkbox-single spectric-button"
+        )[0];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => select.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
+      }
+    );
+    await expect(selected, "One Selected").toBe(1);
+
+    selected = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let select = table.querySelectorAll<HTMLElement>(
+          "spectric-input[variant='checkbox'].table-checkbox-single spectric-button"
+        )[1];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => select.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
+      }
+    );
+    await expect(selected, "One Selected").toBe(1);
+
+    let checked = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-input[variant='checkbox'].table-checkbox-single"
+        )[2];
+        let checked = Array.from(
+          table.querySelectorAll<SpectricInput>(
+            "spectric-input[variant='checkbox'].table-checkbox-single"
+          )
+        ).filter((node) => node.checked);
+        return checked.length;
+      }
+    );
+    await expect(checked, "One checked").toBe(1);
+  });
 
-  test('Ensure all event listeners are cleaned up and not leaked', async ({ page }) => {
-    let tableLocator = page.locator("spectric-table")
-    await tableLocator.waitFor()
+  test("Ensure all event listeners are cleaned up and not leaked", async ({
+    page,
+  }) => {
+    await page.goto(
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--milti-select&viewMode=story"
+    );
+    let tableLocator = page.locator("spectric-table");
+    await tableLocator.waitFor();
     let listenerCount = await page.evaluate(async () => {
-      const module = await import("./src/index.ts") as typeof SpectricModule
-      return module.getListeners()
-    })
-    await expect(listenerCount).toBeGreaterThan(0)
+      const module = (await import("./src/index.ts")) as typeof SpectricModule;
+      return module.getListeners();
+    });
+    await expect(listenerCount).toBeGreaterThan(0);
     //Delete all content and expect everything to get cleaned up
     listenerCount = await page.evaluate(async () => {
-      const module = await import("./src/index.ts") as typeof SpectricModule
-      document.body.innerHTML = ""
-      return module.getListeners()
-    })
-    await expect(listenerCount).toBe(0)
-
-  })
-})
-
-
+      const module = (await import("./src/index.ts")) as typeof SpectricModule;
+      document.body.innerHTML = "";
+      return module.getListeners();
+    });
+    await expect(listenerCount).toBe(0);
+  });
+});
 
 declare global {
   interface Window {
-    awaitEvent: <EventMap extends Record<string, any>, K = keyof EventMap>(target: HTMLElement, event: K, trigger: () => void) => Parameters<EventMap[keyof EventMap]>;
+    awaitEvent: <EventMap extends Record<string, any>, K = keyof EventMap>(
+      target: HTMLElement,
+      event: K,
+      trigger: () => void
+    ) => Parameters<EventMap[keyof EventMap]>;
   }
 }

package/src/components/table/cell.ts

@@ -1,177 +1,216 @@
-import { html, LitElement, PropertyValues } from 'lit';
-import { customElement, property, query, state, } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-export const TableCellElementTag = "spectric-table-cell"
-import { ColumnSettings, DomRenderable, SpectricTableElement } from './table';
-import { cache } from 'lit/directives/cache.js';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+export const TableCellElementTag = "spectric-table-cell";
+import { ColumnSettings, DomRenderable, SpectricTableElement } from "./table";
+import { cache } from "lit/directives/cache.js";
+import { StyleInfo, styleMap } from "lit/directives/style-map.js";
 
 interface CellProps<T> {
-    column: ColumnSettings<T>
-    row: T
+  column: ColumnSettings<T>;
+  row: T;
 }
 
 export type FilterEvent<T> = {
-    value?: T,
-    include: boolean
-    column: ColumnSettings<T>
-    row: T
-}
+  value?: T;
+  include: boolean;
+  column: ColumnSettings<T>;
+  row: T;
+};
 
 /**
  * Pagination Element
  */
 @customElement(TableCellElementTag)
 export class TableCellElement<T> extends LitElement implements CellProps<T> {
-    @property({ type: Object, attribute: false })
-    row!: T;
-
-    @property({ type: Number, attribute: false })
-    index!: number;
-    @property({ type: Object, attribute: false })
-    column!: ColumnSettings<T>;
-    columns!: ColumnSettings<T>[];
-    table!: SpectricTableElement<T>
-
-    @state()
-    overflow: DomRenderable = ""
-    @query("td")
-    td!: HTMLTableCellElement
-    styleRules: StyleInfo = { whiteSpace: "", width: "" };
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
-    }
-    protected updated(_changedProperties: PropertyValues): void {
+  @property({ type: Object, attribute: false })
+  row!: T;
 
-    }
-    _emitFilter(filter: FilterEvent<T>) {
-        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
-            composed: true,
-            bubbles: true,
-            detail: filter
-        }))
-    }
-    _handleFilterOut = () => {
-        let value = undefined;
-        if (this.column.key && typeof this.row === "object") {
-            value = rowGetValue(this.row as Record<any, any>, this.column.key)
-        }
-        this._emitFilter({
-            include: false,
-            row: this.row,
-            value,
-            column: this.column
-        })
+  @property({ type: Number, attribute: false })
+  index!: number;
+  @property({ type: Object, attribute: false })
+  column!: ColumnSettings<T>;
+  columns!: ColumnSettings<T>[];
+  @property({ type: Object, attribute: false })
+  table!: SpectricTableElement<T>;
 
+  @state()
+  overflow: DomRenderable = "";
+  @query("td")
+  td!: HTMLTableCellElement;
+  styleRules: StyleInfo = { whiteSpace: "", width: "" };
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  protected updated(_changedProperties: PropertyValues): void {}
+  _emitFilter(filter: FilterEvent<T>) {
+    this.dispatchEvent(
+      new CustomEvent<FilterEvent<T>>("filter", {
+        composed: true,
+        bubbles: true,
+        detail: filter,
+      })
+    );
+  }
+  _handleFilterOut = () => {
+    let value = undefined;
+    if (this.column.key && typeof this.row === "object") {
+      value = rowGetValue(this.row as Record<any, any>, this.column.key);
     }
-    _handleFilterFor = () => {
-        let value = undefined;
-        if (this.column.key && typeof this.row === "object") {
-            value = rowGetValue(this.row as Record<any, any>, this.column.key)
-        }
-        this._emitFilter({
-            include: true,
-            row: this.row,
-            value,
-            column: this.column
-        })
+    this._emitFilter({
+      include: false,
+      row: this.row,
+      value,
+      column: this.column,
+    });
+  };
+  _handleFilterFor = () => {
+    let value = undefined;
+    if (this.column.key && typeof this.row === "object") {
+      value = rowGetValue(this.row as Record<any, any>, this.column.key);
     }
-    _displayTooltip = () => {
-        let div = this.querySelector("div.cell-contents")
-        let span = this.querySelector("span")
-        if (div && span) {
-            let spanBounds = span.getBoundingClientRect()
-            let divBounds = div.getBoundingClientRect()
-            if ((spanBounds.width * spanBounds.height) > (divBounds.width * divBounds.height)) {
-                console.log("We need to show a tooltip witht he content because we are overflowing")
-                this.overflow = this.getRenderedValue()
-                this.updateComplete.then(() => {
-                    let tooltip = this.querySelector("spectric-tooltip")
-                    if (tooltip) {
-                        tooltip.showToolTip()
-                    }
-                })
-            } else {
-                this.overflow = ""
-            }
-        }
+    this._emitFilter({
+      include: true,
+      row: this.row,
+      value,
+      column: this.column,
+    });
+  };
+  _displayTooltip = () => {
+    let div = this.querySelector("div.cell-contents");
+    let span = this.querySelector("span");
+    if (div && span) {
+      let spanBounds = span.getBoundingClientRect();
+      let divBounds = div.getBoundingClientRect();
+      if (
+        spanBounds.width * spanBounds.height >
+        divBounds.width * divBounds.height
+      ) {
+        console.log(
+          "We need to show a tooltip witht he content because we are overflowing"
+        );
+        this.overflow = this.getRenderedValue();
+        this.updateComplete.then(() => {
+          let tooltip = this.querySelector("spectric-tooltip");
+          if (tooltip) {
+            tooltip.showToolTip();
+          }
+        });
+      } else {
+        this.overflow = "";
+      }
     }
-    getRenderedValue() {
-        let rendered
-        if (this.column.render) {
-            rendered = this.column.render(this.row, this.index, this.table)
-        } else if (this.column.key && typeof this.row === 'object') {
-            rendered = rowGetValue(this.row as any, this.column.key)
-        } else {
-            rendered = html`error`
-        }
-        return rendered
+  };
+  getRenderedValue() {
+    let rendered;
+    if (this.column.render) {
+      rendered = this.column.render(this.row, this.index, this.table);
+    } else if (this.column.key && typeof this.row === "object") {
+      rendered = rowGetValue(this.row as any, this.column.key);
+    } else {
+      rendered = html`error`;
     }
-    protected render(): unknown {
-        let rendered = this.getRenderedValue()
-        let classes = ["cell-contents"]
-        if (this.column.filterable) {
-            classes.push("filterable")
-        }
-
-        let filterButtons = cache(this.column.filterable
-            ? html`<div class="table-cell-actions">
-            <spectric-button @click=${this._handleFilterOut} size="tiny" variant="text" icon tooltip="Filter Out Value">-</spectric-button>
-            <spectric-button @click=${this._handleFilterFor} size="tiny" variant="text" icon tooltip="Filter For Value">+</spectric-button></div>`
-            : null
-        )
-        this.styleRules = {
-            width: this.column.width ? this.column.width + "px" : null,
-            whiteSpace: this.column.whiteSpace || null
-        }
-        return html`
-            <td style=${styleMap(this.styleRules)} @mouseenter=${this._displayTooltip}>
-                ${filterButtons}
-                <div class=${classes.join(" ")}>${this.overflow ? html`<spectric-tooltip .text=${this.overflow}></spectric-tooltip>` : null}<span>${rendered}</span></div>
-            </td>
-            `
+    return rendered;
+  }
+  protected render(): unknown {
+    let rendered = this.getRenderedValue();
+    let classes = ["cell-contents"];
+    if (this.column.filterable) {
+      classes.push("filterable");
     }
 
+    let filterButtons = cache(
+      this.column.filterable
+        ? html`<div class="table-cell-actions">
+            <spectric-button
+              @click=${this._handleFilterOut}
+              size="tiny"
+              variant="text"
+              icon
+              tooltip="Filter Out Value"
+              >-</spectric-button
+            >
+            <spectric-button
+              @click=${this._handleFilterFor}
+              size="tiny"
+              variant="text"
+              icon
+              tooltip="Filter For Value"
+              >+</spectric-button
+            >
+          </div>`
+        : null
+    );
+    this.styleRules = {
+      width: this.column.width ? this.column.width + "px" : null,
+      whiteSpace: this.column.whiteSpace || null,
+    };
+    return html`
+      <td
+        style=${styleMap(this.styleRules)}
+        @mouseenter=${this._displayTooltip}
+      >
+        ${filterButtons}
+        <div class=${classes.join(" ")}>
+          ${this.overflow
+            ? html`<spectric-tooltip .text=${this.overflow}></spectric-tooltip>`
+            : null}<span>${rendered}</span>
+        </div>
+      </td>
+    `;
+  }
 }
 
 interface TableBodyEvents {
-    'filter': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO filter events
+  filter: (event: CustomEvent<ColumnSettings<any>>) => void; //TODO filter events
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [TableCellElementTag]: HTMLElementTagWithEvents<TableCellElement<any>, TableBodyEvents>
-
+  interface HTMLElementTagNameMap {
+    [TableCellElementTag]: HTMLElementTagWithEvents<
+      TableCellElement<any>,
+      TableBodyEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link DialogElement}
+       */
+      [TableCellElementTag]: ReactElementWithPropsAndEvents<
+        TableCellElement<any>,
+        CellProps<any>,
+        TableBodyEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link DialogElement}
-             */
-            [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link DialogElement}
-                 */
-                [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link DialogElement}
+         */
+        [TableCellElementTag]: ReactElementWithPropsAndEvents<
+          TableCellElement<any>,
+          CellProps<any>,
+          TableBodyEvents
+        >;
+      }
     }
+  }
 }
 
-
 export const rowGetValue = (context: Record<string, any>, key: string) => {
-    let path = key.split(".")
-    let value = context[path[0]]
-    if (value === null || value === undefined) {
-        return value
-    }
-    if (path.length > 1) {
-        value = rowGetValue(value, path.slice(1).join("."))
-    }
-    return value
-}
+  let path = key.split(".");
+  let value = context[path[0]];
+  if (value === null || value === undefined) {
+    return value;
+  }
+  if (path.length > 1) {
+    value = rowGetValue(value, path.slice(1).join("."));
+  }
+  return value;
+};