@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/concise-data-table/DataRow.svelte.d.ts

@@ -1,26 +0,0 @@
-import type Column from "./Column";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DataRow: $$__sveltets_2_IsomorphicComponent<{
-    columns: Array<Column>;
-    data: any;
-    showAlternative: boolean;
-    rowIndex?: number;
-}, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DataRow = InstanceType<typeof DataRow>;
-export default DataRow;

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

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