@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11

package/src/components/table/data-table.ts

@@ -0,0 +1,557 @@
+import { LitElement, html, css, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export interface DataTableColumn {
+  header: string;
+  key: string;
+  sortable?: boolean;
+  hidden?: boolean;
+}
+
+export interface SortConfig {
+  key: string;
+  direction: 'asc' | 'desc';
+}
+
+@customElement('st-data-table')
+export class StDataTable extends LitElement {
+  /**
+   * Array defining table headers, keys, and sortability.
+   */
+  @property({ type: Array }) columns: DataTableColumn[] = [];
+
+  /**
+   * Array of row data objects rendered in the table.
+   */
+  @property({ type: Array }) data: Record<string, any>[] = [];
+
+  /**
+   * Total number of rows available on the server (used for pagination).
+   */
+  @property({ type: Number, attribute: 'total-rows' }) totalRows = 0;
+
+  /**
+   * Current page number (1-indexed).
+   */
+  @property({ type: Number }) page = 1;
+
+  /**
+   * Number of rows per page.
+   */
+  @property({ type: Number, attribute: 'page-size' }) pageSize = 10;
+
+  /**
+   * Enables holding 'Shift' to sort by multiple columns sequentially.
+   */
+  @property({ type: Boolean, attribute: 'multi-sort' }) multiSort = false;
+
+  /**
+   * Displays loading skeleton rows and locks controls.
+   */
+  @property({ type: Boolean, reflect: true }) loading = false;
+
+  // --- Internal State ---
+  @state() private internalColumns: DataTableColumn[] = [];
+  @state() private sortState: SortConfig[] = [];
+  @state() private searchQuery = '';
+  @state() private showColumnMenu = false;
+  
+  private searchTimeout?: number;
+  private draggedColumnKey: string | null = null;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        font-family: var(--st-font-family, inherit);
+      }
+
+      .toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--st-spacing-md);
+        margin-bottom: var(--st-spacing-md);
+        flex-wrap: wrap;
+      }
+
+      .search-wrapper {
+        flex: 1;
+        min-width: 250px;
+        position: relative;
+      }
+
+      .search-input {
+        width: 100%;
+        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background-color: var(--st-color-surface);
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .search-input:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .search-icon {
+        position: absolute;
+        left: 0.75rem;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1rem;
+        height: 1rem;
+        color: var(--st-color-text-muted);
+      }
+
+      .columns-toggle-wrapper {
+        position: relative;
+      }
+
+      .columns-menu {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        right: 0;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        padding: var(--st-spacing-sm);
+        min-width: 200px;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .column-option {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: var(--st-font-size-sm);
+        cursor: pointer;
+        padding: 0.25rem;
+      }
+
+      .table-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: var(--st-font-size-sm);
+        background-color: var(--st-color-surface);
+      }
+
+      th {
+        font-weight: 600;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        border-bottom: 2px solid var(--st-color-border);
+        color: var(--st-color-text-muted);
+        white-space: nowrap;
+        background-color: var(--st-color-surface-muted, #f8fafc);
+        user-select: none;
+      }
+
+      th[draggable="true"] {
+        cursor: grab;
+      }
+
+      th[draggable="true"]:active {
+        cursor: grabbing;
+      }
+
+      th.drag-over {
+        border-left: 2px solid var(--st-color-primary);
+      }
+
+      .th-content {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .sortable-header {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      .sortable-header:hover {
+        color: var(--st-color-text);
+      }
+
+      .sort-icon {
+        width: 1rem;
+        height: 1rem;
+        color: var(--st-color-text-muted);
+      }
+
+      .sort-icon.active {
+        color: var(--st-color-primary);
+      }
+
+      .sort-priority {
+        font-size: 0.7rem;
+        background: var(--st-color-border);
+        color: var(--st-color-text);
+        border-radius: 50%;
+        width: 1.1rem;
+        height: 1.1rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      td {
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        border-bottom: 1px solid var(--st-color-border);
+        color: var(--st-color-text);
+      }
+
+      tbody tr:last-child td {
+        border-bottom: none;
+      }
+
+      tbody tr:hover {
+        background-color: var(--st-color-surface-hover, #f1f5f9);
+      }
+
+      .pagination {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--st-spacing-md) 0;
+        font-size: var(--st-font-size-sm);
+        color: var(--st-color-text-muted);
+      }
+
+      .pagination-controls {
+        display: flex;
+        gap: var(--st-spacing-sm);
+      }
+
+      .drag-handle {
+        opacity: 0.3;
+        cursor: grab;
+      }
+
+      .drag-handle:hover {
+        opacity: 0.7;
+      }
+    `
+  ];
+
+  willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('columns') && this.columns.length > 0) {
+      if (this.internalColumns.length === 0) {
+        this.internalColumns = [...this.columns];
+      }
+    }
+  }
+
+  firstUpdated() {
+    if (this.internalColumns.length === 0 && this.columns.length > 0) {
+      this.internalColumns = [...this.columns];
+    }
+    this.emitChange();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.handleOutsideClick);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this.handleOutsideClick);
+    super.disconnectedCallback();
+  }
+
+  private handleOutsideClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (!target.closest('.columns-toggle-wrapper')) {
+      this.showColumnMenu = false;
+    }
+  };
+
+  private emitChange() {
+    this.dispatchEvent(new CustomEvent('st-data-change', {
+      detail: {
+        page: this.page,
+        pageSize: this.pageSize,
+        search: this.searchQuery,
+        sort: this.sortState
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleSearchInput(e: Event) {
+    if (this.loading) return;
+    const val = (e.target as HTMLInputElement).value;
+    window.clearTimeout(this.searchTimeout);
+    
+    this.searchTimeout = window.setTimeout(() => {
+      this.searchQuery = val;
+      this.page = 1;
+      this.emitChange();
+    }, 350);
+  }
+
+  private handleSort(key: string, e: MouseEvent) {
+    if (this.loading) return;
+    const isShift = e.shiftKey && this.multiSort;
+    const existingIndex = this.sortState.findIndex(s => s.key === key);
+    let newDirection: 'asc' | 'desc' | null = 'asc';
+
+    if (existingIndex !== -1) {
+      newDirection = this.sortState[existingIndex].direction === 'asc' ? 'desc' : null;
+    }
+
+    let newSortState = [...this.sortState];
+
+    if (isShift) {
+      if (newDirection) {
+        if (existingIndex !== -1) {
+          newSortState[existingIndex].direction = newDirection;
+        } else {
+          newSortState.push({ key, direction: newDirection });
+        }
+      } else {
+        newSortState.splice(existingIndex, 1);
+      }
+    } else {
+      if (newDirection) {
+        newSortState = [{ key, direction: newDirection }];
+      } else {
+        newSortState = [];
+      }
+    }
+
+    this.sortState = newSortState;
+    this.page = 1;
+    this.emitChange();
+  }
+
+  private get totalPages() {
+    return Math.max(1, Math.ceil(this.totalRows / this.pageSize));
+  }
+
+  private prevPage() {
+    if (!this.loading && this.page > 1) {
+      this.page--;
+      this.emitChange();
+    }
+  }
+
+  private nextPage() {
+    if (!this.loading && this.page < this.totalPages) {
+      this.page++;
+      this.emitChange();
+    }
+  }
+
+  private toggleColumnVisibility(key: string) {
+    this.internalColumns = this.internalColumns.map(col => 
+      col.key === key ? { ...col, hidden: !col.hidden } : col
+    );
+  }
+
+  private handleDragStart(e: DragEvent, key: string) {
+    this.draggedColumnKey = key;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', key);
+    }
+  }
+
+  private handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    const target = (e.target as HTMLElement).closest('th');
+    if (target) target.classList.add('drag-over');
+  }
+
+  private handleDragLeave(e: DragEvent) {
+    const target = (e.target as HTMLElement).closest('th');
+    if (target) target.classList.remove('drag-over');
+  }
+
+  private handleDrop(e: DragEvent, targetKey: string) {
+    e.preventDefault();
+    const targetEl = (e.target as HTMLElement).closest('th');
+    if (targetEl) targetEl.classList.remove('drag-over');
+
+    if (!this.draggedColumnKey || this.draggedColumnKey === targetKey) return;
+
+    const newCols = [...this.internalColumns];
+    const fromIndex = newCols.findIndex(c => c.key === this.draggedColumnKey);
+    const toIndex = newCols.findIndex(c => c.key === targetKey);
+
+    const [movedCol] = newCols.splice(fromIndex, 1);
+    newCols.splice(toIndex, 0, movedCol);
+
+    this.internalColumns = newCols;
+    this.draggedColumnKey = null;
+  }
+
+  private renderSortIcon(key: string) {
+    const sortIndex = this.sortState.findIndex(s => s.key === key);
+    if (sortIndex === -1) {
+      return html`<svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
+    }
+
+    const sortConfig = this.sortState[sortIndex];
+    const icon = sortConfig.direction === 'asc' 
+      ? html`<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`
+      : html`<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
+
+    const priority = this.sortState.length > 1 && this.multiSort 
+      ? html`<span class="sort-priority">${sortIndex + 1}</span>` 
+      : '';
+
+    return html`${icon}${priority}`;
+  }
+
+  render() {
+    const visibleColumns = this.internalColumns.filter(c => !c.hidden);
+    const skeletonRowsCount = Math.min(this.pageSize, 5);
+
+    return html`
+      <!-- Toolbar -->
+      <div class="toolbar">
+        <div class="search-wrapper">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          <input 
+            type="text" 
+            class="search-input" 
+            placeholder="Search..." 
+            ?disabled=${this.loading}
+            @input=${this.handleSearchInput}
+          >
+        </div>
+
+        <div class="columns-toggle-wrapper">
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            @click=${() => this.showColumnMenu = !this.showColumnMenu}
+          >
+            Columns
+          </st-button>
+          
+          ${this.showColumnMenu ? html`
+            <div class="columns-menu">
+              ${this.internalColumns.map(col => html`
+                <label class="column-option">
+                  <input 
+                    type="checkbox" 
+                    .checked=${!col.hidden} 
+                    @change=${() => this.toggleColumnVisibility(col.key)}
+                  >
+                  ${col.header}
+                </label>
+              `)}
+            </div>
+          ` : ''}
+        </div>
+      </div>
+
+      <!-- Table -->
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              ${visibleColumns.map(col => html`
+                <th 
+                  draggable="true"
+                  @dragstart=${(e: DragEvent) => this.handleDragStart(e, col.key)}
+                  @dragover=${this.handleDragOver}
+                  @dragleave=${this.handleDragLeave}
+                  @drop=${(e: DragEvent) => this.handleDrop(e, col.key)}
+                >
+                  <div class="th-content">
+                    <svg class="drag-handle" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+                    
+                    <div 
+                      class=${classMap({ 'sortable-header': !!col.sortable })} 
+                      @click=${(e: MouseEvent) => col.sortable && this.handleSort(col.key, e)}
+                    >
+                      ${col.header}
+                      ${col.sortable ? this.renderSortIcon(col.key) : ''}
+                    </div>
+                  </div>
+                </th>
+              `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.loading ? html`
+              ${Array.from({ length: skeletonRowsCount }).map(() => html`
+                <tr>
+                  ${visibleColumns.map(() => html`
+                    <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
+                  `)}
+                </tr>
+              `)}
+            ` : this.data.length === 0 ? html`
+              <tr>
+                <td colspan=${visibleColumns.length} style="text-align: center; padding: 2rem;">No results found.</td>
+              </tr>
+            ` : this.data.map(row => html`
+              <tr>
+                ${visibleColumns.map(col => html`
+                  <td>${row[col.key]}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <div class="pagination">
+        <div class="pagination-info">
+          Page ${this.page} of ${this.totalPages} (${this.totalRows} total items)
+        </div>
+        <div class="pagination-controls">
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            ?disabled=${this.loading || this.page === 1}
+            @click=${this.prevPage}
+          >
+            Prev
+          </st-button>
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            ?disabled=${this.loading || this.page === this.totalPages}
+            @click=${this.nextPage}
+          >
+            Next
+          </st-button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-data-table': StDataTable;
+  }
+}

package/src/components/table/table.ts

@@ -0,0 +1,154 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export type TableMode = 'horizontal' | 'vertical';
+
+export interface TableColumn {
+  header: string;
+  key: string;
+}
+
+@customElement('st-table')
+export class StTable extends LitElement {
+  @property({ type: Array }) columns: TableColumn[] = [];
+  @property({ type: Array }) data: Record<string, any>[] = [];
+  
+  @property({ type: String, reflect: true }) mode: TableMode = 'horizontal';
+  @property({ type: Boolean, reflect: true }) striped = false;
+  @property({ type: Boolean, reflect: true }) hoverable = false;
+  @property({ type: Boolean, reflect: true }) dense = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .table-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: var(--st-font-size-base, 1rem);
+        color: var(--st-color-text);
+      }
+
+      th {
+        font-weight: 600;
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 2px solid var(--st-color-border);
+        color: var(--st-color-text-muted);
+        white-space: nowrap;
+      }
+
+      td {
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 1px solid var(--st-color-border);
+      }
+
+      /* Modifiers */
+      :host([dense]) th,
+      :host([dense]) td {
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+      }
+
+      :host([striped]) tbody tr:nth-of-type(odd) {
+        background-color: var(--st-color-surface-muted);
+      }
+
+      :host([hoverable]) tbody tr:hover {
+        background-color: var(--st-color-surface-hover);
+      }
+
+      /* ==========================================================
+         Vertical Mode (Responsive Stacked Cards)
+         ========================================================== */
+      :host([mode="vertical"]) table,
+      :host([mode="vertical"]) tbody,
+      :host([mode="vertical"]) tr,
+      :host([mode="vertical"]) td {
+        display: block;
+        width: 100%;
+      }
+
+      /* Visually hide header but keep for screen readers */
+      :host([mode="vertical"]) thead {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      :host([mode="vertical"]) tr {
+        margin-bottom: var(--st-spacing-md);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background-color: var(--st-color-surface);
+        overflow: hidden;
+      }
+
+      :host([mode="vertical"]) td {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid var(--st-color-border);
+        text-align: right;
+      }
+
+      :host([mode="vertical"]) td:last-child {
+        border-bottom: none;
+      }
+
+      /* Inject the header name on the left */
+      :host([mode="vertical"]) td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        text-align: left;
+        padding-right: var(--st-spacing-md);
+        color: var(--st-color-text-muted);
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              ${this.columns.map(col => html`<th scope="col">${col.header}</th>`)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.data.map(row => html`
+              <tr>
+                ${this.columns.map(col => html`
+                  <td data-label=${col.header}>${row[col.key]}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-table': StTable;
+  }
+}