@ticatec/uniface-element 5.0.5 → 5.1.1

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,7 +4,7 @@
     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";
@@ -15,7 +15,7 @@
         orderColumn: DataColumn;
         orderDirection: OrderDirection;
         getRowFontStyle?: GetRowFontStyle;
-        emptyIndicator?: string | null;
+        emptyText?: string | null;
         list: Array<any>;
         expandRow: TableRow | null;
         scrollTop?: number;
@@ -25,9 +25,9 @@
         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;
@@ -41,7 +41,7 @@
         orderColumn,
         orderDirection,
         getRowFontStyle,
-        emptyIndicator = null,
+        emptyText = null,
         list,
         expandRow,
         scrollTop = $bindable(0),
@@ -51,9 +51,9 @@
         inlineComponent = null,
         table,
         showVerticalScroll = false,
-        displayHorizontalScroll = true,
-        handleWidthChange,
-        handleCellClick,
+        showHorizontalScroll = true,
+        onWidthChange,
+        onCellClick,
         tabWidth = $bindable(0),
         vwindow = null,
         viewportHeight = $bindable(0),
@@ -128,7 +128,7 @@
     });
 
     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
@@ -139,14 +139,14 @@
 
 <div class="data-content-panel" bind:this={viewPanel}>
     <TableHeaderPanel
-        {handleCellClick}
+        {onCellClick}
         {orderColumn}
         {orderDirection}
         dataCols={columns}
         {scrollLeft}
         width={tabWidth}
-        {hasWhitespace}
-        {handleWidthChange}
+        {whitespace}
+        {onWidthChange}
         {headerHeight}
     />
     <div
@@ -189,7 +189,7 @@
             </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,6 +1,6 @@
 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";
@@ -10,7 +10,7 @@ interface Props {
     orderColumn: DataColumn;
     orderDirection: OrderDirection;
     getRowFontStyle?: GetRowFontStyle;
-    emptyIndicator?: string | null;
+    emptyText?: string | null;
     list: Array<any>;
     expandRow: TableRow | null;
     scrollTop?: number;
@@ -20,9 +20,9 @@ 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;

package/dist/data_table/parts/FixedColumnsPanel.svelte

@@ -3,9 +3,9 @@
     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";
@@ -18,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>;
@@ -38,9 +38,9 @@
         width,
         scrollTop = $bindable(0),
         rows = [],
-        handleWidthChange,
-        handleRowExpand,
-        handleCellClick,
+        onWidthChange,
+        onRowExpand,
+        onCellClick,
         orderColumn,
         orderDirection,
         selectedRows = $bindable([]),
@@ -65,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));
@@ -78,7 +78,7 @@
         }
     };
 
-    const handleRowSelectChange = (rowIndex: number, value: boolean) => {
+    const onRowSelectChange = (rowIndex: number, value: boolean) => {
         if (value) {
             selectedIndices = new Set(selectedIndices).add(rowIndex);
         } else {
@@ -132,11 +132,11 @@
         {selectionMode}
         {orderColumn}
         {orderDirection}
-        {handleCellClick}
-        {handleWidthChange}
+        {onCellClick}
+        {onWidthChange}
         columns={fixedCols}
         {indicatorColumn}
-        {handleToggleSelectAll}
+        {onToggleSelectAll}
         {rowHeight}
         {headerHeight}
     />
@@ -158,8 +158,8 @@
                     {expandRow}
                     {rowHeight}
                     {expandable}
-                    {handleRowExpand}
-                    {handleRowSelectChange}
+                    {onRowExpand}
+                    {onRowSelectChange}
                     {indicatorColumn}
                 />
                 {#if row == expandRow}

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

@@ -1,6 +1,6 @@
 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";
@@ -10,9 +10,9 @@ interface Props {
     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>;

package/dist/data_table/parts/FixedHeaderPanel.svelte

@@ -1,34 +1,34 @@
 <script lang="ts">
     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";
     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);
@@ -38,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
@@ -78,7 +78,7 @@
                 resizeCol.width = startWidth + diff;
             }
         }
-        handleWidthChange?.();
+        onWidthChange?.();
     };
 
     function onMouseUp() {
@@ -91,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>
@@ -105,7 +105,7 @@
                 </div>
             {:else}
                 <div style="text-align: center" class="vertical-center">
-                    {#if indicatorColumn.displayNo}
+                    {#if indicatorColumn.showRowNo}
                         <span>{i18nRes.dataTable.rowNo()}</span>
                     {/if}
                 </div>
@@ -120,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}
@@ -129,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}