@spectric/ui 0.0.12 → 0.0.13

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;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%)}
+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;top:calc(50% - 8px)}spectric-table-header .header-contents.sortable{cursor:pointer;padding-right:15px}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}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/package.json

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

package/src/components/table/cell.ts

@@ -43,37 +43,37 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    _emitFilter(filter: FilterEvent<T>) {
+        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
+            composed: true,
+            bubbles: true,
+            detail: filter
+        }))
+    }
     _handleFilterOut = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
             value = rowGetValue(this.row as Record<any, any>, this.column.key)
         }
-        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
-            composed: true,
-            bubbles: true,
-            detail: {
-                include: false,
-                row: this.row,
-                value,
-                column: this.column
-            }
-        }))
+        this._emitFilter({
+            include: false,
+            row: this.row,
+            value,
+            column: this.column
+        })
+
     }
     _handleFilterFor = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
             value = rowGetValue(this.row as Record<any, any>, this.column.key)
         }
-        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
-            composed: true,
-            bubbles: true,
-            detail: {
-                include: true,
-                row: this.row,
-                value,
-                column: this.column
-            }
-        }))
+        this._emitFilter({
+            include: true,
+            row: this.row,
+            value,
+            column: this.column
+        })
     }
     protected render(): unknown {
         let rendered

package/src/components/table/header.ts

@@ -30,11 +30,15 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
         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.descending
+        } else if (column.sortDirection === TableSortDirection.descending) {
             column.sortDirection = TableSortDirection.none
         }
-        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange", { detail: column }))
+        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange", {
+            composed: true,
+            bubbles: true,
+            detail: column
+        }))
     }
     protected render(): unknown {
         return html`
@@ -48,7 +52,7 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
                 classes.push("sortable")
             }
             let columnWidth = column.width ? `width:${column.width}px;` : ""
-            let sortDirection = column.sortDirection === TableSortDirection.ascending ? `🠉` : column.sortDirection == TableSortDirection.decending ? `🠋` : ``
+            let sortDirection = column.sortDirection === TableSortDirection.ascending ? `🠉` : column.sortDirection == TableSortDirection.descending ? `🠋` : ``
             let sortClass = column.sortDirection || TableSortDirection.none
             return html`
             <td @click=${() => this._handleSortChange(column)} style="${columnWidth}">

package/src/components/table/sorting.ts

@@ -19,12 +19,12 @@ export const createSortChain = <T>(sorts: ColumnSettings<T>[]) => {
             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) {
+                if (sortDirection === TableSortDirection.descending) {
                     sort = sort * -1
                 }
                 return sort
             } else if (typeof v1 === "string") {
-                return v1.localeCompare(v2) * (sortDirection === TableSortDirection.decending ? -1 : 1)
+                return v1.localeCompare(v2) * (sortDirection === TableSortDirection.descending ? -1 : 1)
             }
             once(() => { console.error(`Unable to sort type ${typeof v1}`) })
             return undefined

package/src/components/table/table.css

@@ -43,9 +43,11 @@ spectric-table-header .header-contents {
 spectric-table-header .header-contents .sort-direction {
     position: absolute;
     right: 0;
+    top: calc(50% - 8px)
 }
 spectric-table-header .header-contents.sortable {
     cursor: pointer;
+    padding-right:15px
 }
 spectric-table-header .header-contents.sortable:hover .sort-direction.none::before
  {

package/src/components/table/table.ts

@@ -28,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}`
@@ -132,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>>) => {
@@ -160,20 +161,28 @@ 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")) {
@@ -235,7 +244,9 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
 
 interface TableEvents {
     '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 {