@ticatec/topside-elements 1.0.0

package/dist/data_display/concise_data_table/ConciseListTable.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+    import {onMount, tick} from 'svelte';
+    import DataRow from "./DataRow.svelte";
+    import {type OnRowClick, type TableOptions} from "./TableOptions";
+    import utils from "./utils";
+    import type Column from "./Column";
+
+    interface Props {
+        list: Array<any>;
+        columns: Array<Column>;
+        autoScroll?: boolean;
+        scrollInterval?: number;
+        /** 行点击回调 */
+        onRowClick?: OnRowClick | null;
+        options?: TableOptions;
+        style?: string;
+        class?: string;
+        onfocus?: (event: FocusEvent) => void;
+        onblur?: (event: FocusEvent) => void;
+    }
+
+    let {
+        list,
+        columns,
+        autoScroll = false,
+        scrollInterval = 2000,
+        onRowClick = null,
+        options = {},
+        style = '',
+        class: className = '',
+        onfocus,
+        onblur,
+    }: Props = $props();
+
+    let tabOptions = $derived({headerHeight: 36, rowHeight: 32, ...options});
+
+    const id = (new Date().getTime() * 1000 + Math.floor(Math.random() * 1000)).toString(36);
+
+    let tableContainer: HTMLElement | undefined;
+    let viewPanel: HTMLElement | undefined;
+    let headerRow: HTMLElement | undefined;
+    let scrollTimer: ReturnType<typeof setInterval> | undefined;
+    let visibleRowCount = 0;
+    let rowHeight = 0;
+    let viewWidth = $state(0);
+    let viewHeight = 0;
+    let resizeObserver: ResizeObserver | undefined;
+
+    let tableStyle = $derived(utils.generateTableStyle(id, columns, tabOptions, viewWidth));
+
+    onMount(() => {
+        resizeObserver = new ResizeObserver(() => {
+            viewWidth = Math.round(viewPanel?.clientWidth ?? 0) - 1;
+            viewHeight = Math.round(viewPanel?.clientHeight ?? 0) - 1;
+        });
+        if (viewPanel) resizeObserver.observe(viewPanel);
+
+        return () => {
+            resizeObserver?.disconnect();
+            stopAutoScroll();
+            const existingStyle = document.getElementById(`marqueeStyle_${id}`);
+            if (existingStyle) existingStyle.remove();
+        };
+    });
+
+    const setupAutoScroll = async () => {
+        if (autoScroll && tableContainer && list.length > 0) {
+            await tick();
+            const tableBody = tableContainer.querySelector('.table-body');
+            if (tableBody && tableBody.children.length > 0) {
+                rowHeight = (tableBody.children[0] as HTMLElement).offsetHeight;
+                visibleRowCount = Math.floor((tableContainer.offsetHeight - (headerRow?.offsetHeight ?? 0)) / rowHeight);
+                if (list.length <= visibleRowCount) return;
+                startAutoScroll();
+            }
+        }
+    }
+
+    const startAutoScroll = () => {
+        if (scrollTimer) clearInterval(scrollTimer);
+        const originalDataHeight = list.length * rowHeight;
+        const tableBody = tableContainer?.querySelector('.table-body') as HTMLElement | null;
+        if (tableBody) {
+            const animationDuration = scrollInterval * list.length / 1000;
+            tableBody.style.animation = 'none';
+
+            const existingStyle = document.getElementById(`marqueeStyle_${id}`);
+            if (existingStyle) existingStyle.remove();
+
+            const styleElement = document.createElement('style');
+            styleElement.id = `marqueeStyle_${id}`;
+            styleElement.textContent = `
+                @keyframes marqueeScroll_${id} {
+                    0% { transform: translateY(0px); }
+                    100% { transform: translateY(-${originalDataHeight}px); }
+                }
+            `;
+            document.head.appendChild(styleElement);
+
+            tableBody.offsetHeight;
+            tableBody.style.animation = `marqueeScroll_${id} ${animationDuration}s linear infinite`;
+        }
+    }
+
+    const stopAutoScroll = () => {
+        if (scrollTimer) {
+            clearInterval(scrollTimer);
+            scrollTimer = undefined;
+        }
+        const tableBody = tableContainer?.querySelector('.table-body') as HTMLElement | null;
+        if (tableBody) {
+            tableBody.style.animation = 'none';
+            tableBody.style.transform = 'translateY(0px)';
+        }
+    }
+
+    $effect(() => {
+        list;
+        autoScroll;
+        scrollInterval;
+        stopAutoScroll();
+        setupAutoScroll();
+    });
+
+    const handleRowClick = (row: any) => () => {
+        onRowClick?.(row);
+    }
+
+    const handleTableFocus = (event: FocusEvent) => {
+        onfocus?.(event);
+    }
+
+    const handleTableBlur = (event: FocusEvent) => {
+        onblur?.(event);
+    }
+
+    export function focus() {
+        const firstRow = tableContainer?.querySelector('.table-body .table-row');
+        if (firstRow) {
+            setTimeout(() => {
+                (firstRow as HTMLElement).focus();
+            }, 50);
+        }
+    }
+</script>
+
+<div
+    id="tab_{id}"
+    class="topside-concise-datatable {className}"
+    {style}
+    onfocusin={handleTableFocus}
+    onfocusout={handleTableBlur}>
+    {@html tableStyle}
+    <div class="table-container" bind:this={tableContainer}>
+        <div class="table-header">
+            <div class="table-row" bind:this={headerRow} role="row">
+                {#each columns as column, idx}
+                    <div class="data-cell col_{idx}" role="columnheader">
+                        {column.title ?? ''}
+                    </div>
+                {/each}
+            </div>
+        </div>
+
+        <div
+            class="table-body-container"
+            bind:this={viewPanel}
+            class:auto-scroll={autoScroll}
+            role="table"
+            aria-label="Data table"
+            aria-rowcount={list.length + 1}>
+            <div class="table-body">
+                {#if autoScroll}
+                    {#each list as row, rowIndex}
+                        <DataRow
+                            data={row}
+                            {columns}
+                            {rowIndex}
+                            showAlternative={rowIndex % 2 == 1}
+                            onclick={handleRowClick(row)}/>
+                    {/each}
+                    {#each list as row, rowIndex}
+                        <DataRow
+                            data={row}
+                            {columns}
+                            rowIndex={rowIndex + list.length}
+                            showAlternative={(rowIndex + list.length) % 2 == 1}
+                            onclick={handleRowClick(row)}/>
+                    {/each}
+                    {#each list as row, rowIndex}
+                        <DataRow
+                            data={row}
+                            {columns}
+                            rowIndex={rowIndex + list.length * 2}
+                            showAlternative={(rowIndex + list.length * 2) % 2 == 1}
+                            onclick={handleRowClick(row)}/>
+                    {/each}
+                {:else}
+                    {#each list as row, rowIndex}
+                        <DataRow
+                            data={row}
+                            {columns}
+                            {rowIndex}
+                            showAlternative={rowIndex % 2 == 1}
+                            onclick={handleRowClick(row)}/>
+                    {/each}
+                {/if}
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>:global .topside-concise-datatable {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--topside-concise-table-color-surface);
+  color: var(--topside-concise-table-color);
+}
+:global .topside-concise-datatable .table-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+:global .topside-concise-datatable .table-row {
+  display: flex;
+  width: 100%;
+  position: relative;
+  align-items: center;
+}
+:global .topside-concise-datatable .table-row .data-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 2px 4px;
+}
+:global .topside-concise-datatable .table-header {
+  background-color: var(--topside-concise-table-header-surface);
+  padding: 0;
+  flex-shrink: 0;
+  z-index: 10;
+  user-select: none;
+}
+:global .topside-concise-datatable .table-header .table-row {
+  font-weight: 600;
+}
+:global .topside-concise-datatable .table-header .table-row .data-cell {
+  text-align: center !important;
+}
+:global .topside-concise-datatable .table-body-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+:global .topside-concise-datatable .table-body-container .table-body {
+  width: 100%;
+}
+:global .topside-concise-datatable .table-body-container .table-row {
+  cursor: pointer;
+}
+:global .topside-concise-datatable .table-body-container .table-row.alternative {
+  background-color: var(--topside-concise-table-row-alter-bg, #F8FAFC);
+  color: var(--topside-concise-table-row-alter-color, #374151);
+}
+:global .topside-concise-datatable .table-body-container .table-row:hover {
+  background-color: var(--topside-concise-table-row-hover-bg);
+}
+:global .topside-concise-datatable .table-body-container.auto-scroll {
+  overflow-y: hidden;
+}</style>

package/dist/data_display/concise_data_table/ConciseListTable.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type OnRowClick, type TableOptions } from "./TableOptions";
+import type Column from "./Column";
+interface Props {
+    list: Array<any>;
+    columns: Array<Column>;
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    /** 行点击回调 */
+    onRowClick?: OnRowClick | null;
+    options?: TableOptions;
+    style?: string;
+    class?: string;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+}
+declare const ConciseListTable: import("svelte").Component<Props, {
+    focus: () => void;
+}, "">;
+type ConciseListTable = ReturnType<typeof ConciseListTable>;
+export default ConciseListTable;

package/dist/data_display/concise_data_table/DataCell.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import type Column from "./Column";
+
+    interface Props {
+        column: Column;
+        idx: number;
+        data: any;
+    }
+
+    let {
+        column,
+        idx,
+        data,
+    }: Props = $props();
+
+    let text = $derived(column.formatter ? column.formatter(data[column.field]) : (data[column.field] ?? ''));
+    // Safe by default: HTML rendering is opt-in only (renderHTML: true), matching the
+    // semantics of the data_table component's DataColumn#renderHTML flag.
+    let renderAsHtml = $derived(column.renderHTML === true);
+</script>
+
+<div class="data-cell col_{idx}" role="cell">
+    {#if renderAsHtml}
+        {@html text}
+    {:else}
+        <span>{text}</span>
+    {/if}
+</div>

package/dist/data_display/concise_data_table/DataCell.svelte.d.ts

@@ -0,0 +1,9 @@
+import type Column from "./Column";
+interface Props {
+    column: Column;
+    idx: number;
+    data: any;
+}
+declare const DataCell: import("svelte").Component<Props, {}, "">;
+type DataCell = ReturnType<typeof DataCell>;
+export default DataCell;

package/dist/data_display/concise_data_table/DataRow.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import type Column from "./Column";
+    import DataCell from "./DataCell.svelte";
+
+    interface Props {
+        columns: Array<Column>;
+        data: any;
+        showAlternative?: boolean;
+        rowIndex?: number;
+        onclick?: (event: MouseEvent) => void;
+    }
+
+    let {
+        columns,
+        data,
+        showAlternative = false,
+        rowIndex = 0,
+        onclick,
+    }: Props = $props();
+
+    const handleRowKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const clickEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true
+            });
+            event.currentTarget?.dispatchEvent(clickEvent);
+        }
+    };
+</script>
+
+<div
+    class="table-row"
+    class:alternative={showAlternative}
+    role="row"
+    tabindex="0"
+    aria-rowindex={rowIndex + 2}
+    {onclick}
+    onkeydown={handleRowKeyDown}>
+    {#each columns as column, idx}
+        <DataCell {idx} {column} {data}/>
+    {/each}
+</div>

package/dist/data_display/concise_data_table/DataRow.svelte.d.ts

@@ -0,0 +1,11 @@
+import type Column from "./Column";
+interface Props {
+    columns: Array<Column>;
+    data: any;
+    showAlternative?: boolean;
+    rowIndex?: number;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const DataRow: import("svelte").Component<Props, {}, "">;
+type DataRow = ReturnType<typeof DataRow>;
+export default DataRow;

package/dist/data_display/concise_data_table/README.md

@@ -0,0 +1,177 @@
+# ConciseListTable
+
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `RowClickHandler`, `rowClickHandler`, `setFocus` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A lightweight single-purpose table for **display-only** data: fixed columns, optional marquee auto-scroll, alternating row styling. No sorting, no resizing, no selection — use the full `DataTable` when you need those.
+
+> Svelte 5 component. The table fills its parent (100% × 100%); the parent must have an explicit height.
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```svelte
+<script lang="ts">
+  import ConciseListTable from '@ticatec/topside-elements/ConciseDataTable';
+  import type { Column, TableOptions, OnRowClick } from '@ticatec/topside-elements/ConciseDataTable';
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `list` | `Array<any>` | — | Required. Rows to render |
+| `columns` | `Array<Column>` | — | Required. Column definitions |
+| `options` | `TableOptions` | `{}` | Visual options (heights, row colors). Defaults: `headerHeight=36`, `rowHeight=32` |
+| `autoScroll` | `boolean` | `false` | Continuous marquee scroll. When on, the list is **rendered 3 times back-to-back** and animated with a CSS `translateY` keyframe |
+| `scrollInterval` | `number` | `2000` | Milliseconds each row stays visible (total animation duration = `scrollInterval × list.length`) |
+| `onRowClick` | `(row: any) => void \| null` | `null` | Row click callback |
+| `style` | `string` | `''` | Inline CSS on the root |
+| `class` | `string` | `''` | Extra class on the root |
+| `onfocus` | `(e: FocusEvent) => void` | `undefined` | Forwarded from the root via `focusin` |
+| `onblur` | `(e: FocusEvent) => void` | `undefined` | Forwarded from the root via `focusout` |
+
+### `Column`
+
+```ts
+interface Column {
+  title: string;                                              // header text
+  field: string;                                              // property name on each row
+  width: number;                                              // base width in px (always honored)
+  align?: 'left' | 'center' | 'right';                        // cell text align, default 'left'
+  weight?: number;                                            // flex ratio for leftover horizontal space (default 0 = fixed)
+  formatter?: (value: any) => string;                         // transforms the raw value before rendering
+  escapeHTML?: boolean;                                       // when true, formatter output is rendered as HTML ({@html}); default text-only
+}
+```
+
+**Width algorithm** (see `utils.ts`): each column's actual width = `col.width + col.weight × ((viewWidth − sum(col.width)) / sum(col.weight))`. With no weights, every column stays at its fixed `width` and any leftover space on the right is empty.
+
+### `TableOptions`
+
+All optional. When omitted, the component falls back to `headerHeight=36`, `rowHeight=32`, plus the CSS-variable defaults for colors.
+
+```ts
+interface TableOptions {
+  backgroundColor?: string;            // root background-color
+  color?: string;                       // root text color
+  headerHeight?: number;                // header row height (px)
+  headerBackgroundColor?: string;
+  headerColor?: string;
+  rowHeight?: number;                   // body row height (px) — also applied to header when only this is set
+  alternativeBackgroundColor?: string;  // even-row background
+  alternativeColor?: string;            // even-row text color
+}
+```
+
+## Examples
+
+### Basic
+
+```svelte
+<script lang="ts">
+  import ConciseListTable from '@ticatec/topside-elements/ConciseDataTable';
+  import type { Column } from '@ticatec/topside-elements/ConciseDataTable';
+
+  const columns: Column[] = [
+    { title: 'Name', field: 'name', width: 150 },
+    { title: 'Age', field: 'age', width: 80, align: 'center' },
+  ];
+
+  const list = [
+    { name: 'Alice', age: 30 },
+    { name: 'Bob', age: 25 },
+  ];
+</script>
+
+<div style="height: 320px;">
+  <ConciseListTable {list} {columns} />
+</div>
+```
+
+### Weighted columns + formatter
+
+Leftover space is split 1:2 between the two weighted columns; the 100-px status column stays fixed.
+
+```svelte
+<script lang="ts">
+  import ConciseListTable from '@ticatec/topside-elements/ConciseDataTable';
+  import type { Column, TableOptions } from '@ticatec/topside-elements/ConciseDataTable';
+
+  const columns: Column[] = [
+    { title: 'Product', field: 'product', width: 120, weight: 1 },
+    { title: 'Desc',    field: 'desc',    width: 120, weight: 2 },
+    { title: 'Status',  field: 'status',  width: 100, align: 'center',
+      formatter: (v: string) => v === 'available' ? '✅ In Stock' : '❌ Out' },
+  ];
+
+  const options: TableOptions = {
+    headerHeight: 40,
+    rowHeight: 36,
+    alternativeBackgroundColor: '#f8fafc',
+  };
+
+  const products = [
+    { product: 'Laptop',  desc: '14-inch ultrabook',  status: 'available' },
+    { product: 'Mouse',   desc: 'Wireless',            status: 'out' },
+  ];
+
+  const onRowClick = (row: any) => console.log('clicked', row);
+</script>
+
+<div style="height: 400px;">
+  <ConciseListTable {list: products} {columns} {options} {onRowClick} />
+</div>
+```
+
+### Marquee (TV-style auto-scroll)
+
+```svelte
+<div style="height: 280px;">
+  <ConciseListTable list={longList} columns={columns} autoScroll scrollInterval={2000} />
+</div>
+```
+
+When `autoScroll` is on:
+- The list is rendered **3 times** consecutively so the marquee can wrap without a visible seam.
+- The body's `overflow-y` is hidden; you can't scroll manually.
+- Animation is killed/rebuilt whenever `list`, `autoScroll`, or `scrollInterval` change.
+- If all rows fit in the viewport (`list.length ≤ visibleRowCount`), the animation is **not** started.
+
+## Styling
+
+CSS custom properties consumed by the SCSS (override on the root or any ancestor):
+
+| Variable | Used on |
+|----------|---------|
+| `--topside-concise-table-bg` | Root text color fallback |
+| `--topside-concise-table-row-alter-bg` | Alternating-row background (default `#F8FAFC`) |
+| `--topside-concise-table-row-alter-color` | Alternating-row text color (default `#374151`) |
+
+For one-off theming prefer passing `options` (it generates scoped CSS with a unique `#tab_{id}` prefix); use the CSS variables for app-wide defaults.
+
+## Imperative API
+
+`focus()` is exported from the instance — call via `bind:this`:
+
+```svelte
+<script lang="ts">
+  let table: ConciseListTable;
+  // table.setFocus()
+</script>
+
+<ConciseListTable bind:this={table} {list} {columns} />
+```
+
+It schedules focus on the first body row after a 50ms timeout.
+
+## Accessibility
+
+- Root has `role="table"` and `aria-rowcount={list.length + 1}`.
+- Header cells have `role="columnheader"`, body rows have `role="row"`.
+- Row click is mouse-only — there is no built-in keyboard activation; add your own handler if needed.