@ticatec/uniface-element 0.3.23 → 5.0.1

package/dist/data_table/parts/ActionsRow.svelte

@@ -0,0 +1,148 @@
+<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"
+                    type={action.type ?? 'primary'}
+                    icon={action.icon}
+                    onclick={() => action.callback(row.data)}
+                />
+            {:else}
+                <TextButton
+                    style="flex-shrink: 0; top: 0"
+                    size="small"
+                    type={action.type ?? 'primary'}
+                    label={action.label}
+                    onclick={async () => action.callback(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} closeCallback={() => (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.callback(row.data);
+                                    showPopup = false;
+                                }}
+                            />
+                        {:else}
+                            <TextButton
+                                style="flex-shrink: 0; top: 0"
+                                size="small"
+                                type={action.type ?? 'primary'}
+                                label={action.label}
+                                onclick={async () => {
+                                    action.callback(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;

package/dist/data_table/parts/ContentPanel.svelte

@@ -0,0 +1,171 @@
+<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 TableEventHandler } from "../UniDataTable";
+    import { OrderDirection } from "../lib/OrderDirection";
+    import type { GetRowFontStyle } from "../../types";
+
+    interface Props {
+        columns: Array<DataColumn>;
+        rows: Array<TableRow>;
+        orderColumn: DataColumn;
+        orderDirection: OrderDirection;
+        getRowFontStyle?: GetRowFontStyle;
+        emptyIndicator?: string | null;
+        list: Array<any>;
+        expandRow: TableRow | null;
+        scrollTop?: number;
+        rowHeight?: number;
+        headerHeight?: number;
+        inlineRowHeight?: number;
+        inlineComponent?: any;
+        table: UniDataTable;
+        showVerticalScroll?: boolean;
+        displayHorizontalScroll?: boolean;
+        handleWidthChange?: TableEventHandler;
+        handleCellClick?: (col: DataColumn) => any;
+        tabWidth: number;
+    }
+
+    let {
+        columns,
+        rows = $bindable([]),
+        orderColumn,
+        orderDirection,
+        getRowFontStyle,
+        emptyIndicator = null,
+        list,
+        expandRow,
+        scrollTop = $bindable(0),
+        rowHeight,
+        headerHeight,
+        inlineRowHeight = $bindable(80),
+        inlineComponent = null,
+        table,
+        showVerticalScroll = false,
+        displayHorizontalScroll = true,
+        handleWidthChange,
+        handleCellClick,
+        tabWidth = $bindable(0),
+    }: 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;
+        });
+        resizeObserver.observe(viewPanel);
+    });
+
+    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 hasWhitespace = $derived(viewWidth > tabWidth);
+</script>
+
+<div class="data-content-panel" bind:this={viewPanel}>
+    <TableHeaderPanel
+        {handleCellClick}
+        {orderColumn}
+        {orderDirection}
+        dataCols={columns}
+        {scrollLeft}
+        width={tabWidth}
+        {hasWhitespace}
+        {handleWidthChange}
+        {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">
+                {#each rows as row, idx (idx)}
+                    <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}
+            </div>
+        {:else}
+            <div class="empty-content-board" style="width: 100%">
+                <div>{emptyIndicator ?? 'Empty dataset.'}</div>
+            </div>
+        {/if}
+    </div>
+</div>

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

@@ -0,0 +1,29 @@
+import type DataColumn from "../lib/DataColumn";
+import type TableRow from "./TableRow";
+import UniDataTable, { type TableEventHandler } from "../UniDataTable";
+import { OrderDirection } from "../lib/OrderDirection";
+import type { GetRowFontStyle } from "../../types";
+interface Props {
+    columns: Array<DataColumn>;
+    rows: Array<TableRow>;
+    orderColumn: DataColumn;
+    orderDirection: OrderDirection;
+    getRowFontStyle?: GetRowFontStyle;
+    emptyIndicator?: string | null;
+    list: Array<any>;
+    expandRow: TableRow | null;
+    scrollTop?: number;
+    rowHeight?: number;
+    headerHeight?: number;
+    inlineRowHeight?: number;
+    inlineComponent?: any;
+    table: UniDataTable;
+    showVerticalScroll?: boolean;
+    displayHorizontalScroll?: boolean;
+    handleWidthChange?: TableEventHandler;
+    handleCellClick?: (col: DataColumn) => any;
+    tabWidth: number;
+}
+declare const ContentPanel: import("svelte").Component<Props, {}, "rows" | "scrollTop" | "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,161 @@
+<script lang="ts">
+    import FixedRow from "./FixedRow.svelte";
+    import type TableRow from "./TableRow";
+    import type { IndicatorColumn } from "..";
+    import UniDataTable, {
+        type RowEventHandler,
+        SelectionMode,
+        type TableEventHandler,
+    } from "../UniDataTable";
+    import type DataColumn from "../lib/DataColumn";
+    import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
+    import { OrderDirection } from "../lib/OrderDirection";
+
+    interface Props {
+        fixedCols?: Array<DataColumn>;
+        indicatorColumn?: IndicatorColumn | null;
+        width: number;
+        scrollTop?: number;
+        rows?: Array<TableRow>;
+        handleWidthChange?: TableEventHandler;
+        handleRowExpand?: RowEventHandler;
+        handleCellClick?: (col: DataColumn) => any;
+        orderColumn?: DataColumn;
+        orderDirection?: OrderDirection;
+        selectedRows?: Array<any>;
+        expandRow?: TableRow | null;
+        rowHeight?: number;
+        headerHeight?: number;
+        inlineRowHeight?: number;
+    }
+
+    let {
+        fixedCols = [],
+        indicatorColumn = null,
+        width,
+        scrollTop = $bindable(0),
+        rows = [],
+        handleWidthChange,
+        handleRowExpand,
+        handleCellClick,
+        orderColumn,
+        orderDirection,
+        selectedRows = $bindable([]),
+        expandRow = $bindable(null),
+        rowHeight,
+        headerHeight,
+        inlineRowHeight = 0,
+    }: Props = $props();
+
+    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 handleToggleSelectAll = (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 handleRowSelectChange = (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}
+        {handleCellClick}
+        {handleWidthChange}
+        columns={fixedCols}
+        {indicatorColumn}
+        {handleToggleSelectAll}
+        {rowHeight}
+        {headerHeight}
+    />
+    <div class="rows-container" bind:this={viewPanel} onwheel={handleWheelEvent}>
+        <div>
+            {#each rows ?? [] as row, idx (idx)}
+                <FixedRow
+                    rowNo={idx + 1}
+                    {row}
+                    rowIndex={idx}
+                    selected={selectedIndices.has(idx)}
+                    alternative={idx % 2 == 1}
+                    {selectable}
+                    cols={fixedCols}
+                    {expandRow}
+                    {rowHeight}
+                    {expandable}
+                    {handleRowExpand}
+                    {handleRowSelectChange}
+                    {indicatorColumn}
+                />
+                {#if row == expandRow}
+                    <div class="inline-panel" style="height: {inlineRowHeight}px"> </div>
+                {/if}
+            {/each}
+        </div>
+    </div>
+    <div class="bottom-mask-overlay">
+        <!-- 用于匹配中间数据区域的滚动条 -->
+    </div>
+</div>

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

@@ -0,0 +1,25 @@
+import type TableRow from "./TableRow";
+import type { IndicatorColumn } from "..";
+import { type RowEventHandler, type TableEventHandler } from "../UniDataTable";
+import type DataColumn from "../lib/DataColumn";
+import { OrderDirection } from "../lib/OrderDirection";
+interface Props {
+    fixedCols?: Array<DataColumn>;
+    indicatorColumn?: IndicatorColumn | null;
+    width: number;
+    scrollTop?: number;
+    rows?: Array<TableRow>;
+    handleWidthChange?: TableEventHandler;
+    handleRowExpand?: RowEventHandler;
+    handleCellClick?: (col: DataColumn) => any;
+    orderColumn?: DataColumn;
+    orderDirection?: OrderDirection;
+    selectedRows?: Array<any>;
+    expandRow?: TableRow | null;
+    rowHeight?: number;
+    headerHeight?: number;
+    inlineRowHeight?: number;
+}
+declare const FixedColumnsPanel: import("svelte").Component<Props, {}, "expandRow" | "scrollTop" | "selectedRows">;
+type FixedColumnsPanel = ReturnType<typeof FixedColumnsPanel>;
+export default FixedColumnsPanel;