snice 1.14.3 → 2.1.0

package/components/table/snice-header.ts

@@ -0,0 +1,261 @@
+import { element, property, on, watch, ready, dispatch } from 'snice';
+import type { 
+  SniceHeaderElement, 
+  ColumnDefinition,
+  TableSort,
+  SortDirection
+} from './snice-table.types';
+
+@element('snice-header')
+export class SniceHeader extends HTMLElement implements SniceHeaderElement {
+  @property({ type: Boolean, reflect: true })
+  sticky: boolean = false;
+
+  @property({ type: Array })
+  columns: ColumnDefinition[] = [];
+
+  @property({ type: Boolean, reflect: true })
+  selectable: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  sortable: boolean = false;
+
+  @property({ type: Object })
+  currentSort: TableSort = { column: '', direction: null };
+
+  @property({ type: Boolean, reflect: true, attribute: 'all-selected' })
+  allSelected: boolean = false;
+
+  @property({ type: Boolean, reflect: true, attribute: 'some-selected' })
+  someSelected: boolean = false;
+
+  html() {
+    return `
+      <div class="header-container" part="container">
+        ${this.selectable ? this.renderSelectAllCheckbox() : ''}
+        ${this.renderHeaderCells()}
+      </div>
+    `;
+  }
+
+  @ready()
+  init() {
+    this.updateHeaderAttributes();
+  }
+
+  @watch('sticky', 'selectable', 'sortable')
+  updateHeaderAttributes() {
+    this.classList.toggle('header--sticky', this.sticky);
+    this.classList.toggle('header--selectable', this.selectable);
+    this.classList.toggle('header--sortable', this.sortable);
+  }
+
+  @watch('columns', 'currentSort')
+  updateHeaderCells() {
+    const cellsContainer = this.shadowRoot?.querySelector('.cells-container');
+    if (cellsContainer) {
+      cellsContainer.innerHTML = this.renderHeaderCells();
+    }
+  }
+
+  @watch('allSelected', 'someSelected')
+  updateSelectAllCheckbox() {
+    const checkbox = this.shadowRoot?.querySelector('.select-all-checkbox') as HTMLInputElement;
+    if (checkbox) {
+      checkbox.checked = this.allSelected;
+      checkbox.indeterminate = this.someSelected && !this.allSelected;
+    }
+  }
+
+  @on('click', '.header-cell[data-sortable="true"]')
+  handleSort(e: MouseEvent) {
+    const cell = e.currentTarget as HTMLElement;
+    const columnKey = cell.dataset.columnKey;
+    
+    if (columnKey && this.sortable) {
+      this.dispatchSort(columnKey);
+    }
+  }
+
+  @on('change', '.select-all-checkbox')
+  handleSelectAll(e: Event) {
+    const checkbox = e.target as HTMLInputElement;
+    this.dispatchSelectAll(checkbox.checked);
+  }
+
+  @on('keydown', '.header-cell[data-sortable="true"]')
+  handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const cell = e.currentTarget as HTMLElement;
+      const columnKey = cell.dataset.columnKey;
+      
+      if (columnKey && this.sortable) {
+        this.dispatchSort(columnKey);
+      }
+    }
+  }
+
+  private renderSelectAllCheckbox(): string {
+    return `
+      <div class="header-cell header-cell--checkbox" part="checkbox-cell">
+        <input 
+          type="checkbox" 
+          class="select-all-checkbox" 
+          ${this.allSelected ? 'checked' : ''}
+          title="Select all rows"
+          tabindex="0"
+        />
+      </div>
+    `;
+  }
+
+  private renderHeaderCells(): string {
+    if (!this.columns.length) {
+      return '';
+    }
+
+    return `
+      <div class="cells-container">
+        ${this.columns.map((column, index) => this.renderHeaderCell(column, index)).join('')}
+      </div>
+    `;
+  }
+
+  private renderHeaderCell(column: ColumnDefinition, index: number): string {
+    const isSortable = this.sortable && column.sortable !== false;
+    const isCurrentSort = this.currentSort.column === column.key;
+    const sortDirection = isCurrentSort ? this.currentSort.direction : null;
+    
+    return `
+      <div 
+        class="header-cell header-cell--${column.type || 'text'}" 
+        part="cell"
+        data-column-key="${column.key}"
+        data-column-index="${index}"
+        data-sortable="${isSortable}"
+        style="${this.getHeaderCellStyles(column)}"
+        ${isSortable ? 'role="button" tabindex="0"' : ''}
+        ${isSortable ? `aria-label="Sort by ${column.label}"` : ''}
+        ${isCurrentSort ? `aria-sort="${this.getAriaSortValue(sortDirection)}"` : ''}
+      >
+        <div class="header-cell-content">
+          <span class="header-cell-label">${column.label}</span>
+          ${isSortable ? this.renderSortIndicator(sortDirection) : ''}
+        </div>
+        ${column.filterable ? this.renderFilterButton(column) : ''}
+      </div>
+    `;
+  }
+
+  private renderSortIndicator(direction: SortDirection): string {
+    const ascIcon = '▲';
+    const descIcon = '▼';
+    const neutralIcon = '⇅';
+    
+    let icon = neutralIcon;
+    let state = 'neutral';
+    
+    if (direction === 'asc') {
+      icon = ascIcon;
+      state = 'ascending';
+    } else if (direction === 'desc') {
+      icon = descIcon;
+      state = 'descending';
+    }
+    
+    return `
+      <span 
+        class="sort-indicator sort-indicator--${state}" 
+        part="sort-indicator"
+        aria-hidden="true"
+      >${icon}</span>
+    `;
+  }
+
+  private renderFilterButton(column: ColumnDefinition): string {
+    return `
+      <button 
+        class="filter-button" 
+        part="filter-button"
+        data-column-key="${column.key}"
+        title="Filter ${column.label}"
+        tabindex="-1"
+      >
+        🔽
+      </button>
+    `;
+  }
+
+  private getHeaderCellStyles(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 getAriaSortValue(direction: SortDirection): string {
+    switch (direction) {
+      case 'asc':
+        return 'ascending';
+      case 'desc':
+        return 'descending';
+      default:
+        return 'none';
+    }
+  }
+
+  @dispatch('@snice/header-sort', { bubbles: true, composed: true })
+  private dispatchSort(columnKey: string) {
+    return { column: columnKey };
+  }
+
+  @dispatch('@snice/header-select-all', { bubbles: true, composed: true })
+  private dispatchSelectAll(checked: boolean) {
+    return { checked };
+  }
+
+  @dispatch('@snice/header-filter', { bubbles: true, composed: true })
+  private dispatchFilter(columnKey: string) {
+    return { column: columnKey };
+  }
+
+  // Public API methods
+  setSortState(column: string, direction: SortDirection) {
+    this.currentSort = { column, direction };
+  }
+
+  setSelectionState(allSelected: boolean, someSelected: boolean = false) {
+    this.allSelected = allSelected;
+    this.someSelected = someSelected && !allSelected;
+  }
+
+  getColumnElement(columnKey: string): HTMLElement | null {
+    return this.shadowRoot?.querySelector(`[data-column-key="${columnKey}"]`) || null;
+  }
+
+  // Method to update column definitions
+  updateColumns(columns: ColumnDefinition[]) {
+    this.columns = columns;
+  }
+
+  // Method to highlight a column temporarily
+  highlightColumn(columnKey: string, duration: number = 2000) {
+    const columnElement = this.getColumnElement(columnKey);
+    if (columnElement) {
+      columnElement.classList.add('header-cell--highlighted');
+      setTimeout(() => {
+        columnElement.classList.remove('header-cell--highlighted');
+      }, duration);
+    }
+  }
+}

package/components/table/snice-progress.ts

@@ -0,0 +1,66 @@
+import { element, property } from 'snice';
+
+@element('snice-progress')
+export class SniceProgress extends HTMLElement {
+  @property({ type: Number })
+  value = 0;
+  
+  @property({ type: Number })
+  max = 100;
+  
+  @property()
+  color = '#3b82f6';
+  
+  @property()
+  backgroundColor = '#e5e7eb';
+  
+  @property()
+  height = '0.5rem'; /* 8px */
+  
+  @property({ type: Boolean })
+  showPercentage = false;
+
+  html() {
+    const percentage = Math.min(100, (this.value / this.max) * 100);
+    
+    return `
+      <div class="progress-container">
+        <div class="progress-bar" style="width: ${percentage}%"></div>
+      </div>
+      ${this.showPercentage ? `
+        <span class="percentage">${percentage.toFixed(0)}%</span>
+      ` : ''}
+    `;
+  }
+
+  css() {
+    return `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        width: 100%;
+        gap: 0.5rem; /* 8px */
+      }
+      
+      .progress-container {
+        flex: 1;
+        height: ${this.height};
+        background: ${this.backgroundColor};
+        border-radius: 0.25rem; /* 4px */
+        overflow: hidden;
+      }
+      
+      .progress-bar {
+        height: 100%;
+        background: ${this.color};
+        transition: width 0.3s ease;
+      }
+      
+      .percentage {
+        font-size: 0.875rem; /* 14px */
+        color: #6b7280;
+        min-width: 2.1875rem; /* 35px */
+      }
+    `;
+  }
+}

package/components/table/snice-rating.ts

@@ -0,0 +1,45 @@
+import { element, property } from 'snice';
+
+@element('snice-rating')
+export class SniceRating extends HTMLElement {
+  @property({ type: Number })
+  value = 0;
+  
+  @property({ type: Number })
+  max = 5;
+  
+  @property()
+  symbol = '★';
+  
+  @property()
+  emptySymbol = '☆';
+  
+  @property()
+  color = '#facc15';
+
+  html() {
+    const filled = Math.round(this.value);
+    const empty = this.max - filled;
+    
+    return `
+      <span class="filled">${this.symbol.repeat(filled)}</span><span class="empty">${this.emptySymbol.repeat(empty)}</span>
+    `;
+  }
+
+  css() {
+    return `
+      :host {
+        display: inline-block;
+        font-size: 1.2em;
+      }
+      
+      .filled {
+        color: ${this.color};
+      }
+      
+      .empty {
+        color: #d1d5db;
+      }
+    `;
+  }
+}

package/components/table/snice-row.css

@@ -0,0 +1,255 @@
+:host {
+  display: block;
+  width: 100%;
+  min-height: 2.5rem; /* 40px */
+}
+
+/* Row Container */
+.row-container {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-height: 2.5rem; /* 40px */
+  height: 2.5rem; /* 40px */
+  background: #ffffff;
+  border-bottom: 1px solid #ddd;
+  transition: background-color 0.15s ease;
+}
+
+/* Cell Base */
+.cell {
+  display: flex;
+  align-items: center;
+  border-right: 1px solid #ddd;
+  min-height: 2.5rem; /* 40px */
+  height: 2.5rem; /* 40px */
+  min-width: 6.25rem; /* 100px */
+  flex: 1;
+  word-wrap: break-word;
+  overflow: hidden;
+}
+
+.cell:last-child {
+  border-right: none;
+}
+
+/* Checkbox Cell */
+.cell--checkbox {
+  width: 3rem; /* 48px */
+  min-width: 3rem; /* 48px */
+  max-width: 3rem; /* 48px */
+  padding: 0.75rem; /* 12px */
+  justify-content: center;
+}
+
+.row-checkbox {
+  width: 1rem; /* 16px */
+  height: 1rem; /* 16px */
+  cursor: pointer;
+}
+
+/* Cells Container */
+.cells-container {
+  display: flex;
+  flex: 1;
+  align-items: stretch;
+}
+
+/* Cell Type Specific Styles */
+.cell--text {
+  text-align: left;
+}
+
+.cell--number,
+.cell--currency,
+.cell--percent,
+.cell--accounting,
+.cell--scientific,
+.cell--fraction {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.cell--date {
+  min-width: 8rem; /* 128px */
+  font-variant-numeric: tabular-nums;
+}
+
+.cell--boolean {
+  text-align: center;
+  font-size: 1rem; /* 16px */
+}
+
+.cell--rating {
+  text-align: center;
+  min-width: 6rem; /* 96px */
+}
+
+.cell--progress {
+  min-width: 8rem; /* 128px */
+}
+
+.cell--sparkline {
+  text-align: center;
+  min-width: 6rem; /* 96px */
+}
+
+.cell--duration,
+.cell--filesize {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Row States */
+:host(.row--hoverable) .row-container:hover {
+  background-color: var(--snice-color-background-secondary);
+}
+
+:host(.row--clickable) .row-container {
+  cursor: pointer;
+}
+
+:host(.row--clickable) .row-container:hover {
+  background-color: var(--snice-color-background-tertiary);
+}
+
+:host(.row--selected) .row-container {
+  background-color: var(--snice-color-primary-light);
+}
+
+:host(.row--selected.row--hoverable) .row-container:hover {
+  background-color: var(--snice-color-primary-lighter);
+}
+
+/* Highlighted State */
+:host(.row--highlighted) .row-container {
+  background-color: #fff3cd !important;
+  animation: row-highlight-fade 2s ease-out;
+}
+
+@keyframes row-highlight-fade {
+  0% {
+    background-color: #ffeaa7;
+  }
+  100% {
+    background-color: #fff3cd;
+  }
+}
+
+/* Focus States */
+:host(:focus) .row-container {
+  outline: 2px solid #007bff;
+  outline-offset: -2px;
+}
+
+:host(.row--selectable) {
+  tabindex: 0;
+}
+
+/* Striped Rows (applied by parent table) */
+:host(.row--striped) .row-container {
+  background-color: var(--snice-color-background-secondary);
+}
+
+/* Bordered Rows (applied by parent table) */
+:host(.row--bordered) .row-container {
+  border-bottom: 1px solid var(--snice-color-border);
+}
+
+/* Size Variants */
+:host(.row--small) .cell {
+  padding: 0.5rem 0.75rem; /* 8px 12px */
+  min-height: 2rem; /* 32px */
+  font-size: 0.75rem; /* 12px */
+}
+
+:host(.row--small) .row-container {
+  min-height: 2rem; /* 32px */
+}
+
+:host(.row--large) .cell {
+  padding: 1rem 1.25rem; /* 16px 20px */
+  min-height: 3.5rem; /* 56px */
+  font-size: 1rem; /* 16px */
+}
+
+:host(.row--large) .row-container {
+  min-height: 3.5rem; /* 56px */
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .cell {
+    padding: 0.5rem 0.75rem; /* 8px 12px */
+    font-size: 0.875rem; /* 14px */
+  }
+  
+  .cell--checkbox {
+    width: 2.5rem; /* 40px */
+    min-width: 2.5rem; /* 40px */
+    max-width: 2.5rem; /* 40px */
+    padding: 0.5rem; /* 8px */
+  }
+  
+  .row-checkbox {
+    width: 0.875rem; /* 14px */
+    height: 0.875rem; /* 14px */
+  }
+}
+
+/* Loading State */
+:host(.row--loading) .row-container {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+:host(.row--loading) .row-container::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+  animation: loading-shimmer 1.5s infinite;
+}
+
+@keyframes loading-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .row-container {
+    transition: none;
+  }
+  
+  :host(.row--highlighted) .row-container {
+    animation: none;
+    background-color: #fff3cd !important;
+  }
+  
+  :host(.row--loading) .row-container::after {
+    animation: none;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .cell {
+    border-right: 1px solid;
+  }
+  
+  .row-container {
+    border-bottom: 1px solid;
+  }
+  
+  :host(.row--selected) .row-container {
+    border: 2px solid;
+  }
+}