snice 2.1.4 → 2.2.0

package/components/table/snice-column.ts

@@ -1,353 +0,0 @@
-import { element, property, watch } from 'snice';
-import type { 
-  SniceColumnElement, 
-  ColumnType, 
-  ColumnAlign, 
-  ColumnDefinition,
-  NumberFormat,
-  DateFormat,
-  BooleanFormat,
-  RatingFormat,
-  ProgressFormat,
-  SparklineFormat,
-  CellStyle,
-  ConditionalFormat
-} from './snice-table.types';
-
-@element('snice-column')
-export class SniceColumn extends HTMLElement implements SniceColumnElement {
-  @property({ reflect: true })
-  key: string = '';
-
-  @property({ reflect: true })
-  label: string = '';
-
-  @property({ reflect: true })
-  type: ColumnType = 'text';
-
-  @property({ reflect: true })
-  align: ColumnAlign = 'left';
-
-  @property({ reflect: true })
-  width: string = '';
-
-  @property({ type: Boolean, reflect: true })
-  sortable: boolean = true;
-
-  @property({ type: Boolean, reflect: true })
-  filterable: boolean = true;
-
-  @property({ type: Boolean, reflect: true })
-  wrap: boolean = false;
-
-  @property({ type: Boolean, reflect: true })
-  ellipsis: boolean = true;
-
-  @property({ type: Boolean, reflect: true })
-  tooltip: boolean = false;
-
-  // Number formatting properties
-  @property({ type: Number, attribute: 'decimals' })
-  decimals?: number;
-
-  @property({ type: Boolean, attribute: 'thousands-separator' })
-  thousandsSeparator?: boolean;
-
-  @property({ attribute: 'number-prefix' })
-  numberPrefix?: string;
-
-  @property({ attribute: 'number-suffix' })
-  numberSuffix?: string;
-
-  @property({ attribute: 'negative-style' })
-  negativeStyle?: 'parentheses' | 'red' | 'minus';
-
-  // Date formatting properties
-  @property({ attribute: 'date-format' })
-  dateFormat?: 'short' | 'medium' | 'long' | 'full' | 'custom';
-
-  @property({ attribute: 'custom-date-format' })
-  customDateFormat?: string;
-
-  @property({ attribute: 'date-locale' })
-  dateLocale?: string;
-
-  // Boolean formatting properties
-  @property({ attribute: 'true-value' })
-  trueValue?: string;
-
-  @property({ attribute: 'false-value' })
-  falseValue?: string;
-
-  @property({ type: Boolean, attribute: 'use-symbols' })
-  useSymbols?: boolean;
-
-  @property({ attribute: 'true-symbol' })
-  trueSymbol?: string;
-
-  @property({ attribute: 'false-symbol' })
-  falseSymbol?: string;
-
-  // Rating formatting properties
-  @property({ type: Number, attribute: 'rating-max' })
-  ratingMax?: number;
-
-  @property({ attribute: 'rating-symbol' })
-  ratingSymbol?: string;
-
-  @property({ attribute: 'rating-empty-symbol' })
-  ratingEmptySymbol?: string;
-
-  @property({ attribute: 'rating-color' })
-  ratingColor?: string;
-
-  // Progress formatting properties
-  @property({ type: Number, attribute: 'progress-max' })
-  progressMax?: number;
-
-  @property({ type: Boolean, attribute: 'show-percentage' })
-  showPercentage?: boolean;
-
-  @property({ attribute: 'progress-color' })
-  progressColor?: string;
-
-  @property({ attribute: 'progress-bg-color' })
-  progressBgColor?: string;
-
-  @property({ attribute: 'progress-height' })
-  progressHeight?: string;
-
-  // Sparkline formatting properties
-  @property({ attribute: 'sparkline-type' })
-  sparklineType?: 'line' | 'bar' | 'area';
-
-  @property({ attribute: 'sparkline-color' })
-  sparklineColor?: string;
-
-  @property({ type: Number, attribute: 'sparkline-width' })
-  sparklineWidth?: number;
-
-  @property({ type: Number, attribute: 'sparkline-height' })
-  sparklineHeight?: number;
-
-  // Style properties
-  @property({ attribute: 'cell-bg-color' })
-  cellBgColor?: string;
-
-  @property({ attribute: 'cell-color' })
-  cellColor?: string;
-
-  @property({ attribute: 'cell-font-weight' })
-  cellFontWeight?: 'normal' | 'bold' | 'lighter';
-
-  @property({ attribute: 'cell-font-style' })
-  cellFontStyle?: 'normal' | 'italic';
-
-  @property({ attribute: 'cell-font-size' })
-  cellFontSize?: string;
-
-  @property({ attribute: 'cell-text-decoration' })
-  cellTextDecoration?: 'none' | 'underline' | 'line-through';
-
-  private formatter?: (value: any, row?: any) => string;
-  private conditionalFormats: ConditionalFormat[] = [];
-
-  html() {
-    return `<slot></slot>`;
-  }
-
-  // Set custom formatter function
-  setFormatter(formatter: (value: any, row?: any) => string) {
-    this.formatter = formatter;
-    this.notifyTableOfChange();
-  }
-
-  // Add conditional formatting rule
-  addConditionalFormat(format: ConditionalFormat) {
-    this.conditionalFormats.push(format);
-    this.notifyTableOfChange();
-  }
-
-  // Remove conditional formatting rule
-  removeConditionalFormat(index: number) {
-    this.conditionalFormats.splice(index, 1);
-    this.notifyTableOfChange();
-  }
-
-  // Clear all conditional formatting
-  clearConditionalFormats() {
-    this.conditionalFormats = [];
-    this.notifyTableOfChange();
-  }
-
-  // Get the complete column definition for the table
-  getColumnDefinition(): ColumnDefinition {
-    const definition: ColumnDefinition = {
-      key: this.key,
-      label: this.label,
-      type: this.type,
-      align: this.align,
-      width: this.width,
-      sortable: this.sortable,
-      filterable: this.filterable,
-      wrap: this.wrap,
-      ellipsis: this.ellipsis,
-      tooltip: this.tooltip,
-      formatter: this.formatter,
-      conditionalFormats: this.conditionalFormats
-    };
-
-    // Add type-specific formatting
-    if (this.type === 'number' || this.type === 'currency' || this.type === 'percent' || 
-        this.type === 'accounting' || this.type === 'scientific' || this.type === 'fraction') {
-      const numberFormat: NumberFormat = {};
-      if (this.decimals !== undefined) numberFormat.decimals = this.decimals;
-      if (this.thousandsSeparator !== undefined) numberFormat.thousandsSeparator = this.thousandsSeparator;
-      if (this.numberPrefix) numberFormat.prefix = this.numberPrefix;
-      if (this.numberSuffix) numberFormat.suffix = this.numberSuffix;
-      if (this.negativeStyle) numberFormat.negativeStyle = this.negativeStyle;
-      
-      if (Object.keys(numberFormat).length > 0) {
-        definition.numberFormat = numberFormat;
-      }
-    }
-
-    if (this.type === 'date') {
-      const dateFormat: DateFormat = {};
-      if (this.dateFormat) dateFormat.format = this.dateFormat;
-      if (this.customDateFormat) dateFormat.customFormat = this.customDateFormat;
-      if (this.dateLocale) dateFormat.locale = this.dateLocale;
-      
-      if (Object.keys(dateFormat).length > 0) {
-        definition.dateFormat = dateFormat;
-      }
-    }
-
-    if (this.type === 'boolean') {
-      const booleanFormat: BooleanFormat = {};
-      if (this.trueValue) booleanFormat.trueValue = this.trueValue;
-      if (this.falseValue) booleanFormat.falseValue = this.falseValue;
-      if (this.useSymbols !== undefined) booleanFormat.useSymbols = this.useSymbols;
-      if (this.trueSymbol) booleanFormat.trueSymbol = this.trueSymbol;
-      if (this.falseSymbol) booleanFormat.falseSymbol = this.falseSymbol;
-      
-      if (Object.keys(booleanFormat).length > 0) {
-        definition.booleanFormat = booleanFormat;
-      }
-    }
-
-    if (this.type === 'rating') {
-      const ratingFormat: RatingFormat = {};
-      if (this.ratingMax !== undefined) ratingFormat.max = this.ratingMax;
-      if (this.ratingSymbol) ratingFormat.symbol = this.ratingSymbol;
-      if (this.ratingEmptySymbol) ratingFormat.emptySymbol = this.ratingEmptySymbol;
-      if (this.ratingColor) ratingFormat.color = this.ratingColor;
-      
-      if (Object.keys(ratingFormat).length > 0) {
-        definition.ratingFormat = ratingFormat;
-      }
-    }
-
-    if (this.type === 'progress') {
-      const progressFormat: ProgressFormat = {};
-      if (this.progressMax !== undefined) progressFormat.max = this.progressMax;
-      if (this.showPercentage !== undefined) progressFormat.showPercentage = this.showPercentage;
-      if (this.progressColor) progressFormat.color = this.progressColor;
-      if (this.progressBgColor) progressFormat.backgroundColor = this.progressBgColor;
-      if (this.progressHeight) progressFormat.height = this.progressHeight;
-      
-      if (Object.keys(progressFormat).length > 0) {
-        definition.progressFormat = progressFormat;
-      }
-    }
-
-    if (this.type === 'sparkline') {
-      const sparklineFormat: SparklineFormat = {};
-      if (this.sparklineType) sparklineFormat.type = this.sparklineType;
-      if (this.sparklineColor) sparklineFormat.color = this.sparklineColor;
-      if (this.sparklineWidth !== undefined) sparklineFormat.width = this.sparklineWidth;
-      if (this.sparklineHeight !== undefined) sparklineFormat.height = this.sparklineHeight;
-      
-      if (Object.keys(sparklineFormat).length > 0) {
-        definition.sparklineFormat = sparklineFormat;
-      }
-    }
-
-    // Add cell style if any style properties are set
-    const cellStyle: CellStyle = {};
-    if (this.cellBgColor) cellStyle.backgroundColor = this.cellBgColor;
-    if (this.cellColor) cellStyle.color = this.cellColor;
-    if (this.cellFontWeight) cellStyle.fontWeight = this.cellFontWeight;
-    if (this.cellFontStyle) cellStyle.fontStyle = this.cellFontStyle;
-    if (this.cellFontSize) cellStyle.fontSize = this.cellFontSize;
-    if (this.cellTextDecoration) cellStyle.textDecoration = this.cellTextDecoration;
-    
-    if (Object.keys(cellStyle).length > 0) {
-      definition.style = cellStyle;
-    }
-
-    return definition;
-  }
-
-  @watch('key', 'label', 'type', 'align', 'width', 'sortable', 'filterable', 'wrap', 'ellipsis', 'tooltip')
-  private handleBasicPropsChange() {
-    this.notifyTableOfChange();
-  }
-
-  @watch('decimals', 'thousandsSeparator', 'numberPrefix', 'numberSuffix', 'negativeStyle')
-  private handleNumberFormatChange() {
-    if (this.type === 'number' || this.type === 'currency' || this.type === 'percent' || 
-        this.type === 'accounting' || this.type === 'scientific' || this.type === 'fraction') {
-      this.notifyTableOfChange();
-    }
-  }
-
-  @watch('dateFormat', 'customDateFormat', 'dateLocale')
-  private handleDateFormatChange() {
-    if (this.type === 'date') {
-      this.notifyTableOfChange();
-    }
-  }
-
-  @watch('trueValue', 'falseValue', 'useSymbols', 'trueSymbol', 'falseSymbol')
-  private handleBooleanFormatChange() {
-    if (this.type === 'boolean') {
-      this.notifyTableOfChange();
-    }
-  }
-
-  @watch('ratingMax', 'ratingSymbol', 'ratingEmptySymbol', 'ratingColor')
-  private handleRatingFormatChange() {
-    if (this.type === 'rating') {
-      this.notifyTableOfChange();
-    }
-  }
-
-  @watch('progressMax', 'showPercentage', 'progressColor', 'progressBgColor', 'progressHeight')
-  private handleProgressFormatChange() {
-    if (this.type === 'progress') {
-      this.notifyTableOfChange();
-    }
-  }
-
-  @watch('sparklineType', 'sparklineColor', 'sparklineWidth', 'sparklineHeight')
-  private handleSparklineFormatChange() {
-    if (this.type === 'sparkline') {
-      this.notifyTableOfChange();
-    }
-  }
-
-  @watch('cellBgColor', 'cellColor', 'cellFontWeight', 'cellFontStyle', 'cellFontSize', 'cellTextDecoration')
-  private handleStyleChange() {
-    this.notifyTableOfChange();
-  }
-
-  private notifyTableOfChange() {
-    // Dispatch event to parent table to notify of column definition change
-    this.dispatchEvent(new CustomEvent('@snice/column-changed', {
-      detail: { column: this.getColumnDefinition() },
-      bubbles: true,
-      composed: true
-    }));
-  }
-}

package/components/table/snice-header.css

@@ -1,243 +0,0 @@
-/* Header Container */
-.header-container {
-  display: flex;
-  align-items: center;
-  background: var(--snice-color-background-secondary);
-  border-bottom: 2px solid var(--snice-color-border);
-  font-weight: var(--snice-font-weight-semibold);
-  font-size: var(--snice-font-size-sm);
-  line-height: var(--snice-line-height-dense);
-}
-
-/* Header Cell Base */
-.header-cell {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--snice-spacing-sm) var(--snice-spacing-md);
-  border-right: 1px solid var(--snice-color-border);
-  min-height: var(--snice-spacing-2xl);
-  position: relative;
-  background: var(--snice-color-background-secondary);
-  transition: background-color var(--snice-transition-fast) ease;
-}
-
-.header-cell:last-child {
-  border-right: none;
-}
-
-/* Checkbox Cell */
-.header-cell--checkbox {
-  width: var(--snice-spacing-2xl);
-  min-width: var(--snice-spacing-2xl);
-  max-width: var(--snice-spacing-2xl);
-  padding: var(--snice-spacing-sm);
-  justify-content: center;
-}
-
-.select-all-checkbox {
-  width: 1rem; /* 16px */
-  height: 1rem; /* 16px */
-  cursor: pointer;
-}
-
-.select-all-checkbox:indeterminate {
-  opacity: 0.6;
-}
-
-/* Header Cell Content */
-.header-cell-content {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem; /* 8px */
-  flex: 1;
-  min-width: 0;
-}
-
-.header-cell-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Sortable Headers */
-.header-cell[data-sortable="true"] {
-  cursor: pointer;
-  user-select: none;
-}
-
-.header-cell[data-sortable="true"]:hover {
-  background-color: #e9ecef;
-}
-
-.header-cell[data-sortable="true"]:focus {
-  outline: 2px solid #007bff;
-  outline-offset: -2px;
-}
-
-/* Sort Indicator */
-.sort-indicator {
-  display: inline-block;
-  font-size: 0.75rem; /* 12px */
-  color: #6c757d;
-  transition: color 0.15s ease, transform 0.15s ease;
-  line-height: 1;
-  min-width: 0.75rem; /* 12px */
-  text-align: center;
-}
-
-.sort-indicator--neutral {
-  opacity: 0.5;
-}
-
-.sort-indicator--ascending,
-.sort-indicator--descending {
-  color: #007bff;
-  opacity: 1;
-}
-
-.header-cell[data-sortable="true"]:hover .sort-indicator--neutral {
-  opacity: 0.8;
-}
-
-/* Filter Button */
-.filter-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem; /* 24px */
-  height: 1.5rem; /* 24px */
-  border: 1px solid #dee2e6;
-  border-radius: 0.25rem; /* 4px */
-  background: white;
-  color: #6c757d;
-  cursor: pointer;
-  font-size: 0.75rem; /* 12px */
-  transition: all 0.15s ease;
-}
-
-.filter-button:hover {
-  background: #f8f9fa;
-  border-color: #adb5bd;
-  color: #495057;
-}
-
-.filter-button:focus {
-  outline: 2px solid #007bff;
-  outline-offset: -2px;
-}
-
-/* Column Type Specific Styles */
-.header-cell--number,
-.header-cell--currency,
-.header-cell--percent {
-  text-align: right;
-}
-
-.header-cell--date {
-  min-width: 8rem; /* 128px */
-}
-
-.header-cell--boolean {
-  min-width: 4rem; /* 64px */
-  text-align: center;
-}
-
-.header-cell--rating {
-  min-width: 6rem; /* 96px */
-  text-align: center;
-}
-
-.header-cell--progress {
-  min-width: 8rem; /* 128px */
-}
-
-.header-cell--sparkline {
-  min-width: 6rem; /* 96px */
-  text-align: center;
-}
-
-/* State Classes */
-:host(.header--sticky) .header-container {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-:host(.header--selectable) .header-cell--checkbox {
-  display: flex;
-}
-
-:host(:not(.header--selectable)) .header-cell--checkbox {
-  display: none;
-}
-
-/* Highlighting */
-.header-cell--highlighted {
-  background-color: #fff3cd !important;
-  animation: highlight-fade 2s ease-out;
-}
-
-@keyframes highlight-fade {
-  0% {
-    background-color: #ffeaa7;
-  }
-  100% {
-    background-color: #fff3cd;
-  }
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .header-cell {
-    padding: 0.5rem 0.75rem; /* 8px 12px */
-    font-size: 0.75rem; /* 12px */
-    min-height: 2.5rem; /* 40px */
-  }
-  
-  .header-cell-label {
-    font-size: 0.75rem; /* 12px */
-  }
-  
-  .sort-indicator {
-    font-size: 0.625rem; /* 10px */
-  }
-  
-  .filter-button {
-    width: 1.25rem; /* 20px */
-    height: 1.25rem; /* 20px */
-    font-size: 0.625rem; /* 10px */
-  }
-}
-
-/* Accessibility */
-@media (prefers-reduced-motion: reduce) {
-  .header-cell,
-  .sort-indicator,
-  .filter-button {
-    transition: none;
-  }
-  
-  .header-cell--highlighted {
-    animation: none;
-    background-color: #fff3cd !important;
-  }
-}
-
-/* High Contrast Mode */
-@media (prefers-contrast: high) {
-  .header-cell {
-    border-right: 2px solid;
-  }
-  
-  .header-container {
-    border-bottom: 3px solid;
-  }
-  
-  .filter-button {
-    border: 2px solid;
-  }
-}