snice 2.1.5 → 2.2.0

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

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

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

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

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

@@ -1,83 +0,0 @@
-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);
-  }
-}