@spectric/ui 0.0.10 → 0.0.12

package/dist/style.css

@@ -1 +1 @@
-spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column}spectric-table tr{text-align:center}spectric-table-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700}spectric-table div[role=table]{display:table}spectric-table-body{display:table-row-group}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}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;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}.spectric-tooltip-portal{position:fixed;z-index:9999;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{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);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, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}
+spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle}spectric-table tr{line-height:var(--rowHeight)}spectric-table td{height:var(--rowHeight)}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:0}spectric-table-header .header-contents.sortable{cursor:pointer}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}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;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}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}.spectric-tooltip-portal{position:fixed;z-index:9999;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{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);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, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}

package/dist/utils/once.d.ts

@@ -0,0 +1 @@
+export declare function once(func: Function): (...args: any[]) => any;

package/dist/utils/spread.d.ts

@@ -3,7 +3,7 @@ import { AsyncDirective } from 'lit/async-directive.js';
 /**
  * Usage:
  *    import { html, render } from 'lit';
- *    import { spreadProps } from '@open-wc/lit-helpers';
+ *    import { spreadProps } from '@spectric/ui';
  *
  *    render(
  *      html`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/classes/DisposibleElement.ts

@@ -3,16 +3,17 @@ import { LitElement } from "lit-element/lit-element.js";
 export interface IDisposable {
     dispose(): void;
 }
+type DisposableTarget = HTMLElement | Promise<HTMLElement> | (() => HTMLElement)
+let listeners = 0;
 class DomListener implements IDisposable {
 
     private _handler?: (e: any) => void;
     private _node?: EventTarget;
-    private __target?: EventTarget | Promise<EventTarget>
     private readonly _type: string;
     private readonly _options: boolean | AddEventListenerOptions;
 
-    constructor(node: EventTarget | Promise<EventTarget>, type: string, handler: (e: any) => void, options?: boolean | AddEventListenerOptions) {
-        this.__target = node
+    constructor(node: DisposableTarget, type: string, handler: (e: any) => void, options?: boolean | AddEventListenerOptions) {
+
         this._handler = handler;
         this._type = type;
         this._handler = handler;
@@ -26,10 +27,15 @@ class DomListener implements IDisposable {
                 this._node = targetNode
                 this._node.addEventListener(this._type, this._handler, this._options);
             })
+        } else if (typeof node === "function") {
+            this._node = node()
+            this._node.addEventListener(this._type, this._handler, this._options);
         } else {
             this._node = node
             this._node.addEventListener(this._type, this._handler, this._options);
         }
+        listeners += 1
+        //console.log(listeners)
     }
 
     dispose(): void {
@@ -38,19 +44,19 @@ class DomListener implements IDisposable {
             return;
         }
         if (this._node) {
-            console.log(`removing event ${this._type} from `, this._node, this.__target instanceof Promise)
+            listeners -= 1
             this._node.removeEventListener(this._type, this._handler, this._options);
         }
         // Prevent leakers from holding on to the dom or handler func
-        this.__target = undefined;
         this._node = undefined;
         this._handler = undefined;
+        //console.log(listeners)
     }
 }
 export class DisposableElement extends LitElement {
     private readonly _disposables = new Set<IDisposable>();
     private _isDisposed = false;
-    private _disposableListeners: { target: HTMLElement | Promise<HTMLElement>, event: string, handler: any }[] = []
+    private _disposableListeners: { target: DisposableTarget, event: string, handler: any }[] = []
     private _connected: boolean = false;
     /**
      * Creates listeners on a target that will automatically get cleaned up when the element is removed from the DOM. This prevents memory leaks.
@@ -58,9 +64,9 @@ export class DisposableElement extends LitElement {
      * @param event The event name
      * @param handler The event handler
      */
-    public addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void
-    public addDisposableListener<K extends keyof SpectricGlobalEvents>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: SpectricGlobalEvents[K]): void
-    public addDisposableListener(target: HTMLElement | Promise<HTMLElement>, event: string, handler: any): void {
+    public addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: DisposableTarget, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void
+    public addDisposableListener<K extends keyof SpectricGlobalEvents>(target: DisposableTarget, event: K, handler: SpectricGlobalEvents[K]): void
+    public addDisposableListener(target: DisposableTarget, event: string, handler: any): void {
         let exists = this._disposableListeners.find(d => d.event === event && d.target === target && d.handler === handler)
         if (exists) {
             console.warn("Event handler already exists best practice is to add the this in the constructor")

package/src/components/Bitdisplay.ts

@@ -12,13 +12,13 @@ export interface BitDisplayProps {
     /** Array buffer to display */
     arrayBuffer: ArrayBuffer;
     /** Bits per line */
-    frameWidth: number;
+    frameWidth?: number;
     /** How many pixels per bit */
-    scale: number;
+    scale?: number;
     /** Width of the display canvas */
-    width: number;
+    width?: number;
     /** Height of the display canvas */
-    height: number;
+    height?: number;
 
 }
 type Position = {
@@ -340,7 +340,7 @@ export class BitDisplayCanvas extends DisposableElement implements BitDisplayPro
             id="viewport"
             ${ref(this.refs.viewport)}
             @scroll=${this.handleScroll}
-            style=${`width:${width}px;height:${height}px;overflow:auto;position:relative`}
+            style=${`width:${width + SCROLLBAR_SIZE.width}px;height:${height + SCROLLBAR_SIZE.height}px;overflow:auto;position:relative`}
           >
             <div
               id="fakescrolldiv"
@@ -350,8 +350,8 @@ export class BitDisplayCanvas extends DisposableElement implements BitDisplayPro
             </div>
             <canvas
             ${ref(this.refs.canvas)}
-            width=${width - SCROLLBAR_SIZE.width}
-            height=${height - SCROLLBAR_SIZE.height}
+            width=${width}
+            height=${height}
           ></canvas>
 `
 

package/src/components/Button.ts

@@ -29,7 +29,7 @@ export interface ButtonProps {
   /** What background color to use */
   backgroundColor?: string;
   /** How large should the button be? */
-  size: ButtonSizesTypes;
+  size?: ButtonSizesTypes;
   label?: string,
   /* should the button be disabled*/
   disabled?: boolean;

package/src/components/Header.ts

@@ -10,7 +10,7 @@ import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './type
  * Properties defining 
  */
 export interface HeaderProps {
-  username: string;
+  username?: string;
   /**
    * Shows the login Button
    */

package/src/components/input.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, TemplateResult } from 'lit';
+import { html, LitElement, PropertyValues, TemplateResult } from 'lit';
 import "./input.css"
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -23,32 +23,32 @@ export enum InputVariants {
 type InputVariantsTypes = `${InputVariants}`
 export interface InputProps {
   /** Input type */
-  variant: InputVariantsTypes;
+  variant?: InputVariantsTypes;
   /**Label to display above the input */
-  label: string,
+  label?: string,
   /**placeholder text to display*/
-  placeholder: string,
+  placeholder?: string,
   /* should be disabled?*/
-  disabled: boolean,
+  disabled?: boolean,
   /* should be readonly*/
-  readonly: boolean,
+  readonly?: boolean,
   /**
  * The helper text.
  */
 
-  helperText: string,
+  helperText?: string,
   /**
    * Specify if the currently value is invalid.
    */
-  invalid: boolean,
+  invalid?: boolean,
   /**
    * Message which is displayed if the value is invalid.
    */
-  invalidText: string | TemplateResult<1>,
+  invalidText?: string | TemplateResult<1>,
   /**
    * Max character count allowed for input. This is needed in order for enableCounter to display
    */
-  maxCount: number,
+  maxCount?: number,
   /**
 * Boolean property to set the required status
 */
@@ -71,7 +71,7 @@ export interface InputProps {
   /**
    * The sets the autocomplete for the input.
    */
-  autocomplete: HTMLInputElement['autocomplete'];
+  autocomplete?: HTMLInputElement['autocomplete'];
 }
 @customElement('spectric-input')
 export class SpectricInput extends LitElement implements InputProps {
@@ -148,7 +148,7 @@ export class SpectricInput extends LitElement implements InputProps {
   @property()
   pattern = '';
   @property({ type: Number, reflect: true })
-  maxCount: InputProps['maxCount'] = 0;
+  maxCount: number = 0;
   /**
 * The internal value.
 */
@@ -158,7 +158,7 @@ export class SpectricInput extends LitElement implements InputProps {
    * The sets the autocomplete for the input.
    */
   @property({ reflect: true })
-  autocomplete: HTMLInputElement['autocomplete'] = "";
+  autocomplete: HTMLInputElement['autocomplete'] = "off";
   get selectionStart() {
     if (!this._input) {
       return null
@@ -227,6 +227,11 @@ export class SpectricInput extends LitElement implements InputProps {
     this._showPassword = !this._showPassword;
     this.requestUpdate()
   }
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has("checked")) {
+      this.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+  }
   protected render(): unknown {
     switch (this.variant) {
       case InputVariants.Text:
@@ -303,8 +308,6 @@ export class SpectricInput extends LitElement implements InputProps {
         <spectric-button @click=${() => {
             this.checked = !this.checked;
             this.value = Boolean(this.checked);
-            console.log(this.checked, this.value)
-            this.dispatchEvent(new Event("change", { bubbles: true }))
           }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"}>${this.checked ? '✓' : "\u00A0"}</spectric-button>
           ${this.invalid || this.helperText ? html`<spectric-tooltip text=${this.invalid || this.helperText}></spectric-tooltip>` : null}
           ${this.label}

package/src/components/pagination/pagination.ts

@@ -8,12 +8,12 @@ import { ButtonSizesTypes } from '../Button';
 export type { PaginationProps, PaginationChangeProps, PaginationEvents }
 
 interface PaginationChangeProps {
-    page: number;
-    pageSize: number;
+    page?: number;
+    pageSize?: number;
 }
 
 interface PaginationProps extends PaginationChangeProps {
-    size: ButtonSizesTypes
+    size?: ButtonSizesTypes
     totalItems?: number
     pageSizeOptions?: number[]
 }
@@ -93,8 +93,8 @@ export class PaginationElement extends LitElement implements PaginationProps {
                     ${pageText}
                     </div>
                     <div>
-                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown} icon><</spectric-button>
-                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp} icon>></spectric-button>
+                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown} icon>🠈</spectric-button>
+                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp} icon>🠊</spectric-button>
                     </div>
                 </div>
                 `: null}
@@ -115,7 +115,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link PaginationElement}
              */
             [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
         }
@@ -124,7 +124,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link PaginationElement}
                  */
                 [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>
             }

package/src/components/query_bar/QueryBar.ts

@@ -133,32 +133,34 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   protected _input!: SpectricInput;
   _parseQuery = (e: InputEvent | undefined = undefined) => {
     let ast;
-    if (e && e?.currentTarget && (e.currentTarget as HTMLInputElement).value) {
+    if (e && e?.currentTarget) {
       this.value = (e.currentTarget as HTMLInputElement).value
     }
-    if (this.value == "") {
-      return
+    if (this.value) {
+      try {
+        if (e && e.data == "(") {
+          //Auto close parentheses or parsing and suggestions fail
+          this.value = this.value + " )"
+          this._input.setSelectionRange(this.value.length - 2, this.value.length - 2)
+        }
+        let value = this.value;
+        if (this._input.selectionStart !== null) {
+          value = value.substring(0, this._input.selectionStart) + "@kuery-cursor@" + value.substring(this._input.selectionStart)
+        }
+        //FIXME: make auto complete work well.
+        let suggestions = kuery.parse(value, { parseCursor: true, cursorSymbol: "@kuery-cursor@", allowLeadingWildcards: false }) as unknown as Suggestion;
+        this.autoComplete(suggestions)
+      } catch (error: any) {
+        // this.completions = []
+        // this._input.invalid = true;
+        // let [expect, _, arrow] = e.message.split("\n")
+        // this._input.invalidText = html`  ${arrow} ${expect}`;
+        return
+      }
     }
     try {
-      if (e && e.data == "(") {
-        //Auto close parentheses or parsing and suggestions fail
-        this.value = this.value + " )"
-        this._input.setSelectionRange(this.value.length - 2, this.value.length - 2)
-      }
-      let value = this.value;
-      if (this._input.selectionStart !== null) {
-        value = value.substring(0, this._input.selectionStart) + "@kuery-cursor@" + value.substring(this._input.selectionStart)
-      }
-      //FIXME: make auto complete work well.
-      let suggestions = kuery.parse(value, { parseCursor: true, cursorSymbol: "@kuery-cursor@", allowLeadingWildcards: false }) as unknown as Suggestion;
-      this.autoComplete(suggestions)
-
       ast = kuery.parse(this.value, { allowLeadingWildcards: false });
-    } catch (e: any) {
-      // this.completions = []
-      // this._input.invalid = true;
-      // let [expect, _, arrow] = e.message.split("\n")
-      // this._input.invalidText = html`  ${arrow} ${expect}`;
+    } catch (error: any) {
       return
     }
     let output
@@ -288,6 +290,8 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     } else {
       this.value = prefix + this.value.substring(completion.end)
     }
+    //Important if the underlying inputs value hasn't been set the setSelectionRange will fail to set a range greater than the inputs current value
+    this._input.value = this.value
     this._input.setSelectionRange(insertIndex, insertIndex)
     if (completion.onSelect) {
       let value = await completion.onSelect()
@@ -299,6 +303,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     this.completionIndex = 0;
     this.completions = []
     this._parseQuery()
+    this._input.focus()
   }
   _handleArrows = (e: KeyboardEvent) => {
     if (e.key === "Escape") {

package/src/components/splitview/splitview.ts

@@ -12,15 +12,15 @@ export enum Orientations {
 }
 export interface SplitViewProps {
     /** Controls the orientation of the splitter handle */
-    orientation: `${Orientations}`;
+    orientation?: `${Orientations}`;
     /** the percentage to split the view default: 50*/
     percentage?: number
     /** Should the splitter handle be invisible? */
     invisible?: boolean
     /** Clamps the minimum split percentage default: 10 */
-    min: number
+    min?: number
     /** Clamps the maximum split percentage default: 90 */
-    max: number
+    max?: number
     /** save and load split state to localstorage splitter must have an id attribute default: true */
     useSavedState?: boolean
 }
@@ -40,8 +40,8 @@ export class SplitView extends DisposableElement implements SplitViewProps {
     @property({ type: Boolean }) invisible: SplitViewProps['invisible'] = false;
     static styles = style
 
-    @property({ type: Number, reflect: true }) min: SplitViewProps['min'] = 10;
-    @property({ type: Number, reflect: true }) max: SplitViewProps['max'] = 90;
+    @property({ type: Number, reflect: true }) min: number = 10;
+    @property({ type: Number, reflect: true }) max: number = 90;
     @property({ type: Boolean, reflect: true }) useSavedState: SplitViewProps['useSavedState'] = true;
 
     @state()

package/src/components/table/body.ts

@@ -1,9 +1,10 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 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 { repeat } from 'lit/directives/repeat.js';
 
 interface BodyProps<T> {
     columns: ColumnSettings<T>[]
@@ -24,14 +25,21 @@ export class TableBodyElement<T> extends LitElement implements BodyProps<T> {
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    protected firstUpdated(_changedProperties: PropertyValues): void {
+        if (this.data.length > 100) {
+            console.warn("Table is rendering excessive amounts of data to the DOM you should set rowHeight and use a virtualized scroll or use pagination")
+        }
+    }
     protected render(): unknown {
         return html`
         <body>
-            ${this.data.map((row: any) => {
-            return html`<tr>${this.columns.map(col => {
-                return html`<spectric-table-cell .column=${col} .row=${row} .columns=${this.columns}></spectric-table-cell>`
-            })}</tr>`
+            ${repeat(this.data, (row, index) => html`
+            <tr class="${index % 2 === 0 ? "odd" : ""}">
+                ${repeat(this.columns, (col) => {
+            return html`<spectric-table-cell .column=${col} .index=${index} .row=${row} .columns=${this.columns}></spectric-table-cell>`
         })}
+            </tr>`)}
+
         </body>
         `
 

package/src/components/table/cell.ts

@@ -23,6 +23,9 @@ export type FilterEvent<T> = {
 export class TableCellElement<T> extends LitElement implements CellProps<T> {
     @property({ type: Object, attribute: false })
     row!: T;
+
+    @property({ type: Number, attribute: false })
+    index!: number;
     @property({ type: Object, attribute: false })
     column!: ColumnSettings<T>;
     columns!: ColumnSettings<T>[];
@@ -43,7 +46,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     _handleFilterOut = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
-            value = getValue(this.row as Record<any, any>, this.column.key)
+            value = rowGetValue(this.row as Record<any, any>, this.column.key)
         }
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
             composed: true,
@@ -59,7 +62,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     _handleFilterFor = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
-            value = getValue(this.row as Record<any, any>, this.column.key)
+            value = rowGetValue(this.row as Record<any, any>, this.column.key)
         }
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
             composed: true,
@@ -75,10 +78,9 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     protected render(): unknown {
         let rendered
         if (this.column.render) {
-            rendered = this.column.render(this.row, this.table)
+            rendered = this.column.render(this.row, this.index, this.table)
         } else if (this.column.key && typeof this.row === 'object') {
-
-            rendered = getValue(this.row as any, this.column.key)
+            rendered = rowGetValue(this.row as any, this.column.key)
         } else {
             rendered = html`error`
         }
@@ -134,11 +136,11 @@ declare global {
 }
 
 
-const getValue = (context: Record<string, any>, key: string) => {
+export const rowGetValue = (context: Record<string, any>, key: string) => {
     let path = key.split(".")
     let value = context[path[0]]
     if (path.length > 1) {
-        value = getValue(value, path.slice(1).join("."))
+        value = rowGetValue(value, path.slice(1).join("."))
     }
     return value
 }

package/src/components/table/header.ts

@@ -4,7 +4,7 @@ import { customElement, property, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import "./table.css"
 export const TableHeaderElementTag = "spectric-table-header"
-import { ColumnSettings } from './table';
+import { ColumnSettings, TableSortDirection } from './table';
 
 
 interface HeaderProps<T> {
@@ -22,8 +22,21 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    _handleSortChange = (column: ColumnSettings<T>) => {
+        column = JSON.parse(JSON.stringify(column))// Clone the column to not mutate the original object
+        if (!column.sortable) {
+            return
+        }
+        if (column.sortDirection === TableSortDirection.none || column.sortDirection === undefined) {
+            column.sortDirection = TableSortDirection.ascending
+        } else if (column.sortDirection === TableSortDirection.ascending) {
+            column.sortDirection = TableSortDirection.decending
+        } else if (column.sortDirection === TableSortDirection.decending) {
+            column.sortDirection = TableSortDirection.none
+        }
+        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange", { detail: column }))
+    }
     protected render(): unknown {
-
         return html`
         <tr>
                 ${this.columns.map(column => {
@@ -31,7 +44,18 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
             if (column.filterable) {
                 //classes.push("filterable")
             }
-            return html`<td><div class=${classes.join(" ")}>${column.title || column.key}</div></td>`
+            if (column.sortable) {
+                classes.push("sortable")
+            }
+            let columnWidth = column.width ? `width:${column.width}px;` : ""
+            let sortDirection = column.sortDirection === TableSortDirection.ascending ? `🠉` : column.sortDirection == TableSortDirection.decending ? `🠋` : ``
+            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>
             `
@@ -39,7 +63,7 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
 }
 
 interface TableHeaderEvents {
-    'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
 }
 
 declare global {

package/src/components/table/sorting.ts

@@ -0,0 +1,34 @@
+import { once } from "../../utils/once";
+import { rowGetValue } from "./cell";
+import { ColumnSettings, TableSortDirection } from "./table";
+
+/**
+ * Creates a chain of sort functions so you can perform multi column sorting.
+ */
+export const createSortChain = <T>(sorts: ColumnSettings<T>[]) => {
+    return sorts.map(({ key, sortDirection, compareFn }) => {
+        return (a: T, b: T) => {
+            if (!key) {
+                return undefined
+            }
+            let v1 = rowGetValue(a as Record<string, any>, key)
+            let v2 = rowGetValue(b as Record<string, any>, key)
+            if (compareFn) {
+                return compareFn(a, b)
+            }
+            if (typeof v1 === "number" || typeof v1 === "bigint" || typeof v1 === "boolean") {
+                //@ts-ignore
+                let sort: number = v1 - v2 as unknown as number
+                if (sortDirection === TableSortDirection.decending) {
+                    sort = sort * -1
+                }
+                return sort
+            } else if (typeof v1 === "string") {
+                return v1.localeCompare(v2) * (sortDirection === TableSortDirection.decending ? -1 : 1)
+            }
+            once(() => { console.error(`Unable to sort type ${typeof v1}`) })
+            return undefined
+
+        }
+    })
+}