@ticatec/topside-elements 1.0.0

package/dist/data_display/tree_view/TreeView.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+
+    import { untrack, type Snippet } from 'svelte';
+    import {SvelteSet} from "svelte/reactivity";
+    import type {TreeLazyLoader, IsNodeVisible, BeforeNodeChange, OnNodeChange} from "../../types";
+    import TreeNodeView from "./TreeNodeView.svelte";
+    import type {OnContextMenu} from "../../overlay/context-menu/ContextMenuItem";
+    import type {HierarchyTree, IHierarchyData} from "../../lib";
+
+    type GetText<T> = (item: T) => string;
+
+    export type GetIcon<T> = (node: IHierarchyData<T>, expanded: boolean) => string | undefined;
+
+    export interface NodeIconContext {
+        node: IHierarchyData<any>;
+        expanded: boolean;
+        isBranch: boolean;
+    }
+
+    export interface ChevronIconContext {
+        expanded: boolean;
+        loading: boolean;
+    }
+
+    interface Props {
+        tree: HierarchyTree<any>;
+        textField: string | GetText<any>;
+        iconField?: string | GetIcon<any>;
+        nodeIcon?: Snippet<[NodeIconContext]>;
+        chevronIcon?: Snippet<[ChevronIconContext]>;
+        style?: string;
+        lazyLoader?: TreeLazyLoader | null;
+        activeNode?: any;
+        class?: string;
+        isVisible?: IsNodeVisible;
+        /**
+         * 切换选中节点前的否决钩子：返回 false 阻止切换；node 为 null 表示取消选中。
+         */
+        beforeChange?: BeforeNodeChange;
+        /**
+         * 选中节点变化后的通知。
+         */
+        onchange?: OnNodeChange;
+        onfocus?: (event: FocusEvent) => void;
+        onblur?: (event: FocusEvent) => void;
+        /** 节点右键菜单回调 (event, node) */
+        oncontextmenu?: OnContextMenu;
+        title?: string;
+        /** 初始展开多少层（0 = 全部折叠，1 = 展开根节点，依此类推）。默认 0。 */
+        defaultExpandDepth?: number;
+    }
+
+    let {
+        tree,
+        textField,
+        iconField,
+        nodeIcon,
+        chevronIcon,
+        style = '',
+        lazyLoader = null,
+        activeNode = $bindable<any>(null),
+        class: className = '',
+        isVisible,
+        beforeChange,
+        onchange,
+        onfocus,
+        onblur,
+        oncontextmenu,
+        title = undefined,
+        defaultExpandDepth = 0
+    }: Props = $props();
+
+    // 展开 / 已加载 / 加载中的 key 集合。SvelteSet 让 .add/.delete 触发响应式更新。
+    let expanded = new SvelteSet<string | number>();
+    let loaded = new SvelteSet<string | number>();
+    let loading = new SvelteSet<string | number>();
+
+    // tree 变化时重置状态（旧 key 对新树无意义）
+    $effect(() => {
+        const currentTree = tree;
+        const depth = defaultExpandDepth;
+        untrack(() => {
+            expanded.clear();
+            loaded.clear();
+            loading.clear();
+            if (depth > 0 && currentTree) {
+                currentTree.walk((node) => {
+                    if (!node.isLeaf && node.level < depth) {
+                        expanded.add(currentTree.getKey(node.data));
+                    }
+                });
+            }
+        });
+    });
+
+    let visibleNodes = $derived(tree.getVisibleList(expanded));
+
+    const isBranch = (node: IHierarchyData<any>): boolean => {
+        return lazyLoader == null ? !node.isLeaf : lazyLoader.isBranch(node);
+    };
+
+    // 统一的选中切换入口：先问 beforeChange（或旧语义的 onchange），通过后再更新并通知
+    const changeActive = async (node: IHierarchyData<any> | null): Promise<boolean> => {
+        const accept = beforeChange == null || (await beforeChange(node)) !== false;
+        if (accept) {
+            activeNode = node;
+            onchange?.(node);
+        }
+        return accept;
+    };
+
+    const selectNode = async (node: IHierarchyData<any>): Promise<void> => { await changeActive(node); };
+
+    const handleToggle = async (node: IHierarchyData<any>) => {
+        const key = tree.getKey(node.data);
+        if (!isBranch(node)) return;
+
+        // 首次展开 + lazy：先 fetch 子节点
+        if (lazyLoader != null && !loaded.has(key) && node.isLeaf) {
+            loading.add(key);
+            try {
+                const children = await lazyLoader.load(node);
+                for (const childData of children) {
+                    tree.appendChild(node, childData);
+                }
+                loaded.add(key);
+                if (children.length === 0) {
+                    // 空子节点 —— 不展开（用户点击不会有视觉变化）
+                    return;
+                }
+            } catch (err) {
+                console.error('Failed to load lazy node:', err);
+                return;
+            } finally {
+                loading.delete(key);
+            }
+        }
+
+        if (expanded.has(key)) {
+            expanded.delete(key);
+        } else {
+            expanded.add(key);
+        }
+    }
+
+    const handleTitleClick = async () => {
+        await changeActive(null);
+    }
+
+</script>
+
+<div class="topside-tree-view {className}" {style} {onfocus} {onblur} role="tree" tabindex="0">
+    {#if title}
+        <div class="tree-view-title" role="button" tabindex="0" onclick={handleTitleClick}
+             onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleTitleClick(); }}>
+            <span class="title-text">{title}</span>
+        </div>
+    {/if}
+    <div class="tree-view-content">
+        {#each visibleNodes as node (tree.getKey(node.data))}
+            {#if isVisible == null || isVisible(node)}
+                <TreeNodeView
+                    {node}
+                    {textField}
+                    {iconField}
+                    {nodeIcon}
+                    {chevronIcon}
+                    {activeNode}
+                    expandable={isBranch(node)}
+                    {oncontextmenu}
+                    onselect={selectNode}
+                    expanded={expanded.has(tree.getKey(node.data))}
+                    loading={loading.has(tree.getKey(node.data))}
+                    ontoggle={() => handleToggle(node)}
+                />
+            {/if}
+        {/each}
+    </div>
+</div>
+
+<style>
+    .topside-tree-view {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--topside-color-surface, #ffffff);
+        color: var(--topside-default-text-color, #374151);
+        box-sizing: border-box;
+        overflow: hidden;
+        height: 100%;
+
+        .tree-view-title {
+            flex: 0 0 auto;
+            padding: 12px 16px;
+            background-color: var(--topside-color-surface, #ffffff);
+            border-bottom: 1px solid var(--topside-color-border-secondary, #e5e7eb);
+            cursor: pointer;
+            user-select: none;
+            z-index: 10;
+            overflow: hidden;
+
+            .title-text {
+                font-size: 16px;
+                font-weight: 600;
+                color: var(--topside-default-text-color, #374151);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: block;
+                max-width: 100%;
+            }
+
+            &:hover {
+                background-color: var(--topside-treeview-item-bg, #EEF4FF);
+            }
+        }
+
+        .tree-view-content {
+            flex: 1;
+            overflow: auto;
+            padding-right: 8px;
+            user-select: none;
+        }
+    }
+</style>

package/dist/data_display/tree_view/TreeView.svelte.d.ts

@@ -0,0 +1,45 @@
+import { type Snippet } from 'svelte';
+import type { TreeLazyLoader, IsNodeVisible, BeforeNodeChange, OnNodeChange } from "../../types";
+import type { OnContextMenu } from "../../overlay/context-menu/ContextMenuItem";
+import type { HierarchyTree, IHierarchyData } from "../../lib";
+type GetText<T> = (item: T) => string;
+export type GetIcon<T> = (node: IHierarchyData<T>, expanded: boolean) => string | undefined;
+export interface NodeIconContext {
+    node: IHierarchyData<any>;
+    expanded: boolean;
+    isBranch: boolean;
+}
+export interface ChevronIconContext {
+    expanded: boolean;
+    loading: boolean;
+}
+interface Props {
+    tree: HierarchyTree<any>;
+    textField: string | GetText<any>;
+    iconField?: string | GetIcon<any>;
+    nodeIcon?: Snippet<[NodeIconContext]>;
+    chevronIcon?: Snippet<[ChevronIconContext]>;
+    style?: string;
+    lazyLoader?: TreeLazyLoader | null;
+    activeNode?: any;
+    class?: string;
+    isVisible?: IsNodeVisible;
+    /**
+     * 切换选中节点前的否决钩子：返回 false 阻止切换；node 为 null 表示取消选中。
+     */
+    beforeChange?: BeforeNodeChange;
+    /**
+     * 选中节点变化后的通知。
+     */
+    onchange?: OnNodeChange;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    /** 节点右键菜单回调 (event, node) */
+    oncontextmenu?: OnContextMenu;
+    title?: string;
+    /** 初始展开多少层（0 = 全部折叠，1 = 展开根节点，依此类推）。默认 0。 */
+    defaultExpandDepth?: number;
+}
+declare const TreeView: import("svelte").Component<Props, {}, "activeNode">;
+type TreeView = ReturnType<typeof TreeView>;
+export default TreeView;

package/dist/data_display/tree_view/index.d.ts

@@ -0,0 +1,7 @@
+import TreeView, { type GetIcon, type NodeIconContext, type ChevronIconContext } from "./TreeView.svelte";
+import type { TreeLazyLoader, IsNodeVisible, BeforeNodeChange, OnNodeChange, LoadChildren } from "../../types";
+import type { IHierarchyData } from "../../lib";
+export type { IHierarchyData };
+export default TreeView;
+export type { TreeLazyLoader, IsNodeVisible, BeforeNodeChange, OnNodeChange, LoadChildren };
+export type { GetIcon, NodeIconContext, ChevronIconContext };

package/dist/data_display/tree_view/index.js

@@ -0,0 +1,2 @@
+import TreeView, {} from "./TreeView.svelte";
+export default TreeView;

package/dist/data_table/DataTable.svelte

@@ -0,0 +1,249 @@
+<script lang="ts" generics="T = any">
+    import ContentPanel from "./parts/ContentPanel.svelte";
+    import type DataColumn from "./lib/DataColumn";
+    import type ActionsColumn from "./lib/ActionsColumn";
+    import type IndicatorColumn from "./lib/IndicatorColumn";
+    import type TableRow from "./parts/TableRow";
+    import UniDataTable from "./UniDataTable";
+    import { onMount, onDestroy } from "svelte";
+    import FixedColumnsPanel from "./parts/FixedColumnsPanel.svelte";
+    import ActionPanel from "./parts/ActionsPanel.svelte";
+    import { OrderDirection } from "./lib/OrderDirection";
+    import type { CompareFn } from "./lib/CompareFn";
+    import type { GetRowFontStyle } from "../types";
+    import { computeVirtualWindow } from "./lib/virtualWindow";
+    import { buildTableSummary } from "./lib/summary";
+    import i18nRes from "../i18nRes";
+
+    interface Props {
+        columns: Array<DataColumn>;
+        actionsColumn?: ActionsColumn<T> | null;
+        indicatorColumn?: IndicatorColumn | null;
+        rowHeight?: number;
+        headerHeight?: number;
+        list: Array<T>;
+        selectedRows?: Array<T>;
+        inlineRowHeight?: number;
+        rowBorder?: boolean;
+        colBorder?: boolean;
+        /** 无数据时显示的文案 */
+        emptyText?: string;
+        getRowFontStyle?: GetRowFontStyle<T>;
+        style?: string;
+        /**
+         * 行虚拟化(窗口化渲染):仅渲染可视区域附近的行,大数据集(数千行以上)
+         * 建议开启。要求所有行高度一致(即统一的 rowHeight),因此默认关闭。
+         */
+        virtual?: boolean;
+        /** 虚拟化时可视区上下额外渲染的行数。 */
+        overscan?: number;
+        /** 合计行的标签，默认取 i18n（uniface.dataTable.summaryLabel，"合计" / "Total"）；传空串则不显示标签 */
+        summaryLabel?: string;
+        /**
+         * 外部提供的合计值，按列 field 取值，优先于列的 summary 在当前 list 上的计算。
+         * 分页场景下用它显示服务端算好的全量合计（数字串会按数字格式化）。
+         */
+        summaryValues?: Record<string, any> | null;
+    }
+
+    let {
+        columns,
+        actionsColumn = null,
+        indicatorColumn = null,
+        rowHeight = 42,
+        headerHeight = 48,
+        list,
+        selectedRows = $bindable([]),
+        inlineRowHeight = $bindable(80),
+        rowBorder = false,
+        colBorder = false,
+        emptyText,
+        getRowFontStyle = undefined,
+        style = '',
+        virtual = false,
+        overscan = 8,
+        summaryLabel,
+        summaryValues = null,
+    }: Props = $props();
+
+    const id: string = Math.round(new Date().getTime() + Math.random() * 1000).toString(36);
+
+    let table = $state.raw<UniDataTable>();
+    let dataColumns = $state.raw<Array<DataColumn>>([]);
+    let rows = $state<Array<TableRow>>([]);
+    let fixedCols = $state.raw<Array<DataColumn>>([]);
+    let tabStyle = $state('');
+    let tabWidth = $state(0);
+    let frozenWidth = $state(0);
+    let styleEl: HTMLStyleElement | undefined;
+
+    let expandRow = $state<TableRow | null>(null);
+    let scrollTop = $state(0);
+    let inlineComponent = $state<any>(null);
+
+    // Measured by ContentPanel (its scrollable data area); drives the virtual window.
+    let viewportHeight = $state(0);
+    let expandIndex = $derived(expandRow ? rows.indexOf(expandRow) : -1);
+    // One shared window for all three panels (frozen / content / actions), so the
+    // slices they render always cover the same absolute row indices.
+    let vwindow = $derived(virtual
+        ? computeVirtualWindow({
+            scrollTop,
+            viewportHeight,
+            rowHeight,
+            count: rows.length,
+            overscan,
+            expandIndex,
+            inlineRowHeight
+        })
+        : null);
+
+    let orderColumn = $state<DataColumn | null>(null);
+    let orderDirection = $state<OrderDirection>(OrderDirection.Ascending);
+
+    // 合计行：没有列需要合计时为 null（不显示）；空数据时也不显示
+    let summaryText = $derived(summaryLabel ?? i18nRes.dataTable.summaryLabel());
+    let tableSummary = $derived.by(() => {
+        if (!table || rows.length === 0) return null;
+        return buildTableSummary(fixedCols, dataColumns, rows.map(r => r.data), {
+            label: summaryText,
+            hasIndicator: indicatorColumn != null,
+            summaryValues
+        });
+    });
+
+    const initializeTable = () => {
+        if (!table) return;
+        table.setColumns(columns);
+        rows = table.rows;
+        dataColumns = table.columns;
+        fixedCols = table.frozenColumns;
+        tabStyle = table.generateTemplateStyle();
+        tabWidth = table.width;
+        frozenWidth = table.frozenWidth;
+    };
+
+    onMount(() => {
+        table = new UniDataTable(id, indicatorColumn?.width);
+        selectedRows = selectedRows ?? [];
+        initializeTable();
+        styleEl = document.createElement('style');
+        document.head.appendChild(styleEl);
+        styleEl.textContent = tabStyle;
+    });
+
+    onDestroy(() => {
+        styleEl?.remove();
+    });
+
+    // Re-initialize when columns change (after mount)
+    $effect(() => {
+        void columns;
+        if (table) {
+            initializeTable();
+        }
+    });
+
+    // Sync generated CSS into the <style> element whenever tabStyle changes.
+    // Using textContent on a real <style> node (instead of {@html} with a <style> string)
+    // reliably triggers the browser's stylesheet recompute on each resize tick.
+    $effect(() => {
+        if (styleEl) {
+            styleEl.textContent = tabStyle;
+        }
+    });
+
+    const onWidthChange = () => {
+        if (!table) return;
+        tabStyle = table.generateTemplateStyle();
+        tabWidth = table.width;
+        frozenWidth = table.frozenWidth;
+    };
+
+    const sortRows = (compareFun: CompareFn, descending: boolean) => {
+        if (!table) return;
+        expandRow = null;
+        let oList = list.sort(compareFun);
+        table.data = descending ? oList.reverse() : oList;
+        rows = table.rows;
+    };
+
+    const onCellClick = (col: DataColumn) => {
+        if (col.compareFunction != null) {
+            if (col.field === orderColumn?.field) {
+                orderDirection = orderDirection == OrderDirection.Ascending
+                    ? OrderDirection.Descending
+                    : OrderDirection.Ascending;
+            } else {
+                orderColumn = col;
+                orderDirection = OrderDirection.Ascending;
+            }
+            sortRows(col.compareFunction, orderDirection == OrderDirection.Descending);
+        }
+    };
+
+    const onRowExpand = async (row: TableRow) => {
+        if (row == expandRow) {
+            expandRow = null;
+            inlineComponent = null;
+        } else {
+            inlineComponent = await indicatorColumn?.buildInlineComponent?.(row.data);
+            expandRow = row;
+        }
+    };
+</script>
+
+<div id="tab-{id}" {style} class="topside-data-table" class:cell-border={colBorder} class:row-border={rowBorder}>
+    {#if table && dataColumns && fixedCols}
+        {#if indicatorColumn || fixedCols.length > 0}
+            <FixedColumnsPanel
+                {onRowExpand}
+                bind:selectedRows
+                {orderDirection}
+                orderColumn={orderColumn as DataColumn}
+                {onCellClick}
+                {indicatorColumn}
+                bind:expandRow
+                {rowHeight}
+                {headerHeight}
+                {fixedCols}
+                {inlineRowHeight}
+                {rows}
+                {onWidthChange}
+                width={frozenWidth}
+                bind:scrollTop
+                {vwindow}
+                summary={tableSummary}
+            />
+        {/if}
+
+        <ContentPanel
+            columns={dataColumns}
+            {orderDirection}
+            orderColumn={orderColumn as DataColumn}
+            {onWidthChange}
+            {onCellClick}
+            {tabWidth}
+            bind:rows
+            bind:scrollTop
+            {expandRow}
+            {rowHeight}
+            {headerHeight}
+            {list}
+            {table}
+            {inlineComponent}
+            bind:inlineRowHeight
+            {emptyText}
+            showHorizontalScroll={actionsColumn != null || indicatorColumn != null || fixedCols.length > 0}
+            showVerticalScroll={actionsColumn == null}
+            {getRowFontStyle}
+            {vwindow}
+            bind:viewportHeight
+            summary={tableSummary?.columns ?? null}
+        />
+    {/if}
+
+    {#if actionsColumn}
+        <ActionPanel {expandRow} {rowHeight} {headerHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop {vwindow} showSummary={tableSummary != null} />
+    {/if}
+</div>

package/dist/data_table/DataTable.svelte.d.ts

@@ -0,0 +1,57 @@
+import type DataColumn from "./lib/DataColumn";
+import type ActionsColumn from "./lib/ActionsColumn";
+import type IndicatorColumn from "./lib/IndicatorColumn";
+import type { GetRowFontStyle } from "../types";
+declare function $$render<T = any>(): {
+    props: {
+        columns: Array<DataColumn>;
+        actionsColumn?: ActionsColumn<T> | null;
+        indicatorColumn?: IndicatorColumn | null;
+        rowHeight?: number;
+        headerHeight?: number;
+        list: Array<T>;
+        selectedRows?: Array<T>;
+        inlineRowHeight?: number;
+        rowBorder?: boolean;
+        colBorder?: boolean;
+        /** 无数据时显示的文案 */
+        emptyText?: string;
+        getRowFontStyle?: GetRowFontStyle<T>;
+        style?: string;
+        /**
+         * 行虚拟化(窗口化渲染):仅渲染可视区域附近的行,大数据集(数千行以上)
+         * 建议开启。要求所有行高度一致(即统一的 rowHeight),因此默认关闭。
+         */
+        virtual?: boolean;
+        /** 虚拟化时可视区上下额外渲染的行数。 */
+        overscan?: number;
+        /** 合计行的标签，默认取 i18n（uniface.dataTable.summaryLabel，"合计" / "Total"）；传空串则不显示标签 */
+        summaryLabel?: string;
+        /**
+         * 外部提供的合计值，按列 field 取值，优先于列的 summary 在当前 list 上的计算。
+         * 分页场景下用它显示服务端算好的全量合计（数字串会按数字格式化）。
+         */
+        summaryValues?: Record<string, any> | null;
+    };
+    exports: {};
+    bindings: "inlineRowHeight" | "selectedRows";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = any> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "inlineRowHeight" | "selectedRows";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = any>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T = any> = InstanceType<typeof DataTable<T>>;
+export default DataTable;