@spectric/ui 0.0.11 → 0.0.12

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}`)
       }}