@latty-ds/web 0.2.0

package/dist/components/table/index.js

@@ -0,0 +1,582 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/components/table/table.ts
+import { html, nothing } from "lit";
+
+// src/base/themeable-element.ts
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+var ThemeableElement = class extends LitElement {
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("theme")) {
+      this._syncThemeAttribute();
+    }
+  }
+  _syncThemeAttribute() {
+    if (this.theme === "dark" || this.theme === "light") {
+      this.setAttribute("data-theme", this.theme);
+    } else {
+      this.removeAttribute("data-theme");
+    }
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], ThemeableElement.prototype, "theme", 2);
+
+// src/components/table/table.ts
+import { customElement, property as property2, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { repeat } from "lit/directives/repeat.js";
+
+// src/components/table/table.styles.ts
+import { css } from "lit";
+var tableStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .table-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+
+  :host([responsive-mode='scroll']) .table-container {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  /* Header */
+  thead {
+    background: var(--lt-bg-surface);
+    border-bottom: 2px solid var(--lt-border-default);
+  }
+
+  th {
+    color: var(--lt-text-default);
+    font-weight: 600;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  th[data-align='center'] {
+    text-align: center;
+  }
+  th[data-align='right'] {
+    text-align: right;
+  }
+
+  /* Sortable headers */
+  th.sortable {
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 120ms ease;
+  }
+
+  th.sortable:hover {
+    background: var(--lt-bg-overlay);
+  }
+
+  th.sortable .header-content {
+    align-items: center;
+    display: flex;
+    gap: var(--lt-spacing-2);
+  }
+
+  th[data-align='center'] .header-content {
+    justify-content: center;
+  }
+  th[data-align='right'] .header-content {
+    justify-content: flex-end;
+  }
+
+  .sort-icon {
+    color: var(--lt-text-muted);
+    display: inline-flex;
+    flex-shrink: 0;
+    font-size: 0.875rem;
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+
+  th.sortable:hover .sort-icon,
+  th.sorted .sort-icon {
+    opacity: 1;
+  }
+
+  th.sorted .sort-icon {
+    color: var(--lt-interactive-primary-bg);
+  }
+
+  /* Body */
+  tbody tr {
+    border-bottom: 1px solid var(--lt-border-default);
+    transition: background-color 120ms ease;
+  }
+
+  tbody tr:last-child {
+    border-bottom: none;
+  }
+
+  :host([hoverable]) tbody tr:hover {
+    background: var(--lt-bg-surface);
+  }
+
+  :host([striped]) tbody tr:nth-child(even) {
+    background: var(--lt-bg-surface);
+  }
+
+  :host([striped][hoverable]) tbody tr:nth-child(even):hover {
+    background: var(--lt-bg-overlay);
+  }
+
+  td {
+    color: var(--lt-text-default);
+  }
+
+  td[data-align='center'] {
+    text-align: center;
+  }
+  td[data-align='right'] {
+    text-align: right;
+  }
+
+  /* Density variants */
+  :host([density='compact']) th,
+  :host([density='compact']) td {
+    padding: var(--lt-spacing-2) var(--lt-spacing-3);
+  }
+
+  :host([density='normal']) th,
+  :host([density='normal']) td {
+    padding: var(--lt-spacing-3) var(--lt-spacing-4);
+  }
+
+  :host([density='comfortable']) th,
+  :host([density='comfortable']) td {
+    padding: var(--lt-spacing-4) var(--lt-spacing-5);
+  }
+
+  /* Sticky columns */
+  th.sticky {
+    background: var(--lt-bg-surface);
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+    left: 0;
+    position: sticky;
+    z-index: 2;
+  }
+
+  td.sticky {
+    background: var(--lt-bg-default);
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+    left: 0;
+    position: sticky;
+    z-index: 1;
+  }
+
+  :host([striped]) tbody tr:nth-child(even) td.sticky {
+    background: var(--lt-bg-surface);
+  }
+
+  :host([hoverable]) tbody tr:hover td.sticky {
+    background: var(--lt-bg-surface);
+  }
+
+  :host([striped][hoverable]) tbody tr:nth-child(even):hover td.sticky {
+    background: var(--lt-bg-overlay);
+  }
+
+  /* Border styling */
+  :host([bordered]) table {
+    border: 1px solid var(--lt-border-default);
+  }
+
+  :host([bordered]) th,
+  :host([bordered]) td {
+    border-right: 1px solid var(--lt-border-default);
+  }
+
+  :host([bordered]) th:last-child,
+  :host([bordered]) td:last-child {
+    border-right: none;
+  }
+
+  /* Empty state */
+  .empty-state {
+    color: var(--lt-text-subtle);
+    padding: var(--lt-spacing-8);
+    text-align: center;
+  }
+
+  /* Loading state */
+  .loading-overlay {
+    align-items: center;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+  }
+
+  /* Stack mode for mobile */
+  @media (max-width: 768px) {
+    :host([responsive-mode='stack']) .table-container {
+      overflow-x: visible;
+    }
+
+    :host([responsive-mode='stack']) table,
+    :host([responsive-mode='stack']) thead,
+    :host([responsive-mode='stack']) tbody,
+    :host([responsive-mode='stack']) th,
+    :host([responsive-mode='stack']) td,
+    :host([responsive-mode='stack']) tr {
+      display: block;
+    }
+
+    :host([responsive-mode='stack']) thead {
+      display: none;
+    }
+
+    :host([responsive-mode='stack']) tr {
+      background: var(--lt-bg-subtle);
+      border-radius: var(--lt-border-radius);
+      border: 1px solid var(--lt-border-default);
+      margin-bottom: var(--lt-spacing-3);
+      padding: var(--lt-spacing-4);
+    }
+
+    :host([responsive-mode='stack']) td {
+      border: none;
+      display: grid;
+      gap: var(--lt-spacing-2);
+      grid-template-columns: 120px 1fr;
+      padding: var(--lt-spacing-2) 0;
+      text-align: left;
+    }
+
+    :host([responsive-mode='stack']) td::before {
+      content: attr(data-label);
+      color: var(--lt-text-default);
+      font-weight: 600;
+    }
+
+    :host([responsive-mode='stack']) td:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .hide-on-mobile {
+      display: none;
+    }
+  }
+
+  th.sortable:focus-visible {
+    outline: 2px solid var(--lt-interactive-primary-bg);
+    outline-offset: -2px;
+  }
+`;
+
+// src/components/table/table.ts
+import "@latty-ds/icons";
+var jsonArrayConverter = {
+  fromAttribute(value) {
+    if (value === null) return [];
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+};
+var Table = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.columns = [];
+    this.data = [];
+    this.density = "normal";
+    this.responsiveMode = "scroll";
+    this.hoverable = false;
+    this.striped = false;
+    this.bordered = false;
+    this.loading = false;
+    this.emptyMessage = "No data available";
+    this.rowKey = "";
+    this.internalSort = null;
+    this.sortedData = [];
+  }
+  /**
+   * Gets the current effective sort state.
+   */
+  get currentSort() {
+    return this.sort ?? this.internalSort;
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    const changed = changedProperties;
+    if (changed.has("data") || changed.has("sort") || changed.has("columns") || changed.has("internalSort")) {
+      this.updateSortedData();
+    }
+  }
+  /**
+   * Updates the sorted data based on current sort state.
+   */
+  updateSortedData() {
+    const data = this.data ?? [];
+    if (!this.currentSort) {
+      this.sortedData = [...data];
+      return;
+    }
+    const columns = this.columns ?? [];
+    const column = columns.find((col) => col.key === this.currentSort.key);
+    if (!column) {
+      this.sortedData = [...data];
+      return;
+    }
+    const sorted = [...data].sort((a, b) => {
+      if (column.sortFn) {
+        return column.sortFn(a, b, this.currentSort.direction);
+      }
+      const aValue = this.getCellValue(a, column.key);
+      const bValue = this.getCellValue(b, column.key);
+      if (aValue == null && bValue == null) return 0;
+      if (aValue == null) return 1;
+      if (bValue == null) return -1;
+      let comparison = 0;
+      if (typeof aValue === "number" && typeof bValue === "number") {
+        comparison = aValue - bValue;
+      } else {
+        comparison = String(aValue).localeCompare(String(bValue));
+      }
+      return this.currentSort.direction === "asc" ? comparison : -comparison;
+    });
+    this.sortedData = sorted;
+  }
+  /**
+   * Handles header click for sorting.
+   */
+  handleHeaderClick(column) {
+    if (!column.sortable) return;
+    const previousSort = this.currentSort;
+    let newDirection = "asc";
+    if (previousSort?.key === column.key) {
+      newDirection = previousSort.direction === "asc" ? "desc" : "asc";
+    }
+    const newSort = {
+      key: column.key,
+      direction: newDirection
+    };
+    if (this.sort === void 0) {
+      this.internalSort = newSort;
+    }
+    this.dispatchEvent(
+      new CustomEvent("sort-change", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          key: column.key,
+          direction: newDirection,
+          previousSort
+        }
+      })
+    );
+  }
+  /**
+   * Gets a cell value from a row using a key (supports nested keys).
+   */
+  getCellValue(row, key) {
+    return key.split(".").reduce((obj, k) => obj?.[k], row);
+  }
+  /**
+   * Renders a cell's content.
+   */
+  renderCell(column, row, rowIndex) {
+    const value = this.getCellValue(row, column.key);
+    if (column.render) {
+      return column.render(value, row, rowIndex);
+    }
+    return value ?? "";
+  }
+  /**
+   * Renders the sort icon for a column header.
+   */
+  renderSortIcon(column) {
+    if (!column.sortable) return nothing;
+    const isCurrentSort = this.currentSort?.key === column.key;
+    const direction = isCurrentSort ? this.currentSort.direction : "asc";
+    const iconName = direction === "asc" ? "arrow-up" : "arrow-down";
+    return html` <lt-icon class="sort-icon" name=${iconName}></lt-icon> `;
+  }
+  /**
+   * Renders the table header.
+   */
+  renderHeader() {
+    return html`
+      <thead>
+        <tr>
+          ${(this.columns ?? []).map(
+      (column) => html`
+              <th
+                class=${classMap({
+        sortable: !!column.sortable,
+        sorted: this.currentSort?.key === column.key,
+        sticky: !!column.sticky,
+        "hide-on-mobile": !!column.hideOnMobile
+      })}
+                data-align=${column.align || "left"}
+                @click=${() => this.handleHeaderClick(column)}
+                @keydown=${(e) => {
+        if (column.sortable && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          this.handleHeaderClick(column);
+        }
+      }}
+                tabindex=${column.sortable ? "0" : "-1"}
+                aria-sort=${column.sortable ? this.currentSort?.key === column.key ? this.currentSort.direction === "asc" ? "ascending" : "descending" : "none" : nothing}
+                style=${styleMap({
+        ...column.width ? { width: column.width } : {},
+        ...column.minWidth ? { minWidth: column.minWidth } : {}
+      })}
+              >
+                ${column.sortable ? html`
+                      <div class="header-content">
+                        <span>${column.label}</span>
+                        ${this.renderSortIcon(column)}
+                      </div>
+                    ` : column.label}
+              </th>
+            `
+    )}
+        </tr>
+      </thead>
+    `;
+  }
+  /**
+   * Renders the table body.
+   */
+  renderBody() {
+    const columns = this.columns ?? [];
+    if (this.sortedData.length === 0) {
+      return html`
+        <tbody>
+          <tr>
+            <td colspan=${columns.length} class="empty-state">${this.emptyMessage}</td>
+          </tr>
+        </tbody>
+      `;
+    }
+    return html`
+      <tbody>
+        ${repeat(
+      this.sortedData,
+      (row) => this.rowKey ? row[this.rowKey] : JSON.stringify(row),
+      (row, index) => html`
+            <tr>
+              ${columns.map(
+        (column) => html`
+                  <td
+                    class=${classMap({
+          sticky: !!column.sticky,
+          "hide-on-mobile": !!column.hideOnMobile
+        })}
+                    data-align=${column.align || "left"}
+                    data-label=${column.label}
+                    style=${styleMap({
+          ...column.width ? { width: column.width } : {},
+          ...column.minWidth ? { minWidth: column.minWidth } : {}
+        })}
+                  >
+                    ${this.renderCell(column, row, index)}
+                  </td>
+                `
+      )}
+            </tr>
+          `
+    )}
+      </tbody>
+    `;
+  }
+  render() {
+    return html`
+      <div class="table-container">
+        <table>
+          ${this.renderHeader()} ${this.renderBody()}
+        </table>
+        ${this.loading ? html`
+              <div class="loading-overlay">
+                <lt-spinner></lt-spinner>
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+};
+Table.styles = tableStyles;
+__decorateClass([
+  property2({ converter: jsonArrayConverter })
+], Table.prototype, "columns", 2);
+__decorateClass([
+  property2({ converter: jsonArrayConverter })
+], Table.prototype, "data", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Table.prototype, "density", 2);
+__decorateClass([
+  property2({ reflect: true, attribute: "responsive-mode" })
+], Table.prototype, "responsiveMode", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Table.prototype, "hoverable", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Table.prototype, "striped", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Table.prototype, "bordered", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Table.prototype, "loading", 2);
+__decorateClass([
+  property2({ attribute: "empty-message" })
+], Table.prototype, "emptyMessage", 2);
+__decorateClass([
+  property2({ attribute: "row-key" })
+], Table.prototype, "rowKey", 2);
+__decorateClass([
+  property2({ type: Object })
+], Table.prototype, "sort", 2);
+__decorateClass([
+  state()
+], Table.prototype, "internalSort", 2);
+__decorateClass([
+  state()
+], Table.prototype, "sortedData", 2);
+Table = __decorateClass([
+  customElement("lt-table")
+], Table);
+export {
+  Table
+};