@ticatec/uniface-element 5.0.4 → 5.0.5

package/README.md

@@ -185,9 +185,9 @@ The library uses CSS custom properties for theming. You can customize the appear
 
 The library includes built-in internationalization support:
 
-default language is english. to load other languages:
+The default language is English. Other languages are loaded dynamically at runtime, so adding a new language never requires a code change.
 
-create a language resource json file in the static web directory, example: `/assets/uniface_zh-CN.json`
+Create a language resource json file in the static web directory, example: `/assets/uniface_zh-CN.json` (this is the complete key list):
 ```json
 {
   "uniface": {
@@ -195,7 +195,9 @@ create a language resource json file in the static web directory, example: `/ass
       "btnClose": "关闭",
       "btnCancel": "取消",
       "btnConfirm": "确定",
-      "textMore": "加载更多"
+      "textMore": "加载更多",
+      "filterPlaceholder": "搜索...",
+      "noResultsText": "无匹配结果..."
     },
     "colorPicker": "选择颜色",
     "calendar": {
@@ -218,14 +220,12 @@ create a language resource json file in the static web directory, example: `/ass
       "btnRemove": "删除",
       "btnPickup": "选择文件"
     },
-    "propertyEditor": {
-      "colName": "属性",
-      "colValue": "值"
-    },
     "dataTable": {
       "rowNo": "#",
       "actions": "操作",
-      "emptyDataSet": "暂无数据"
+      "emptyDataSet": "暂无数据",
+      "totalInfo": "共 <b>{{total}}</b> 条",
+      "rowsPerPage": "行/页"
     },
     "transfer": {
       "selectIndicator": "已选择: {{selected}}/{{total}}"
@@ -234,14 +234,14 @@ create a language resource json file in the static web directory, example: `/ass
 }
 ```
 
-You can load the resource file in the `+page.svelte` or other startup page.
+Load the resource file in `+page.svelte` or another startup page:
 
 ```typescript
 import i18n, {i18nUtils} from "@ticatec/i18n";
 
 // 设置语言
 i18n.setLanguage('zh-CN'); // 或 'en'
-i18nUtils.loadResources('/assets/uniface.json'); //the language code will insert before .json
+i18nUtils.loadResources('/assets/uniface.json'); // the language code will insert before .json => /assets/uniface_zh-CN.json
 ```
 
 ## Available Imports

package/README_CN.md

@@ -261,10 +261,11 @@ await messageBox.showInfo("操作完成", { title: "提示" });
 
 ## 国际化
 
-组件库内置国际化支持：
+组件库内置国际化支持:
 
-中文资源文件：  
-可以将文件放置在静态网站的目录下，比如`/assets/uniface_zh-CN.json`
+默认语言为英文。其他语言在运行时动态加载,未来新增语言无需修改代码。
+
+在静态资源目录下创建语言资源 json 文件,例如 `/assets/uniface_zh-CN.json`(以下为完整键列表):
 ```json
 {
   "uniface": {
@@ -272,7 +273,9 @@ await messageBox.showInfo("操作完成", { title: "提示" });
       "btnClose": "关闭",
       "btnCancel": "取消",
       "btnConfirm": "确定",
-      "textMore": "加载更多"
+      "textMore": "加载更多",
+      "filterPlaceholder": "搜索...",
+      "noResultsText": "无匹配结果..."
     },
     "colorPicker": "选择颜色",
     "calendar": {
@@ -295,14 +298,12 @@ await messageBox.showInfo("操作完成", { title: "提示" });
       "btnRemove": "删除",
       "btnPickup": "选择文件"
     },
-    "propertyEditor": {
-      "colName": "属性",
-      "colValue": "值"
-    },
     "dataTable": {
       "rowNo": "#",
       "actions": "操作",
-      "emptyDataSet": "暂无数据"
+      "emptyDataSet": "暂无数据",
+      "totalInfo": "共 <b>{{total}}</b> 条",
+      "rowsPerPage": "行/页"
     },
     "transfer": {
       "selectIndicator": "已选择: {{selected}}/{{total}}"
@@ -311,16 +312,16 @@ await messageBox.showInfo("操作完成", { title: "提示" });
 }
 ```
 
+在 `+page.svelte` 或其他启动页加载资源文件:
+
 ```typescript
 import i18n, {i18nUtils} from "@ticatec/i18n";
 
 // 设置语言
 i18n.setLanguage('zh-CN'); // 或 'en'
-i18nUtils.loadResources('/assets/uniface.json');
+i18nUtils.loadResources('/assets/uniface.json'); // 语言代码会插入到 .json 之前 => /assets/uniface_zh-CN.json
 ```
 
-
-
 ## 可用导入
 
 ### 模块化导入

package/dist/base-calendar/DateContext.d.ts

@@ -1,3 +1,4 @@
+import "../i18nRes";
 export default class DateContext {
     private _weekBegin;
     private _dateFmt;

package/dist/base-calendar/DateContext.js

@@ -1,5 +1,5 @@
-import i18nRes from "../i18nRes";
 import i18n from "@ticatec/i18n";
+import "../i18nRes"; // side effect: seeds the uniface namespace defaults used by i18n.get() below
 export default class DateContext {
     _weekBegin = 1;
     _dateFmt = "YYYY-MM-DD";
@@ -14,19 +14,16 @@ export default class DateContext {
         return DateContext.instance;
     }
     get months() {
-        return i18nRes.calendar.months;
+        return i18n.get('uniface.calendar.months');
     }
     get monthsAbbr() {
-        return i18nRes.calendar.monthsAbbr;
-        ;
+        return i18n.get('uniface.calendar.monthsAbbr');
     }
     get weekTitle() {
-        return i18nRes.calendar.weekTitle;
-        ;
+        return i18n.get('uniface.calendar.weekTitle');
     }
     get weekTitleAbbr() {
-        return i18nRes.calendar.weekTitleAbbr;
-        ;
+        return i18n.get('uniface.calendar.weekTitleAbbr');
     }
     set weekBegin(value) {
         if (value < 0 || value > 6) {

package/dist/composite/pagination_panel/PaginationPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import Pagination from "../../navigation/pagination";
     import OptionsSelect from "../../form/options_select";
+    import i18nRes from "../../i18nRes";
     import type {GenerateTotalInfo, OnPageChange, OnPageSizeChange} from "../../types";
 
     interface Props {
@@ -29,7 +30,7 @@
         total = 0,
         generateInfo,
         rowCount = $bindable(25),
-        rowCountLabel = 'Rows/Page',
+        rowCountLabel = i18nRes.dataTable.rowsPerPage(),
         align = '',
         onPageSizeChange,
         onchange,
@@ -40,10 +41,12 @@
     );
     // Rendered via {@html} below: generateInfo is a trusted, caller-supplied
     // renderer (not user input) — same opt-in-HTML boundary as DataColumn#renderHTML.
+    // The default text comes from the i18n resources (dataTable.totalInfo), so it
+    // follows the active language instead of being hardcoded English.
     let totalText = $derived(
         generateInfo
             ? generateInfo(total, pageCount, pageNo, rowCount)
-            : `Total: <b>${total}</b> entities.`
+            : i18nRes.dataTable.totalInfo({total})
     );
 
     const handleRowCountChange = () => {

package/dist/composite/transfer/Transfer.svelte

@@ -5,7 +5,6 @@
     import type {FunFilter} from "../../data_display/list_box";
     import type {TransferData} from "../../types";
     import i18n, {i18nUtils} from "@ticatec/i18n";
-    import i18nRes from "../../i18nRes";
 
 
     interface Props {

package/dist/data_table/DataTable.svelte

@@ -11,6 +11,7 @@
     import { OrderDirection } from "./lib/OrderDirection";
     import type { CompareFunction } from "./lib/CompareFunction";
     import type { GetRowFontStyle } from "../types";
+    import { computeVirtualWindow } from "./lib/virtualWindow";
 
     interface Props {
         columns: Array<DataColumn>;
@@ -26,6 +27,13 @@
         emptyIndicator?: string;
         getRowFontStyle?: GetRowFontStyle<T>;
         style?: string;
+        /**
+         * 行虚拟化(窗口化渲染):仅渲染可视区域附近的行,大数据集(数千行以上)
+         * 建议开启。要求所有行高度一致(即统一的 rowHeight),因此默认关闭。
+         */
+        virtual?: boolean;
+        /** 虚拟化时可视区上下额外渲染的行数。 */
+        overscan?: number;
     }
 
     let {
@@ -42,6 +50,8 @@
         emptyIndicator = undefined,
         getRowFontStyle = undefined,
         style = '',
+        virtual = false,
+        overscan = 8,
     }: Props = $props();
 
     const id: string = Math.round(new Date().getTime() + Math.random() * 1000).toString(36);
@@ -59,6 +69,23 @@
     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);
 
@@ -162,6 +189,7 @@
                 {handleWidthChange}
                 width={frozenWidth}
                 bind:scrollTop
+                {vwindow}
             />
         {/if}
 
@@ -185,10 +213,12 @@
             displayHorizontalScroll={actionsColumn != null || indicatorColumn != null || fixedCols.length > 0}
             showVerticalScroll={actionsColumn == null}
             {getRowFontStyle}
+            {vwindow}
+            bind:viewportHeight
         />
     {/if}
 
     {#if actionsColumn}
-        <ActionPanel {expandRow} {rowHeight} {headerHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop />
+        <ActionPanel {expandRow} {rowHeight} {headerHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop {vwindow} />
     {/if}
 </div>

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

@@ -17,6 +17,13 @@ declare function $$render<T = any>(): {
         emptyIndicator?: string;
         getRowFontStyle?: GetRowFontStyle<T>;
         style?: string;
+        /**
+         * 行虚拟化(窗口化渲染):仅渲染可视区域附近的行,大数据集(数千行以上)
+         * 建议开启。要求所有行高度一致(即统一的 rowHeight),因此默认关闭。
+         */
+        virtual?: boolean;
+        /** 虚拟化时可视区上下额外渲染的行数。 */
+        overscan?: number;
     };
     exports: {};
     bindings: "inlineRowHeight" | "selectedRows";

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/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/ContentPanel.svelte

@@ -7,6 +7,7 @@
     import UniDataTable, { type TableEventHandler } from "../UniDataTable";
     import { OrderDirection } from "../lib/OrderDirection";
     import type { GetRowFontStyle } from "../../types";
+    import type { VirtualWindow } from "../lib/virtualWindow";
 
     interface Props {
         columns: Array<DataColumn>;
@@ -28,6 +29,10 @@
         handleWidthChange?: TableEventHandler;
         handleCellClick?: (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 {
@@ -50,6 +55,8 @@
         handleWidthChange,
         handleCellClick,
         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(() => {
@@ -117,6 +129,12 @@
 
     let rowWidth = $derived(Math.max(viewWidth, tabWidth));
     let hasWhitespace = $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}>
@@ -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,6 +183,9 @@
                         </div>
                     {/if}
                 {/each}
+                {#if vwindow}
+                    <div style="height: {vwindow.bottomPad}px"></div>
+                {/if}
             </div>
         {:else}
             <div class="empty-content-board" style="width: 100%">

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

@@ -3,6 +3,7 @@ import type TableRow from "./TableRow";
 import UniDataTable, { type TableEventHandler } 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>;
@@ -23,7 +24,11 @@ interface Props {
     handleWidthChange?: TableEventHandler;
     handleCellClick?: (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;

package/dist/data_table/parts/FixedColumnsPanel.svelte

@@ -10,6 +10,7 @@
     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>;
@@ -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 {
@@ -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);
@@ -133,7 +142,11 @@
     />
     <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}
@@ -153,6 +166,9 @@
                     <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

@@ -3,6 +3,7 @@ import type { IndicatorColumn } from "..";
 import { type RowEventHandler, type TableEventHandler } 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;
@@ -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

@@ -2,7 +2,6 @@
     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 { OrderDirection } from "../lib/OrderDirection";
     import i18nRes from "../../i18nRes";
 
@@ -107,7 +106,7 @@
             {:else}
                 <div style="text-align: center" class="vertical-center">
                     {#if indicatorColumn.displayNo}
-                        <span>{i18nRes.dataTable.rowNo}</span>
+                        <span>{i18nRes.dataTable.rowNo()}</span>
                     {/if}
                 </div>
             {/if}

package/dist/form/attachment_files/FileUploadBar.svelte

@@ -18,9 +18,9 @@
     let status: ProgressStatus = $state(getInitialStatus());
     let progress: number = $state(0);
 
-    let cancelLabel: string = i18nRes.common.btnCancel.toString();
-    let retryLabel: string = i18nRes.upload.btnRetry.toString();
-    let removeLabel: string = i18nRes.upload.btnRemove.toString();
+    let cancelLabel: string = i18nRes.common.btnCancel();
+    let retryLabel: string = i18nRes.upload.btnRetry();
+    let removeLabel: string = i18nRes.upload.btnRemove();
 
     const cancelUpload = async () => {
         if (await file.cancel()) {

package/dist/form/attachment_files/FileUploadPanel.svelte

@@ -26,7 +26,7 @@
         visible?: boolean;
     } = $props();
 
-    let btnPickup = i18nRes.upload.btnPickup.toString();
+    let btnPickup = i18nRes.upload.btnPickup();
 
     let files: Array<UploadFile> = $state([]);
     let fileInput: any;

package/dist/form/color_picker/ColorPickerPanel.svelte

@@ -47,7 +47,7 @@
 
 <div class="color-picker">
     <label for="color-input">
-        {i18nRes.pickupColor}
+        {i18nRes.colorPicker()}
     </label>
 
     <div class="color-input-group">

package/dist/form/date_picker/DateTimePicker.svelte

@@ -44,7 +44,7 @@
     };
 
     const format = $derived(dateFmts[precision]);
-    const confirmText = $derived(i18nRes.calendar.confirmText as any as string);
+    const confirmText = $derived(i18nRes.calendar.confirmText());
 
     let isOpen = $state(false);
     let currentValue = $state<dayjs.Dayjs>(dayjs());

package/dist/form/options_select/OptionsSelect.svelte

@@ -42,9 +42,9 @@
         onchange,
         onfocus,
         onblur,
-        filterPlaceholder = i18nRes.common.filterPlaceholder.toString(),
+        filterPlaceholder = i18nRes.common.filterPlaceholder(),
         filterFunction,
-        noResultsText = i18nRes.common.noResultsText.toString(),
+        noResultsText = i18nRes.common.noResultsText(),
         itemRender,
     }: Props = $props();
 

package/dist/i18nRes/i18nRes.d.ts

@@ -1,3 +1,42 @@
-import { i18nUtils } from "@ticatec/i18n";
-declare const i18nRes: ReturnType<typeof i18nUtils.createResourceProxy>;
+import type { ResourceProxy } from "@ticatec/i18n";
+declare const langRes: {
+    common: {
+        btnClose: string;
+        btnCancel: string;
+        btnConfirm: string;
+        textMore: string;
+        filterPlaceholder: string;
+        noResultsText: string;
+    };
+    colorPicker: string;
+    calendar: {
+        months: string[];
+        monthsAbbr: string[];
+        weekTitle: string[];
+        weekTitleAbbr: string[];
+        confirmText: string;
+    };
+    upload: {
+        btnRetry: string;
+        btnRemove: string;
+        btnPickup: string;
+    };
+    dataTable: {
+        rowNo: string;
+        actions: string;
+        emptyDataSet: string;
+        totalInfo: string;
+        rowsPerPage: string;
+    };
+    transfer: {
+        selectIndicator: string;
+    };
+};
+/**
+ * The shape of this package's translation resources. A language resource file
+ * loaded at runtime (e.g. /assets/uniface_zh-CN.json) should provide every key
+ * of this structure, wrapped in the `uniface` namespace.
+ */
+export type UnifaceLangRes = typeof langRes;
+declare const i18nRes: ResourceProxy<UnifaceLangRes>;
 export default i18nRes;

package/dist/i18nRes/i18nRes.js

@@ -33,7 +33,8 @@ const langRes = {
         rowNo: "#",
         actions: "Actions",
         emptyDataSet: 'Empty dataset',
-        totalInfo: "Total: <b>{{total}}</b>"
+        totalInfo: "Total: <b>{{total}}</b>",
+        rowsPerPage: "Rows/Page"
     },
     transfer: {
         selectIndicator: "Selected: {{selected}}/{{total}}"

package/dist/overlay/dialog/CommonDialog.svelte

@@ -35,7 +35,7 @@
     let dialog: Dialog;
 
     const confirmAction = $derived<ButtonAction>({
-        label: confirmText ?? i18nRes.common.btnConfirm.toString(),
+        label: confirmText ?? i18nRes.common.btnConfirm(),
         type: "primary",
         disabled: confirmHandler == null || !enableConfirm,
         handler: async () => {

package/dist/overlay/dialog/Dialog.svelte

@@ -34,7 +34,7 @@
         closeConfirm = null,
         content$style = '',
         hideClose = false,
-        closeButton = i18nRes.common.btnClose,
+        closeButton = i18nRes.common.btnClose(),
         onClose = null,
         closable = true,
         dialog$style = "",

package/dist/overlay/message-box/MessageBox.svelte.js

@@ -43,14 +43,14 @@ class MessageBoxController {
     }
     showInfo = (_message, options = { type: 'info' }) => {
         const infoButtons = [
-            { label: i18nRes.common.btnClose, type: 'primary', result: ModalResult.MR_OK }
+            { label: i18nRes.common.btnClose(), type: 'primary', result: ModalResult.MR_OK }
         ];
         return this.showMessageBox(_message, infoButtons, options);
     };
     showConfirm = (_message, options = { type: 'question' }) => {
         const confirmButtons = [
-            { label: i18nRes.common.btnConfirm, type: 'primary', result: ModalResult.MR_OK },
-            { label: i18nRes.common.btnCancel, type: 'secondary', result: ModalResult.MR_CANCEL }
+            { label: i18nRes.common.btnConfirm(), type: 'primary', result: ModalResult.MR_OK },
+            { label: i18nRes.common.btnCancel(), type: 'secondary', result: ModalResult.MR_CANCEL }
         ];
         return this.showMessageBox(_message, confirmButtons, options);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",

package/dist/layout/flex/FlexBlock.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-
-    export let fixed: boolean = false;
-    export let style: string = '';
-    export {className as class };
-    export let direction: 'horizontal' | 'vertical' = 'horizontal';
-    export let flex: boolean = false;
-    export let autoFit: boolean = false;
-    export let grow: boolean = false;
-    export let shrink: boolean = false;
-
-    let className:string = '';
-
-</script>
-<div class:flex class="flex-block {className} {flex ? direction : ''}" class:fixed class:grow class:shrink class:auto_fit={autoFit} {style}>
-    <slot/>
-</div>

package/dist/layout/flex/FlexBlock.svelte.d.ts

@@ -1,38 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FlexBlock: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    fixed?: boolean;
-    style?: string;
-    class?: string;
-    direction?: "horizontal" | "vertical";
-    flex?: boolean;
-    autoFit?: boolean;
-    grow?: boolean;
-    shrink?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    class: string;
-}, string>;
-type FlexBlock = InstanceType<typeof FlexBlock>;
-export default FlexBlock;

package/dist/layout/flex/README.md

@@ -1,148 +0,0 @@
-# FlexBlock
-
-A flexible flexbox layout component with support for horizontal/vertical directions, resizing, and growth/shrink options.
-
-## Installation
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-## Import
-
-```typescript
-import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-```
-
-## Basic Usage
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock>
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</FlexBlock>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Flex direction |
-| `flex` | `boolean` | `false` | Apply flex styling based on direction |
-| `fixed` | `boolean` | `false` | Enable fixed positioning |
-| `grow` | `boolean` | `false` | Enable flex-grow |
-| `shrink` | `boolean` | `false` | Enable flex-shrink |
-| `autoFit` | `boolean` | `false` | Enable auto-fit to content |
-| `style` | `string` | `''` | Custom CSS styles for the container |
-| `class` | `string` | `''` | Custom CSS class name |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Main content area |
-
-## Events
-
-No custom events.
-
-## Examples
-
-### Horizontal Layout
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" style="gap: 16px;">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</FlexBlock>
-```
-
-### Vertical Layout
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="vertical" style="gap: 16px;">
-  <div>Header</div>
-  <div>Main Content</div>
-  <div>Footer</div>
-</FlexBlock>
-```
-
-### Flex Grow and Shrink
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" flex grow shrink>
-  <div style="flex: 1;">Flexible Item</div>
-  <div style="width: 200px;">Fixed Item</div>
-</FlexBlock>
-```
-
-### Auto-Fit Layout
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock autoFit>
-  {#each items as item}
-    <div>{item}</div>
-  {/each}
-</FlexBlock>
-```
-
-### Card Grid
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" autoFit style="gap: 16px;">
-  {#each cards as card}
-    <div style="border: 1px solid #ddd; padding: 16px; border-radius: 8px;">
-      <h3>{card.title}</h3>
-      <p>{card.description}</p>
-    </div>
-  {/each}
-</FlexBlock>
-```
-
-### Fixed Positioning
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock fixed direction="vertical" style="position: fixed; top: 0; left: 0; right: 0; height: 100vh;">
-  <div style="height: 60px;">Header</div>
-  <div style="flex: 1; overflow: auto;">Main Content</div>
-  <div style="height: 40px;">Footer</div>
-</FlexBlock>
-```
-
-## Best Practices
-
-1. **Use direction prop** - Choose horizontal or vertical based on your layout needs
-2. **Combine with flex** - Use `flex` prop for responsive layouts that adapt to container size
-3. **Use autoFit** - Enable auto-fit for dynamic content that should wrap
-4. **Use grow/shrink** - Control how items expand or contract within the flex container
-5. **Fixed positioning** - Use `fixed` for sticky layouts that don't scroll with content

package/dist/layout/flex/README_CN.md

@@ -1,148 +0,0 @@
-# FlexBlock 弹性布局组件
-
-一个灵活的 flexbox 布局组件，支持水平/垂直方向、调整大小和增长/收缩选项。
-
-## 安装
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-## 导入
-
-```typescript
-import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-```
-
-## 基本用法
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock>
-  <div>项目 1</div>
-  <div>项目 2</div>
-  <div>项目 3</div>
-</FlexBlock>
-```
-
-## 属性
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|---------|------|
-| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Flex 方向 |
-| `flex` | `boolean` | `false` | 根据方向应用 flex 样式 |
-| `fixed` | `boolean` | `false` | 启用固定定位 |
-| `grow` | `boolean` | `false` | 启用 flex-grow |
-| `shrink` | `boolean` | `false` | 启用 flex-shrink |
-| `autoFit` | `boolean` | `false` | 启用自动适应内容 |
-| `style` | `string` | `''` | 容器的自定义 CSS 样式 |
-| `class` | `string` | `''` | 自定义 CSS 类名 |
-
-## 插槽
-
-| 插槽 | 说明 |
-|------|------|
-| `default` | 主要内容区域 |
-
-## 事件
-
-无自定义事件。
-
-## 示例
-
-### 水平布局
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" style="gap: 16px;">
-  <div>项目 1</div>
-  <div>项目 2</div>
-  <div>项目 3</div>
-</FlexBlock>
-```
-
-### 垂直布局
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="vertical" style="gap: 16px;">
-  <div>头部</div>
-  <div>主要内容</div>
-  <div>页脚</div>
-</FlexBlock>
-```
-
-### 弹性增长和收缩
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" flex grow shrink>
-  <div style="flex: 1;">弹性项目</div>
-  <div style="width: 200px;">固定项目</div>
-</FlexBlock>
-```
-
-### 自动适应布局
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock autoFit>
-  {#each items as item}
-    <div>{item}</div>
-  {/each}
-</FlexBlock>
-```
-
-### 卡片网格
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" autoFit style="gap: 16px;">
-  {#each cards as card}
-    <div style="border: 1px solid #ddd; padding: 16px; border-radius: 8px;">
-      <h3>{card.title}</h3>
-      <p>{card.description}</p>
-    </div>
-  {/each}
-</FlexBlock>
-```
-
-### 固定定位
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock fixed direction="vertical" style="position: fixed; top: 0; left: 0; right: 0; height: 100vh;">
-  <div style="height: 60px;">头部</div>
-  <div style="flex: 1; overflow: auto;">主要内容</div>
-  <div style="height: 40px;">页脚</div>
-</FlexBlock>
-```
-
-## 最佳实践
-
-1. **使用 direction 属性** - 根据布局需求选择水平或垂直方向
-2. **结合 flex 使用** - 使用 `flex` 属性实现响应式布局，适应容器大小
-3. **使用 autoFit** - 动态内容启用自动适应换行
-4. **使用 grow/shrink** - 控制项目在 flex 容器中的扩展或收缩
-5. **固定定位** - 使用 `fixed` 实现不随内容滚动的粘性布局

package/dist/layout/flex/index.d.ts

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

package/dist/layout/flex/index.js

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

package/dist/layout/index.js

@@ -1 +0,0 @@
-"use strict";