snice 1.14.3 → 2.1.0

package/components/table/snice-column.ts

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

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