@spectric/ui 0.0.12 → 0.0.13

package/README.MD

@@ -1,6 +1,6 @@
 # Component Examples and playground
 
-https://pages.spectric.com/web/spectric-ui/?path=/docs/spectric-ui-components-ui-page--docs
+https://pages.spectric.com/web/spectric-ui/
 
 # Developing
 

package/dist/components/table/cell.d.ts

@@ -26,6 +26,7 @@ export declare class TableCellElement<T> extends LitElement implements CellProps
     constructor();
     protected updated(_changedProperties: PropertyValues): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _emitFilter(filter: FilterEvent<T>): void;
     _handleFilterOut: () => void;
     _handleFilterFor: () => void;
     protected render(): unknown;

package/dist/components/table/table.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import { PaginationProps } from '../pagination';
+import { PaginationChangeProps, PaginationProps } from '../pagination';
 import { FilterEvent } from './cell';
 export declare const TableElementTag = "spectric-table";
 export type { TableProps, TableEvents };
@@ -17,7 +17,7 @@ export declare enum TableSortOption {
 export type TableSortOptionTypes = `${TableSortOption}`;
 export declare enum TableSortDirection {
     ascending = "ascending",
-    decending = "decending",
+    descending = "descending",
     none = "none"
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`;
@@ -78,13 +78,17 @@ export declare class TableElement<T> extends LitElement implements TableProps<T>
     private __DO_NOT_USE_filter;
     private selected;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    deselectAll(): void;
+    selectAll(): void;
     _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
     protected update(changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 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 {
     interface HTMLElementTagNameMap {

package/dist/custom-elements.json

@@ -2025,7 +2025,7 @@
     },
     {
       "name": "spectric-table",
-      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `data` {`T[]`} - \n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
+      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `paginationChange` {`CustomEvent<PaginationChangeProps>`} - \n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `data` {`T[]`} - \n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
       "attributes": [
         {
           "name": "select",
@@ -2058,6 +2058,10 @@
           "name": "rowHeight",
           "description": "`rowHeight` {`number`} - Needed for virtualization\n\nProperty: rowHeight\n\nDefault: 25"
         },
+        {
+          "name": "onpaginationChange",
+          "description": "`paginationChange` {`CustomEvent<PaginationChangeProps>`} - "
+        },
         {
           "name": "onchange",
           "description": "`change` {`CustomEvent<TableDataOptions<T>>`} - "
@@ -2066,6 +2070,10 @@
           "name": "onfilter",
           "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
         },
+        {
+          "name": "onsortChange",
+          "description": "`sortChange` {`CustomEvent<ColumnSettings<T>>`} - "
+        },
         {
           "name": "onselected",
           "description": "`selected` {`CustomEvent<T[]>`} - "

package/dist/index.es.js

@@ -4340,7 +4340,11 @@ const Nc = "spectric-table-header";
 let br = class extends T {
   constructor() {
     super(...arguments), this.columns = [], this._handleSortChange = (i) => {
-      i = JSON.parse(JSON.stringify(i)), i.sortable && (i.sortDirection === F.none || i.sortDirection === void 0 ? i.sortDirection = F.ascending : i.sortDirection === F.ascending ? i.sortDirection = F.decending : i.sortDirection === F.decending && (i.sortDirection = F.none), this.dispatchEvent(new CustomEvent("sortChange", { detail: i })));
+      i = JSON.parse(JSON.stringify(i)), i.sortable && (i.sortDirection === F.none || i.sortDirection === void 0 ? i.sortDirection = F.ascending : i.sortDirection === F.ascending ? i.sortDirection = F.descending : i.sortDirection === F.descending && (i.sortDirection = F.none), this.dispatchEvent(new CustomEvent("sortChange", {
+        composed: !0,
+        bubbles: !0,
+        detail: i
+      })));
     };
   }
   createRenderRoot() {
@@ -4352,7 +4356,7 @@ let br = class extends T {
                 ${this.columns.map((i) => {
       let r = ["header-contents"];
       i.filterable, i.sortable && r.push("sortable");
-      let o = i.width ? `width:${i.width}px;` : "", s = i.sortDirection === F.ascending ? "🠉" : i.sortDirection == F.decending ? "🠋" : "", n = i.sortDirection || F.none;
+      let o = i.width ? `width:${i.width}px;` : "", s = i.sortDirection === F.ascending ? "🠉" : i.sortDirection == F.descending ? "🠋" : "", n = i.sortDirection || F.none;
       return x`
             <td @click=${() => this._handleSortChange(i)} style="${o}">
                 <div class=${r.join(" ")} >${i.title || i.key} 
@@ -4380,28 +4384,20 @@ let Me = class extends T {
   constructor() {
     super(), this._handleFilterOut = () => {
       let i;
-      this.column.key && typeof this.row == "object" && (i = ze(this.row, this.column.key)), this.dispatchEvent(new CustomEvent("filter", {
-        composed: !0,
-        bubbles: !0,
-        detail: {
-          include: !1,
-          row: this.row,
-          value: i,
-          column: this.column
-        }
-      }));
+      this.column.key && typeof this.row == "object" && (i = ze(this.row, this.column.key)), this._emitFilter({
+        include: !1,
+        row: this.row,
+        value: i,
+        column: this.column
+      });
     }, this._handleFilterFor = () => {
       let i;
-      this.column.key && typeof this.row == "object" && (i = ze(this.row, this.column.key)), this.dispatchEvent(new CustomEvent("filter", {
-        composed: !0,
-        bubbles: !0,
-        detail: {
-          include: !0,
-          row: this.row,
-          value: i,
-          column: this.column
-        }
-      }));
+      this.column.key && typeof this.row == "object" && (i = ze(this.row, this.column.key)), this._emitFilter({
+        include: !0,
+        row: this.row,
+        value: i,
+        column: this.column
+      });
     }, this.styleRules = document.createElement("span").style;
   }
   updated(i) {
@@ -4410,6 +4406,13 @@ let Me = class extends T {
   createRenderRoot() {
     return this;
   }
+  _emitFilter(i) {
+    this.dispatchEvent(new CustomEvent("filter", {
+      composed: !0,
+      bubbles: !0,
+      detail: i
+    }));
+  }
   render() {
     let i;
     this.column.render ? i = this.column.render(this.row, this.index, this.table) : this.column.key && typeof this.row == "object" ? i = ze(this.row, this.column.key) : i = x`error`;
@@ -4616,9 +4619,9 @@ const Qc = (i) => i.map(({ key: r, sortDirection: o, compareFn: s }) => (n, e) =
     return s(n, e);
   if (typeof p == "number" || typeof p == "bigint" || typeof p == "boolean") {
     let g = p - h;
-    return o === F.decending && (g = g * -1), g;
+    return o === F.descending && (g = g * -1), g;
   } else if (typeof p == "string")
-    return p.localeCompare(h) * (o === F.decending ? -1 : 1);
+    return p.localeCompare(h) * (o === F.descending ? -1 : 1);
 });
 var qc = Object.defineProperty, Wc = Object.getOwnPropertyDescriptor, ge = (i, r, o, s) => {
   for (var n = s > 1 ? void 0 : s ? Wc(r, o) : r, e = i.length - 1, p; e >= 0; e--)
@@ -4626,7 +4629,7 @@ var qc = Object.defineProperty, Wc = Object.getOwnPropertyDescriptor, ge = (i, r
   return s && n && qc(r, o, n), n;
 };
 const Yc = "spectric-table";
-var Kc = /* @__PURE__ */ ((i) => (i.multi = "multi", i.single = "single", i.none = "none", i))(Kc || {}), Zc = /* @__PURE__ */ ((i) => (i.multi = "multi", i.single = "single", i))(Zc || {}), F = /* @__PURE__ */ ((i) => (i.ascending = "ascending", i.decending = "decending", i.none = "none", i))(F || {});
+var Kc = /* @__PURE__ */ ((i) => (i.multi = "multi", i.single = "single", i.none = "none", i))(Kc || {}), Zc = /* @__PURE__ */ ((i) => (i.multi = "multi", i.single = "single", i))(Zc || {}), F = /* @__PURE__ */ ((i) => (i.ascending = "ascending", i.descending = "descending", i.none = "none", i))(F || {});
 let ae = class extends T {
   constructor() {
     super(...arguments), this.data = [], this.columns = [], this.select = "none", this.sort = "single", this.rowHeight = 25, this._handlePaginationChange = (i) => {
@@ -4634,7 +4637,7 @@ let ae = class extends T {
         let r = { ...this.pagination, ...i.detail }, { totalItems: o, page: s, pageSize: n } = r;
         o && s && n && (s - 1) * n > o && (r.page = 1), this.pagination = r;
       }
-      this._emitChange();
+      this.dispatchEvent(new CustomEvent("paginationChange", { detail: i.detail })), this._emitChange();
     }, this._handleSortChange = (i) => {
       let r = i.detail, o = this.columns.find((s) => s.key == r.key);
       if (!o) {
@@ -4648,9 +4651,9 @@ let ae = class extends T {
       let { pagination: i, columns: r } = this;
       this.dispatchEvent(new CustomEvent("change", { detail: { pagination: i, columns: r } }));
     }, this.__DO_NOT_USE_filter = () => {
-      this.dispatchEvent(new CustomEvent("filter"));
+      this.dispatchEvent(new CustomEvent("filter")), this.dispatchEvent(new CustomEvent("sortChange"));
     }, this.selected = [], this._handleSelectAllChange = (i) => {
-      i.stopPropagation(), i.target.checked ? this.selected = [...this.data] : this.selected = [], this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }));
+      i.stopPropagation(), i.target.checked ? this.selectAll() : this.deselectAll();
     };
   }
   static getDefaultDataSorterAndPaginatior(i) {
@@ -4679,6 +4682,12 @@ let ae = class extends T {
   createRenderRoot() {
     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 }));
+  }
   update(i) {
     i.has("select") && this.select === "single" && this.selected.length > 1 && (this.selected = [this.selected[0]], this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))), super.update(i);
   }