@spectric/ui 0.0.20 → 0.0.22

package/src/components/table/header.ts

@@ -2,17 +2,22 @@ import { html } from "lit";
 import "../pagination";
 import { customElement, property, state } from "lit/decorators.js";
 import {
-    HTMLElementTagWithEvents,
-    ReactElementWithPropsAndEvents,
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
 } from "../types";
 import "./table.css";
 import "./header.css";
 export const TableHeaderElementTag = "spectric-table-header";
-import { ColumnSettings, TableSortDirection } from "./table";
+import {
+  ColumnSettings,
+  SpectricTableElement,
+  TableSortDirection,
+} from "./table";
 import { DisposableElement } from "../../classes";
+import { ARROW_DOWN, ARROW_UP } from "../symbols";
 
 interface HeaderProps<T> {
-    columns: ColumnSettings<T>[];
+  columns: ColumnSettings<T>[];
 }
 
 /**
@@ -20,169 +25,175 @@ interface HeaderProps<T> {
  */
 @customElement(TableHeaderElementTag)
 export class TableHeaderElement<T>
-    extends DisposableElement
-    implements HeaderProps<T> {
-    @property({ type: Array, attribute: false })
-    columns: ColumnSettings<T>[] = [];
-    @state()
-    private _resizeStart?: { event: MouseEvent; column: ColumnSettings<T> };
-    constructor() {
-        super();
-        this.addDisposableListener(
-            () => document.body,
-            "mouseup",
-            this._handleResizeEnd
-        );
+  extends DisposableElement
+  implements HeaderProps<T>
+{
+  @property({ type: Array, attribute: false })
+  columns: ColumnSettings<T>[] = [];
+  @state()
+  private _resizeStart?: { event: MouseEvent; column: ColumnSettings<T> };
+  @property({ type: Object, attribute: false })
+  table!: SpectricTableElement<T>;
+  constructor() {
+    super();
+    this.addDisposableListener(
+      () => document.body,
+      "mouseup",
+      this._handleResizeEnd
+    );
+  }
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  _handleSortChange = (column: ColumnSettings<T>) => {
+    if (this._resizeStart) {
+      return;
     }
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this;
+    column = JSON.parse(JSON.stringify(column)); // Clone the column to not mutate the original object
+    if (!column.sortable) {
+      return;
     }
-    _handleSortChange = (column: ColumnSettings<T>) => {
-        if (this._resizeStart) {
-            return;
-        }
-        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.descending;
-        } else if (column.sortDirection === TableSortDirection.descending) {
-            column.sortDirection = TableSortDirection.none;
-        }
-        this.dispatchEvent(
-            new CustomEvent<ColumnSettings<T>>("sortChange", {
-                composed: true,
-                bubbles: true,
-                detail: column,
-            })
-        );
-    };
-    _handleResizeStart = (event: MouseEvent, column: ColumnSettings<T>) => {
-        this._resizeStart = { event, column };
-    };
-    _handleResizeEnd = (e: MouseEvent) => {
-        if (!this._resizeStart) {
-            return;
-        }
-        let delta = e.pageX - this._resizeStart?.event.pageX;
-        if (this._resizeStart.column.width) {
-            this._resizeStart.column.width = this._resizeStart.column.width + delta;
-        } else {
-            let cell = (this._resizeStart.event.target as HTMLDivElement).closest(
-                "td"
-            ) as HTMLTableCellElement;
-            this._resizeStart.column.width =
-                cell.getBoundingClientRect().width + delta;
+    if (
+      column.sortDirection === TableSortDirection.none ||
+      column.sortDirection === undefined
+    ) {
+      column.sortDirection = TableSortDirection.ascending;
+    } else if (column.sortDirection === TableSortDirection.ascending) {
+      column.sortDirection = TableSortDirection.descending;
+    } else if (column.sortDirection === TableSortDirection.descending) {
+      column.sortDirection = TableSortDirection.none;
+    }
+    this.dispatchEvent(
+      new CustomEvent<ColumnSettings<T>>("sortChange", {
+        composed: true,
+        bubbles: true,
+        detail: column,
+      })
+    );
+  };
+  _handleResizeStart = (event: MouseEvent, column: ColumnSettings<T>) => {
+    this._resizeStart = { event, column };
+  };
+  _handleResizeEnd = (e: MouseEvent) => {
+    if (!this._resizeStart) {
+      return;
+    }
+    let delta = e.pageX - this._resizeStart?.event.pageX;
+    if (this._resizeStart.column.width) {
+      this._resizeStart.column.width = this._resizeStart.column.width + delta;
+    } else {
+      let cell = (this._resizeStart.event.target as HTMLDivElement).closest(
+        "td"
+      ) as HTMLTableCellElement;
+      this._resizeStart.column.width =
+        cell.getBoundingClientRect().width + delta;
+    }
+    this.dispatchEvent(
+      new CustomEvent("columnResize", { detail: this._resizeStart.column })
+    );
+    //We wrap this to ensure any sort events get fired before we are done FIXME?
+    requestAnimationFrame(() => {
+      this._resizeStart = undefined;
+      //Clear any text that got selected during column resize
+      if (window.getSelection) {
+        let selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
         }
-        this.dispatchEvent(
-            new CustomEvent("columnResize", { detail: this._resizeStart.column })
-        );
-        //We wrap this to ensure any sort events get fired before we are done FIXME?
-        requestAnimationFrame(() => {
-            this._resizeStart = undefined;
-            //Clear any text that got selected during column resize
-            if (window.getSelection) {
-                let selection = window.getSelection();
-                if (selection) {
-                    selection.removeAllRanges();
-                }
-            }
-        })
-    };
-    protected render(): unknown {
-        return html`
+      }
+    });
+  };
+  protected render(): unknown {
+    return html`
       <tr>
-        ${this.columns.map(column => this.renderCell(column))}
+        ${this.columns.map((column) => this.renderCell(column))}
       </tr>
     `;
+  }
+  private renderCell(column: ColumnSettings<T>) {
+    let classes = ["header-contents"];
+    if (column.filterable) {
+      //classes.push("filterable")
     }
-    private renderCell(column: ColumnSettings<T>) {
-        let classes = ["header-contents"];
-        if (column.filterable) {
-            //classes.push("filterable")
-        }
-        if (column.sortable) {
-            classes.push("sortable");
-        }
-        if (this._resizeStart) {
-            classes.push("resizing");
-        }
-        let columnWidth = column.width
-            ? `min-width:${column.width}px;max-width:${column.width}px;`
-            : "";
-        let sortDirection =
-            column.sortDirection === TableSortDirection.ascending
-                ? `🠉`
-                : column.sortDirection == TableSortDirection.descending
-                    ? `🠋`
-                    : ``;
-        let sortClass = column.sortDirection || TableSortDirection.none;
-        let resizable =
-            column.allowResize || column.allowResize === undefined;
-        let resizeHandle = resizable
-            ? html`<div
-                  class="header-resize-handle"
-                  @mousedown=${(e: MouseEvent) => {
-                    this._handleResizeStart(e, column);
-                }}
-                  @mouseup=${this._handleResizeEnd}
-                ></div>`
-            : null
-        return html` <td
-            @click=${() => this._handleSortChange(column)}
-            style="${columnWidth}"
-          >
-            ${resizeHandle}
-            <div class=${classes.join(" ")}>
-              ${column.title || column.key}
-              <span class="sort-direction ${sortClass}">${sortDirection}</span>
-            </div>
-          </td>`;
+    if (column.sortable) {
+      classes.push("sortable");
+    }
+    if (this._resizeStart) {
+      classes.push("resizing");
     }
+    let columnWidth = column.width
+      ? `min-width:${column.width}px;max-width:${column.width}px;`
+      : "";
+    let sortDirection =
+      column.sortDirection === TableSortDirection.ascending
+        ? ARROW_UP
+        : column.sortDirection == TableSortDirection.descending
+        ? ARROW_DOWN
+        : ``;
+    let sortClass = column.sortDirection || TableSortDirection.none;
+    let resizable = column.allowResize || column.allowResize === undefined;
+    let resizeHandle = resizable
+      ? html`<div
+          class="header-resize-handle"
+          @mousedown=${(e: MouseEvent) => {
+            this._handleResizeStart(e, column);
+          }}
+          @mouseup=${this._handleResizeEnd}
+        ></div>`
+      : null;
+    let title = column.title || column.key;
+    if (typeof title == "function") {
+      title = title(this.table) || undefined;
+    }
+    return html` <td
+      @click=${() => this._handleSortChange(column)}
+      style="${columnWidth}"
+    >
+      ${resizeHandle}
+      <div class=${classes.join(" ")}>
+        ${title}
+        <span class="sort-direction ${sortClass}">${sortDirection}</span>
+      </div>
+    </td>`;
+  }
 }
 
 interface TableHeaderEvents {
-    sortChange: (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
-    columnResize: (event: CustomEvent<ColumnSettings<any>>) => void;
+  sortChange: (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+  columnResize: (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [TableHeaderElementTag]: HTMLElementTagWithEvents<
-            TableHeaderElement<any>,
-            TableHeaderEvents
-        >;
+  interface HTMLElementTagNameMap {
+    [TableHeaderElementTag]: HTMLElementTagWithEvents<
+      TableHeaderElement<any>,
+      TableHeaderEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link DialogElement}
+       */
+      [TableHeaderElementTag]: ReactElementWithPropsAndEvents<
+        TableHeaderElement<any>,
+        HeaderProps<any>,
+        TableHeaderEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link DialogElement}
-             */
-            [TableHeaderElementTag]: ReactElementWithPropsAndEvents<
-                TableHeaderElement<any>,
-                HeaderProps<any>,
-                TableHeaderEvents
-            >;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link DialogElement}
-                 */
-                [TableHeaderElementTag]: ReactElementWithPropsAndEvents<
-                    TableHeaderElement<any>,
-                    HeaderProps<any>,
-                    TableHeaderEvents
-                >;
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link DialogElement}
+         */
+        [TableHeaderElementTag]: ReactElementWithPropsAndEvents<
+          TableHeaderElement<any>,
+          HeaderProps<any>,
+          TableHeaderEvents
+        >;
+      }
     }
+  }
 }

package/src/components/table/table.css

@@ -20,14 +20,16 @@ spectric-table spectric-table-virtual-body tr:hover{
     background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
 }
 
-spectric-table tr {
+spectric-table spectric-table-virtual-body tr {
     height: var(--rowHeight);
 }
 spectric-table td{
-   height: var(--rowHeight);
    padding:1px;
    border: 1px solid transparent;
 }
+spectric-table spectric-table-virtual-body td{
+   height: var(--rowHeight);
+}
 
 spectric-table div[role="table"]{
     display: table;