@ticatec/topside-elements 1.0.0

package/dist/data_table/parts/ContentPanel.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+    import DataRow from "./DataRow.svelte";
+    import type DataColumn from "../lib/DataColumn";
+    import type TableRow from "./TableRow";
+    import { onDestroy, onMount } from "svelte";
+    import TableHeaderPanel from "./TableHeaderPanel.svelte";
+    import UniDataTable, { type OnWidthChange } from "../UniDataTable";
+    import { OrderDirection } from "../lib/OrderDirection";
+    import type { GetRowFontStyle } from "../../types";
+    import type { VirtualWindow } from "../lib/virtualWindow";
+
+    interface Props {
+        columns: Array<DataColumn>;
+        rows: Array<TableRow>;
+        orderColumn: DataColumn;
+        orderDirection: OrderDirection;
+        getRowFontStyle?: GetRowFontStyle;
+        emptyText?: string | null;
+        list: Array<any>;
+        expandRow: TableRow | null;
+        scrollTop?: number;
+        rowHeight?: number;
+        headerHeight?: number;
+        inlineRowHeight?: number;
+        inlineComponent?: any;
+        table: UniDataTable;
+        showVerticalScroll?: boolean;
+        showHorizontalScroll?: boolean;
+        onWidthChange?: OnWidthChange;
+        onCellClick?: (col: DataColumn) => any;
+        tabWidth: number;
+        /** Row window when virtual scrolling is on; null renders every row. */
+        vwindow?: VirtualWindow | null;
+        /** Measured height of the scrollable data area (drives the virtual window). */
+        viewportHeight?: number;
+        /** 合计行各列文字；null 不显示 */
+        summary?: Array<string> | null;
+    }
+
+    let {
+        columns,
+        rows = $bindable([]),
+        orderColumn,
+        orderDirection,
+        getRowFontStyle,
+        emptyText = null,
+        list,
+        expandRow,
+        scrollTop = $bindable(0),
+        rowHeight,
+        headerHeight,
+        inlineRowHeight = $bindable(80),
+        inlineComponent = null,
+        table,
+        showVerticalScroll = false,
+        showHorizontalScroll = true,
+        onWidthChange,
+        onCellClick,
+        tabWidth = $bindable(0),
+        vwindow = null,
+        viewportHeight = $bindable(0),
+        summary = null,
+    }: Props = $props();
+
+    let scrollLeft = $state(0);
+    let viewWidth = $state(0);
+
+    let resizeObserver: ResizeObserver;
+    let viewPanel: HTMLDivElement;
+    let dataPanel: HTMLDivElement;
+
+    onMount(() => {
+        resizeObserver = new ResizeObserver(() => {
+            viewWidth = Math.round(viewPanel?.clientWidth) - 1;
+            viewportHeight = dataPanel?.clientHeight ?? 0;
+        });
+        resizeObserver.observe(viewPanel);
+        if (dataPanel) {
+            resizeObserver.observe(dataPanel);
+            viewportHeight = dataPanel.clientHeight ?? 0;
+        }
+    });
+
+    onDestroy(() => {
+        resizeObserver?.disconnect();
+    });
+
+    const handleDataTableScroll = (e: Event) => {
+        const target = e.target as HTMLElement;
+        if (showVerticalScroll) {
+            scrollTop = target.scrollTop;
+        }
+        scrollLeft = target.scrollLeft;
+    };
+
+    const handleWheelEvent = (e: WheelEvent) => {
+        let maxSh = dataPanel.scrollHeight - dataPanel.clientHeight;
+        if (!showVerticalScroll && maxSh > 0) {
+            if (e.deltaY != 0) {
+                scrollTop = scrollTop + e.deltaY;
+                if (scrollTop < 0) {
+                    scrollTop = 0;
+                }
+                if (scrollTop > maxSh) {
+                    scrollTop = maxSh;
+                }
+                setTimeout(() => {
+                    scrollTop = dataPanel.scrollTop;
+                }, 200);
+            }
+        }
+    };
+
+    // Sync scroll position when scrollTop changes externally.
+    // Must run unconditionally so wheel-scrolling on FixedColumnsPanel keeps the
+    // data area in sync even when showVerticalScroll is on (native scrollbar).
+    // No feedback loop: setting scrollTop to its current value is a no-op.
+    $effect(() => {
+        if (dataPanel && scrollTop > -1) {
+            dataPanel.scrollTop = scrollTop;
+        }
+    });
+
+    // Sync data into table model when list changes
+    $effect(() => {
+        void list;
+        if (table) {
+            table.data = [...list];
+            rows = table.rows;
+        }
+    });
+
+    let rowWidth = $derived(Math.max(viewWidth, tabWidth));
+    let whitespace = $derived(viewWidth > tabWidth);
+
+    // Virtual scrolling: render only the windowed slice, padded by spacers so the
+    // scroll container keeps its full natural scrollHeight. `startIndex` keeps the
+    // rendered rows' absolute indices (striping, keys) stable while scrolling.
+    let visibleRows = $derived(vwindow ? rows.slice(vwindow.start, vwindow.end) : rows);
+    let startIndex = $derived(vwindow ? vwindow.start : 0);
+</script>
+
+<div class="data-content-panel" bind:this={viewPanel}>
+    <TableHeaderPanel
+        {onCellClick}
+        {orderColumn}
+        {orderDirection}
+        dataCols={columns}
+        {scrollLeft}
+        width={tabWidth}
+        {whitespace}
+        {onWidthChange}
+        {headerHeight}
+    />
+    <div
+        class="data-view-panel"
+        bind:this={dataPanel}
+        onscroll={handleDataTableScroll}
+        onwheel={handleWheelEvent}
+        style="overflow-x: scroll; overflow-y: {showVerticalScroll ? 'auto' : 'hidden'};"
+    >
+        {#if rows && rows.length > 0}
+            <div style="box-sizing: border-box; width: {rowWidth}px; top: 0px">
+                {#if vwindow}
+                    <div style="height: {vwindow.topPad}px"></div>
+                {/if}
+                {#each visibleRows as row, i (startIndex + i)}
+                    {@const idx = startIndex + i}
+                    <DataRow
+                        fontStyle={getRowFontStyle?.(row.data)}
+                        {rowHeight}
+                        {row}
+                        {columns}
+                        alternative={idx % 2 == 1}
+                    />
+                    {#if row == expandRow && inlineComponent}
+                        {@const InlineComp = inlineComponent}
+                        <div
+                            class="expand-data-row"
+                            bind:clientHeight={inlineRowHeight}
+                            style="position: relative; box-sizing: content-box; width: 100%; height: auto"
+                        >
+                            <div class="inline-panel">
+                                <InlineComp data={row.data} />
+                            </div>
+                        </div>
+                    {/if}
+                {/each}
+                {#if vwindow}
+                    <div style="height: {vwindow.bottomPad}px"></div>
+                {/if}
+                {#if summary}
+                    <!-- 合计行：sticky 贴在滚动区底部，横向随数据一起滚，横向滚动条在它下面 -->
+                    <div class="summary-row" style="height: {rowHeight}px">
+                        {#each summary as text, idx (idx)}
+                            <div class="data-cell col-{idx}">
+                                <div class="vertical-center"><span title={text}>{text}</span></div>
+                            </div>
+                        {/each}
+                        <div class="data-cell" style="border-right: none; width: unset"></div>
+                    </div>
+                {/if}
+            </div>
+        {:else}
+            <div class="empty-content-board" style="width: 100%">
+                <div>{emptyText ?? 'Empty dataset.'}</div>
+            </div>
+        {/if}
+    </div>
+</div>

package/dist/data_table/parts/ContentPanel.svelte.d.ts

@@ -0,0 +1,36 @@
+import type DataColumn from "../lib/DataColumn";
+import type TableRow from "./TableRow";
+import UniDataTable, { type OnWidthChange } from "../UniDataTable";
+import { OrderDirection } from "../lib/OrderDirection";
+import type { GetRowFontStyle } from "../../types";
+import type { VirtualWindow } from "../lib/virtualWindow";
+interface Props {
+    columns: Array<DataColumn>;
+    rows: Array<TableRow>;
+    orderColumn: DataColumn;
+    orderDirection: OrderDirection;
+    getRowFontStyle?: GetRowFontStyle;
+    emptyText?: string | null;
+    list: Array<any>;
+    expandRow: TableRow | null;
+    scrollTop?: number;
+    rowHeight?: number;
+    headerHeight?: number;
+    inlineRowHeight?: number;
+    inlineComponent?: any;
+    table: UniDataTable;
+    showVerticalScroll?: boolean;
+    showHorizontalScroll?: boolean;
+    onWidthChange?: OnWidthChange;
+    onCellClick?: (col: DataColumn) => any;
+    tabWidth: number;
+    /** Row window when virtual scrolling is on; null renders every row. */
+    vwindow?: VirtualWindow | null;
+    /** Measured height of the scrollable data area (drives the virtual window). */
+    viewportHeight?: number;
+    /** 合计行各列文字；null 不显示 */
+    summary?: Array<string> | null;
+}
+declare const ContentPanel: import("svelte").Component<Props, {}, "scrollTop" | "viewportHeight" | "rows" | "inlineRowHeight" | "tabWidth">;
+type ContentPanel = ReturnType<typeof ContentPanel>;
+export default ContentPanel;

package/dist/data_table/parts/DataCell.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import HrefCell from "./HrefCell.svelte";
+    import type DataColumn from "../lib/DataColumn";
+    import TextCell from "./TextCell.svelte";
+
+    interface Props {
+        frozen?: boolean;
+        colIdx: number;
+        column: DataColumn;
+        data: any;
+    }
+
+    let { frozen = false, colIdx, column, data }: Props = $props();
+
+    let hint = $derived(column.hint?.(data));
+    let style = $derived(column.cellStyle?.(data) ?? '');
+    let colClass = $derived(frozen ? `fz_col-${colIdx}` : `col-${colIdx}`);
+
+    let cell = $state<HTMLDivElement>();
+</script>
+
+<div class="data-cell {colClass}" {style} bind:this={cell}>
+    <div class="vertical-center">
+        {#if column.render}
+            {@const Render = column.render.component}
+            <Render {...column.render.props} {data} />
+        {:else if column.href}
+            <HrefCell {data} href={column.href} />
+        {:else}
+            <TextCell {data} {column} />
+        {/if}
+    </div>
+    {#if hint && cell && cell.offsetWidth < cell.scrollWidth}
+        <div class="cell-hint">
+            <div>
+                <span>{hint}</span>
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/data_table/parts/DataCell.svelte.d.ts

@@ -0,0 +1,10 @@
+import type DataColumn from "../lib/DataColumn";
+interface Props {
+    frozen?: boolean;
+    colIdx: number;
+    column: DataColumn;
+    data: any;
+}
+declare const DataCell: import("svelte").Component<Props, {}, "">;
+type DataCell = ReturnType<typeof DataCell>;
+export default DataCell;

package/dist/data_table/parts/DataRow.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import type DataColumn from "../lib/DataColumn";
+    import DataCell from "./DataCell.svelte";
+    import type TableRow from "./TableRow";
+    import type { RowFontStyle } from "../../types";
+
+    interface Props {
+        columns: Array<DataColumn>;
+        row: TableRow;
+        alternative: boolean;
+        rowHeight?: number;
+        fontStyle?: RowFontStyle;
+    }
+
+    let { columns, row, alternative, rowHeight, fontStyle }: Props = $props();
+
+    const getRowStyle = (rh: number | undefined, fs: RowFontStyle | undefined): string => {
+        let rs = '';
+        if (rh) {
+            rs = `height: ${rh}px`;
+        }
+        if (fs?.size) {
+            rs = `font-size: ${fs.size}; ${rs}`;
+        }
+        if (fs?.color) {
+            rs = `color: ${fs.color}; ${rs}`;
+        }
+        if (fs?.weight) {
+            rs = `font-weight: ${fs.weight}; ${rs}`;
+        }
+        return rs;
+    };
+
+    let style = $derived(getRowStyle(rowHeight, fontStyle));
+</script>
+
+<div class="data-row" {style} class:alternative aria-hidden="true">
+    {#each columns as col, idx (idx)}
+        <DataCell colIdx={idx} data={row.data} column={col} />
+    {/each}
+    <div class="data-cell" style="border-right: none; width: unset">
+    </div>
+</div>

package/dist/data_table/parts/DataRow.svelte.d.ts

@@ -0,0 +1,13 @@
+import type DataColumn from "../lib/DataColumn";
+import type TableRow from "./TableRow";
+import type { RowFontStyle } from "../../types";
+interface Props {
+    columns: Array<DataColumn>;
+    row: TableRow;
+    alternative: boolean;
+    rowHeight?: number;
+    fontStyle?: RowFontStyle;
+}
+declare const DataRow: import("svelte").Component<Props, {}, "">;
+type DataRow = ReturnType<typeof DataRow>;
+export default DataRow;

package/dist/data_table/parts/FixedColumnsPanel.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+    import FixedRow from "./FixedRow.svelte";
+    import type TableRow from "./TableRow";
+    import type { IndicatorColumn } from "..";
+    import UniDataTable, {
+        type OnRowExpand,
+        SelectionMode,
+        type OnWidthChange,
+    } from "../UniDataTable";
+    import type DataColumn from "../lib/DataColumn";
+    import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
+    import { OrderDirection } from "../lib/OrderDirection";
+    import type { VirtualWindow } from "../lib/virtualWindow";
+    import type { TableSummary } from "../lib/summary";
+
+    interface Props {
+        fixedCols?: Array<DataColumn>;
+        indicatorColumn?: IndicatorColumn | null;
+        width: number;
+        scrollTop?: number;
+        rows?: Array<TableRow>;
+        onWidthChange?: OnWidthChange;
+        onRowExpand?: OnRowExpand;
+        onCellClick?: (col: DataColumn) => any;
+        orderColumn?: DataColumn;
+        orderDirection?: OrderDirection;
+        selectedRows?: Array<any>;
+        expandRow?: TableRow | null;
+        rowHeight?: number;
+        headerHeight?: number;
+        inlineRowHeight?: number;
+        /** Row window when virtual scrolling is on; null renders every row. */
+        vwindow?: VirtualWindow | null;
+        /** 合计行；null 不显示 */
+        summary?: TableSummary | null;
+    }
+
+    let {
+        fixedCols = [],
+        indicatorColumn = null,
+        width,
+        scrollTop = $bindable(0),
+        rows = [],
+        onWidthChange,
+        onRowExpand,
+        onCellClick,
+        orderColumn,
+        orderDirection,
+        selectedRows = $bindable([]),
+        expandRow = $bindable(null),
+        rowHeight,
+        headerHeight,
+        inlineRowHeight = 0,
+        vwindow = null,
+        summary = null,
+    }: Props = $props();
+
+    // Virtual scrolling: same shared window as the other panels, so all three
+    // render the same absolute row indices (selection state and striping use them).
+    let visibleRows = $derived(vwindow ? (rows ?? []).slice(vwindow.start, vwindow.end) : (rows ?? []));
+    let startIndex = $derived(vwindow ? vwindow.start : 0);
+
+    let selectionMode = $state<SelectionMode>(SelectionMode.None);
+
+    let selectable = $derived(indicatorColumn?.selectable == true);
+    let expandable = $derived(indicatorColumn?.buildInlineComponent != null);
+
+    // Track selected indices internally to avoid $state proxy identity issues
+    let selectedIndices = $state<Set<number>>(new Set());
+
+    // Sync selectedIndices from selectedRows when selectionMode changes externally
+    const onToggleSelectAll = (value: boolean) => {
+        if (value) {
+            const total = (rows ?? []).length;
+            selectedIndices = new Set(Array.from({ length: total }, (_, i) => i));
+            selectedRows = (rows ?? []).map((item) => item.data);
+            selectionMode = SelectionMode.All;
+        } else {
+            selectedIndices = new Set();
+            selectedRows = [];
+            selectionMode = SelectionMode.None;
+        }
+    };
+
+    const onRowSelectChange = (rowIndex: number, value: boolean) => {
+        if (value) {
+            selectedIndices = new Set(selectedIndices).add(rowIndex);
+        } else {
+            const next = new Set(selectedIndices);
+            next.delete(rowIndex);
+            selectedIndices = next;
+        }
+        // Rebuild selectedRows from indices
+        selectedRows = (rows ?? [])
+            .filter((_, i) => selectedIndices.has(i))
+            .map((item) => item.data);
+
+        selectionMode =
+            selectedIndices.size == (rows ?? []).length
+                ? SelectionMode.All
+                : selectedIndices.size == 0
+                    ? SelectionMode.None
+                    : SelectionMode.Partial;
+    };
+
+    let viewPanel: HTMLDivElement;
+
+    const handleWheelEvent = (e: WheelEvent) => {
+        let maxSh = viewPanel.scrollHeight - viewPanel.clientHeight;
+        if (maxSh > 0) {
+            if (e.deltaY != 0) {
+                scrollTop = scrollTop + e.deltaY;
+                if (scrollTop < 0) {
+                    scrollTop = 0;
+                }
+                if (scrollTop > maxSh) {
+                    scrollTop = maxSh;
+                }
+                setTimeout(() => {
+                    scrollTop = viewPanel.scrollTop;
+                }, 200);
+            }
+        }
+    };
+
+    // Sync scroll position — replaces `$: if (viewPanel && scrollTop > -1) { ... }`
+    $effect(() => {
+        if (viewPanel && scrollTop > -1) {
+            viewPanel.scrollTop = scrollTop;
+        }
+    });
+</script>
+
+<div class="left-fixed-panel" style="width: {width}px">
+    <FixedHeaderPanel
+        {selectionMode}
+        {orderColumn}
+        {orderDirection}
+        {onCellClick}
+        {onWidthChange}
+        columns={fixedCols}
+        {indicatorColumn}
+        {onToggleSelectAll}
+        {rowHeight}
+        {headerHeight}
+    />
+    <div class="rows-container" bind:this={viewPanel} onwheel={handleWheelEvent}>
+        <div>
+            {#if vwindow}
+                <div style="height: {vwindow.topPad}px"></div>
+            {/if}
+            {#each visibleRows as row, i (startIndex + i)}
+                {@const idx = startIndex + i}
+                <FixedRow
+                    rowNo={idx + 1}
+                    {row}
+                    rowIndex={idx}
+                    selected={selectedIndices.has(idx)}
+                    alternative={idx % 2 == 1}
+                    {selectable}
+                    cols={fixedCols}
+                    {expandRow}
+                    {rowHeight}
+                    {expandable}
+                    {onRowExpand}
+                    {onRowSelectChange}
+                    {indicatorColumn}
+                />
+                {#if row == expandRow}
+                    <div class="inline-panel" style="height: {inlineRowHeight}px"> </div>
+                {/if}
+            {/each}
+            {#if vwindow}
+                <div style="height: {vwindow.bottomPad}px"></div>
+            {/if}
+            {#if summary}
+                <div class="summary-row" style="height: {rowHeight}px">
+                    {#if indicatorColumn}
+                        <div class="data-cell indicator-cell" style="width: {indicatorColumn.width}px">
+                            <span title={summary.indicator ?? ''}>{summary.indicator ?? ''}</span>
+                        </div>
+                    {/if}
+                    {#each summary.frozen as text, idx (idx)}
+                        <div class="data-cell fz_col-{idx}">
+                            <div class="vertical-center"><span title={text}>{text}</span></div>
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    </div>
+    <div class="bottom-mask-overlay">
+        <!-- 用于匹配中间数据区域的滚动条 -->
+    </div>
+</div>

package/dist/data_table/parts/FixedColumnsPanel.svelte.d.ts

@@ -0,0 +1,31 @@
+import type TableRow from "./TableRow";
+import type { IndicatorColumn } from "..";
+import { type OnRowExpand, type OnWidthChange } from "../UniDataTable";
+import type DataColumn from "../lib/DataColumn";
+import { OrderDirection } from "../lib/OrderDirection";
+import type { VirtualWindow } from "../lib/virtualWindow";
+import type { TableSummary } from "../lib/summary";
+interface Props {
+    fixedCols?: Array<DataColumn>;
+    indicatorColumn?: IndicatorColumn | null;
+    width: number;
+    scrollTop?: number;
+    rows?: Array<TableRow>;
+    onWidthChange?: OnWidthChange;
+    onRowExpand?: OnRowExpand;
+    onCellClick?: (col: DataColumn) => any;
+    orderColumn?: DataColumn;
+    orderDirection?: OrderDirection;
+    selectedRows?: Array<any>;
+    expandRow?: TableRow | null;
+    rowHeight?: number;
+    headerHeight?: number;
+    inlineRowHeight?: number;
+    /** Row window when virtual scrolling is on; null renders every row. */
+    vwindow?: VirtualWindow | null;
+    /** 合计行；null 不显示 */
+    summary?: TableSummary | null;
+}
+declare const FixedColumnsPanel: import("svelte").Component<Props, {}, "scrollTop" | "expandRow" | "selectedRows">;
+type FixedColumnsPanel = ReturnType<typeof FixedColumnsPanel>;
+export default FixedColumnsPanel;