snice 1.14.3 → 2.1.0

package/components/table/snice-row.ts

@@ -0,0 +1,331 @@
+import { element, property, on, watch, ready, dispatch } from 'snice';
+import css from './snice-row.css?inline';
+import type { 
+  SniceRowElement, 
+  ColumnDefinition,
+  SniceCellElement
+} from './snice-table.types';
+import './snice-cell';
+import './snice-cell-text';
+import './snice-cell-number';
+import './snice-cell-date';
+import './snice-cell-sparkline';
+
+@element('snice-row')
+export class SniceRow extends HTMLElement implements SniceRowElement {
+  @property({ type: Boolean, reflect: true })
+  selected: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  hoverable: boolean = true;
+
+  @property({ type: Boolean, reflect: true })
+  clickable: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  selectable: boolean = false;
+
+  @property({ type: Object })
+  data: any = {};
+
+  // Extract data from data-* attributes - pass raw values, let cells handle conversion
+  private extractDataFromAttributes() {
+    const data: any = {};
+    
+    // Get all attribute names that start with data-
+    const attrNames = this.getAttributeNames().filter(name => 
+      name.startsWith('data-') && name !== 'data-column-index'
+    );
+    
+    attrNames.forEach(attrName => {
+      const key = attrName.slice(5); // Remove 'data-' prefix
+      const value = this.getAttribute(attrName);
+      if (value !== null) {
+        data[key] = value; // Keep as raw string, let cells convert
+      }
+    });
+    return data;
+  }
+
+  @property({ type: Number, reflect: true })
+  index: number = 0;
+
+  @property({ type: Array })
+  columns: ColumnDefinition[] = [];
+
+  html() {
+    return `
+      <div class="row-container" part="container">
+        ${this.selectable ? this.renderCheckbox() : ''}
+        <div class="cells-container">
+          ${this.columns && this.columns.length ? this.columns.map((column, columnIndex) => this.renderCell(column, columnIndex)).join('') : '<!-- No columns set yet -->'}
+        </div>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    // Extract data from data-* attributes if data object is empty
+    if (!this.data || Object.keys(this.data).length === 0) {
+      this.data = this.extractDataFromAttributes();
+    }
+    this.updateRowAttributes();
+    this.configureCells();
+  }
+
+  private configureCells() {
+    if (!this.columns) {
+      return;
+    }
+    
+    this.columns.forEach((column, index) => {
+      const cellElement = this.shadowRoot?.querySelector(`[data-column-index="${index}"]`) as any;
+      if (cellElement) {
+        const value = this.data[column.key];
+        cellElement.value = value;
+        cellElement.column = column;
+        cellElement.rowData = this.data;
+        
+        // For sparkline cells, also set the data property if value is an array
+        if (column.type === 'sparkline' && Array.isArray(value)) {
+          cellElement.data = value;
+        }
+      }
+    });
+  }
+
+  @watch('selected')
+  updateSelection() {
+    this.updateRowAttributes();
+    const checkbox = this.shadowRoot?.querySelector('.row-checkbox') as HTMLInputElement;
+    if (checkbox) {
+      checkbox.checked = this.selected;
+    }
+  }
+
+  @watch('hoverable', 'clickable', 'selectable')
+  updateRowAttributes() {
+    this.classList.toggle('row--hoverable', this.hoverable);
+    this.classList.toggle('row--clickable', this.clickable);
+    this.classList.toggle('row--selectable', this.selectable);
+    this.classList.toggle('row--selected', this.selected);
+  }
+
+  @watch('data', 'columns')
+  updateCells() {
+    const cellsContainer = this.shadowRoot?.querySelector('.cells-container');
+    if (cellsContainer && this.columns && this.columns.length) {
+      cellsContainer.innerHTML = this.renderCells();
+      this.configureCells();
+    }
+  }
+
+  @on('click')
+  handleRowClick(e: MouseEvent) {
+    // Don't trigger row click if clicking on checkbox or cell interactive elements
+    const target = e.target as HTMLElement;
+    if (target.matches('input[type="checkbox"], button, a, .interactive')) {
+      return;
+    }
+
+    if (this.clickable) {
+      this.dispatchRowClick();
+    }
+
+    if (this.selectable) {
+      this.toggleSelection();
+    }
+  }
+
+  @on('change', '.row-checkbox')
+  handleCheckboxChange(e: Event) {
+    const checkbox = e.target as HTMLInputElement;
+    this.selected = checkbox.checked;
+    this.dispatchRowSelect();
+  }
+
+  @on('keydown')
+  handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      
+      if (this.selectable) {
+        this.toggleSelection();
+      } else if (this.clickable) {
+        this.dispatchRowClick();
+      }
+    }
+  }
+
+  private renderCheckbox(): string {
+    return `
+      <div class="cell cell--checkbox" part="checkbox-cell">
+        <input 
+          type="checkbox" 
+          class="row-checkbox" 
+          ${this.selected ? 'checked' : ''}
+          tabindex="-1"
+        />
+      </div>
+    `;
+  }
+
+  private renderCells(): string {
+    if (!this.columns || !this.columns.length) {
+      return '<!-- No columns available -->';
+    }
+    return this.columns.map((column, columnIndex) => this.renderCell(column, columnIndex)).join('');
+  }
+
+  private renderCell(column: ColumnDefinition, columnIndex: number): string {
+    const value = this.data[column.key];
+    const cellComponent = this.getCellComponent(column.type);
+    
+    return `
+      <div class="cell cell--${column.type}" part="cell" style="${this.getCellStyles(column)}">
+        <${cellComponent} 
+          type="${column.type}"
+          align="${column.align || 'left'}"
+          data-column-index="${columnIndex}"
+        ></${cellComponent}>
+      </div>
+    `;
+  }
+
+  private getCellComponent(type: string | undefined): string {
+    switch (type) {
+      case 'text':
+        return 'snice-cell-text';
+      case 'number':
+      case 'currency':
+      case 'percent':
+      case 'accounting':
+      case 'scientific':
+      case 'fraction':
+        return 'snice-cell-number';
+      case 'date':
+        return 'snice-cell-date';
+      case 'boolean':
+        return 'snice-cell-boolean';
+      case 'sparkline':
+        return 'snice-cell-sparkline';
+      case 'rating':
+        return 'snice-cell-rating';
+      case 'progress':
+        return 'snice-cell-progress';
+      case 'duration':
+        return 'snice-cell-duration';
+      case 'filesize':
+        return 'snice-cell-filesize';
+      case 'custom':
+      default:
+        return 'snice-cell';
+    }
+  }
+
+  private getCellStyles(column: ColumnDefinition): string {
+    let styles = [];
+    
+    if (column.width) {
+      styles.push(`width: ${column.width}`);
+      styles.push(`min-width: ${column.width}`);
+      styles.push(`max-width: ${column.width}`);
+    }
+    
+    if (column.align) {
+      styles.push(`text-align: ${column.align}`);
+    }
+
+    return styles.join('; ');
+  }
+
+  private escapeHtml(value: any): string {
+    if (value === null || value === undefined) {
+      return '';
+    }
+    
+    const str = String(value);
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  private toggleSelection() {
+    this.selected = !this.selected;
+    this.dispatchRowSelect();
+  }
+
+  @dispatch('@snice/row-click', { bubbles: true, composed: true })
+  private dispatchRowClick() {
+    return {
+      data: this.data,
+      index: this.index,
+      element: this
+    };
+  }
+
+  @dispatch('@snice/row-select', { bubbles: true, composed: true })
+  private dispatchRowSelect() {
+    return {
+      selected: this.selected,
+      data: this.data,
+      index: this.index,
+      element: this
+    };
+  }
+
+  @dispatch('@snice/row-hover', { bubbles: true, composed: true })
+  private dispatchRowHover() {
+    return {
+      data: this.data,
+      index: this.index,
+      element: this
+    };
+  }
+
+  // Public API methods
+  select() {
+    this.selected = true;
+    this.dispatchRowSelect();
+  }
+
+  deselect() {
+    this.selected = false;
+    this.dispatchRowSelect();
+  }
+
+  focusRow() {
+    super.focus();
+    this.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
+
+  getCellValue(columnKey: string): any {
+    return this.data[columnKey];
+  }
+
+  setCellValue(columnKey: string, value: any) {
+    this.data = { ...this.data, [columnKey]: value };
+    this.updateCells();
+  }
+
+  getCellElement(columnKey: string): SniceCellElement | null {
+    const column = this.columns.find(col => col.key === columnKey);
+    if (!column) return null;
+    
+    const columnIndex = this.columns.indexOf(column);
+    return this.shadowRoot?.querySelector(`[data-column-index="${columnIndex}"]`) as SniceCellElement || null;
+  }
+
+  // Highlight row temporarily (useful for showing updates)
+  highlight(duration: number = 2000) {
+    this.classList.add('row--highlighted');
+    setTimeout(() => {
+      this.classList.remove('row--highlighted');
+    }, duration);
+  }
+}

package/components/table/snice-table.css

@@ -0,0 +1,241 @@
+/* Force host element to have dimensions */
+:host {
+  display: block;
+  width: 100%;
+  min-width: 400px;
+  min-height: 200px;
+}
+
+/* Table Container */
+.table-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 400px;
+  min-height: 200px;
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+/* Table Controls */
+.table-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--snice-spacing-md);
+  background: var(--snice-color-background-secondary);
+  border-bottom: 1px solid var(--snice-color-border);
+}
+
+.table-controls.hidden {
+  display: none;
+}
+
+.search-wrapper {
+  flex: 1;
+  max-width: 20rem; /* 320px */
+}
+
+.search-wrapper.hidden {
+  display: none;
+}
+
+.table-search {
+  width: 100%;
+}
+
+/* Table Wrapper */
+.table-wrapper {
+  position: relative;
+  overflow: auto;
+  flex: 1;
+  min-height: 6.25rem; /* 100px converted to rem */
+}
+
+.table {
+  display: block; /* Use block with CSS flexbox behavior */
+  width: 100%;
+  min-width: 100%;
+  min-height: 3.125rem; /* 50px converted to rem */
+  font-size: var(--snice-font-size-sm, 0.875rem); /* 14px */
+  line-height: var(--snice-line-height-normal, 1.5);
+}
+
+/* Table Body - flexbox container for rows */
+.table-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 2.5rem; /* 40px converted to rem */
+}
+
+/* Loading State */
+.table-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 10;
+}
+
+.table-loading.hidden {
+  display: none;
+}
+
+/* Empty State */
+.table-empty {
+  padding: var(--snice-spacing-2xl) var(--snice-spacing-md);
+  text-align: center;
+  color: var(--snice-color-text-secondary);
+  font-style: italic;
+}
+
+.table-empty.hidden {
+  display: none;
+}
+
+/* Table Body */
+.table-body {
+  background: var(--snice-color-background);
+}
+
+/* Pagination */
+.table-pagination {
+  padding: var(--snice-spacing-md);
+  border-top: 1px solid var(--snice-color-border);
+  background: var(--snice-color-background-secondary);
+}
+
+.table-pagination.hidden {
+  display: none;
+}
+
+/* Size Variants */
+:host([size="small"]) .table {
+  font-size: var(--snice-font-size-xs);
+  line-height: var(--snice-line-height-dense);
+}
+
+:host([size="small"]) .table-controls {
+  padding: var(--snice-spacing-sm);
+}
+
+:host([size="large"]) .table {
+  font-size: var(--snice-font-size-md);
+  line-height: var(--snice-line-height-loose);
+}
+
+:host([size="large"]) .table-controls {
+  padding: var(--snice-spacing-lg);
+}
+
+/* Variant Styles */
+:host([variant="striped"]) .table-body snice-row:nth-child(even) {
+  background-color: var(--snice-color-background-secondary);
+}
+
+:host([variant="bordered"]) .table {
+  border: 1px solid var(--snice-color-border);
+}
+
+:host([variant="bordered"]) .table-body snice-row {
+  border-bottom: 1px solid var(--snice-color-border);
+}
+
+/* State Classes */
+:host([striped]) .table-body snice-row:nth-child(even) {
+  background-color: var(--snice-color-background-secondary);
+}
+
+:host([bordered]) .table {
+  border: 1px solid var(--snice-color-border);
+}
+
+:host([bordered]) .table-body snice-row {
+  border-bottom: 1px solid var(--snice-color-border);
+}
+
+:host([hoverable]) .table-body snice-row:hover {
+  background-color: var(--snice-color-background-tertiary);
+}
+
+/* Sticky Header */
+:host([sticky-header]) snice-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: white;
+  border-bottom: 2px solid #dee2e6;
+}
+
+/* Loading State */
+:host([loading]) .table-wrapper {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .table-controls {
+    flex-direction: column;
+    gap: 0.75rem; /* 12px */
+  }
+  
+  .search-wrapper {
+    max-width: 100%;
+  }
+  
+  .table-wrapper {
+    overflow-x: auto;
+  }
+  
+  .table {
+    min-width: 40rem; /* 640px - minimum table width on mobile */
+  }
+}
+
+/* State Classes */
+:host(.table--loading) .table-wrapper {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+:host(.table--error) .table-wrapper {
+  border: 1px solid var(--snice-color-danger);
+}
+
+:host(.table--error) .table-empty::before {
+  content: "⚠️ ";
+  color: var(--snice-color-danger);
+}
+
+/* Focus Styles */
+:host(:focus-within) {
+  outline: var(--snice-focus-ring-width) solid var(--snice-focus-ring-color);
+  outline-offset: var(--snice-focus-ring-offset);
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .table {
+    border: 2px solid;
+  }
+  
+  .table-controls {
+    border: 1px solid;
+  }
+}