@spectric/ui 0.0.16 → 0.0.17

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,177 @@
-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;
+        let before = this._resizeStart.column.width;
+        console.log(delta);
+        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;
+        }
+        console.log(before, this._resizeStart.column.width);
+        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 +180,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));
 }

package/src/components/table/table.ts

@@ -34,6 +34,10 @@ export enum TableSortDirection {
 export type TableSortDirectionTypes = `${TableSortDirection}`
 export type ColumnSettings<T> = {
     width?: number
+    /**
+     * Enabled/disables resizing by dragging column header Default true
+     */
+    allowResize?: boolean
     whiteSpace?: "nowrap";
     hidden?: boolean
     sortable?: boolean
@@ -47,7 +51,7 @@ export type ColumnSettings<T> = {
     /**
      * Render function to render a table cell for displaying custom html
      */
-    render?: (row: T, index: number, table: TableElement<T>) => DomRenderable
+    render?: (row: T, index: number, table: SpectricTableElement<T>) => DomRenderable
     /**
      * Custom comparator function for sorting
      */
@@ -57,6 +61,7 @@ export type TableSelectOptionsTypes = `${TableSelectOptions}`
 export interface TableDataOptions<T> {
     pagination?: PaginationProps
     columns: ColumnSettings<T>[]
+    sortOrder?: string[]
 }
 interface TableProps<T> extends TableDataOptions<T> {
     data: T[]
@@ -65,7 +70,7 @@ interface TableProps<T> extends TableDataOptions<T> {
     rowHeight?: number
 }
 
-type DomEvent<T> = Event & {
+export type DomEvent<T> = Event & {
     target: T
 }
 /**
@@ -74,7 +79,7 @@ type DomEvent<T> = Event & {
  *
  */
 @customElement(TableElementTag)
-export class TableElement<T> extends LitElement implements TableProps<T> {
+export class SpectricTableElement<T = any> extends LitElement implements TableProps<T> {
     @property({ type: Array, attribute: false })
     data: T[] = [];
     @property({ type: Object, attribute: false })
@@ -86,15 +91,23 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
     @property({ type: String, reflect: true })
     sort: TableSortOptionTypes = TableSortOption.single;
 
+    @property({ type: Array, reflect: false })
+    sortOrder: string[] = [];
     /**
      * Needed for virtualization 
      */
     @property({ type: Number, reflect: true })
     rowHeight: number = 25;
+    /**
+     * Needed for virtualization 
+     */
+    @property({ type: Number, reflect: true })
+    fontSize: number = 16;
 
     static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
         return (props: TableDataOptions<T>) => {
-            let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
+            //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>)
             let rows = [...data] // Need to copy the array to prevent mutating the ordering of the original data
             if (sorts.length) {
                 let sortChain = createSortChain(sorts)
@@ -136,7 +149,7 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
     private _handleSortChange = (e: CustomEvent<ColumnSettings<T>>) => {
         let columnSetting = e.detail
         let column = this.columns.find(col => col.key == columnSetting.key)
-        if (!column) {
+        if (!column || column.key === undefined) {
             console.warn("Unable to find sort column")
             return
         }
@@ -145,15 +158,34 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
             this.columns.forEach(col => {
                 col.sortDirection = TableSortDirection.none
             })
+            this.sortOrder = []
         }
         column.sortDirection = columnSetting.sortDirection;
+        if (!column.sortDirection || column.sortDirection === "none") {
+            let index = this.sortOrder.findIndex(col => col === column.key)
+            if (index !== -1) {
+                this.sortOrder.splice(index, 1)
+            }
+        } else {
+            let index = this.sortOrder.findIndex(col => col === column.key)
+            if (index === -1) {
+                this.sortOrder = [...this.sortOrder, column.key]
+            }
+        }
+        this.columns = [...this.columns]
+        this._emitChange()
+    }
+    private _handleColumnResize = (e: CustomEvent<ColumnSettings<T>>) => {
+        let columnSetting = e.detail
+        let index = this.columns.findIndex(col => col.key == columnSetting.key)
+        this.columns[index] = { ...this.columns[index] }
         this.columns = [...this.columns]
         this._emitChange()
     }
 
     private _emitChange = () => {
-        let { pagination, columns } = this
-        this.dispatchEvent(new CustomEvent<TableDataOptions<T>>("change", { detail: { pagination, columns } }))
+        let { pagination, columns, sortOrder } = this
+        this.dispatchEvent(new CustomEvent<TableDataOptions<T>>("change", { detail: { pagination, columns, sortOrder } }))
     }
     //@ts-ignore
     private __DO_NOT_USE_filter = () => {
@@ -225,14 +257,15 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
             })
         }
         const tdBorderAndPadding = 4;
+        let rowHeight = this.rowHeight - tdBorderAndPadding;
+        if (rowHeight < this.fontSize + tdBorderAndPadding) {
+            rowHeight = this.fontSize + tdBorderAndPadding
+        }
         return html`
-        <div class="table-wrapper" style="--rowHeight:${this.rowHeight - tdBorderAndPadding}px">
+        <div class="table-wrapper" style="--rowHeight:${rowHeight}px;--fontSize:${this.fontSize}px;--lineClamp:${Math.floor(rowHeight / this.fontSize)}">
             <div role="table">
-                <spectric-table-header .columns=${columns} @sortChange=${this._handleSortChange}></spectric-table-header>
-                ${this.rowHeight >= 25 && this.data.length >= 100 ?
-                html`<spectric-table-virtual-body .columns=${columns} .data=${this.data} .table=${this} .rowHeight=${this.rowHeight}></spectric-table-virtual-body>` :
-                html`<spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>`
-            }
+                <spectric-table-header .columns=${columns} @sortChange=${this._handleSortChange} @columnResize=${this._handleColumnResize}></spectric-table-header>
+                <spectric-table-virtual-body .columns=${columns} .data=${this.data} .table=${this} .rowHeight=${rowHeight}></spectric-table-virtual-body>
             </div>
         </div>
         ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
@@ -245,11 +278,12 @@ interface TableEvents {
     'paginationChange': (event: CustomEvent<PaginationChangeProps>) => void;
     'filter': (event: CustomEvent<FilterEvent<any>>) => void;
     'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
+    'selected': (event: CustomEvent<any[]>) => void;
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        [TableElementTag]: HTMLElementTagWithEvents<TableElement<any>, TableEvents>
+        [TableElementTag]: HTMLElementTagWithEvents<SpectricTableElement<any>, TableEvents>
 
     }
     namespace JSX {
@@ -257,7 +291,7 @@ declare global {
             /**
              * @see {@link TableElement}
              */
-            [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
+            [TableElementTag]: ReactElementWithPropsAndEvents<SpectricTableElement<any>, TableProps<any>, TableEvents>;
         }
     }
     namespace React {
@@ -266,7 +300,7 @@ declare global {
                 /**
                  * @see {@link TableElement}
                  */
-                [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>
+                [TableElementTag]: ReactElementWithPropsAndEvents<SpectricTableElement<any>, TableProps<any>, TableEvents>
             }
         }
     }

package/src/components/table/virtualBody.ts

@@ -3,7 +3,7 @@ import { customElement, property, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export const TableBodyElementTag = "spectric-table-virtual-body"
 import "./cell"
-import { ColumnSettings, TableElement } from './table';
+import { ColumnSettings, SpectricTableElement } from './table';
 import { repeat } from 'lit/directives/repeat.js';
 import { DisposableElement } from '../../classes/DisposibleElement';
 import "./virtualBody.css"
@@ -29,7 +29,7 @@ export class TableVirtualBodyElement<T> extends DisposableElement implements Bod
     @property({ type: Number, state: true })
     startIndex: number = 0
 
-    table!: TableElement<T>
+    table!: SpectricTableElement<T>
     constructor() {
         super()
         this.addDisposableListener(() => this.table.querySelector(".table-wrapper")!, "scroll", () => {