snice 1.14.3 → 2.1.0

package/components/table/snice-cell-date.ts

@@ -0,0 +1,210 @@
+import { element, property, watch, ready, query } from 'snice';
+import css from './snice-cell.css?inline';
+import type { DateFormat, SniceCellElement, ColumnType, ColumnAlign, ColumnDefinition } from './snice-table.types';
+
+@element('snice-cell-date')
+export class SniceCellDate extends HTMLElement implements SniceCellElement {
+  @property({ reflect: true })
+  align: ColumnAlign = 'left';
+
+  @property({ reflect: true })
+  type: ColumnType = 'date';
+
+  @property({ reflect: true })
+  value: any = '';
+
+  @property({ type: Object })
+  column: ColumnDefinition = {
+    key: '',
+    label: '',
+    type: 'date',
+    align: 'left'
+  };
+
+  @property({ type: Object })
+  rowData: any = null;
+
+  @query('.cell-content')
+  contentElement?: HTMLElement;
+  @property({ reflect: true, attribute: 'date-format' })
+  dateFormat: 'short' | 'medium' | 'long' | 'full' | 'custom' = 'short';
+
+  @property({ reflect: true, attribute: 'custom-format' })
+  customFormat?: string;
+
+  @property({ reflect: true })
+  locale: string = 'en-US';
+
+  @property({ type: Boolean, reflect: true, attribute: 'relative-time' })
+  relativeTime: boolean = false;
+
+  @property({ type: Boolean, reflect: true, attribute: 'show-time' })
+  showTime: boolean = false;
+
+  html() {
+    const formattedValue = this.formatDateValue();
+    const styles = this.getDateStyles();
+    
+    return `
+      <div class="cell-content cell-content--date" part="content" style="${styles}">
+        ${formattedValue}
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    this.applyAlignment();
+  }
+
+  private applyAlignment() {
+    this.style.textAlign = this.align;
+  }
+
+  @watch('align')
+  updateAlignment() {
+    this.applyAlignment();
+  }
+
+  @watch('value', 'column')
+  updateContent() {
+    if (this.contentElement) {
+      const formattedValue = this.formatDateValue();
+      const styles = this.getDateStyles();
+      this.contentElement.innerHTML = formattedValue;
+      this.contentElement.setAttribute('style', styles);
+    }
+  }
+
+  private formatDateValue(): string {
+    if (this.value === null || this.value === undefined || this.value === '') {
+      return '';
+    }
+
+    // Use custom formatter if provided
+    if (this.column.formatter) {
+      return this.column.formatter(this.value, this.rowData);
+    }
+
+    const date = new Date(this.value);
+    
+    if (isNaN(date.getTime())) {
+      return String(this.value);
+    }
+
+    // Show relative time if enabled
+    if (this.relativeTime) {
+      return this.formatRelativeTime(date);
+    }
+
+    // Use column date format or component properties
+    const format: DateFormat = this.column.dateFormat || {
+      format: this.dateFormat,
+      customFormat: this.customFormat,
+      locale: this.locale
+    };
+
+    // Handle custom format
+    if (format.customFormat || this.customFormat) {
+      return this.formatCustomDate(date, format.customFormat || this.customFormat!);
+    }
+
+    // Use Intl.DateTimeFormat
+    const options: Intl.DateTimeFormatOptions = {};
+    const formatType = format.format ?? this.dateFormat;
+    
+    switch (formatType) {
+      case 'short':
+        options.dateStyle = 'short';
+        break;
+      case 'medium':
+        options.dateStyle = 'medium';
+        break;
+      case 'long':
+        options.dateStyle = 'long';
+        break;
+      case 'full':
+        options.dateStyle = 'full';
+        break;
+    }
+
+    // Add time if requested
+    if (this.showTime) {
+      options.timeStyle = 'short';
+    }
+
+    const locale = format.locale ?? this.locale;
+    return new Intl.DateTimeFormat(locale, options).format(date);
+  }
+
+  private formatCustomDate(date: Date, format: string): string {
+    const tokens: Record<string, string> = {
+      'YYYY': date.getFullYear().toString(),
+      'YY': date.getFullYear().toString().slice(-2),
+      'MM': (date.getMonth() + 1).toString().padStart(2, '0'),
+      'M': (date.getMonth() + 1).toString(),
+      'DD': date.getDate().toString().padStart(2, '0'),
+      'D': date.getDate().toString(),
+      'HH': date.getHours().toString().padStart(2, '0'),
+      'H': date.getHours().toString(),
+      'mm': date.getMinutes().toString().padStart(2, '0'),
+      'm': date.getMinutes().toString(),
+      'ss': date.getSeconds().toString().padStart(2, '0'),
+      's': date.getSeconds().toString()
+    };
+
+    let formatted = format;
+    for (const [token, value] of Object.entries(tokens)) {
+      formatted = formatted.replace(new RegExp(token, 'g'), value);
+    }
+
+    return formatted;
+  }
+
+  private formatRelativeTime(date: Date): string {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSecs = Math.floor(diffMs / 1000);
+    const diffMins = Math.floor(diffSecs / 60);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSecs < 60) {
+      return 'Just now';
+    } else if (diffMins < 60) {
+      return `${diffMins} minute${diffMins === 1 ? '' : 's'} ago`;
+    } else if (diffHours < 24) {
+      return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
+    } else if (diffDays < 7) {
+      return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`;
+    } else {
+      // Fall back to formatted date for older dates
+      return new Intl.DateTimeFormat(this.locale, { dateStyle: 'short' }).format(date);
+    }
+  }
+
+  private getDateStyles(): string {
+    const date = new Date(this.value);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const isPast = date < now;
+    const isFuture = date > now;
+
+    // Apply CSS classes instead of direct styles
+    this.classList.remove('date--today', 'date--past', 'date--future');
+    
+    if (isToday) {
+      this.classList.add('date--today');
+    } else if (isPast) {
+      this.classList.add('date--past');
+    } else if (isFuture) {
+      this.classList.add('date--future');
+    }
+
+    return '';
+  }
+}

package/components/table/snice-cell-duration.ts

@@ -0,0 +1,91 @@
+import { element, property, watch, ready, query } from 'snice';
+import css from './snice-cell.css?inline';
+import type { SniceCellElement, ColumnType, ColumnAlign, ColumnDefinition } from './snice-table.types';
+
+@element('snice-cell-duration')
+export class SniceCellDuration extends HTMLElement implements SniceCellElement {
+  @property({ reflect: true })
+  align: ColumnAlign = 'right';
+
+  @property({ reflect: true })
+  type: ColumnType = 'duration';
+
+  @property({ reflect: true })
+  value: any = 0;
+
+  @property({ type: Object })
+  column: ColumnDefinition = {
+    key: '',
+    label: '',
+    type: 'duration',
+    align: 'right'
+  };
+
+  @property({ type: Object })
+  rowData: any = null;
+
+  @query('.cell-content')
+  contentElement?: HTMLElement;
+
+  html() {
+    const content = this.formatDuration();
+    
+    return `
+      <div class="cell-content cell-content--duration" part="content">
+        ${content}
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    this.applyAlignment();
+  }
+
+  private applyAlignment() {
+    this.style.textAlign = this.align;
+  }
+
+  @watch('align')
+  updateAlignment() {
+    this.applyAlignment();
+  }
+
+  @watch('value', 'column')
+  updateContent() {
+    if (this.contentElement) {
+      const content = this.formatDuration();
+      this.contentElement.innerHTML = content;
+    }
+  }
+
+  private formatDuration(): string {
+    if (this.value === null || this.value === undefined) {
+      return '';
+    }
+
+    // Use custom formatter if provided
+    if (this.column.formatter) {
+      return this.column.formatter(this.value, this.rowData);
+    }
+
+    const seconds = Number(this.value);
+    if (isNaN(seconds)) return String(this.value);
+    
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    
+    if (hours > 0) {
+      return `${hours}h ${minutes}m ${secs}s`;
+    } else if (minutes > 0) {
+      return `${minutes}m ${secs}s`;
+    } else {
+      return `${secs}s`;
+    }
+  }
+}

package/components/table/snice-cell-filesize.ts

@@ -0,0 +1,90 @@
+import { element, property, watch, ready, query } from 'snice';
+import css from './snice-cell.css?inline';
+import type { SniceCellElement, ColumnType, ColumnAlign, ColumnDefinition } from './snice-table.types';
+
+@element('snice-cell-filesize')
+export class SniceCellFilesize extends HTMLElement implements SniceCellElement {
+  @property({ reflect: true })
+  align: ColumnAlign = 'right';
+
+  @property({ reflect: true })
+  type: ColumnType = 'filesize';
+
+  @property({ reflect: true })
+  value: any = 0;
+
+  @property({ type: Object })
+  column: ColumnDefinition = {
+    key: '',
+    label: '',
+    type: 'filesize',
+    align: 'right'
+  };
+
+  @property({ type: Object })
+  rowData: any = null;
+
+  @query('.cell-content')
+  contentElement?: HTMLElement;
+
+  html() {
+    const content = this.formatFileSize();
+    
+    return `
+      <div class="cell-content cell-content--filesize" part="content">
+        ${content}
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    this.applyAlignment();
+  }
+
+  private applyAlignment() {
+    this.style.textAlign = this.align;
+  }
+
+  @watch('align')
+  updateAlignment() {
+    this.applyAlignment();
+  }
+
+  @watch('value', 'column')
+  updateContent() {
+    if (this.contentElement) {
+      const content = this.formatFileSize();
+      this.contentElement.innerHTML = content;
+    }
+  }
+
+  private formatFileSize(): string {
+    if (this.value === null || this.value === undefined) {
+      return '';
+    }
+
+    // Use custom formatter if provided
+    if (this.column.formatter) {
+      return this.column.formatter(this.value, this.rowData);
+    }
+
+    const bytes = Number(this.value);
+    if (isNaN(bytes)) return String(this.value);
+    
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+    
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+  }
+}

package/components/table/snice-cell-number.ts

@@ -0,0 +1,165 @@
+import { element, property, watch, ready, query } from 'snice';
+import css from './snice-cell.css?inline';
+import type { NumberFormat, SniceCellElement, ColumnType, ColumnAlign, ColumnDefinition } from './snice-table.types';
+
+@element('snice-cell-number')
+export class SniceCellNumber extends HTMLElement implements SniceCellElement {
+  @property({ reflect: true })
+  align: ColumnAlign = 'right';
+
+  @property({ reflect: true })
+  type: ColumnType = 'number';
+
+  @property({ reflect: true })
+  value: any = '';
+
+  @property({ type: Object })
+  column: ColumnDefinition = {
+    key: '',
+    label: '',
+    type: 'number',
+    align: 'right'
+  };
+
+  @property({ type: Object })
+  rowData: any = null;
+
+  @query('.cell-content')
+  contentElement?: HTMLElement;
+  @property({ type: Number, reflect: true })
+  decimals: number = 0;
+
+  @property({ type: Boolean, reflect: true, attribute: 'thousands-separator' })
+  thousandsSeparator: boolean = false;
+
+  @property({ reflect: true })
+  prefix: string = '';
+
+  @property({ reflect: true })
+  suffix: string = '';
+
+  @property({ reflect: true, attribute: 'negative-style' })
+  negativeStyle: 'parentheses' | 'red' | 'minus' = 'minus';
+
+  @property({ type: Boolean, reflect: true })
+  highlight: boolean = false;
+
+  html() {
+    const formattedValue = this.formatNumberValue();
+    const styles = this.getNumberStyles();
+    
+    return `
+      <div class="cell-content cell-content--number" part="content" style="${styles}">
+        ${formattedValue}
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    this.applyAlignment();
+  }
+
+  private applyAlignment() {
+    this.style.textAlign = this.align;
+  }
+
+  @watch('align')
+  updateAlignment() {
+    this.applyAlignment();
+  }
+
+  @watch('value', 'column')
+  updateContent() {
+    if (this.contentElement) {
+      const formattedValue = this.formatNumberValue();
+      const styles = this.getNumberStyles();
+      this.contentElement.innerHTML = formattedValue;
+      this.contentElement.setAttribute('style', styles);
+    }
+  }
+
+  private formatNumberValue(): string {
+    if (this.value === null || this.value === undefined || this.value === '') {
+      return '';
+    }
+
+    // Use custom formatter if provided
+    if (this.column.formatter) {
+      return this.column.formatter(this.value, this.rowData);
+    }
+
+    // Use column number format or component properties
+    const format: NumberFormat = this.column.numberFormat || {
+      decimals: this.decimals,
+      thousandsSeparator: this.thousandsSeparator,
+      prefix: this.prefix,
+      suffix: this.suffix,
+      negativeStyle: this.negativeStyle
+    };
+
+    const num = Number(this.value);
+    
+    if (isNaN(num)) {
+      return String(this.value);
+    }
+
+    let formatted = num.toFixed(format.decimals ?? this.decimals);
+    
+    // Add thousands separator
+    if (format.thousandsSeparator ?? this.thousandsSeparator) {
+      const parts = formatted.split('.');
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      formatted = parts.join('.');
+    }
+
+    // Handle negative numbers
+    if (num < 0) {
+      const negStyle = format.negativeStyle ?? this.negativeStyle;
+      if (negStyle === 'parentheses') {
+        formatted = `(${formatted.replace('-', '')})`;
+      } else if (negStyle === 'red') {
+        // Color will be handled in styles
+        formatted = formatted.replace('-', '');
+      }
+    }
+
+    // Add prefix and suffix
+    const prefix = format.prefix ?? this.prefix;
+    const suffix = format.suffix ?? this.suffix;
+    
+    if (prefix) formatted = prefix + formatted;
+    if (suffix) formatted = formatted + suffix;
+
+    return formatted;
+  }
+
+  private getNumberStyles(): string {
+    const num = Number(this.value);
+    
+    // Remove existing number classes
+    this.classList.remove('number--negative', 'number--positive', 'number--zero', 'number--highlighted');
+    
+    // Apply CSS classes instead of direct styles
+    if (num < 0) {
+      this.classList.add('number--negative');
+      const negStyle = this.column.numberFormat?.negativeStyle ?? this.negativeStyle;
+      if (negStyle === 'red') {
+        this.classList.add('number--negative-red');
+      }
+    } else if (num > 0) {
+      this.classList.add('number--positive');
+      if (this.highlight) {
+        this.classList.add('number--highlighted');
+      }
+    } else if (num === 0) {
+      this.classList.add('number--zero');
+    }
+
+    return 'text-align: right'; // Keep text alignment as style for now
+  }
+}

package/components/table/snice-cell-progress.ts

@@ -0,0 +1,83 @@
+import { element, property, watch, ready, query } from 'snice';
+import css from './snice-cell.css?inline';
+import type { ProgressFormat, SniceCellElement, ColumnType, ColumnAlign, ColumnDefinition } from './snice-table.types';
+import './snice-progress';
+
+@element('snice-cell-progress')
+export class SniceCellProgress extends HTMLElement implements SniceCellElement {
+  @property({ reflect: true })
+  align: ColumnAlign = 'left';
+
+  @property({ reflect: true })
+  type: ColumnType = 'progress';
+
+  @property({ reflect: true })
+  value: any = 0;
+
+  @property({ type: Object })
+  column: ColumnDefinition = {
+    key: '',
+    label: '',
+    type: 'progress',
+    align: 'left'
+  };
+
+  @property({ type: Object })
+  rowData: any = null;
+
+  @query('.cell-content')
+  contentElement?: HTMLElement;
+
+  html() {
+    return `
+      <div class="cell-content cell-content--progress" part="content">
+        <!-- Progress component will be created here -->
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    this.applyAlignment();
+    this.createProgressElement();
+  }
+
+  private applyAlignment() {
+    this.style.textAlign = this.align;
+  }
+
+  @watch('align')
+  updateAlignment() {
+    this.applyAlignment();
+  }
+
+  @watch('value', 'column')
+  updateContent() {
+    this.createProgressElement();
+  }
+
+  private createProgressElement() {
+    if (!this.contentElement) return;
+    
+    // Clear existing content
+    this.contentElement.innerHTML = '';
+    
+    // Create progress element
+    const progress = document.createElement('snice-progress') as any;
+    progress.value = Number(this.value) || 0;
+    
+    // Apply format from column
+    const format: ProgressFormat = this.column.progressFormat || {};
+    progress.max = format.max ?? 100;
+    progress.color = format.color ?? '#3b82f6';
+    progress.backgroundColor = format.backgroundColor ?? '#e5e7eb';
+    progress.height = format.height ?? '0.5rem';
+    progress.showPercentage = format.showPercentage ?? false;
+    
+    this.contentElement.appendChild(progress);
+  }
+}