@ticatec/uniface-element 0.3.23 → 5.0.0

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

@@ -0,0 +1,37 @@
+import { type Snippet } from 'svelte';
+import type { TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange } 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?: NodeVisibleFun;
+    onchange?: OnNodeSelectionChange;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    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,8 @@
+import TreeView, { type GetIcon, type NodeIconContext, type ChevronIconContext } from "./TreeView.svelte";
+import type { TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange, LoadChildrenFun } from "../../types";
+import type { IHierarchyData } from "../../lib";
+export type { IHierarchyData };
+export type LazyLoader = TreeLazyLoader;
+export default TreeView;
+export type { TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange, LoadChildrenFun };
+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,194 @@
+<script lang="ts">
+    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 { CompareFunction } from "./lib/CompareFunction";
+    import type { GetRowFontStyle } from "../types";
+
+    interface Props {
+        columns: Array<DataColumn>;
+        actionsColumn?: ActionsColumn | null;
+        indicatorColumn?: IndicatorColumn | null;
+        rowHeight?: number;
+        headerHeight?: number;
+        list: Array<any>;
+        selectedRows?: Array<any>;
+        inlineRowHeight?: number;
+        rowBorder?: boolean;
+        colBorder?: boolean;
+        emptyIndicator?: string;
+        getRowFontStyle?: GetRowFontStyle;
+        style?: string;
+    }
+
+    let {
+        columns,
+        actionsColumn = null,
+        indicatorColumn = null,
+        rowHeight = 42,
+        headerHeight = 48,
+        list,
+        selectedRows = $bindable([]),
+        inlineRowHeight = $bindable(80),
+        rowBorder = false,
+        colBorder = false,
+        emptyIndicator = undefined,
+        getRowFontStyle = undefined,
+        style = '',
+    }: 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);
+
+    let orderColumn = $state<DataColumn | null>(null);
+    let orderDirection = $state<OrderDirection>(OrderDirection.Ascending);
+
+    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 handleWidthChange = () => {
+        if (!table) return;
+        tabStyle = table.generateTemplateStyle();
+        tabWidth = table.width;
+        frozenWidth = table.frozenWidth;
+    };
+
+    const sortRows = (compareFun: CompareFunction, descending: boolean) => {
+        if (!table) return;
+        expandRow = null;
+        let oList = list.sort(compareFun);
+        table.data = descending ? oList.reverse() : oList;
+        rows = table.rows;
+    };
+
+    const handleCellClick = (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 handleRowExpand = 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="uniface-data-table" class:cell-border={colBorder} class:row-border={rowBorder}>
+    {#if table && dataColumns && fixedCols}
+        {#if indicatorColumn || fixedCols.length > 0}
+            <FixedColumnsPanel
+                {handleRowExpand}
+                bind:selectedRows
+                {orderDirection}
+                orderColumn={orderColumn as DataColumn}
+                {handleCellClick}
+                {indicatorColumn}
+                bind:expandRow
+                {rowHeight}
+                {headerHeight}
+                {fixedCols}
+                {inlineRowHeight}
+                {rows}
+                {handleWidthChange}
+                width={frozenWidth}
+                bind:scrollTop
+            />
+        {/if}
+
+        <ContentPanel
+            columns={dataColumns}
+            {orderDirection}
+            orderColumn={orderColumn as DataColumn}
+            {handleWidthChange}
+            {handleCellClick}
+            {tabWidth}
+            bind:rows
+            bind:scrollTop
+            {expandRow}
+            {rowHeight}
+            {headerHeight}
+            {list}
+            {table}
+            {inlineComponent}
+            bind:inlineRowHeight
+            {emptyIndicator}
+            displayHorizontalScroll={actionsColumn != null || indicatorColumn != null || fixedCols.length > 0}
+            showVerticalScroll={actionsColumn == null}
+            {getRowFontStyle}
+        />
+    {/if}
+
+    {#if actionsColumn}
+        <ActionPanel {expandRow} {rowHeight} {headerHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop />
+    {/if}
+</div>

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

@@ -0,0 +1,22 @@
+import type DataColumn from "./lib/DataColumn";
+import type ActionsColumn from "./lib/ActionsColumn";
+import type IndicatorColumn from "./lib/IndicatorColumn";
+import type { GetRowFontStyle } from "../types";
+interface Props {
+    columns: Array<DataColumn>;
+    actionsColumn?: ActionsColumn | null;
+    indicatorColumn?: IndicatorColumn | null;
+    rowHeight?: number;
+    headerHeight?: number;
+    list: Array<any>;
+    selectedRows?: Array<any>;
+    inlineRowHeight?: number;
+    rowBorder?: boolean;
+    colBorder?: boolean;
+    emptyIndicator?: string;
+    getRowFontStyle?: GetRowFontStyle;
+    style?: string;
+}
+declare const DataTable: import("svelte").Component<Props, {}, "inlineRowHeight" | "selectedRows">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

package/dist/data_table/UniDataTable.js

@@ -0,0 +1,89 @@
+import TableRows from "./parts/TableRows";
+export var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode[SelectionMode["All"] = 1] = "All";
+    SelectionMode[SelectionMode["Partial"] = 0] = "Partial";
+    SelectionMode[SelectionMode["None"] = -1] = "None";
+})(SelectionMode || (SelectionMode = {}));
+export default class UniDataTable {
+    _frozenColumns = [];
+    _columns = [];
+    tableRows;
+    indicatorWidth;
+    id;
+    _width = 0;
+    _frozenWidth = 0;
+    constructor(id, indicatorWidth) {
+        this.id = id;
+        this.indicatorWidth = indicatorWidth ?? 0;
+        this.tableRows = new TableRows();
+    }
+    set data(value) {
+        this.tableRows.data = value;
+    }
+    get data() {
+        return this.tableRows.data;
+    }
+    setColumns(columns) {
+        this._frozenColumns = [];
+        this._columns = [];
+        (columns ?? []).forEach(col => {
+            if (col.visible != false) {
+                const clone = { ...col };
+                if (clone.frozen) {
+                    this._frozenColumns.push(clone);
+                }
+                else {
+                    this._columns.push(clone);
+                }
+            }
+        });
+    }
+    generateTemplateStyle() {
+        this._width = 0;
+        this._frozenWidth = 0;
+        let colStyle = '';
+        let inv = 0;
+        this._frozenColumns.forEach((col, idx) => {
+            if (col.visible != false) {
+                this._frozenWidth += col.width;
+                colStyle += `#tab-${this.id} .fz_col-${idx - inv} {width: ${col.width}px; text-align: ${col.align ?? 'left'}}\n`;
+                if (col.warp) {
+                    colStyle += `#tab-${this.id} .fz_col-${idx - inv}>div {white-space: wrap}\n`;
+                }
+            }
+            else {
+                inv++;
+            }
+        });
+        inv = 0;
+        this._columns.forEach((col, idx) => {
+            if (col.visible != false) {
+                this._width += col.width;
+                colStyle += `#tab-${this.id} .col-${idx - inv} { width: ${col.width}px ; text-align: ${col.align ?? 'left'} }\n`;
+                if (col.warp) {
+                    colStyle += `#tab-${this.id} .col-${idx - inv}>div {white-space: wrap}\n`;
+                }
+            }
+            else {
+                inv++;
+            }
+        });
+        return colStyle;
+    }
+    get width() {
+        return this._width;
+    }
+    get frozenWidth() {
+        return this._frozenWidth + this.indicatorWidth;
+    }
+    get rows() {
+        return [...this.tableRows.rows];
+    }
+    get columns() {
+        return this._columns;
+    }
+    get frozenColumns() {
+        return this._frozenColumns;
+    }
+}

package/dist/data_table/index.d.ts

@@ -0,0 +1,13 @@
+import DataTable from "./DataTable.svelte";
+import type ActionsColumn from "./lib/ActionsColumn";
+import type { FormatCell, CellHint } from "./lib/FormatCell";
+import type IndicatorColumn from "./lib/IndicatorColumn";
+import type RowAction from "./lib/RowAction";
+import type { GetRowActions, ActionFunction } from "./lib/RowAction";
+import type DataColumn from "./lib/DataColumn";
+import type { CellAction } from "../types";
+import ActionCell from "./parts/ActionCell.svelte";
+export default DataTable;
+export { ActionCell };
+export type { ActionsColumn, IndicatorColumn, FormatCell, CellHint, DataColumn };
+export type { RowAction, GetRowActions, ActionFunction, CellAction };

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

@@ -0,0 +1,67 @@
+import type { CellHint, FormatCell } from "./FormatCell";
+import type { HrefBuilder } from "./HrefLink";
+import type { CompareFunction } from "./CompareFunction";
+import type { GetCellStyle } from "../../types";
+export default interface DataColumn {
+    /**
+     * 列头文字
+     */
+    text: string;
+    /**
+     * 对应的字段/属性名
+     */
+    field?: string;
+    /**
+     * 是否冻结在数据表中，如果前面的frozen是false，那么就无效
+     */
+    frozen?: boolean;
+    /**
+     * 对齐方式
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     *
+     */
+    width: number;
+    minWidth?: number;
+    /**
+     * 是否可以换行，默认为false
+     */
+    warp?: boolean;
+    /**
+     * 单元格转换函数
+     */
+    formatter?: FormatCell;
+    /**
+     * 是否忽略html的转义符
+     */
+    escapeHTML?: boolean;
+    /**
+     * 超链接设置
+     */
+    href?: HrefBuilder;
+    /**
+     * 是否生产hint
+     */
+    hint?: CellHint;
+    /**
+     * 渲染器
+     */
+    render?: any;
+    /**
+     *
+     */
+    visible?: boolean;
+    /**
+     *
+     */
+    resizable?: boolean;
+    /**
+     *
+     */
+    compareFunction?: CompareFunction;
+    /**
+     * 获取表格的样式
+     */
+    cellStyle?: GetCellStyle;
+}

package/dist/data_table/parts/ActionCell.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { CellAction, GetCellAction } from "../../types";
+    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?.handle(data);
+    };
+</script>
+
+{#if action}
+    <div style="width: 100; overflow: hidden;">
+        <TextButton type={action.type ?? 'primary'} label={action.text} onclick={handleClick} />
+    </div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { GetCellAction } from "../../types";
+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,87 @@
+<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";
+
+    interface Props {
+        actionsColumn: ActionsColumn;
+        scrollTop?: number;
+        rows: Array<TableRow>;
+        inlineRowHeight?: number;
+        expandRow?: TableRow | null;
+        rowHeight?: number;
+        headerHeight?: number;
+    }
+
+    let {
+        actionsColumn,
+        scrollTop = $bindable(0),
+        rows,
+        inlineRowHeight = 0,
+        expandRow = null,
+        rowHeight,
+        headerHeight,
+    }: Props = $props();
+
+    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>
+            {#each rows as row, idx (idx)}
+                <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}
+        </div>
+    </div>
+    <div class="bottom-mask-overlay">
+        <!-- 用于匹配中间数据区域的滚动条 -->
+    </div>
+</div>

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

@@ -0,0 +1,14 @@
+import type ActionsColumn from "../lib/ActionsColumn";
+import type TableRow from "./TableRow";
+interface Props {
+    actionsColumn: ActionsColumn;
+    scrollTop?: number;
+    rows: Array<TableRow>;
+    inlineRowHeight?: number;
+    expandRow?: TableRow | null;
+    rowHeight?: number;
+    headerHeight?: number;
+}
+declare const ActionsPanel: import("svelte").Component<Props, {}, "scrollTop">;
+type ActionsPanel = ReturnType<typeof ActionsPanel>;
+export default ActionsPanel;