snice 2.1.5 → 2.2.1

package/components/table/snice-header.ts

@@ -1,261 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,255 +0,0 @@
-: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;
-  }
-}