@spectric/ui 0.0.16 → 0.0.18

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

@@ -0,0 +1,91 @@
+import { test, expect } from '@playwright/test';
+import type { SpectricTableElement, TableEvents } from '../index';
+import type SpectricModule from "../../../index.ts"
+test.beforeEach(async ({ page }) => {
+  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) => {
+        const handleEvent = (...args) => {
+          //@ts-ignore
+          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');
+});
+test.describe("Spectric Table Tests", () => {
+
+  test('MultiSelect Table Select All/Deselect All ', async ({ page }) => {
+    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
+      }
+    )
+    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
+      }
+    )
+    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
+      }
+    )
+    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
+      }
+    )
+    await expect(selected, "One DeSelected").toBe(0)
+  });
+
+
+  test('Ensure all event listeners are cleaned up and not leaked', async ({ page }) => {
+    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)
+    //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)
+
+  })
+})
+
+
+
+declare global {
+  interface Window {
+    awaitEvent: <EventMap extends Record<string, any>, K = keyof EventMap>(target: HTMLElement, event: K, trigger: () => void) => Parameters<EventMap[keyof EventMap]>;
+  }
+}

package/src/components/table/body.ts

@@ -3,7 +3,7 @@ import { customElement, property, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export const TableBodyElementTag = "spectric-table-body"
 import "./cell"
-import { ColumnSettings, TableElement } from './table';
+import { ColumnSettings, SpectricTableElement } from './table';
 import { repeat } from 'lit/directives/repeat.js';
 
 interface BodyProps<T> {
@@ -21,7 +21,7 @@ export class TableBodyElement<T> extends LitElement implements BodyProps<T> {
     data: T[] = [];
     @property({ type: Array, attribute: false })
     columns: ColumnSettings<T>[] = [];
-    table!: TableElement<T>
+    table!: SpectricTableElement<T>
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }

package/src/components/table/cell.ts

@@ -2,7 +2,7 @@ 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, TableElement } from './table';
+import { ColumnSettings, DomRenderable, SpectricTableElement } from './table';
 import { cache } from 'lit/directives/cache.js';
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
@@ -31,7 +31,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     @property({ type: Object, attribute: false })
     column!: ColumnSettings<T>;
     columns!: ColumnSettings<T>[];
-    table!: TableElement<T>
+    table!: SpectricTableElement<T>
 
     @state()
     overflow: DomRenderable = ""
@@ -77,7 +77,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
         })
     }
     _displayTooltip = () => {
-        let div = this.querySelector("div")
+        let div = this.querySelector("div.cell-contents")
         let span = this.querySelector("span")
         if (div && span) {
             let spanBounds = span.getBoundingClientRect()
@@ -85,6 +85,12 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
             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 = ""
             }
@@ -115,8 +121,8 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
             : null
         )
         this.styleRules = {
-            width: this.column.width ? this.column.width + "px" : "",
-            whiteSpace: this.column.whiteSpace || ""
+            width: this.column.width ? this.column.width + "px" : null,
+            whiteSpace: this.column.whiteSpace || null
         }
         return html`
             <td style=${styleMap(this.styleRules)} @mouseenter=${this._displayTooltip}>

package/src/components/table/header.css

@@ -0,0 +1,54 @@
+
+spectric-table-header{
+    display: table-header-group;
+    font-weight: bold;
+    position: sticky;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+    background: var(--spectric-background, #ffffff);
+}
+spectric-table-header td {
+    vertical-align: middle;
+    position: relative;
+}
+spectric-table-header .header-contents {
+    position: relative;
+}
+
+spectric-table-header .header-contents .sort-direction {
+    position: absolute;
+    right: 2px;
+    top: calc(50% - 8px)
+}
+spectric-table-header .header-contents.sortable {
+    cursor: pointer;
+    padding-right:15px
+}
+spectric-table-header .header-contents.resizing {
+    user-select: none;
+}
+spectric-table-header .header-contents.sortable:hover .sort-direction.none::before
+ {
+    content: "\2B81";
+}
+
+
+spectric-table-header td .header-resize-handle{
+width: 2px;
+    position: absolute;
+    right: -1px;
+    top: 1px;
+    visibility: hidden;
+    background-color: var(--spectric-primary, #1ea7fd);
+    height: 100%;
+    cursor: ew-resize;
+    z-index: 1;
+}
+
+spectric-table-header td:hover .header-resize-handle{
+    visibility: visible;
+}
+spectric-table-header td:hover:has(*.header-resize-handle) {
+    border-bottom: 1px solid var(--spectric-primary, #1ea7fd);
+}

package/src/components/table/header.ts

@@ -1,86 +1,174 @@
-import { html, LitElement } from 'lit';
+import { html } from "lit";
 import "../pagination";
-import { customElement, property, } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import "./table.css"
-export const TableHeaderElementTag = "spectric-table-header"
-import { ColumnSettings, TableSortDirection } from './table';
-
+import { customElement, property, state } from "lit/decorators.js";
+import {
+    HTMLElementTagWithEvents,
+    ReactElementWithPropsAndEvents,
+} from "../types";
+import "./table.css";
+import "./header.css";
+export const TableHeaderElementTag = "spectric-table-header";
+import { ColumnSettings, TableSortDirection } from "./table";
+import { DisposableElement } from "../../classes";
 
 interface HeaderProps<T> {
-    columns: ColumnSettings<T>[]
+    columns: ColumnSettings<T>[];
 }
 
 /**
  * Pagination Element
  */
 @customElement(TableHeaderElementTag)
-export class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
+export class TableHeaderElement<T>
+    extends DisposableElement
+    implements HeaderProps<T> {
     @property({ type: Array, attribute: false })
     columns: ColumnSettings<T>[] = [];
-
+    @state()
+    private _resizeStart?: { event: MouseEvent; column: ColumnSettings<T> };
+    constructor() {
+        super();
+        this.addDisposableListener(
+            () => document.body,
+            "mouseup",
+            this._handleResizeEnd
+        );
+    }
     protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
+        return this;
     }
     _handleSortChange = (column: ColumnSettings<T>) => {
-        column = JSON.parse(JSON.stringify(column))// Clone the column to not mutate the original object
+        if (this._resizeStart) {
+            return;
+        }
+        column = JSON.parse(JSON.stringify(column)); // Clone the column to not mutate the original object
         if (!column.sortable) {
-            return
+            return;
         }
-        if (column.sortDirection === TableSortDirection.none || column.sortDirection === undefined) {
-            column.sortDirection = TableSortDirection.ascending
+        if (
+            column.sortDirection === TableSortDirection.none ||
+            column.sortDirection === undefined
+        ) {
+            column.sortDirection = TableSortDirection.ascending;
         } else if (column.sortDirection === TableSortDirection.ascending) {
-            column.sortDirection = TableSortDirection.descending
+            column.sortDirection = TableSortDirection.descending;
         } else if (column.sortDirection === TableSortDirection.descending) {
-            column.sortDirection = TableSortDirection.none
+            column.sortDirection = TableSortDirection.none;
         }
-        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange", {
-            composed: true,
-            bubbles: true,
-            detail: column
-        }))
-    }
+        this.dispatchEvent(
+            new CustomEvent<ColumnSettings<T>>("sortChange", {
+                composed: true,
+                bubbles: true,
+                detail: column,
+            })
+        );
+    };
+    _handleResizeStart = (event: MouseEvent, column: ColumnSettings<T>) => {
+        this._resizeStart = { event, column };
+    };
+    _handleResizeEnd = (e: MouseEvent) => {
+        if (!this._resizeStart) {
+            return;
+        }
+        let delta = e.pageX - this._resizeStart?.event.pageX;
+        if (this._resizeStart.column.width) {
+            this._resizeStart.column.width = this._resizeStart.column.width + delta;
+        } else {
+            let cell = (this._resizeStart.event.target as HTMLDivElement).closest(
+                "td"
+            ) as HTMLTableCellElement;
+            this._resizeStart.column.width =
+                cell.getBoundingClientRect().width + delta;
+        }
+        this.dispatchEvent(
+            new CustomEvent("columnResize", { detail: this._resizeStart.column })
+        );
+        //We wrap this to ensure any sort events get fired before we are done FIXME?
+        requestAnimationFrame(() => {
+            this._resizeStart = undefined;
+            //Clear any text that got selected during column resize
+            if (window.getSelection) {
+                let selection = window.getSelection();
+                if (selection) {
+                    selection.removeAllRanges();
+                }
+            }
+        })
+    };
     protected render(): unknown {
         return html`
-        <tr>
-                ${this.columns.map(column => {
-            let classes = ["header-contents"]
-            if (column.filterable) {
-                //classes.push("filterable")
-            }
-            if (column.sortable) {
-                classes.push("sortable")
-            }
-            let columnWidth = column.width ? `width:${column.width}px;` : ""
-            let sortDirection = column.sortDirection === TableSortDirection.ascending ? `🠉` : column.sortDirection == TableSortDirection.descending ? `🠋` : ``
-            let sortClass = column.sortDirection || TableSortDirection.none
-            return html`
-            <td @click=${() => this._handleSortChange(column)} style="${columnWidth}">
-                <div class=${classes.join(" ")} >${column.title || column.key} 
-                    <span class="sort-direction ${sortClass}">${sortDirection}</span>
-                </div>
-            </td>`
-        })}
-        </tr>
-            `
+      <tr>
+        ${this.columns.map(column => this.renderCell(column))}
+      </tr>
+    `;
+    }
+    private renderCell(column: ColumnSettings<T>) {
+        let classes = ["header-contents"];
+        if (column.filterable) {
+            //classes.push("filterable")
+        }
+        if (column.sortable) {
+            classes.push("sortable");
+        }
+        if (this._resizeStart) {
+            classes.push("resizing");
+        }
+        let columnWidth = column.width
+            ? `min-width:${column.width}px;max-width:${column.width}px;`
+            : "";
+        let sortDirection =
+            column.sortDirection === TableSortDirection.ascending
+                ? `🠉`
+                : column.sortDirection == TableSortDirection.descending
+                    ? `🠋`
+                    : ``;
+        let sortClass = column.sortDirection || TableSortDirection.none;
+        let resizable =
+            column.allowResize || column.allowResize === undefined;
+        let resizeHandle = resizable
+            ? html`<div
+                  class="header-resize-handle"
+                  @mousedown=${(e: MouseEvent) => {
+                    this._handleResizeStart(e, column);
+                }}
+                  @mouseup=${this._handleResizeEnd}
+                ></div>`
+            : null
+        return html` <td
+            @click=${() => this._handleSortChange(column)}
+            style="${columnWidth}"
+          >
+            ${resizeHandle}
+            <div class=${classes.join(" ")}>
+              ${column.title || column.key}
+              <span class="sort-direction ${sortClass}">${sortDirection}</span>
+            </div>
+          </td>`;
     }
 }
 
 interface TableHeaderEvents {
-    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+    sortChange: (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+    columnResize: (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        [TableHeaderElementTag]: HTMLElementTagWithEvents<TableHeaderElement<any>, TableHeaderEvents>
-
+        [TableHeaderElementTag]: HTMLElementTagWithEvents<
+            TableHeaderElement<any>,
+            TableHeaderEvents
+        >;
     }
     namespace JSX {
         interface IntrinsicElements {
             /**
              * @see {@link DialogElement}
              */
-            [TableHeaderElementTag]: ReactElementWithPropsAndEvents<TableHeaderElement<any>, HeaderProps<any>, TableHeaderEvents>;
+            [TableHeaderElementTag]: ReactElementWithPropsAndEvents<
+                TableHeaderElement<any>,
+                HeaderProps<any>,
+                TableHeaderEvents
+            >;
         }
     }
     namespace React {
@@ -89,7 +177,11 @@ declare global {
                 /**
                  * @see {@link DialogElement}
                  */
-                [TableHeaderElementTag]: ReactElementWithPropsAndEvents<TableHeaderElement<any>, HeaderProps<any>, TableHeaderEvents>
+                [TableHeaderElementTag]: ReactElementWithPropsAndEvents<
+                    TableHeaderElement<any>,
+                    HeaderProps<any>,
+                    TableHeaderEvents
+                >;
             }
         }
     }

package/src/components/table/table.css

@@ -2,6 +2,7 @@ spectric-table{
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    line-height: 1;
 }
 spectric-table .table-wrapper{
     overflow: auto;
@@ -15,44 +16,19 @@ spectric-table tr{
 spectric-table tr.odd{
     background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 90%);
 }
-spectric-table tr:hover{
+spectric-table spectric-table-virtual-body tr:hover{
     background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
 }
-spectric-table-header{
-    display: table-header-group;
-    font-weight: bold;
-    position: sticky;
-    top: 0px;
-    left: 0px;
-    z-index: 1;
-    background: var(--spectric-background, #ffffff);
-}
-spectric-table-header td {
-    vertical-align: middle;
-}
+
 spectric-table tr {
-    line-height: var(--rowHeight);
+    height: var(--rowHeight);
 }
 spectric-table td{
    height: var(--rowHeight);
-}
-spectric-table-header .header-contents {
-    position: relative;
+   padding:1px;
+   border: 1px solid transparent;
 }
 
-spectric-table-header .header-contents .sort-direction {
-    position: absolute;
-    right: 0;
-    top: calc(50% - 8px)
-}
-spectric-table-header .header-contents.sortable {
-    cursor: pointer;
-    padding-right:15px
-}
-spectric-table-header .header-contents.sortable:hover .sort-direction.none::before
- {
-    content: "\2B81";
-}
 spectric-table div[role="table"]{
     display: table;
     min-width: 100%;
@@ -69,9 +45,7 @@ spectric-table-cell td{
 spectric-table td:hover:has(.filterable) {
     border: 1px solid var(--spectric-primary, #1ea7fd);
 }
-spectric-table td {
-    border: 1px solid transparent;
-}
+
 spectric-table-cell .table-cell-actions{
     position: absolute;
     display: flex;
@@ -108,7 +82,10 @@ spectric-input.table-checkbox-single[checked] spectric-button::before {
 spectric-table .cell-contents{
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
+    -webkit-line-clamp: var(--lineClamp,1);
+    -webkit-box-pack: center;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: var(--fontSize);
+    height: calc(var(--lineClamp) * var(--fontSize));
 }