@ticatec/uniface-element 5.0.3 → 5.0.5

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.3",
+  "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