@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/data_table/parts/FixedColumnsPanel.svelte

@@ -3,13 +3,14 @@
     import type TableRow from "./TableRow";
     import type { IndicatorColumn } from "..";
     import UniDataTable, {
-        type RowEventHandler,
+        type OnRowExpand,
         SelectionMode,
-        type TableEventHandler,
+        type OnWidthChange,
     } from "../UniDataTable";
     import type DataColumn from "../lib/DataColumn";
     import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
     import { OrderDirection } from "../lib/OrderDirection";
+    import type { VirtualWindow } from "../lib/virtualWindow";
 
     interface Props {
         fixedCols?: Array<DataColumn>;
@@ -17,9 +18,9 @@
         width: number;
         scrollTop?: number;
         rows?: Array<TableRow>;
-        handleWidthChange?: TableEventHandler;
-        handleRowExpand?: RowEventHandler;
-        handleCellClick?: (col: DataColumn) => any;
+        onWidthChange?: OnWidthChange;
+        onRowExpand?: OnRowExpand;
+        onCellClick?: (col: DataColumn) => any;
         orderColumn?: DataColumn;
         orderDirection?: OrderDirection;
         selectedRows?: Array<any>;
@@ -27,6 +28,8 @@
         rowHeight?: number;
         headerHeight?: number;
         inlineRowHeight?: number;
+        /** Row window when virtual scrolling is on; null renders every row. */
+        vwindow?: VirtualWindow | null;
     }
 
     let {
@@ -35,9 +38,9 @@
         width,
         scrollTop = $bindable(0),
         rows = [],
-        handleWidthChange,
-        handleRowExpand,
-        handleCellClick,
+        onWidthChange,
+        onRowExpand,
+        onCellClick,
         orderColumn,
         orderDirection,
         selectedRows = $bindable([]),
@@ -45,8 +48,14 @@
         rowHeight,
         headerHeight,
         inlineRowHeight = 0,
+        vwindow = null,
     }: Props = $props();
 
+    // Virtual scrolling: same shared window as the other panels, so all three
+    // render the same absolute row indices (selection state and striping use them).
+    let visibleRows = $derived(vwindow ? (rows ?? []).slice(vwindow.start, vwindow.end) : (rows ?? []));
+    let startIndex = $derived(vwindow ? vwindow.start : 0);
+
     let selectionMode = $state<SelectionMode>(SelectionMode.None);
 
     let selectable = $derived(indicatorColumn?.selectable == true);
@@ -56,7 +65,7 @@
     let selectedIndices = $state<Set<number>>(new Set());
 
     // Sync selectedIndices from selectedRows when selectionMode changes externally
-    const handleToggleSelectAll = (value: boolean) => {
+    const onToggleSelectAll = (value: boolean) => {
         if (value) {
             const total = (rows ?? []).length;
             selectedIndices = new Set(Array.from({ length: total }, (_, i) => i));
@@ -69,7 +78,7 @@
         }
     };
 
-    const handleRowSelectChange = (rowIndex: number, value: boolean) => {
+    const onRowSelectChange = (rowIndex: number, value: boolean) => {
         if (value) {
             selectedIndices = new Set(selectedIndices).add(rowIndex);
         } else {
@@ -123,17 +132,21 @@
         {selectionMode}
         {orderColumn}
         {orderDirection}
-        {handleCellClick}
-        {handleWidthChange}
+        {onCellClick}
+        {onWidthChange}
         columns={fixedCols}
         {indicatorColumn}
-        {handleToggleSelectAll}
+        {onToggleSelectAll}
         {rowHeight}
         {headerHeight}
     />
     <div class="rows-container" bind:this={viewPanel} onwheel={handleWheelEvent}>
         <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}
                 <FixedRow
                     rowNo={idx + 1}
                     {row}
@@ -145,14 +158,17 @@
                     {expandRow}
                     {rowHeight}
                     {expandable}
-                    {handleRowExpand}
-                    {handleRowSelectChange}
+                    {onRowExpand}
+                    {onRowSelectChange}
                     {indicatorColumn}
                 />
                 {#if row == expandRow}
                     <div class="inline-panel" style="height: {inlineRowHeight}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/FixedColumnsPanel.svelte.d.ts

@@ -1,17 +1,18 @@
 import type TableRow from "./TableRow";
 import type { IndicatorColumn } from "..";
-import { type RowEventHandler, type TableEventHandler } from "../UniDataTable";
+import { type OnRowExpand, type OnWidthChange } from "../UniDataTable";
 import type DataColumn from "../lib/DataColumn";
 import { OrderDirection } from "../lib/OrderDirection";
+import type { VirtualWindow } from "../lib/virtualWindow";
 interface Props {
     fixedCols?: Array<DataColumn>;
     indicatorColumn?: IndicatorColumn | null;
     width: number;
     scrollTop?: number;
     rows?: Array<TableRow>;
-    handleWidthChange?: TableEventHandler;
-    handleRowExpand?: RowEventHandler;
-    handleCellClick?: (col: DataColumn) => any;
+    onWidthChange?: OnWidthChange;
+    onRowExpand?: OnRowExpand;
+    onCellClick?: (col: DataColumn) => any;
     orderColumn?: DataColumn;
     orderDirection?: OrderDirection;
     selectedRows?: Array<any>;
@@ -19,7 +20,9 @@ interface Props {
     rowHeight?: number;
     headerHeight?: number;
     inlineRowHeight?: number;
+    /** Row window when virtual scrolling is on; null renders every row. */
+    vwindow?: VirtualWindow | null;
 }
-declare const FixedColumnsPanel: import("svelte").Component<Props, {}, "expandRow" | "scrollTop" | "selectedRows">;
+declare const FixedColumnsPanel: import("svelte").Component<Props, {}, "scrollTop" | "expandRow" | "selectedRows">;
 type FixedColumnsPanel = ReturnType<typeof FixedColumnsPanel>;
 export default FixedColumnsPanel;

package/dist/data_table/parts/FixedHeaderPanel.svelte

@@ -1,35 +1,34 @@
 <script lang="ts">
     import type DataColumn from "../lib/DataColumn";
     import type { IndicatorColumn } from "..";
-    import { type SelectionEventHandler, SelectionMode, type TableEventHandler } from "../UniDataTable";
-    import utils from "../../overlay/common/utils";
+    import { type OnSelectAll, SelectionMode, type OnWidthChange } from "../UniDataTable";
     import { OrderDirection } from "../lib/OrderDirection";
     import i18nRes from "../../i18nRes";
 
     interface Props {
         columns: Array<DataColumn>;
         indicatorColumn?: IndicatorColumn | null;
-        handleWidthChange?: TableEventHandler;
+        onWidthChange?: OnWidthChange;
         rowHeight?: number;
         headerHeight?: number;
-        handleCellClick?: (col: DataColumn) => any;
+        onCellClick?: (col: DataColumn) => any;
         orderColumn?: DataColumn;
         orderDirection?: OrderDirection;
         selectionMode?: SelectionMode;
-        handleToggleSelectAll?: SelectionEventHandler;
+        onToggleSelectAll?: OnSelectAll;
     }
 
     let {
         columns,
         indicatorColumn,
-        handleWidthChange,
+        onWidthChange,
         rowHeight,
         headerHeight,
-        handleCellClick,
+        onCellClick,
         orderColumn,
         orderDirection,
         selectionMode = SelectionMode.None,
-        handleToggleSelectAll,
+        onToggleSelectAll,
     }: Props = $props();
 
     let checked = $state(false);
@@ -39,7 +38,7 @@
         const newValue = (e.target as HTMLInputElement).checked;
         checked = newValue;
         indeterminate = false;
-        handleToggleSelectAll?.(newValue);
+        onToggleSelectAll?.(newValue);
     };
 
     // React to selectionMode changes — replaces the old `$:` block
@@ -79,7 +78,7 @@
                 resizeCol.width = startWidth + diff;
             }
         }
-        handleWidthChange?.();
+        onWidthChange?.();
     };
 
     function onMouseUp() {
@@ -92,7 +91,7 @@
     const handleHeaderKeyDown = (column: DataColumn) => (e: KeyboardEvent) => {
         if (column.compareFunction != null && (e.key === 'Enter' || e.key === ' ')) {
             e.preventDefault();
-            handleCellClick?.(column);
+            onCellClick?.(column);
         }
     };
 </script>
@@ -106,8 +105,8 @@
                 </div>
             {:else}
                 <div style="text-align: center" class="vertical-center">
-                    {#if indicatorColumn.displayNo}
-                        <span>{i18nRes.dataTable.rowNo}</span>
+                    {#if indicatorColumn.showRowNo}
+                        <span>{i18nRes.dataTable.rowNo()}</span>
                     {/if}
                 </div>
             {/if}
@@ -121,7 +120,7 @@
             <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
             <div
                 class:sortable={column.compareFunction != null}
-                onclick={() => handleCellClick?.(column)}
+                onclick={() => onCellClick?.(column)}
                 onkeydown={handleHeaderKeyDown(column)}
                 role={column.compareFunction != null ? 'button' : undefined}
                 tabindex={column.compareFunction != null ? 0 : undefined}
@@ -130,7 +129,7 @@
                     : undefined}
                 class="vertical-center"
             >
-                <span>{column.text}</span>
+                <span>{column.title}</span>
                 {#if column.field === orderColumn?.field}
                     <i
                         style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"

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

@@ -1,18 +1,18 @@
 import type DataColumn from "../lib/DataColumn";
 import type { IndicatorColumn } from "..";
-import { type SelectionEventHandler, SelectionMode, type TableEventHandler } from "../UniDataTable";
+import { type OnSelectAll, SelectionMode, type OnWidthChange } from "../UniDataTable";
 import { OrderDirection } from "../lib/OrderDirection";
 interface Props {
     columns: Array<DataColumn>;
     indicatorColumn?: IndicatorColumn | null;
-    handleWidthChange?: TableEventHandler;
+    onWidthChange?: OnWidthChange;
     rowHeight?: number;
     headerHeight?: number;
-    handleCellClick?: (col: DataColumn) => any;
+    onCellClick?: (col: DataColumn) => any;
     orderColumn?: DataColumn;
     orderDirection?: OrderDirection;
     selectionMode?: SelectionMode;
-    handleToggleSelectAll?: SelectionEventHandler;
+    onToggleSelectAll?: OnSelectAll;
 }
 declare const FixedHeaderPanel: import("svelte").Component<Props, {}, "">;
 type FixedHeaderPanel = ReturnType<typeof FixedHeaderPanel>;

package/dist/data_table/parts/FixedRow.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type TableRow from "./TableRow";
-    import type { RowEventHandler, RowSelectEventHandler } from "../UniDataTable";
+    import type { OnRowExpand, OnRowSelect } from "../UniDataTable";
     import DataCell from "./DataCell.svelte";
     import type DataColumn from "../lib/DataColumn";
     import type { IndicatorColumn } from "..";
@@ -13,8 +13,8 @@
         expandable?: boolean;
         row: TableRow;
         alternative: boolean;
-        handleRowExpand?: RowEventHandler;
-        handleRowSelectChange?: (rowIndex: number, value: boolean) => void;
+        onRowExpand?: OnRowExpand;
+        onRowSelectChange?: (rowIndex: number, value: boolean) => void;
         selected?: boolean;
         expandRow?: any;
         rowHeight?: number;
@@ -29,8 +29,8 @@
         expandable = false,
         row,
         alternative,
-        handleRowExpand,
-        handleRowSelectChange,
+        onRowExpand,
+        onRowSelectChange,
         selected = false,
         expandRow = null,
         rowHeight,
@@ -40,7 +40,7 @@
     let style = $derived(rowHeight == null ? '' : `height: ${rowHeight}px`);
 
     const showInlineData = (e: MouseEvent) => {
-        handleRowExpand?.(row);
+        onRowExpand?.(row);
         e.preventDefault();
         e.stopPropagation();
     };
@@ -49,13 +49,13 @@
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             e.stopPropagation();
-            handleRowExpand?.(row);
+            onRowExpand?.(row);
         }
     };
 
     const handleSelectChange = (e: Event) => {
         const checked = (e.target as HTMLInputElement).checked;
-        handleRowSelectChange?.(rowIndex, checked);
+        onRowSelectChange?.(rowIndex, checked);
     };
 </script>
 
@@ -65,7 +65,7 @@
             {#if selectable}
                 <input type="checkbox" checked={selected} onchange={handleSelectChange} />
             {/if}
-            {#if indicatorColumn.displayNo}
+            {#if indicatorColumn.showRowNo}
                 <div style="margin-left: 4px; flex: 1 1 auto; text-align: center">
                     <span>{rowNo}</span>
                 </div>

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

@@ -1,5 +1,5 @@
 import type TableRow from "./TableRow";
-import type { RowEventHandler } from "../UniDataTable";
+import type { OnRowExpand } from "../UniDataTable";
 import type DataColumn from "../lib/DataColumn";
 import type { IndicatorColumn } from "..";
 interface Props {
@@ -10,8 +10,8 @@ interface Props {
     expandable?: boolean;
     row: TableRow;
     alternative: boolean;
-    handleRowExpand?: RowEventHandler;
-    handleRowSelectChange?: (rowIndex: number, value: boolean) => void;
+    onRowExpand?: OnRowExpand;
+    onRowSelectChange?: (rowIndex: number, value: boolean) => void;
     selected?: boolean;
     expandRow?: any;
     rowHeight?: number;

package/dist/data_table/parts/HrefCell.svelte

@@ -20,7 +20,7 @@
         {#if typeof item == 'string'}
             <span>{item}</span>
         {:else}
-            <button type="button" class="link-style" onclick={(e) => { e.preventDefault(); item.action(); }}>{item.text}</button>
+            <button type="button" class="link-style" onclick={(e) => { e.preventDefault(); item.handler(); }}>{item.label}</button>
         {/if}
     {/each}
 </div>

package/dist/data_table/parts/PopupMenu.svelte

@@ -3,15 +3,15 @@
     import { onDestroy, onMount, type Snippet } from "svelte";
 
     interface Props {
-        closeCallback?: () => void;
+        onclose?: () => void;
         parentRect: DOMRect;
         children?: Snippet;
     }
 
-    let { closeCallback, parentRect, children }: Props = $props();
+    let { onclose, parentRect, children }: Props = $props();
 
     const close = () => {
-        closeCallback?.();
+        onclose?.();
     };
 
     let panel: HTMLDivElement;

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

@@ -1,6 +1,6 @@
 import { type Snippet } from "svelte";
 interface Props {
-    closeCallback?: () => void;
+    onclose?: () => void;
     parentRect: DOMRect;
     children?: Snippet;
 }

package/dist/data_table/parts/TableHeaderPanel.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
     import { OrderDirection } from "../lib/OrderDirection";
-    import { type TableEventHandler } from "../UniDataTable";
+    import { type OnWidthChange } from "../UniDataTable";
     import type DataColumn from "../lib/DataColumn";
 
     interface Props {
         scrollLeft?: number;
-        handleWidthChange?: TableEventHandler;
+        onWidthChange?: OnWidthChange;
         dataCols?: Array<any>;
         width?: number;
-        hasWhitespace?: boolean;
-        handleCellClick?: (col: DataColumn) => any;
+        whitespace?: boolean;
+        onCellClick?: (col: DataColumn) => any;
         orderColumn?: DataColumn;
         orderDirection?: OrderDirection;
         headerHeight?: number;
@@ -17,11 +17,11 @@
 
     let {
         scrollLeft = 0,
-        handleWidthChange,
+        onWidthChange,
         dataCols = [],
         width = 0,
-        hasWhitespace = false,
-        handleCellClick,
+        whitespace = false,
+        onCellClick,
         orderColumn,
         orderDirection,
         headerHeight,
@@ -50,7 +50,7 @@
             if (w > (resizeCol.minWidth ?? 50)) {
                 resizeCol.width = startWidth + diff;
             }
-            handleWidthChange?.();
+            onWidthChange?.();
         }
     };
 
@@ -64,7 +64,7 @@
     const handleHeaderKeyDown = (col: DataColumn) => (e: KeyboardEvent) => {
         if (col.compareFunction != null && (e.key === 'Enter' || e.key === ' ')) {
             e.preventDefault();
-            handleCellClick?.(col);
+            onCellClick?.(col);
         }
     };
 </script>
@@ -72,13 +72,13 @@
 <div class="header-row" style="height: {headerHeight}px">
     <div style="left: {-scrollLeft}px; width: {width}px">
         {#each dataCols ?? [] as col, index (index)}
-            <div class="col-{index} data-cell" class:sortable={col.compareFunction != null} class:whitespace={hasWhitespace}>
+            <div class="col-{index} data-cell" class:sortable={col.compareFunction != null} class:whitespace>
                 <!-- role/tabindex are only ever both set together (sortable columns);
                      svelte-check can't verify that pairing statically across the ternary. -->
                 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
                 <div
                     class:sortable={col.compareFunction != null}
-                    onclick={() => handleCellClick?.(col)}
+                    onclick={() => onCellClick?.(col)}
                     onkeydown={handleHeaderKeyDown(col)}
                     role={col.compareFunction != null ? 'button' : undefined}
                     tabindex={col.compareFunction != null ? 0 : undefined}
@@ -87,13 +87,13 @@
                         : undefined}
                     class="vertical-center"
                 >
-                    <span>{col.text}</span>
+                    <span>{col.title}</span>
                     {#if col.field === orderColumn?.field}
                         <i
                             style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
                             class={orderDirection === OrderDirection.Ascending
-                                ? 'uniface-icon-chevron-up'
-                                : 'uniface-icon-chevron-down'}
+                                ? 'icon_google_keyboard_arrow_up'
+                                : 'icon_google_keyboard_arrow_down'}
                         ></i>
                     {/if}
                 </div>

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

@@ -1,13 +1,13 @@
 import { OrderDirection } from "../lib/OrderDirection";
-import { type TableEventHandler } from "../UniDataTable";
+import { type OnWidthChange } from "../UniDataTable";
 import type DataColumn from "../lib/DataColumn";
 interface Props {
     scrollLeft?: number;
-    handleWidthChange?: TableEventHandler;
+    onWidthChange?: OnWidthChange;
     dataCols?: Array<any>;
     width?: number;
-    hasWhitespace?: boolean;
-    handleCellClick?: (col: DataColumn) => any;
+    whitespace?: boolean;
+    onCellClick?: (col: DataColumn) => any;
     orderColumn?: DataColumn;
     orderDirection?: OrderDirection;
     headerHeight?: number;

package/dist/data_table/parts/TextCell.svelte

@@ -17,7 +17,7 @@
         return value ?? '';
     });
 
-    let renderAsHtml = $derived((column.renderHTML ?? column.escapeHTML) == true);
+    let renderAsHtml = $derived(column.renderHTML == true);
 </script>
 
 {#if renderAsHtml == true}

package/dist/feedback/progress-bar/ProgressBar.svelte

@@ -5,30 +5,33 @@
 
     interface Props {
         progress?: number;
-        size?: number;
-        type?: ProgressBarType;
-        height?: number;
+        /** 圆形进度条直径（px） */
+        diameter?: number;
+        /** 形状：circular / linear */
+        variant?: ProgressBarType;
+        /** 线形进度条高度（px） */
+        thickness?: number;
         showText?: boolean;
         status?: ProgressStatus;
     }
 
     let {
         progress = 0,
-        size = 100,
-        type = "circular",
-        height = 5,
+        diameter = 100,
+        variant = "circular",
+        thickness = 5,
         showText = true,
         status = ProgressStatus.progressing
     }: Props = $props();
 
     // 防御性归一化：把外部可能传入的非法值 clamp 到合法范围。
     // - progress: 限定 [0, 100]，过滤 NaN / Infinity（避免 SVG 出现 "NaN" 属性、文本出现 "NaN%"）
-    // - size / height: 至少为 0；radius 额外保证非负，避免 size < height 时圆弧无法绘制
+    // - diameter / thickness: 至少为 0；radius 额外保证非负，避免 diameter < thickness 时圆弧无法绘制
     const safeProgress = $derived(
         Number.isFinite(progress) ? Math.max(0, Math.min(100, progress)) : 0
     );
-    const safeSize = $derived(Number.isFinite(size) && size > 0 ? size : 0);
-    const safeHeight = $derived(Number.isFinite(height) && height > 0 ? height : 0);
+    const safeSize = $derived(Number.isFinite(diameter) && diameter > 0 ? diameter : 0);
+    const safeHeight = $derived(Number.isFinite(thickness) && thickness > 0 ? thickness : 0);
     const radius = $derived(Math.max(0, (safeSize - safeHeight) / 2));
     const circumference = $derived(2 * Math.PI * radius);
     const offset = $derived(circumference * (1 - safeProgress / 100));
@@ -49,7 +52,7 @@
     const strokeColor = $derived(getCurrentColor(status));
 </script>
 
-{#if type === "circular"}
+{#if variant === "circular"}
     <svg width={safeSize} height={safeSize} viewBox="0 0 {safeSize} {safeSize}">
         <circle cx={safeSize / 2} cy={safeSize / 2} r={radius} fill="none"
                 stroke="var(--uniface-progress-bar-bg, #E2E8F0)" stroke-width={safeHeight}/>

package/dist/feedback/progress-bar/ProgressBar.svelte.d.ts

@@ -2,9 +2,12 @@ import { ProgressStatus } from "./ProgressStatus";
 type ProgressBarType = "circular" | "linear";
 interface Props {
     progress?: number;
-    size?: number;
-    type?: ProgressBarType;
-    height?: number;
+    /** 圆形进度条直径（px） */
+    diameter?: number;
+    /** 形状：circular / linear */
+    variant?: ProgressBarType;
+    /** 线形进度条高度（px） */
+    thickness?: number;
     showText?: boolean;
     status?: ProgressStatus;
 }

package/dist/form/FormEditor.svelte

@@ -12,7 +12,7 @@
         readonly?: boolean;
         disabled?: boolean;
         compact?: boolean;
-        className?: string;
+        class?: string;
         variant?: EditorVariant;
         children: Snippet;
     }
@@ -26,7 +26,7 @@
         readonly = false,
         disabled = false,
         compact = false,
-        className,
+        class: className,
         children
     }: Props = $props();
 

package/dist/form/FormEditor.svelte.d.ts

@@ -8,7 +8,7 @@ interface Props {
     readonly?: boolean;
     disabled?: boolean;
     compact?: boolean;
-    className?: string;
+    class?: string;
     variant?: EditorVariant;
     children: Snippet;
 }