@spectric/ui 0.0.22 → 0.0.23

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

@@ -2,6 +2,7 @@ import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { PaginationChangeProps, PaginationProps } from '../pagination';
 import { FilterEvent } from './cell';
+import { ButtonSizesTypes } from '../Button';
 export declare const TableElementTag = "spectric-table";
 export type { TableProps, TableEvents };
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null | undefined;
@@ -21,6 +22,11 @@ export declare enum TableSortDirection {
     none = "none"
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`;
+export type CellAction<T> = {
+    tooltip: DomRenderable;
+    icon: DomRenderable;
+    onClick: (row: T, column: ColumnSettings<T>) => void;
+};
 export type ColumnSettings<T> = {
     [TABLE_CREATED_SELECTION_COLUMN]?: boolean;
     width?: number;
@@ -34,6 +40,7 @@ export type ColumnSettings<T> = {
     sortDirection?: TableSortDirectionTypes;
     filterable?: boolean;
     disableCellOverflowTooltip?: boolean;
+    cellActions?: CellAction<T>[];
     title?: DomRenderable | ((table: SpectricTableElement<T>) => DomRenderable);
     /**
      * Key to used for getting data from an object for a cell
@@ -85,6 +92,8 @@ export declare class SpectricTableElement<T = any> extends LitElement implements
      * Needed for virtualization
      */
     fontSize: number;
+    protected cellActionButtonSize: ButtonSizesTypes;
+    getCellActionButtonSize(): "small" | "large" | "medium" | "xsmall" | "xxsmall" | "tiny";
     static getDefaultDataSorterAndPaginatior<T>(data: T[]): (props: TableDataOptions<T>) => T[];
     private _handlePaginationChange;
     private _handleSortChange;

package/dist/custom-elements.json

@@ -2074,7 +2074,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  * `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  * `fontSize` {`number`} - Needed for virtualization\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `sortOrder` {`string[]`} - \n\nProperties:\n\n  * `fontSize` {`number`} - Needed for virtualization\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_handleColumnResize` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_getRowHeight` - \n\n  * `_handleSelectAllChange` - \n\n  * `selectColumnConfig` {`ColumnSettings<T>`} - \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>[]`} - \n\n  * `sortOrder` {`string[]`} - ",
+      "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  * `fontSize` {`number`} - Needed for virtualization\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `sortOrder` {`string[]`} - \n\nProperties:\n\n  * `fontSize` {`number`} - Needed for virtualization\n\n  * `cellActionButtonSize` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - \n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_handleColumnResize` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_getRowHeight` - \n\n  * `_handleSelectAllChange` - \n\n  * `selectColumnConfig` {`ColumnSettings<T>`} - \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>[]`} - \n\n  * `sortOrder` {`string[]`} - ",
       "attributes": [
         {
           "name": "fontSize",
@@ -2257,7 +2257,7 @@
     },
     {
       "name": "spectric-storybook-example-content",
-      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dataSorter` - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `columns` {`ColumnSettings<TestData>[]`} - \n\n  * `pagination` {`PaginationProps`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
+      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dataSorter` - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `columns` - \n\n  * `pagination` {`PaginationProps`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
       "attributes": [
         {
           "name": "frameWidth",

package/dist/index.es.js

@@ -2182,8 +2182,7 @@ let z = class extends B {
         @click=${() => {
           this.checked = !this.checked, this.value = !!this.checked;
         }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"}>${this.checked ? "✓" : " "}</spectric-button>
-          
-          ${this.label}
+          ${this.label.length ? m`<span>${this.label}</span>` : null}
         </div>
         </label>
         `;
@@ -6213,13 +6212,15 @@ let Te = class extends B {
     return this.column.render ? e = this.column.render(this.row, this.index, this.table) : this.column.key && typeof this.row == "object" ? e = mt(this.row, this.column.key) : e = m`error`, e;
   }
   render() {
+    var a;
     let e = this.getRenderedValue(), t = ["cell-contents"];
-    this.column.filterable && t.push("filterable");
-    let i = oc(
-      this.column.filterable ? m`<div class="table-cell-actions">
+    (this.column.filterable || (a = this.column.cellActions) != null && a.length) && t.push("hasActions");
+    const i = this.table.getCellActionButtonSize();
+    let s = oc(
+      this.column.filterable ? m`
             <spectric-button
               @click=${this._handleFilterOut}
-              size="tiny"
+              .size=${i}
               variant="text"
               icon
               tooltip="Filter Out Value"
@@ -6227,14 +6228,21 @@ let Te = class extends B {
             >
             <spectric-button
               @click=${this._handleFilterFor}
-              size="tiny"
+              .size=${i}
               variant="text"
               icon
               tooltip="Filter For Value"
               >+</spectric-button
             >
-          </div>` : null
-    );
+          ` : null
+    ), r = (this.column.cellActions || []).map((n) => m`<spectric-button
+        @click=${() => n.onClick(this.row, this.column)}
+        .size=${i}
+        variant="text"
+        icon
+        .tooltip=${n.tooltip}
+        >${n.icon}</spectric-button
+      >`);
     return this.styleRules = {
       width: this.column.width ? this.column.width + "px" : null,
       whiteSpace: this.column.whiteSpace || null
@@ -6243,7 +6251,9 @@ let Te = class extends B {
         style=${ri(this.styleRules)}
         @mouseenter=${this._displayOverflowTooltip}
       >
-        ${i}
+        <div class="table-cell-actions ${i}">
+          ${r} ${s}
+        </div>
         <div class=${t.join(" ")}>
           ${this.overflow ? m`<spectric-tooltip .text=${this.overflow}></spectric-tooltip>` : null}<span>${e}</span>
         </div>
@@ -6500,7 +6510,7 @@ const Bt = 4, Ur = Symbol(
 );
 let ie = class extends B {
   constructor() {
-    super(...arguments), this.data = [], this.columns = [], this.select = "none", this.sort = "single", this.sortOrder = [], this.rowHeight = 25, this.fontSize = 16, this._handlePaginationChange = (e) => {
+    super(...arguments), this.data = [], this.columns = [], this.select = "none", this.sort = "single", this.sortOrder = [], this.rowHeight = 25, this.fontSize = 16, this.cellActionButtonSize = "xxsmall", this._handlePaginationChange = (e) => {
       if (this.pagination) {
         let t = { ...this.pagination, ...e.detail }, { totalItems: i, page: s, pageSize: r } = t;
         i && s && r && (s - 1) * r > i && (t.page = 1), this.pagination = t;
@@ -6543,6 +6553,8 @@ let ie = class extends B {
       e.stopPropagation(), e.target.checked ? this.selectAll() : this.deselectAll();
     }, this.selectColumnConfig = {
       [Ur]: !0,
+      allowResize: !1,
+      filterable: !1,
       width: 39,
       title: (e) => e.select === "multi" ? m`<spectric-input
             variant="checkbox"
@@ -6574,6 +6586,9 @@ let ie = class extends B {
       }
     };
   }
+  getCellActionButtonSize() {
+    return this.cellActionButtonSize;
+  }
   static getDefaultDataSorterAndPaginatior(e) {
     return (t) => {
       let i = (t.sortOrder || []).map(