@ticatec/uniface-element 5.0.4 → 5.1.0

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

@@ -0,0 +1,9 @@
+import type RowAction from "./RowAction";
+/**
+ * 单元格动作：与行动作同一形状（NAMING R10）
+ */
+export type CellAction<T = any> = RowAction<T>;
+/**
+ * 获取单元格动作；返回 undefined 表示该单元格没有动作
+ */
+export type GetCellAction<T = any> = (data: T) => CellAction<T> | undefined;

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

@@ -1,4 +1,4 @@
-import type { CompareFunction } from "./CompareFunction";
+import type { CompareFn } from "./CompareFn";
 export default interface CommonHeaderCell {
     /**
      * 栏目的标题
@@ -33,5 +33,5 @@ export interface DataHeaderCell extends CommonHeaderCell {
     /**
      * 排序的比较函数
      */
-    compareFunction?: CompareFunction;
+    compareFunction?: CompareFn;
 }

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

@@ -0,0 +1,3 @@
+export type CompareFn = (o1: any, o2: any) => number;
+declare const compareObject: CompareFn;
+export { compareObject };

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

@@ -1,12 +1,12 @@
-import type { CellHint, FormatCell } from "./FormatCell";
+import type { CellHint, FormatCellFn } from "./FormatCellFn";
 import type { HrefBuilder } from "./HrefLink";
-import type { CompareFunction } from "./CompareFunction";
+import type { CompareFn } from "./CompareFn";
 import type { GetCellStyle } from "../../types";
 export default interface DataColumn {
     /**
-     * 列头文字
+     * 列头文字（与 ConciseListTable 的 Column.title 统一）
      */
-    text: string;
+    title: string;
     /**
      * 对应的字段/属性名
      */
@@ -27,21 +27,16 @@ export default interface DataColumn {
     /**
      * 是否可以换行，默认为false
      */
-    warp?: boolean;
+    wrap?: boolean;
     /**
      * 单元格转换函数
      */
-    formatter?: FormatCell;
+    formatter?: FormatCellFn;
     /**
      * 是否将单元格内容作为可信 HTML 渲染（{@html}），而非纯文本转义。
      * 仅当 field/formatter 输出为可信标记时才应设为 true。
      */
     renderHTML?: boolean;
-    /**
-     * @deprecated 请使用 renderHTML；名称容易被误读为"转义 HTML"，
-     * 实际含义相反——设为 true 会把内容作为可信 HTML 渲染。仍受支持以兼容旧调用。
-     */
-    escapeHTML?: boolean;
     /**
      * 超链接设置
      */
@@ -65,7 +60,7 @@ export default interface DataColumn {
     /**
      *
      */
-    compareFunction?: CompareFunction;
+    compareFunction?: CompareFn;
     /**
      * 获取表格的样式
      */

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

@@ -0,0 +1,2 @@
+export type FormatCellFn = (value: any) => string;
+export type CellHint = (value: any) => string;

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

@@ -1,12 +1,12 @@
 export type HrefBuilder = (item: any) => Array<HrefLink> | HrefLink | string;
-export type HrefAction = () => void;
+export type OnHrefClick = () => void;
 export default interface HrefLink {
     /**
      * 显示超链接的文字
      */
-    text: string;
+    label: string;
     /**
      * 点击的处理函数
      */
-    action: HrefAction;
+    handler: OnHrefClick;
 }

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

@@ -14,5 +14,6 @@ export default interface IndicatorColumn {
     /**
      * 是否显示行号
      */
-    displayNo?: boolean;
+    /** 是否显示行号 */
+    showRowNo?: boolean;
 }

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

@@ -1,29 +1,23 @@
+import type { ButtonType, ActionHandler } from "../../types";
+export type { ActionHandler };
 /**
- * @template T Row data type. Defaults to `any` so existing untyped usage keeps compiling.
- */
-export type ActionFunction<T = any> = (item: T) => void;
-/**
- *
+ * 行动作（DataTable actionsColumn / ActionCell 共用的动作对象，形状与 ButtonAction 一致）
  */
 export default interface RowAction<T = any> {
-    /**
-     *
-     */
+    /** 显示文字 */
     label: string;
-    /**
-     *
-     */
-    type?: 'primary' | 'secondary' | 'third' | 'forth';
-    /**
-     *
-     */
+    /** 语义类型 */
+    type?: ButtonType;
+    /** 前缀图标 */
     icon?: string;
-    /**
-     *
-     */
-    callback: ActionFunction<T>;
+    /** 提示 */
+    tooltip?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 点击处理 */
+    handler: ActionHandler<T>;
 }
 /**
- *
+ * 获取某一行的动作列表
  */
 export type GetRowActions<T = any> = (item: T) => Array<RowAction<T>>;

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

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

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

@@ -1,4 +1,4 @@
-import type { GetCellAction } from "../../types";
+import type { GetCellAction } from "../lib/CellAction";
 interface Props {
     data: any;
     getAction: GetCellAction;

package/dist/data_table/parts/ActionsPanel.svelte

@@ -4,6 +4,7 @@
     import type TableRow from "./TableRow";
     import { onDestroy, onMount } from "svelte";
     import i18nRes from "../../i18nRes";
+    import type { VirtualWindow } from "../lib/virtualWindow";
 
     interface Props {
         actionsColumn: ActionsColumn;
@@ -13,6 +14,8 @@
         expandRow?: TableRow | null;
         rowHeight?: number;
         headerHeight?: number;
+        /** Row window when virtual scrolling is on; null renders every row. */
+        vwindow?: VirtualWindow | null;
     }
 
     let {
@@ -23,8 +26,13 @@
         expandRow = null,
         rowHeight,
         headerHeight,
+        vwindow = null,
     }: 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;
@@ -54,7 +62,7 @@
         resizeObserver?.disconnect();
     });
 
-    let actionText = i18nRes.dataTable.actions;
+    let actionText = i18nRes.dataTable.actions();
 </script>
 
 <div class="action-panel" bind:this={panel} style="user-select: none; width: {actionsColumn.width}px;">
@@ -65,7 +73,11 @@
     </div>
     <div bind:this={scrollPanel} class="rows-container" style="overflow-y: auto" onscroll={handleActionPanelScroll}>
         <div>
-            {#each rows as row, idx (idx)}
+            {#if vwindow}
+                <div style="height: {vwindow.topPad}px"></div>
+            {/if}
+            {#each visibleRows as row, i (startIndex + i)}
+                {@const idx = startIndex + i}
                 <ActionsRow
                     {row}
                     {rowHeight}
@@ -79,6 +91,9 @@
                     <div class="inline-panel" style="height: {inlineRowHeight ?? 0}px"> </div>
                 {/if}
             {/each}
+            {#if vwindow}
+                <div style="height: {vwindow.bottomPad}px"></div>
+            {/if}
         </div>
     </div>
     <div class="bottom-mask-overlay">

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

@@ -1,5 +1,6 @@
 import type ActionsColumn from "../lib/ActionsColumn";
 import type TableRow from "./TableRow";
+import type { VirtualWindow } from "../lib/virtualWindow";
 interface Props {
     actionsColumn: ActionsColumn;
     scrollTop?: number;
@@ -8,6 +9,8 @@ interface Props {
     expandRow?: TableRow | null;
     rowHeight?: number;
     headerHeight?: number;
+    /** Row window when virtual scrolling is on; null renders every row. */
+    vwindow?: VirtualWindow | null;
 }
 declare const ActionsPanel: import("svelte").Component<Props, {}, "scrollTop">;
 type ActionsPanel = ReturnType<typeof ActionsPanel>;

package/dist/data_table/parts/ActionsRow.svelte

@@ -93,17 +93,19 @@
                 <IconButton
                     style="flex-shrink: 0; top: 0"
                     size="small"
+                    outer={false}
                     type={action.type ?? 'primary'}
                     icon={action.icon}
-                    onclick={() => action.callback(row.data)}
+                    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.callback(row.data)}
+                    onclick={async () => action.handler(row.data)}
                 />
             {/if}
         {/each}
@@ -113,7 +115,7 @@
     </div>
 
     {#if showPopup}
-        <PopupMenu {parentRect} closeCallback={() => (showPopup = false)}>
+        <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">
@@ -124,7 +126,7 @@
                                 type={action.type ?? 'primary'}
                                 icon={action.icon}
                                 onclick={async () => {
-                                    action.callback(row.data);
+                                    action.handler(row.data);
                                     showPopup = false;
                                 }}
                             />
@@ -135,7 +137,7 @@
                                 type={action.type ?? 'primary'}
                                 label={action.label}
                                 onclick={async () => {
-                                    action.callback(row.data);
+                                    action.handler(row.data);
                                     showPopup = false;
                                 }}
                             />

package/dist/data_table/parts/ContentPanel.svelte

@@ -4,9 +4,10 @@
     import type TableRow from "./TableRow";
     import { onDestroy, onMount } from "svelte";
     import TableHeaderPanel from "./TableHeaderPanel.svelte";
-    import UniDataTable, { type TableEventHandler } from "../UniDataTable";
+    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>;
@@ -14,7 +15,7 @@
         orderColumn: DataColumn;
         orderDirection: OrderDirection;
         getRowFontStyle?: GetRowFontStyle;
-        emptyIndicator?: string | null;
+        emptyText?: string | null;
         list: Array<any>;
         expandRow: TableRow | null;
         scrollTop?: number;
@@ -24,10 +25,14 @@
         inlineComponent?: any;
         table: UniDataTable;
         showVerticalScroll?: boolean;
-        displayHorizontalScroll?: boolean;
-        handleWidthChange?: TableEventHandler;
-        handleCellClick?: (col: DataColumn) => any;
+        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;
     }
 
     let {
@@ -36,7 +41,7 @@
         orderColumn,
         orderDirection,
         getRowFontStyle,
-        emptyIndicator = null,
+        emptyText = null,
         list,
         expandRow,
         scrollTop = $bindable(0),
@@ -46,10 +51,12 @@
         inlineComponent = null,
         table,
         showVerticalScroll = false,
-        displayHorizontalScroll = true,
-        handleWidthChange,
-        handleCellClick,
+        showHorizontalScroll = true,
+        onWidthChange,
+        onCellClick,
         tabWidth = $bindable(0),
+        vwindow = null,
+        viewportHeight = $bindable(0),
     }: Props = $props();
 
     let scrollLeft = $state(0);
@@ -62,8 +69,13 @@
     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(() => {
@@ -116,19 +128,25 @@
     });
 
     let rowWidth = $derived(Math.max(viewWidth, tabWidth));
-    let hasWhitespace = $derived(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
-        {handleCellClick}
+        {onCellClick}
         {orderColumn}
         {orderDirection}
         dataCols={columns}
         {scrollLeft}
         width={tabWidth}
-        {hasWhitespace}
-        {handleWidthChange}
+        {whitespace}
+        {onWidthChange}
         {headerHeight}
     />
     <div
@@ -140,7 +158,11 @@
     >
         {#if rows && rows.length > 0}
             <div style="box-sizing: border-box; width: {rowWidth}px; top: 0px">
-                {#each rows as row, idx (idx)}
+                {#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}
@@ -161,10 +183,13 @@
                         </div>
                     {/if}
                 {/each}
+                {#if vwindow}
+                    <div style="height: {vwindow.bottomPad}px"></div>
+                {/if}
             </div>
         {:else}
             <div class="empty-content-board" style="width: 100%">
-                <div>{emptyIndicator ?? 'Empty dataset.'}</div>
+                <div>{emptyText ?? 'Empty dataset.'}</div>
             </div>
         {/if}
     </div>

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

@@ -1,15 +1,16 @@
 import type DataColumn from "../lib/DataColumn";
 import type TableRow from "./TableRow";
-import UniDataTable, { type TableEventHandler } from "../UniDataTable";
+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;
-    emptyIndicator?: string | null;
+    emptyText?: string | null;
     list: Array<any>;
     expandRow: TableRow | null;
     scrollTop?: number;
@@ -19,11 +20,15 @@ interface Props {
     inlineComponent?: any;
     table: UniDataTable;
     showVerticalScroll?: boolean;
-    displayHorizontalScroll?: boolean;
-    handleWidthChange?: TableEventHandler;
-    handleCellClick?: (col: DataColumn) => any;
+    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;
 }
-declare const ContentPanel: import("svelte").Component<Props, {}, "rows" | "scrollTop" | "inlineRowHeight" | "tabWidth">;
+declare const ContentPanel: import("svelte").Component<Props, {}, "scrollTop" | "viewportHeight" | "rows" | "inlineRowHeight" | "tabWidth">;
 type ContentPanel = ReturnType<typeof ContentPanel>;
 export default ContentPanel;