@ticatec/topside-elements 1.0.0

package/dist/data_table/lib/summary.js

@@ -0,0 +1,123 @@
+import tableUtils from "./TableUtils";
+const isEmpty = (v) => v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0);
+/** 数字或数字串 → number；其它 → undefined（PostgreSQL numeric 常以字符串返回） */
+export const toNumber = (v) => {
+    if (typeof v === 'number')
+        return Number.isFinite(v) ? v : undefined;
+    if (typeof v === 'string' && v.trim() !== '') {
+        const n = Number(v.trim());
+        return Number.isFinite(n) ? n : undefined;
+    }
+    return undefined;
+};
+/** 一个数的小数位数（1.25 → 2），上限 10 */
+const decimalsOf = (n) => {
+    if (!Number.isFinite(n) || Number.isInteger(n))
+        return 0;
+    const s = String(n);
+    const e = s.indexOf('e-');
+    if (e >= 0)
+        return Math.min(10, parseInt(s.substring(e + 2), 10));
+    const dot = s.indexOf('.');
+    return dot < 0 ? 0 : Math.min(10, s.length - dot - 1);
+};
+/** 去掉浮点累加误差（0.1 + 0.2） */
+const tidy = (n) => Math.round(n * 1e10) / 1e10;
+/** 千分位 + 固定小数位 */
+export const formatNumber = (n, decimals) => {
+    const parts = n.toFixed(decimals).split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+};
+export function computeSummary(column, rows) {
+    const summary = column.summary;
+    if (!summary || summary === 'label')
+        return undefined;
+    const values = rows.map(row => tableUtils.extractFieldValue(row, column.field));
+    if (typeof summary === 'function') {
+        return { value: summary(values, rows), kind: 'fn' };
+    }
+    if (summary === 'count') {
+        return { value: values.filter(v => !isEmpty(v)).length, kind: 'count', decimals: 0 };
+    }
+    const numbers = values.map(toNumber).filter((n) => n !== undefined);
+    // 小数位按源数据：数字串看字面（"1200.10" 算 2 位，numeric(12,2) 的尾零有意义），数字看实际值
+    const decimals = values.reduce((d, v) => {
+        if (typeof v === 'string' && toNumber(v) !== undefined) {
+            const t = v.trim();
+            const dot = t.indexOf('.');
+            return /e/i.test(t) ? Math.max(d, decimalsOf(Number(t))) : Math.max(d, dot < 0 ? 0 : Math.min(10, t.length - dot - 1));
+        }
+        return typeof v === 'number' ? Math.max(d, decimalsOf(v)) : d;
+    }, 0);
+    if (numbers.length === 0) {
+        return { value: summary === 'sum' ? 0 : undefined, kind: summary, decimals };
+    }
+    switch (summary) {
+        case 'sum':
+            return { value: tidy(numbers.reduce((a, b) => a + b, 0)), kind: 'sum', decimals };
+        case 'avg':
+            return { value: tidy(numbers.reduce((a, b) => a + b, 0) / numbers.length), kind: 'avg', decimals: Math.max(decimals, 2) };
+        case 'min':
+            return { value: Math.min(...numbers), kind: 'min', decimals };
+        case 'max':
+            return { value: Math.max(...numbers), kind: 'max', decimals };
+    }
+    return undefined;
+}
+export function formatSummary(column, result, rows) {
+    if (!result)
+        return '';
+    let value = result.value;
+    if (column.summaryFormatter)
+        return column.summaryFormatter(value, rows) ?? '';
+    if (value === null || value === undefined)
+        return '';
+    // 外部给的合计：数字串按数字处理，其它字符串原样显示
+    if (result.kind === 'external') {
+        const n = toNumber(value);
+        if (n === undefined)
+            return String(value);
+        value = n;
+    }
+    else if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value !== 'number')
+        return String(value);
+    if (result.kind === 'count')
+        return formatNumber(value, 0);
+    if (column.formatter)
+        return column.formatter(value) ?? '';
+    // 自定义函数 / 外部值没有源数据小数位可参考：按值本身，最多 4 位
+    return formatNumber(value, result.decimals ?? Math.min(decimalsOf(value), 4));
+}
+/**
+ * 整行合计。没有任何列需要合计（列上无 summary，summaryValues 也没对上）时返回 null，不显示合计行。
+ *
+ * 标签位置：有指示列 → 指示列；否则 summary: 'label' 的列；否则第一个不做合计的列；都做合计则不显示标签。
+ */
+export function buildTableSummary(frozenCols, dataCols, rows, opts) {
+    const external = opts.summaryValues ?? null;
+    const hasExternal = (col) => external != null && col.field != null && Object.prototype.hasOwnProperty.call(external, col.field);
+    const isAggregated = (col) => hasExternal(col) || (col.summary != null && col.summary !== 'label');
+    const all = [...frozenCols, ...dataCols];
+    if (!all.some(isAggregated))
+        return null;
+    let labelCol;
+    if (!opts.hasIndicator && opts.label) {
+        labelCol = all.find(col => col.summary === 'label') ?? all.find(col => !isAggregated(col));
+    }
+    const cellText = (col) => {
+        if (col === labelCol)
+            return opts.label;
+        if (hasExternal(col))
+            return formatSummary(col, { value: external[col.field], kind: 'external' }, rows);
+        return formatSummary(col, computeSummary(col, rows), rows);
+    };
+    return {
+        indicator: opts.hasIndicator ? opts.label : null,
+        frozen: frozenCols.map(cellText),
+        columns: dataCols.map(cellText)
+    };
+}

package/dist/data_table/lib/virtualWindow.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Row-windowing math for the DataTable's opt-in virtual scrolling.
+ *
+ * The table renders three vertically synced panels (frozen columns, data
+ * content, actions). Each panel renders only the rows inside the computed
+ * window, with a top and bottom spacer so the scroll container keeps its
+ * full natural scrollHeight (the native scrollbar and the existing
+ * wheel/scroll sync logic keep working unchanged).
+ *
+ * All rows share one fixed `rowHeight`; at most one row (`expandIndex`) has
+ * an inline expansion panel of `inlineRowHeight` rendered directly below it.
+ */
+export interface VirtualWindow {
+    /** Index of the first rendered row (inclusive). */
+    start: number;
+    /** Index just past the last rendered row (exclusive). */
+    end: number;
+    /** Height (px) of the spacer above the rendered rows. */
+    topPad: number;
+    /** Height (px) of the spacer below the rendered rows. */
+    bottomPad: number;
+}
+export interface VirtualWindowInput {
+    scrollTop: number;
+    /** Height (px) of the scrollable viewport. 0 is tolerated (renders overscan only). */
+    viewportHeight: number;
+    rowHeight: number;
+    /** Total number of rows. */
+    count: number;
+    /** Extra rows rendered above and below the visible range. */
+    overscan?: number;
+    /** Index of the expanded row, or -1 when none. */
+    expandIndex?: number;
+    /** Height (px) of the inline expansion panel below the expanded row. */
+    inlineRowHeight?: number;
+}
+export declare function computeVirtualWindow(input: VirtualWindowInput): VirtualWindow;

package/dist/data_table/lib/virtualWindow.js

@@ -0,0 +1,41 @@
+/**
+ * Row-windowing math for the DataTable's opt-in virtual scrolling.
+ *
+ * The table renders three vertically synced panels (frozen columns, data
+ * content, actions). Each panel renders only the rows inside the computed
+ * window, with a top and bottom spacer so the scroll container keeps its
+ * full natural scrollHeight (the native scrollbar and the existing
+ * wheel/scroll sync logic keep working unchanged).
+ *
+ * All rows share one fixed `rowHeight`; at most one row (`expandIndex`) has
+ * an inline expansion panel of `inlineRowHeight` rendered directly below it.
+ */
+/** Top offset (px) of row `i`, accounting for an expansion panel above it. */
+const rowTop = (i, rowHeight, expandIndex, inlineRowHeight) => i * rowHeight + (expandIndex >= 0 && i > expandIndex ? inlineRowHeight : 0);
+export function computeVirtualWindow(input) {
+    const { scrollTop, viewportHeight, rowHeight, count } = input;
+    const overscan = input.overscan ?? 8;
+    const expandIndex = input.expandIndex ?? -1;
+    const inlineRowHeight = expandIndex >= 0 ? (input.inlineRowHeight ?? 0) : 0;
+    if (count === 0 || rowHeight <= 0) {
+        return { start: 0, end: 0, topPad: 0, bottomPad: 0 };
+    }
+    const st = Math.max(0, scrollTop);
+    // First row whose bottom edge is below the viewport top.
+    let start = Math.floor(st / rowHeight);
+    if (expandIndex >= 0 && start > expandIndex) {
+        // The viewport top sits below the expanded row: shift the estimate by the
+        // expansion panel's height. Clamping to expandIndex keeps the expanded
+        // row (and with it the inline panel, which is rendered inside the #each
+        // body next to its row) in the window while any part of the panel is
+        // visible.
+        start = Math.max(expandIndex, Math.floor((st - inlineRowHeight) / rowHeight));
+    }
+    start = Math.max(0, Math.min(start, count - 1) - overscan);
+    const visibleCount = Math.ceil(viewportHeight / rowHeight) + 1;
+    let end = Math.min(count, start + visibleCount + overscan * 2);
+    const totalHeight = count * rowHeight + inlineRowHeight;
+    const topPad = rowTop(start, rowHeight, expandIndex, inlineRowHeight);
+    const bottomPad = totalHeight - rowTop(end, rowHeight, expandIndex, inlineRowHeight);
+    return { start, end, topPad, bottomPad };
+}

package/dist/data_table/parts/ActionCell.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type {CellAction, GetCellAction} from "../lib/CellAction";
+    import { TextButton } from "../../general/button";
+
+    interface Props {
+        data: any;
+        getAction: GetCellAction;
+    }
+
+    let { data, getAction }: Props = $props();
+
+    let action = $derived(getAction?.(data));
+
+    const handleClick = async (event: MouseEvent) => {
+        await action?.handler(data);
+    };
+</script>
+
+{#if action}
+    <div style="width: 100; overflow: hidden;">
+        <TextButton type={action.type ?? 'primary'} outer={false} label={action.label} onclick={handleClick} />
+    </div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { GetCellAction } from "../lib/CellAction";
+interface Props {
+    data: any;
+    getAction: GetCellAction;
+}
+declare const ActionCell: import("svelte").Component<Props, {}, "">;
+type ActionCell = ReturnType<typeof ActionCell>;
+export default ActionCell;

package/dist/data_table/parts/ActionsPanel.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import ActionsRow from "./ActionsRow.svelte";
+    import type ActionsColumn from "../lib/ActionsColumn";
+    import type TableRow from "./TableRow";
+    import { onDestroy, onMount } from "svelte";
+    import i18nRes from "../../i18nRes";
+    import type { VirtualWindow } from "../lib/virtualWindow";
+
+    interface Props {
+        actionsColumn: ActionsColumn;
+        scrollTop?: number;
+        rows: Array<TableRow>;
+        inlineRowHeight?: number;
+        expandRow?: TableRow | null;
+        rowHeight?: number;
+        headerHeight?: number;
+        /** Row window when virtual scrolling is on; null renders every row. */
+        vwindow?: VirtualWindow | null;
+        /** 与数据区的合计行对齐（操作列这一格留空） */
+        showSummary?: boolean;
+    }
+
+    let {
+        actionsColumn,
+        scrollTop = $bindable(0),
+        rows,
+        inlineRowHeight = 0,
+        expandRow = null,
+        rowHeight,
+        headerHeight,
+        vwindow = null,
+        showSummary = false,
+    }: Props = $props();
+
+    // Virtual scrolling: same shared window as the other panels.
+    let visibleRows = $derived(vwindow ? rows.slice(vwindow.start, vwindow.end) : rows);
+    let startIndex = $derived(vwindow ? vwindow.start : 0);
+
+    const handleActionPanelScroll = (e: Event) => {
+        const target = e.target as HTMLDivElement;
+        scrollTop = target.scrollTop;
+    };
+
+    let scrollPanel: HTMLDivElement;
+
+    // Sync scroll position — replaces `$: if (scrollTop > -1) { ... }`
+    $effect(() => {
+        if (scrollTop > -1 && scrollPanel) {
+            scrollPanel.scrollTop = scrollTop;
+        }
+    });
+
+    let resizeObserver: ResizeObserver;
+    let panel: HTMLDivElement;
+    let rect = $state<DOMRect>(new DOMRect());
+
+    onMount(() => {
+        resizeObserver = new ResizeObserver(() => {
+            rect = panel.getBoundingClientRect();
+        });
+        resizeObserver.observe(panel);
+    });
+
+    onDestroy(() => {
+        resizeObserver?.disconnect();
+    });
+
+    let actionText = i18nRes.dataTable.actions();
+</script>
+
+<div class="action-panel" bind:this={panel} style="user-select: none; width: {actionsColumn.width}px;">
+    <div class="header-row" style="height: {headerHeight}px">
+        <div class="vertical-center">
+            <span>{actionText}</span>
+        </div>
+    </div>
+    <div bind:this={scrollPanel} class="rows-container" style="overflow-y: auto" onscroll={handleActionPanelScroll}>
+        <div>
+            {#if vwindow}
+                <div style="height: {vwindow.topPad}px"></div>
+            {/if}
+            {#each visibleRows as row, i (startIndex + i)}
+                {@const idx = startIndex + i}
+                <ActionsRow
+                    {row}
+                    {rowHeight}
+                    parentRect={rect}
+                    alternative={idx % 2 == 1}
+                    width={actionsColumn.width}
+                    align={actionsColumn.align}
+                    actions={actionsColumn.getActions(row.data)}
+                />
+                {#if row == expandRow}
+                    <div class="inline-panel" style="height: {inlineRowHeight ?? 0}px"> </div>
+                {/if}
+            {/each}
+            {#if vwindow}
+                <div style="height: {vwindow.bottomPad}px"></div>
+            {/if}
+            {#if showSummary}
+                <div class="summary-row" style="height: {rowHeight}px"></div>
+            {/if}
+        </div>
+    </div>
+    <div class="bottom-mask-overlay">
+        <!-- 用于匹配中间数据区域的滚动条 -->
+    </div>
+</div>

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

@@ -0,0 +1,19 @@
+import type ActionsColumn from "../lib/ActionsColumn";
+import type TableRow from "./TableRow";
+import type { VirtualWindow } from "../lib/virtualWindow";
+interface Props {
+    actionsColumn: ActionsColumn;
+    scrollTop?: number;
+    rows: Array<TableRow>;
+    inlineRowHeight?: number;
+    expandRow?: TableRow | null;
+    rowHeight?: number;
+    headerHeight?: number;
+    /** Row window when virtual scrolling is on; null renders every row. */
+    vwindow?: VirtualWindow | null;
+    /** 与数据区的合计行对齐（操作列这一格留空） */
+    showSummary?: boolean;
+}
+declare const ActionsPanel: import("svelte").Component<Props, {}, "scrollTop">;
+type ActionsPanel = ReturnType<typeof ActionsPanel>;
+export default ActionsPanel;

package/dist/data_table/parts/ActionsRow.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+    import type RowAction from "../lib/RowAction";
+    import { IconButton, TextButton } from "../../general/button";
+    import type TableRow from "./TableRow";
+    import { onDestroy, onMount, tick } from "svelte";
+    import utils from "../../overlay/common/utils";
+    import PopupMenu from "./PopupMenu.svelte";
+
+    interface Props {
+        row: TableRow;
+        actions: Array<RowAction>;
+        alternative: boolean;
+        parentRect: DOMRect;
+        width: number;
+        rowHeight?: number;
+        align?: 'left' | 'center';
+    }
+
+    let { row, actions, alternative, parentRect, width, rowHeight, align }: Props = $props();
+
+    let actionList = $state<Array<RowAction>>([]);
+    let popupList = $state<Array<RowAction>>([]);
+
+    let cell: HTMLDivElement;
+    let showPopup = $state(false);
+
+    let isOverflowing = $state(false);
+    let resizeObserver: ResizeObserver;
+
+    onMount(() => {
+        resizeObserver = new ResizeObserver(() => {
+            checkOverflow();
+        });
+        resizeObserver.observe(cell);
+    });
+
+    onDestroy(() => {
+        resizeObserver?.disconnect();
+    });
+
+    const checkOverflow = async () => {
+        if (actions.length > 0) {
+            await tick();
+            while (cell == null) {
+                await tick();
+            }
+            isOverflowing = width < cell.clientWidth;
+            while (actionList.length > 0 && isOverflowing) {
+                let action = actionList.pop();
+                if (action) {
+                    popupList = [...popupList, action];
+                }
+                actionList = [...actionList];
+                await tick();
+                isOverflowing = width < cell.clientWidth + 8;
+            }
+        } else {
+            isOverflowing = false;
+        }
+    };
+
+    let enableClick = $state(true);
+    const showPopupMenu = async (e: MouseEvent) => {
+        e.stopPropagation();
+        if (enableClick) {
+            enableClick = false;
+            await utils.sleep(0.1);
+            showPopup = true;
+            await utils.sleep(0.1);
+            enableClick = true;
+        }
+    };
+
+    // React to actions changes
+    $effect(() => {
+        void actions;
+        actionList = [...actions];
+        popupList = [];
+        checkOverflow();
+    });
+
+    let style = $derived(rowHeight == null ? '' : `height: ${rowHeight}px`);
+</script>
+
+<div
+    class="data-row"
+    class:alternative
+    style="position: relative; display: block; padding: 0 4px; width: {width}px; {style}"
+>
+    <div class="action-cell" bind:this={cell} style={align == 'center' ? 'margin: 0 auto' : ''}>
+        {#each actionList as action (action)}
+            {#if action.icon}
+                <IconButton
+                    style="flex-shrink: 0; top: 0"
+                    size="small"
+                    outer={false}
+                    type={action.type ?? 'primary'}
+                    icon={action.icon}
+                    onclick={() => action.handler(row.data)}
+                />
+            {:else}
+                <TextButton
+                    style="flex-shrink: 0; top: 0"
+                    size="small"
+                    outer={false}
+                    type={action.type ?? 'primary'}
+                    label={action.label}
+                    onclick={async () => action.handler(row.data)}
+                />
+            {/if}
+        {/each}
+        {#if popupList.length > 0}
+            <TextButton size="small" type="primary" style="flex-shrink: 0; top: 0" label="..." onclick={showPopupMenu} />
+        {/if}
+    </div>
+
+    {#if showPopup}
+        <PopupMenu {parentRect} onclose={() => (showPopup = false)}>
+            <div style="padding: 4px 6px; box-sizing: border-box; background-color: #ffffff;">
+                {#each [...popupList].reverse() as action (action)}
+                    <div class="action-popover" style="padding: 4px 6px; text-align: center">
+                        {#if action.icon}
+                            <IconButton
+                                style="flex-shrink: 0; top: 0"
+                                size="small"
+                                type={action.type ?? 'primary'}
+                                icon={action.icon}
+                                onclick={async () => {
+                                    action.handler(row.data);
+                                    showPopup = false;
+                                }}
+                            />
+                        {:else}
+                            <TextButton
+                                style="flex-shrink: 0; top: 0"
+                                size="small"
+                                type={action.type ?? 'primary'}
+                                label={action.label}
+                                onclick={async () => {
+                                    action.handler(row.data);
+                                    showPopup = false;
+                                }}
+                            />
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        </PopupMenu>
+    {/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type RowAction from "../lib/RowAction";
+import type TableRow from "./TableRow";
+interface Props {
+    row: TableRow;
+    actions: Array<RowAction>;
+    alternative: boolean;
+    parentRect: DOMRect;
+    width: number;
+    rowHeight?: number;
+    align?: 'left' | 'center';
+}
+declare const ActionsRow: import("svelte").Component<Props, {}, "">;
+type ActionsRow = ReturnType<typeof ActionsRow>;
+export default ActionsRow;