snice 2.1.4 → 2.2.0

package/components/table/snice-row.ts

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

@@ -1,241 +0,0 @@
-/* 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;
-  }
-}