@spectric/ui 0.0.11 → 0.0.13

package/src/components/table/table.ts

@@ -1,15 +1,17 @@
-import { html, LitElement, TemplateResult } from 'lit';
+import { html, LitElement, PropertyValues, render, TemplateResult } from 'lit';
 import "../pagination";
 import "./header"
 import "./body"
 import { customElement, property, state, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./virtualBody"
 import "./table.css"
 export const TableElementTag = "spectric-table"
 import { spreadProps } from '../../utils/spread';
 import { PaginationChangeProps, PaginationProps } from '../pagination';
 import { FilterEvent } from './cell';
 import { createSortChain } from './sorting';
+
 export type { TableProps, TableEvents }
 
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null
@@ -26,7 +28,7 @@ export enum TableSortOption {
 export type TableSortOptionTypes = `${TableSortOption}`
 export enum TableSortDirection {
     ascending = "ascending",
-    decending = "decending",
+    descending = "descending",
     none = "none"
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`
@@ -45,7 +47,7 @@ export type ColumnSettings<T> = {
     /**
      * Render function to render a table cell for displaying custom html
      */
-    render?: (row: T, table: TableElement<T>) => DomRenderable
+    render?: (row: T, index: number, table: TableElement<T>) => DomRenderable
     /**
      * Custom comparator function for sorting
      */
@@ -60,6 +62,7 @@ interface TableProps<T> extends TableDataOptions<T> {
     data: T[]
     select: TableSelectOptionsTypes
     sort?: TableSortOptionTypes
+    rowHeight?: number
 }
 
 type DomEvent<T> = Event & {
@@ -83,6 +86,12 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
     @property({ type: String, reflect: true })
     sort: TableSortOptionTypes = TableSortOption.single;
 
+    /**
+     * Needed for virtualization 
+     */
+    @property({ type: Number, reflect: true })
+    rowHeight: number = 25;
+
     static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
         return (props: TableDataOptions<T>) => {
             let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
@@ -123,6 +132,7 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
             }
             this.pagination = pagination
         }
+        this.dispatchEvent(new CustomEvent<PaginationChangeProps>("paginationChange", { detail: e.detail }))
         this._emitChange()
     };
     private _handleSortChange = (e: CustomEvent<ColumnSettings<T>>) => {
@@ -151,20 +161,37 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
     private __DO_NOT_USE_filter = () => {
         //This is only here to document events that bubble up from lower components
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
+        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange"))
     }
     @state()
     private selected: T[] = [];
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    deselectAll() {
+        this.selected = []
+        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+    }
+    selectAll() {
+        this.selected = [...this.data]
+        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+    }
     _handleSelectAllChange = (e: DomEvent<HTMLInputElement>) => {
         e.stopPropagation()
         if (e.target.checked) {
-            this.selected = [...this.data]
+            this.selectAll()
         } else {
-            this.selected = []
+            this.deselectAll()
         }
-        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+    }
+    protected update(changedProperties: PropertyValues): void {
+        if (changedProperties.has("select")) {
+            if (this.select === "single" && this.selected.length > 1) {
+                this.selected = [this.selected[0]]
+                this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
+            }
+        }
+        super.update(changedProperties)
     }
     protected render(): unknown {
         let columns = this.columns.filter(column => !column.hidden)
@@ -172,31 +199,42 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
             columns.unshift({
                 title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
                 render: (row) => {
-                    return html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" .checked=${this.selected.includes(row)} @change=${(e: DomEvent<HTMLInputElement>) => {
+                    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>) => {
                         e.stopPropagation()
-                        if (this.select === "single") {
-                            this.selected = []
+                        let index = this.selected.findIndex(value => value === row)
+                        if (e.target.checked && index !== -1) {
+                            return
+                        }
+                        else if (!e.target.checked && index === -1) {
+                            return
+                        }
+                        else if (!e.target.checked && index !== -1) {
+                            this.selected.splice(index, 1)
                         }
                         if (e.target.checked) {
-                            this.selected.push(row)
-                            this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
-                        } else {
-                            let index = this.selected.findIndex(value => value === row)
-                            if (index !== -1) {
-                                this.selected.splice(index, 1)
-                                this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+                            if (this.select === "single") {
+                                this.selected = []
                             }
+                            this.selected.push(row)
                         }
+                        this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
                     }}></spectric-input>`
+                    render(template, container)
+                    return template
                 }
             })
         }
-
+        const tdBorderAndPadding = 4;
         return html`
-        <div class="table-wrapper">
+        <div class="table-wrapper" style="--rowHeight:${this.rowHeight - tdBorderAndPadding}px">
             <div role="table">
                 <spectric-table-header .columns=${columns} @sortChange=${this._handleSortChange}></spectric-table-header>
-                <spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>
+                ${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>`
+            }
             </div>
         </div>
         ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
@@ -205,8 +243,10 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
 }
 
 interface TableEvents {
-    'change': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    'change': (event: CustomEvent<TableDataOptions<any>>) => void;
+    'paginationChange': (event: CustomEvent<PaginationChangeProps>) => void;
     'filter': (event: CustomEvent<FilterEvent<any>>) => void;
+    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 
 declare global {

package/src/components/table/virtualBody.css

@@ -0,0 +1,13 @@
+spectric-table-body {
+    display: table-row-group;
+}
+spectric-table-virtual-body {
+    display: contents;
+}
+
+
+
+spectric-table-virtual-body .virtual-scroll-spacer td {
+    padding: 0;
+    border: 0px;
+}

package/src/components/table/virtualBody.ts

@@ -0,0 +1,127 @@
+import { html } from 'lit';
+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 { repeat } from 'lit/directives/repeat.js';
+import { DisposableElement } from '../../classes/DisposibleElement';
+import "./virtualBody.css"
+interface BodyProps<T> {
+    columns: ColumnSettings<T>[]
+    data: T[]
+    rowHeight: number
+}
+
+
+/**
+ * Table Body Element
+ */
+@customElement(TableBodyElementTag)
+export class TableVirtualBodyElement<T> extends DisposableElement implements BodyProps<T> {
+    @property({ type: Array, attribute: false })
+    data: T[] = [];
+    @property({ type: Array, attribute: false })
+    columns: ColumnSettings<T>[] = [];
+    @property({ type: Number, attribute: false })
+    rowHeight: number = 30;
+
+    @property({ type: Number, state: true })
+    startIndex: number = 0
+
+    table!: TableElement<T>
+    constructor() {
+        super()
+        this.addDisposableListener(() => this.table.querySelector(".table-wrapper")!, "scroll", () => {
+            const scrollTop = this.table.querySelector(".table-wrapper")!.scrollTop;
+            requestAnimationFrame(() => {
+                this.startIndex = Math.floor(scrollTop / this.rowHeight);
+            })
+        })
+    }
+    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 createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+    protected render(): unknown {
+        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")!.clientHeight
+        let viewport = this.table.querySelector(".table-wrapper")!
+        let startIndex = Math.max(this.startIndex - buffer, 0) //pad the front with 10 rows
+        const rowsThatFit = Math.ceil((viewport.clientHeight - headerHeight) / this.rowHeight);
+        const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
+        const visibleRows = endIndex - startIndex
+        let totalHeight = totalRows * this.rowHeight
+        let beforeHeight = (startIndex * this.rowHeight) + (viewport.scrollTop - (startIndex * this.rowHeight))
+        if (endIndex === totalRows) {
+            beforeHeight = (startIndex * this.rowHeight)
+        }
+        let visibleHeight = (visibleRows * this.rowHeight)
+        let afterHeight = totalHeight - beforeHeight - visibleHeight
+        let spacerElementBefore = this.startIndex != 0 ? html`
+                <tr style="height:${beforeHeight}px" class="virtual-scroll-spacer">
+                    <td colspan="${this.columns.length}"></td></tr>` : null
+
+        let spacerElementAfter = html`
+                <tr style="height:${afterHeight}px" class="virtual-scroll-spacer">
+                    <td colspan="${this.columns.length}"></td></tr>`
+        return html`
+          <div style="height:${totalHeight}px;position: absolute;overflow-x: hidden;overflow-y: hidden;z-index:-1;width:1px;"></div>
+          <tbody>
+            ${spacerElementBefore}
+            </tbody>
+          <div style="display:table-row-group;max-height:${visibleHeight}px; overflow:hidden;">
+
+              ${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}></spectric-table-cell>`
+        })}
+              </tr>`)
+            }
+              </div>
+    <tbody>
+                ${afterHeight > 0 ? spacerElementAfter : null}
+</tbody>
+
+    `
+
+    }
+
+}
+
+interface TableBodyEvents {
+    //'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableBodyElementTag]: HTMLElementTagWithEvents<TableVirtualBodyElement<any>, TableBodyEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>
+            }
+        }
+    }
+}

package/src/components/tooltip/tooltip.ts

@@ -3,8 +3,9 @@ import { customElement, property } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import "./tooltip.css"
 export const TooltipElementTag = "spectric-tooltip"
-import { css, CSSResultGroup, html, LitElement, render } from "lit-element";
+import { css, CSSResultGroup, html, render } from "lit-element";
 import { DomRenderable } from "../table";
+import { DisposableElement } from '../../classes/DisposibleElement';
 export type { TooltipProps, TooltipEvents }
 export enum TooltipPostions {
     top = "top",
@@ -19,11 +20,11 @@ interface TooltipProps {
     /**
      * How long you need to hover before the tooltip displays
      */
-    delay: number;
+    delay?: number;
     /**
      * How long the fade in animation should run
      */
-    animationDuration: number;
+    animationDuration?: number;
     /**
      * Tooltip contents
      */
@@ -31,18 +32,18 @@ interface TooltipProps {
     /**
      * Where to anchor the tooltip
      */
-    position: TooltipPostionsTypes
+    position?: TooltipPostionsTypes
     /**
-     * Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1
+     * 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. (default:document.body)
+     * Container the tool tip will be attached to. 
      */
     portalTarget?: HTMLElement
 
     /** 
-     * The element that triggers the tooltip. (default:node.parentElement) 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
+     * 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
 }
@@ -51,7 +52,7 @@ interface TooltipProps {
  * Spectric tooltip will add a tooltip to any container 
  */
 @customElement(TooltipElementTag)
-export class TooltipElement extends LitElement implements TooltipProps {
+export class TooltipElement extends DisposableElement implements TooltipProps {
     @property({ type: Number, reflect: true })
     delay: number = 100;
     @property({ type: Number, reflect: true })
@@ -72,25 +73,26 @@ export class TooltipElement extends LitElement implements TooltipProps {
     portalTarget: HTMLElement = document.body
     private timer?: number;
     private open: boolean = false;
-    mouseframe?: number;
+    private mouseframe?: number;
+    /**
+     * @default parentElement
+     */
     @property({ attribute: false })
-    triggerTarget?: HTMLElement;
+    triggerTarget!: HTMLElement;
     private get target() {
         return this.triggerTarget || this.parentElement
     }
+    constructor() {
+        super()
+        this.addDisposableListener(() => this.target, "mousemove", this._getMousePosition)
+        this.addDisposableListener(() => this.target, "mouseover", this.showToolTip)
+        this.addDisposableListener(() => this.target, "mouseleave", this._hideTooltip)
+    }
     connectedCallback(): void {
         super.connectedCallback()
-        if (this.target) {
-            this.target.addEventListener("mousemove", this._getMousePosition)
-            this.target.addEventListener("mouseover", this.showToolTip)
-            this.target.addEventListener("mouseleave", this._hideTooltip)
-        }
     }
     disconnectedCallback(): void {
-        super.connectedCallback()
-        this.target?.removeEventListener("mousemove", this._getMousePosition)
-        this.target?.removeEventListener("mouseover", this.showToolTip)
-        this.target?.removeEventListener("mouseleave", this._hideTooltip)
+        super.disconnectedCallback()
         this.portalElement.remove()
     }
     private _getMousePosition = (ev: MouseEvent) => {
@@ -153,39 +155,43 @@ export class TooltipElement extends LitElement implements TooltipProps {
         }
         const bounds = this.target.getBoundingClientRect()
         const portalBounds = this.portalElement.getBoundingClientRect()
-        if (this.target !== document.body)
+        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
-            const location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
-            this.applyStyle({ ...styles, ...location })
+            location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
         } else if (this.position === "top") {
-            const location = {
+            location = {
                 top: bounds.top - portalBounds.height + "px",
                 left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
             }
-            this.applyStyle({ ...styles, ...location })
         } else if (this.position === "bottom") {
-            const location = {
+            location = {
                 top: bounds.bottom + "px",
                 left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
             }
-            this.applyStyle({ ...styles, ...location })
         } else if (this.position === "left") {
-            const location = {
+            location = {
                 top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
                 left: bounds.left - (portalBounds.width) + "px"
             }
-            this.applyStyle({ ...styles, ...location })
         } else if (this.position === "right") {
-            const location = {
+            location = {
                 top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
                 left: bounds.right + "px"
             }
-            this.applyStyle({ ...styles, ...location })
+        } 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 })
         }

package/src/docs/HTML-Vue-Python Integration.mdx

@@ -2,16 +2,16 @@
 
 Add the dist/custom-element.json to the html.languge settings
 https://code.visualstudio.com/docs/languages/html#_html-custom-data
-![Add spectric custom elements](html-include.png)
+![Add spectric custom elements](./html-include.png)
 
 # VUE Integration
 
 Complete steps to include custom elements in the HTML language server
 then
 Add the HTML language server in the @ext:Vue.volar extention
-![Add the HTML language server in the @ext:Vue.volar extention](vue-include.png)
+![Add the HTML language server in the @ext:Vue.volar extention](./vue-include.png)
 Once setup hovering over spectric elements will provide documentation
-![alt text](vue-example.png)
+![alt text](./vue-example.png)
 
 # Python Jinja
 

package/src/stories/BitDisplay.stories.ts

@@ -44,6 +44,8 @@ const meta = {
     Int16-e:  ${pad(dataview.getInt16(0, true))}
     UInt16-E: ${pad(dataview.getUint16(0, false))} 0x${dataview.getUint16(0, false).toString(16)}
     Int16-e:  ${pad(dataview.getUint16(0, true))} 0x${dataview.getUint16(0, true).toString(16)}
+    F32-e:  ${pad(dataview.getFloat32(0, true))} 
+    F32-E:  ${pad(dataview.getFloat32(0, false))} 
   </pre>`: null}
 `},
 

package/src/stories/fixtures/data.ts

@@ -56,7 +56,7 @@ export const tabledata: TestData[] = [
   { name: "Matt", company: "Spectric Labs", "contact": "912-1230", location: { "country": "UK", state: "VA" }, years: 24 },
   { name: "Grant", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 100 },]
 export const tablecolumns: ColumnSettings<TestData>[] = [
-  { "title": "Company", key: "company" },
+  { "title": "Company", key: "company", width: 200 },
   { "title": "Name", key: "name", sortable: true },
   { "title": "Contact", key: "contact" },
   { "title": "Country", key: "location.country", filterable: true },

package/src/stories/pagination.stories.ts

@@ -5,6 +5,7 @@ import { html } from "lit";
 import '../components';
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
+import { ButtonSizes } from "../components";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
   title: "UI/Pagination",
@@ -29,7 +30,7 @@ const meta = {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+      options: Object.values(ButtonSizes),
     },
   },
   args: {

package/src/stories/table.stories.ts

@@ -8,7 +8,7 @@ import { useArgs } from "@storybook/client-api";
 import { FilterEvent, rowGetValue } from "../components/table/cell";
 import { tablecolumns, tabledata } from "./fixtures/data";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const data = JSON.parse(JSON.stringify(tabledata))
+const data = JSON.parse(JSON.stringify([...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata,]))
 const columns = tablecolumns
 const getData = TableElement.getDefaultDataSorterAndPaginatior<typeof tabledata[0]>(data)
 const meta = {
@@ -20,12 +20,14 @@ const meta = {
 
     return html`
       <spectric-table
-        style="max-height: 150px;"
+        style="height: 150px;"
         .pagination=${args.pagination}
         .columns=${args.columns}
         .data=${getData(args)}
         select=${ifDefined(args.select)}
         sort=${ifDefined(args.sort)}
+        rowHeight=${ifDefined(args.rowHeight)}
+        @selected=${(e) => console.log(e)}
         @filter=${(e: CustomEvent<FilterEvent<any>>) => {
         alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
       }}