@ticatec/uniface-element 0.2.4 → 0.3.0

package/dist/concise-data-table/README.md

@@ -0,0 +1,606 @@
+# ConciseListTable Component
+
+A high-performance, lightweight data table component with auto-scroll functionality, custom formatting, and responsive design. Perfect for dashboards, data displays, and real-time monitoring interfaces.
+
+## Features
+
+- **High Performance**: Efficient rendering with minimal DOM manipulation
+- **Auto-Scroll**: Seamless infinite scrolling for continuous data display
+- **Flexible Columns**: Configurable width, alignment, and custom formatting
+- **Responsive Design**: Automatic width adjustment with ResizeObserver
+- **Accessibility**: ARIA attributes and keyboard navigation support
+- **Custom Styling**: Comprehensive theming and styling options
+- **Event Handling**: Row click events and focus management
+- **Type Safety**: Full TypeScript support with detailed interfaces
+
+## Basic Usage
+
+```svelte
+<script>
+import ConciseListTable, { type Column, type TableOptions } from '@ticatec/uniface-element/ConciseListTable';
+
+const columns: Column[] = [
+  { title: 'Name', field: 'name', width: 150, align: 'left' },
+  { title: 'Age', field: 'age', width: 80, align: 'center' },
+  { title: 'Email', field: 'email', width: 200, weight: 1 }
+];
+
+const data = [
+  { name: 'John Doe', age: 30, email: 'john@example.com' },
+  { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
+  { name: 'Bob Johnson', age: 35, email: 'bob@example.com' }
+];
+
+const options: TableOptions = {
+  headerHeight: 40,
+  rowHeight: 35,
+  backgroundColor: '#ffffff',
+  headerBackgroundColor: '#f5f5f5'
+};
+
+const handleRowClick = (row) => {
+  console.log('Clicked row:', row);
+};
+</script>
+
+<ConciseListTable 
+  list={data}
+  {columns}
+  {options}
+  rowClickHandler={handleRowClick}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `list` | `Array<any>` | - | Array of data objects to display |
+| `columns` | `Array<Column>` | - | Column definitions with configuration |
+| `options` | `TableOptions` | - | Table styling and behavior options |
+| `autoScroll` | `boolean` | `false` | Enable automatic scrolling |
+| `scrollInterval` | `number` | `2000` | Milliseconds between scroll steps |
+| `rowClickHandler` | `RowClickHandler \| null` | `null` | Row click event handler |
+| `style` | `string` | `''` | Custom CSS styles for container |
+| `className` | `string` | `''` | Additional CSS classes |
+| `onfocus` | `((event: FocusEvent) => void) \| null` | `null` | Focus event handler |
+| `onblur` | `((event: FocusEvent) => void) \| null` | `null` | Blur event handler |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `setFocus()` | Programmatically focus the first table row |
+
+## Column Interface
+
+```typescript
+interface Column {
+  title: string;                    // Display title for column header
+  field: string;                    // Field name in data object
+  width: number;                    // Width in pixels
+  align?: "left" | "center" | "right"; // Text alignment
+  weight?: number;                  // Flex weight (0 = fixed, >0 = proportional)
+  formatter?: (value: any) => string; // Custom formatter function
+  escapeHTML?: boolean;             // Allow HTML content in cells
+}
+```
+
+## TableOptions Interface
+
+```typescript
+interface TableOptions {
+  backgroundColor?: string;           // Table background color
+  color?: string;                    // Table text color
+  headerHeight?: number;             // Header row height in pixels
+  headerBackgroundColor?: string;    // Header background color
+  headerColor?: string;              // Header text color
+  alternativeBackgroundColor?: string; // Alternate row background color
+  alternativeColor?: string;         // Alternate row text color
+  rowHeight?: number;                // Data row height in pixels
+}
+```
+
+## Basic Examples
+
+### Simple Data Table
+
+```svelte
+<script>
+import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';
+
+const employees = [
+  { id: 1, name: 'Alice Johnson', department: 'Engineering', salary: 75000 },
+  { id: 2, name: 'Bob Smith', department: 'Marketing', salary: 65000 },
+  { id: 3, name: 'Carol Williams', department: 'Sales', salary: 70000 }
+];
+
+const columns = [
+  { title: 'ID', field: 'id', width: 60, align: 'center' },
+  { title: 'Name', field: 'name', width: 150, align: 'left' },
+  { title: 'Department', field: 'department', width: 120, align: 'center' },
+  { title: 'Salary', field: 'salary', width: 100, align: 'right', 
+    formatter: (value) => `$${value.toLocaleString()}` }
+];
+
+const options = {
+  headerHeight: 40,
+  rowHeight: 35,
+  headerBackgroundColor: '#f8f9fa',
+  alternativeBackgroundColor: '#f8f9fa'
+};
+</script>
+
+<ConciseListTable 
+  list={employees}
+  {columns}
+  {options}
+/>
+```
+
+### Table with Auto-Scroll
+
+```svelte
+<script>
+import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';
+
+const stockPrices = [
+  { symbol: 'AAPL', price: 150.25, change: '+2.15', volume: '45.2M' },
+  { symbol: 'GOOGL', price: 2800.50, change: '-12.30', volume: '1.8M' },
+  { symbol: 'MSFT', price: 305.75, change: '+1.45', volume: '28.5M' },
+  { symbol: 'TSLA', price: 850.20, change: '+15.60', volume: '35.1M' },
+  // ... more data
+];
+
+const columns = [
+  { title: 'Symbol', field: 'symbol', width: 80, align: 'center' },
+  { title: 'Price', field: 'price', width: 100, align: 'right',
+    formatter: (value) => `$${value.toFixed(2)}` },
+  { title: 'Change', field: 'change', width: 80, align: 'right' },
+  { title: 'Volume', field: 'volume', width: 100, align: 'right' }
+];
+
+const options = {
+  rowHeight: 30,
+  headerHeight: 35,
+  backgroundColor: '#000',
+  color: '#00ff00',
+  headerBackgroundColor: '#333',
+  headerColor: '#fff'
+};
+</script>
+
+<div style="height: 300px;">
+  <ConciseListTable 
+    list={stockPrices}
+    {columns}
+    {options}
+    autoScroll={true}
+    scrollInterval={3000}
+  />
+</div>
+```
+
+### Table with Custom Formatting
+
+```svelte
+<script>
+import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';
+
+const orders = [
+  { id: 'ORD-001', customer: 'John Doe', date: '2024-01-15', 
+    amount: 299.99, status: 'shipped' },
+  { id: 'ORD-002', customer: 'Jane Smith', date: '2024-01-16', 
+    amount: 149.50, status: 'pending' },
+  { id: 'ORD-003', customer: 'Bob Johnson', date: '2024-01-17', 
+    amount: 599.99, status: 'delivered' }
+];
+
+const formatDate = (dateStr) => {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    month: 'short', day: 'numeric', year: 'numeric'
+  });
+};
+
+const formatStatus = (status) => {
+  const colors = {
+    shipped: '#ffc107',
+    pending: '#6c757d', 
+    delivered: '#28a745'
+  };
+  return `<span style="color: ${colors[status]}; font-weight: bold;">${status.toUpperCase()}</span>`;
+};
+
+const columns = [
+  { title: 'Order ID', field: 'id', width: 100, align: 'left' },
+  { title: 'Customer', field: 'customer', width: 150, weight: 1 },
+  { title: 'Date', field: 'date', width: 120, align: 'center', 
+    formatter: formatDate },
+  { title: 'Amount', field: 'amount', width: 100, align: 'right',
+    formatter: (value) => `$${value.toFixed(2)}` },
+  { title: 'Status', field: 'status', width: 100, align: 'center',
+    formatter: formatStatus, escapeHTML: true }
+];
+
+const options = {
+  headerHeight: 45,
+  rowHeight: 40,
+  headerBackgroundColor: '#007bff',
+  headerColor: '#ffffff',
+  alternativeBackgroundColor: '#f8f9fa'
+};
+</script>
+
+<ConciseListTable 
+  list={orders}
+  {columns}
+  {options}
+/>
+```
+
+### Responsive Table with Flexible Columns
+
+```svelte
+<script>
+import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';
+
+const products = [
+  { id: 1, name: 'Wireless Headphones Premium Edition', 
+    category: 'Electronics', price: 199.99, stock: 15 },
+  { id: 2, name: 'Ergonomic Office Chair with Lumbar Support', 
+    category: 'Furniture', price: 299.99, stock: 8 },
+  { id: 3, name: 'Smart Home Security Camera System', 
+    category: 'Electronics', price: 149.99, stock: 23 }
+];
+
+const columns = [
+  { title: 'ID', field: 'id', width: 50, align: 'center' },
+  { title: 'Product Name', field: 'name', width: 200, weight: 2 }, // Flexible
+  { title: 'Category', field: 'category', width: 120, weight: 1 }, // Flexible
+  { title: 'Price', field: 'price', width: 100, align: 'right',
+    formatter: (value) => `$${value.toFixed(2)}` },
+  { title: 'Stock', field: 'stock', width: 80, align: 'center' }
+];
+
+const options = {
+  headerHeight: 40,
+  rowHeight: 45,
+  backgroundColor: '#ffffff',
+  headerBackgroundColor: '#e9ecef',
+  alternativeBackgroundColor: '#f8f9fa'
+};
+</script>
+
+<div style="width: 100%; min-width: 600px;">
+  <ConciseListTable 
+    list={products}
+    {columns}
+    {options}
+  />
+</div>
+```
+
+## Event Handling
+
+```svelte
+<script>
+import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';
+
+let selectedRow = null;
+let focusCount = 0;
+let tableRef;
+
+const data = [
+  { id: 1, name: 'Item 1', value: 100 },
+  { id: 2, name: 'Item 2', value: 200 },
+  { id: 3, name: 'Item 3', value: 300 }
+];
+
+const columns = [
+  { title: 'ID', field: 'id', width: 60, align: 'center' },
+  { title: 'Name', field: 'name', width: 150 },
+  { title: 'Value', field: 'value', width: 100, align: 'right' }
+];
+
+const options = {
+  headerHeight: 35,
+  rowHeight: 30
+};
+
+const handleRowClick = (row) => {
+  selectedRow = row;
+  console.log('Selected row:', row);
+};
+
+const handleFocus = (event) => {
+  focusCount++;
+  console.log('Table focused', focusCount);
+};
+
+const handleBlur = (event) => {
+  console.log('Table blurred');
+};
+
+const focusTable = () => {
+  tableRef?.setFocus();
+};
+</script>
+
+<div>
+  <button on:click={focusTable}>Focus Table</button>
+  
+  <ConciseListTable 
+    bind:this={tableRef}
+    list={data}
+    {columns}
+    {options}
+    rowClickHandler={handleRowClick}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+  />
+  
+  {#if selectedRow}
+    <div class="selected-info">
+      Selected: {selectedRow.name} (ID: {selectedRow.id})
+    </div>
+  {/if}
+  
+  <div class="focus-info">
+    Focus count: {focusCount}
+  </div>
+</div>
+
+<style>
+  .selected-info, .focus-info {
+    margin-top: 10px;
+    padding: 8px;
+    background: #e7f3ff;
+    border: 1px solid #b3d9ff;
+    border-radius: 4px;
+  }
+</style>
+```
+
+## Advanced Examples
+
+### Real-Time Data Dashboard
+
+```svelte
+<script>
+import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';
+import { onMount, onDestroy } from 'svelte';
+
+let realtimeData = [];
+let updateInterval;
+
+// Simulate real-time data updates
+const generateRandomData = () => {
+  return Array.from({ length: 20 }, (_, i) => ({
+    id: `SRV-${String(i + 1).padStart(3, '0')}`,
+    name: `Server ${i + 1}`,
+    cpu: (Math.random() * 100).toFixed(1),
+    memory: (Math.random() * 100).toFixed(1),
+    disk: (Math.random() * 100).toFixed(1),
+    status: Math.random() > 0.8 ? 'warning' : 'healthy',
+    uptime: Math.floor(Math.random() * 365) + 1
+  }));
+};
+
+const columns = [
+  { title: 'Server ID', field: 'id', width: 100, align: 'center' },
+  { title: 'Name', field: 'name', width: 120, weight: 1 },
+  { title: 'CPU %', field: 'cpu', width: 80, align: 'right',
+    formatter: (value) => `${value}%` },
+  { title: 'Memory %', field: 'memory', width: 80, align: 'right',
+    formatter: (value) => `${value}%` },
+  { title: 'Disk %', field: 'disk', width: 80, align: 'right',
+    formatter: (value) => `${value}%` },
+  { title: 'Status', field: 'status', width: 100, align: 'center',
+    formatter: (status) => {
+      const color = status === 'healthy' ? '#28a745' : '#ffc107';
+      return `<span style="color: ${color}; font-weight: bold;">${status.toUpperCase()}</span>`;
+    },
+    escapeHTML: true
+  },
+  { title: 'Uptime (days)', field: 'uptime', width: 120, align: 'right' }
+];
+
+const options = {
+  headerHeight: 40,
+  rowHeight: 35,
+  backgroundColor: '#1a1a1a',
+  color: '#ffffff',
+  headerBackgroundColor: '#333333',
+  headerColor: '#ffffff',
+  alternativeBackgroundColor: '#2a2a2a'
+};
+
+onMount(() => {
+  realtimeData = generateRandomData();
+  
+  // Update data every 5 seconds
+  updateInterval = setInterval(() => {
+    realtimeData = generateRandomData();
+  }, 5000);
+});
+
+onDestroy(() => {
+  if (updateInterval) {
+    clearInterval(updateInterval);
+  }
+});
+</script>
+
+<div class="dashboard">
+  <h3>Server Monitoring Dashboard</h3>
+  <div style="height: 400px; border: 1px solid #333;">
+    <ConciseListTable 
+      list={realtimeData}
+      {columns}
+      {options}
+      autoScroll={true}
+      scrollInterval={4000}
+    />
+  </div>
+</div>
+
+<style>
+  .dashboard {
+    background: #1a1a1a;
+    color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+  }
+  
+  .dashboard h3 {
+    margin: 0 0 16px 0;
+    color: #ffffff;
+  }
+</style>
+```
+
+### Financial Trading Table
+
+```svelte
+<script>
+import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';
+
+const tradingData = [
+  { symbol: 'AAPL', price: 150.25, change: 2.15, changePercent: 1.45, volume: 45200000 },
+  { symbol: 'GOOGL', price: 2800.50, change: -12.30, changePercent: -0.44, volume: 1800000 },
+  { symbol: 'MSFT', price: 305.75, change: 1.45, changePercent: 0.48, volume: 28500000 },
+  { symbol: 'TSLA', price: 850.20, change: 15.60, changePercent: 1.87, volume: 35100000 }
+];
+
+const formatPrice = (value) => `$${value.toFixed(2)}`;
+
+const formatChange = (value) => {
+  const color = value >= 0 ? '#28a745' : '#dc3545';
+  const sign = value >= 0 ? '+' : '';
+  return `<span style="color: ${color}; font-weight: bold;">${sign}${value.toFixed(2)}</span>`;
+};
+
+const formatPercent = (value) => {
+  const color = value >= 0 ? '#28a745' : '#dc3545';
+  const sign = value >= 0 ? '+' : '';
+  return `<span style="color: ${color};">${sign}${value.toFixed(2)}%</span>`;
+};
+
+const formatVolume = (value) => {
+  if (value >= 1000000) {
+    return `${(value / 1000000).toFixed(1)}M`;
+  } else if (value >= 1000) {
+    return `${(value / 1000).toFixed(1)}K`;
+  }
+  return value.toString();
+};
+
+const columns = [
+  { title: 'Symbol', field: 'symbol', width: 80, align: 'center' },
+  { title: 'Price', field: 'price', width: 100, align: 'right', 
+    formatter: formatPrice },
+  { title: 'Change', field: 'change', width: 80, align: 'right',
+    formatter: formatChange, escapeHTML: true },
+  { title: 'Change %', field: 'changePercent', width: 80, align: 'right',
+    formatter: formatPercent, escapeHTML: true },
+  { title: 'Volume', field: 'volume', width: 80, align: 'right',
+    formatter: formatVolume }
+];
+
+const options = {
+  headerHeight: 35,
+  rowHeight: 30,
+  backgroundColor: '#000000',
+  color: '#ffffff',
+  headerBackgroundColor: '#1a1a1a',
+  headerColor: '#ffffff'
+};
+
+const handleStockClick = (stock) => {
+  console.log('Selected stock:', stock.symbol);
+  // Could open detailed view, place order, etc.
+};
+</script>
+
+<div class="trading-table">
+  <h4>Live Stock Prices</h4>
+  <ConciseListTable 
+    list={tradingData}
+    {columns}
+    {options}
+    rowClickHandler={handleStockClick}
+  />
+</div>
+
+<style>
+  .trading-table {
+    background: #000;
+    color: #fff;
+    padding: 16px;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+  }
+  
+  .trading-table h4 {
+    margin: 0 0 12px 0;
+    color: #00ff00;
+  }
+</style>
+```
+
+## Accessibility
+
+The ConciseListTable component includes comprehensive accessibility features:
+
+- **ARIA Roles**: Proper `table`, `row`, `cell`, and `columnheader` roles
+- **Keyboard Navigation**: Tab navigation and Enter/Space activation
+- **Screen Reader Support**: Appropriate labeling and row indexing
+- **Focus Management**: Programmatic focus control
+- **Semantic Structure**: Proper table markup and relationships
+
+### Best Practices
+
+```svelte
+<!-- Good: Descriptive table labeling -->
+<ConciseListTable 
+  list={data}
+  columns={columns}
+  options={options}
+  aria-label="Employee information table"
+/>
+
+<!-- Good: Consistent column alignment -->
+const columns = [
+  { title: 'ID', field: 'id', width: 60, align: 'center' },
+  { title: 'Name', field: 'name', width: 150, align: 'left' },
+  { title: 'Salary', field: 'salary', width: 100, align: 'right' }
+];
+
+<!-- Good: Meaningful formatters -->
+{ title: 'Status', field: 'status', formatter: (value) => 
+  value ? 'Active' : 'Inactive' }
+```
+
+## Performance Optimization
+
+- **Efficient Rendering**: Minimal DOM updates with reactive changes
+- **Auto-Scroll Performance**: Optimized transform-based animation
+- **ResizeObserver**: Efficient viewport size monitoring
+- **Memory Management**: Proper cleanup of timers and observers
+- **Type Safety**: Full TypeScript support reduces runtime errors
+
+## Browser Support
+
+Works in all modern browsers that support:
+- ES6+ JavaScript
+- ResizeObserver API
+- CSS transforms and transitions
+- Modern DOM APIs
+
+## Migration Notes
+
+When upgrading from older versions:
+- `onChange` events are now `onchange` (lowercase)
+- `onClick` events are now `onclick` (lowercase)
+- New accessibility features require no code changes
+- Enhanced TypeScript support provides better development experience