@spectric/ui 0.0.16 → 0.0.18

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 = () => {
@@ -199,7 +231,7 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
                 render: (row) => {
                     let container = document.createElement("div")
                     let checked = this.selected.includes(row)
-                    let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" ${spreadProps({ checked })}  @change=${(e: DomEvent<HTMLInputElement>) => {
+                    let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" .helperText=${""} ${spreadProps({ checked })}  @change=${(e: DomEvent<HTMLInputElement>) => {
                         e.stopPropagation()
                         let index = this.selected.findIndex(value => value === row)
                         if (e.target.checked && index !== -1) {
@@ -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,8 @@ export class TableVirtualBodyElement<T> extends DisposableElement implements Bod
     @property({ type: Number, state: true })
     startIndex: number = 0
 
-    table!: TableElement<T>
+    table!: SpectricTableElement<T>
+    columnsMeasured: boolean = false;
     constructor() {
         super()
         this.addDisposableListener(() => this.table.querySelector(".table-wrapper")!, "scroll", () => {
@@ -39,12 +40,22 @@ export class TableVirtualBodyElement<T> extends DisposableElement implements Bod
             })
         })
     }
-    protected firstUpdated(): void {
-        this.columns.forEach(col => {
-            if (!col.width) {
-                console.warn("When using virtual scrolling it is recomended to set the width of the columns to prevent columns widths from jittering during scroll")
+    protected updated(): void {
+        if (this.columnsMeasured === false) {
+            let tr = this.querySelector("tr");
+            let cells = tr?.querySelectorAll("spectric-table-cell td")
+            if (tr && cells && cells.length) {
+                this.columns.forEach((col, index) => {
+                    if (!col.width || col.width === 0) {
+                        let rect = cells[index].getBoundingClientRect()
+                        if (rect.width > 0) {
+                            this.columnsMeasured = true
+                            col.width = rect.width
+                        }
+                    }
+                })
             }
-        })
+        }
     }
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this

package/src/components/tooltip/popover.ts

@@ -0,0 +1,221 @@
+
+import { customElement, property } from 'lit/decorators.js';
+import "./tooltip.css"
+export const PopoverElementTag = "spectric-popover"
+import { css, CSSResultGroup, html, render } from "lit-element";
+import { DomRenderable } from "../table";
+import { DisposableElement } from '../../classes/DisposibleElement';
+import { SPECTRIC_CSS_VARIABLES } from '../ThemeProvider';
+export type { TooltipProps, TooltipEvents }
+export enum TooltipPostions {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right",
+    mouse = "mouse"
+}
+
+export type TooltipPostionsTypes = `${TooltipPostions}`
+interface TooltipProps {
+    /**
+     * How long you need to hover before the tooltip displays
+     */
+    delay?: number;
+    /**
+     * How long the fade in animation should run
+     */
+    animationDuration?: number;
+    /**
+     * Tooltip contents
+     */
+    text: DomRenderable
+    /**
+     * Where to anchor the tooltip
+     */
+    position?: TooltipPostionsTypes
+    /**
+     * Sets a max width for the contents you can disable this by setting to 0 or -1
+     */
+    maxWidth?: number
+    /**
+     * Container the tool tip will be attached to. 
+     */
+    portalTarget?: HTMLElement
+
+    /** 
+     * The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
+     */
+    triggerTarget?: HTMLElement
+}
+
+/**
+ * Spectric tooltip will add a tooltip to any container 
+ */
+@customElement(PopoverElementTag)
+export class PopoverElement extends DisposableElement implements TooltipProps {
+    @property({ type: Number, reflect: true })
+    delay: number = 100;
+    @property({ type: Number, reflect: true })
+    animationDuration: number = 0;
+    @property({ type: String, reflect: false })
+    text: DomRenderable = "";
+    @property({ type: String, reflect: true })
+    position: TooltipPostionsTypes = "right";
+    @property({ type: Number, reflect: true })
+    maxWidth?: number = 300;
+    protected portalElement!: HTMLDivElement
+    protected mouseLocation?: { left: number; top: number; };
+    static styles?: CSSResultGroup | undefined = css`:host{max-height: 0px;
+    max-width: 0px;
+    display: none;
+    pointer-events:none;}`;
+    @property({ attribute: false })
+    portalTarget: HTMLElement = document.body
+    protected timer?: number;
+    protected open: boolean = false;
+    protected mouseframe?: number;
+    /**
+     * @default parentElement
+     */
+    @property({ attribute: false })
+    triggerTarget!: HTMLElement;
+    protected get target() {
+        return this.triggerTarget || this.parentElement
+    }
+    constructor() {
+        super()
+        /**
+         * Public method to trigger showing the tooltip programatically 
+         */
+        this.showPopover = this.showPopover.bind(this)
+        this.hidePopover = this.hidePopover.bind(this)
+        this.addDisposableListener(() => this.target, "mousemove", this._getMousePosition)
+    }
+    connectedCallback(): void {
+        super.connectedCallback()
+        this.portalElement = document.createElement("div")
+        this.portalElement.className = "spectric-tooltip-portal"
+    }
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.portalElement.remove()
+        //@ts-ignore
+        this.portalElement = undefined
+    }
+    protected _getMousePosition = (ev: MouseEvent) => {
+        this.mouseLocation = {
+            left: ev.clientX,
+            top: ev.clientY
+        }
+        if (this.position == "mouse" && this.open && !this.mouseframe) {
+            this.mouseframe = requestAnimationFrame(() => this.positionTooltip())
+        }
+    }
+    /**
+     * Public method to trigger hide the tooltip programatically 
+     */
+    public hidePopover() {
+        if (this.timer) {
+            clearTimeout(this.timer)
+        }
+        this.open = false
+        this.portalElement.remove()
+    }
+    /**
+     * Public method to trigger showing the tooltip programatically 
+     */
+    public async showPopover() {
+        if (this.timer) {
+            clearTimeout(this.timer)
+        }
+        await new Promise(resolve => {
+            this.timer = window.setTimeout(resolve, this.delay)
+        })
+        this.portalElement.className = `spectric-popover-portal ${this.position}`
+        const tooltip = html`<div class="tooltip-container">
+            <span class="tooltip-caret"></span>
+            <div class="tooltip-content">${this.text}</div>
+        </div>`
+        render(tooltip, this.portalElement)
+        //with the delay it is possible that the triggering element was removed or hidden lets check that it is visible
+        if (!this.target || !this.target.checkVisibility()) {
+            return
+        }
+        //We need to append our tooltip and let the css updates apply before we can take measurements
+        this.portalTarget.appendChild(this.portalElement)
+        this.open = true
+        requestAnimationFrame(this.positionTooltip)
+    }
+    protected applyStyle = (style: Record<string, string>) => {
+        Object.entries(style).forEach(([prop, value]) => {
+            this.portalElement.style.setProperty(prop, value)
+        })
+    }
+    protected positionTooltip = () => {
+        if (!this.target) {
+            //We got detached before the animation frame completed
+            return
+        }
+        //Since we are attaching to a body we need to send the correct styles from the target portion of the dom to the portal element
+        let computedStyle = getComputedStyle(this)
+
+        let styles: Record<string, string> = {
+
+        }
+        SPECTRIC_CSS_VARIABLES.forEach(v => {
+            styles[v] = computedStyle.getPropertyValue(v)
+        })
+        const bounds = this.target.getBoundingClientRect()
+        const portalBounds = this.portalElement.getBoundingClientRect()
+        if (this.target !== document.body) {
+            if (this.maxWidth && this.maxWidth > 0) {
+                portalBounds.width = Math.min(portalBounds.width, this.maxWidth)
+            }
+        }
+        let location: {
+            left: string;
+            top: string;
+        };
+        if (this.position === "mouse" && this.mouseLocation) {
+            this.mouseframe = undefined
+            location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
+        } else if (this.position === "top") {
+            location = {
+                top: bounds.top - portalBounds.height + "px",
+                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
+            }
+        } else if (this.position === "bottom") {
+            location = {
+                top: bounds.bottom + "px",
+                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
+            }
+        } else if (this.position === "left") {
+            location = {
+                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
+                left: bounds.left - (portalBounds.width) + "px"
+            }
+        } else if (this.position === "right") {
+            location = {
+                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
+                left: bounds.right + "px"
+            }
+        } else {
+            location = { left: "0px", top: "0px" };
+            console.error("Unknown position... Maybe we sould implement auto?")
+        }
+        this.applyStyle({ ...styles, ...location })
+        if (this.position !== "mouse") {
+            this.portalElement.animate({ opacity: [0, 1] }, { duration: this.animationDuration })
+        }
+    }
+    protected render() {
+        //We don't need to render anything here this is just a placeholder element the content is displayed in a portal attached to the body.
+        // See showTooltip for the real rendering
+        return html`<!-- ToolTip -->`
+    }
+}
+
+interface TooltipEvents {
+    //'open': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    //'filter': (event: CustomEvent<FilterEvent>) => void;
+}

package/src/components/tooltip/tooltip.css

@@ -1,34 +1,39 @@
-.spectric-tooltip-portal{
+.spectric-popover-portal{
     position: fixed;
     z-index: 9999;
+    --spectric-tooltip-background-color: var(--spectric-tooltip-background, var(--spectric-background,#000000));
+    --spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, white));
+    --spectric-tooltip-accent-color: var(--spectric-tooltip-accent, var(--spectric-primary, #1ea7fd));
+}
+.spectric-popover-portal.spectric-tooltip-portal{
     pointer-events: none;
-    --spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%)
 }
-.spectric-tooltip-portal .tooltip-container{
+.spectric-popover-portal .tooltip-container{
     display: flex;
     justify-content: center;
     align-items: center;
 }
-.spectric-tooltip-portal.top .tooltip-container{
+.spectric-popover-portal.top .tooltip-container{
     flex-direction: column-reverse;
 }
-.spectric-tooltip-portal.bottom .tooltip-container{
+.spectric-popover-portal.bottom .tooltip-container{
     flex-direction: column;
 }
-.spectric-tooltip-portal.left .tooltip-container{
+.spectric-popover-portal.left .tooltip-container{
     flex-direction: row-reverse;
 }
 
-.spectric-tooltip-portal .tooltip-content{
-    background: var(--spectric-tooltip-background);
+.spectric-popover-portal .tooltip-content{
+    background: var(--spectric-tooltip-background-color);
     border-radius: var(--spectric-border-radius,.4em);
-    box-shadow: 0 0 .01em .01em color-mix(in srgb, var(--spectric-background-hover,rgba(141, 141, 141, 0.12)) 90%, var(--spectric-text-on-color,#ffffff) 90%);
+    border: 1px solid color-mix(in srgb, var(--spectric-tooltip-background-color) 90%, var(--spectric-tooltip-accent-color) 90%);
+    box-shadow: 0 0 .01em .01em color-mix(in srgb, var(--spectric-tooltip-accent-color) 90%, var(--spectric-text-on-color,#ffffff) 90%);
     padding: .2em;
-    color:var(--spectric-text-on-color,#ffffff);
+    color:var(--spectric-tooltip-text-color);
 }
 
-.spectric-tooltip-portal .tooltip-caret{
-    background:var(--spectric-tooltip-background);
+.spectric-popover-portal .tooltip-caret{
+    background:color-mix(in srgb, var(--spectric-tooltip-background-color) 90%, var(--spectric-tooltip-accent-color) 90%);
 }
 .spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{
     inline-size: .75rem;
@@ -38,15 +43,15 @@
     inline-size: .375rem;
     block-size: .75rem;
 }
-.spectric-tooltip-portal.top .tooltip-caret{
+.spectric-popover-portal.top .tooltip-caret{
     clip-path: polygon(0 0,50% 100%,100% 0);
 }
-.spectric-tooltip-portal.bottom .tooltip-caret{
+.spectric-popover-portal.bottom .tooltip-caret{
     clip-path: polygon(0 100%,50% 0,100% 100%);
 }
-.spectric-tooltip-portal.left .tooltip-caret{
+.spectric-popover-portal.left .tooltip-caret{
     clip-path: polygon(0 0,100% 50%,0 100%);
 }
-.spectric-tooltip-portal.right .tooltip-caret{
+.spectric-popover-portal.right .tooltip-caret{
     clip-path: polygon(0 50% ,100% 0, 100% 100%);
 }