@ticatec/uniface-element 0.3.7 → 0.3.9

package/dist/data-table/DataTable.svelte

@@ -11,6 +11,7 @@
     import ActionPanel from "./parts/ActionsPanel.svelte";
     import {OrderDirection} from "./lib/OrderDirection";
     import type {CompareFunction} from "./lib/CompareFunction";
+    import type {GetRowFontStyle} from "./lib/types";
 
     export let columns: Array<DataColumn>;
     export let actionsColumn: ActionsColumn | null = null;
@@ -22,6 +23,7 @@
     export let rowBorder: boolean = false;
     export let colBorder: boolean = false;
     export let emptyIndicator: string | undefined = undefined;
+    export let getRowFontStyle: GetRowFontStyle | undefined = undefined;
 
     export let style: string = '';
 
@@ -114,7 +116,7 @@
         <ContentPanel columns={dataColumns} {orderDirection} {orderColumn} {handleWidthChange} {handleCellClick} {tabWidth} bind:rows
                       bind:scrollTop {expandRow} {rowHeight} {list} {table} {inlineComponent} bind:inlineRowHeight {emptyIndicator}
                       displayHorizontalScroll={actionsColumn!=null || indicatorColumn != null || fixedCols.length > 0}
-                      showVerticalScroll={actionsColumn == null}/>
+                      showVerticalScroll={actionsColumn == null} {getRowFontStyle}/>
     {/if}
 
     {#if actionsColumn}

package/dist/data-table/DataTable.svelte.d.ts

@@ -1,6 +1,7 @@
 import type DataColumn from "./lib/DataColumn";
 import type ActionsColumn from "./lib/ActionsColumn";
 import type IndicatorColumn from "./lib/IndicatorColumn";
+import type { GetRowFontStyle } from "./lib/types";
 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;
@@ -25,6 +26,7 @@ declare const DataTable: $$__sveltets_2_IsomorphicComponent<{
     rowBorder?: boolean;
     colBorder?: boolean;
     emptyIndicator?: string | undefined;
+    getRowFontStyle?: GetRowFontStyle | undefined;
     style?: string;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/data-table/lib/DataColumn.d.ts

@@ -1,6 +1,7 @@
 import type { CellHint, FormatCell } from "./FormatCell";
 import type { HrefBuilder } from "./HrefLink";
 import type { CompareFunction } from "./CompareFunction";
+import type { GetCellStyle } from "./types";
 export default interface DataColumn {
     /**
      * 列头文字
@@ -59,4 +60,8 @@ export default interface DataColumn {
      *
      */
     compareFunction?: CompareFunction;
+    /**
+     * 获取表格的样式
+     */
+    cellStyle?: GetCellStyle;
 }

package/dist/data-table/lib/types.d.ts

@@ -0,0 +1,22 @@
+export interface RowFontStyle {
+    /**
+     * 字体大小
+     */
+    size?: string;
+    /**
+     * 字体颜色
+     */
+    color?: string;
+    /**
+     * 字重
+     */
+    weight?: number | string;
+}
+/**
+ * 获取cell样式
+ */
+export type GetCellStyle = (data: any) => string;
+/**
+ * 获取整行的样式
+ */
+export type GetRowFontStyle = (data: any) => RowFontStyle;

package/dist/data-table/lib/types.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/parts/ContentPanel.svelte

@@ -7,6 +7,7 @@
     import TableHeaderPanel from "./TableHeaderPanel.svelte";
     import UniDataTable, {type TableEventHandler} from "../UniDataTable";
     import {OrderDirection} from "../lib/OrderDirection";
+    import type {GetRowFontStyle} from "../lib/types";
 
 
     export let columns: Array<DataColumn>;
@@ -14,6 +15,8 @@
     export let orderColumn: DataColumn ;
     export let orderDirection: OrderDirection;
 
+    export let getRowFontStyle: GetRowFontStyle | undefined;
+
     export let emptyIndicator: string | null = null;
 
     export let list: Array<any>;
@@ -121,7 +124,7 @@
         {#if rows && rows.length > 0}
             <div style="box-sizing: border-box; width: {rowWidth}px; top: {top}">
                 {#each rows as row, idx}
-                    <DataRow {rowHeight} {row} {columns} alternative={idx % 2 == 1}/>
+                    <DataRow fontStyle={getRowFontStyle?.(row.data)} {rowHeight} {row} {columns} alternative={idx % 2 == 1}/>
                     {#if row == expandRow && inlineComponent}
                         <div class="expand-data-row" bind:clientHeight={inlineRowHeight}
                              style="position: relative; box-sizing: content-box; width: 100%; height: auto">

package/dist/data-table/parts/ContentPanel.svelte.d.ts

@@ -2,6 +2,7 @@ import type DataColumn from "../lib/DataColumn";
 import type TableRow from "./TableRow";
 import UniDataTable, { type TableEventHandler } from "../UniDataTable";
 import { OrderDirection } from "../lib/OrderDirection";
+import type { GetRowFontStyle } from "../lib/types";
 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;
@@ -20,6 +21,7 @@ declare const ContentPanel: $$__sveltets_2_IsomorphicComponent<{
     rows: Array<TableRow>;
     orderColumn: DataColumn;
     orderDirection: OrderDirection;
+    getRowFontStyle: GetRowFontStyle | undefined;
     emptyIndicator?: string | null;
     list: Array<any>;
     expandRow: TableRow | null;

package/dist/data-table/parts/DataCell.svelte

@@ -13,15 +13,17 @@
     let hint: any;
     let cell: any;
     let col$class: string ='';
+    let style: string = '';
 
     $: {
         hint = column.hint?.(data);
+        style = column.cellStyle?.(data) ?? '';
     }
 
     $: col$class = frozen ? `fz_col-${colIdx}` : `col-${colIdx}`;
 
 </script>
-<div class="data-cell {col$class}">
+<div class="data-cell {col$class}" {style}>
     <div class="vertical-center">
         {#if column.render}
             <svelte:component this={column.render.component} {...column.render.props} {data}/>

package/dist/data-table/parts/DataRow.svelte

@@ -3,15 +3,37 @@
     import type DataColumn from "../lib/DataColumn";
     import DataCell from "./DataCell.svelte";
     import type TableRow from "./TableRow";
+    import type {RowFontStyle} from "../lib/types";
 
     export let columns: Array<DataColumn>;
     export let row: TableRow;
     export let alternative: boolean;
-    export let rowHeight: number;  //{ rowHeight}
-
-    let style: string = '';
-
-    $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
+    export let rowHeight: number;
+    export let fontStyle: RowFontStyle;
+
+    /**
+     * 获取行样式
+     * @param rh
+     * @param fs
+     */
+    const getRowStyle = (rh: number, fs: RowFontStyle) => {
+        let rs = '';
+        if (rh) {
+            rs = `height: ${rowHeight}px`;
+        }
+        if (fs?.size) {
+            rs = `font-size: ${fs.size}; ${rs}`;
+        }
+        if (fs?.color) {
+            rs = `color: ${fs?.color}; ${rs}`;
+        }
+        if (fs?.weight) {
+            rs = `font-weight: ${fs?.weight}; ${rs}`;
+        }
+        return rs;
+    }
+
+    $: style = getRowStyle(rowHeight, fontStyle)
 
 
 </script>

package/dist/data-table/parts/DataRow.svelte.d.ts

@@ -1,5 +1,6 @@
 import type DataColumn from "../lib/DataColumn";
 import type TableRow from "./TableRow";
+import type { RowFontStyle } from "../lib/types";
 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;
@@ -18,6 +19,7 @@ declare const DataRow: $$__sveltets_2_IsomorphicComponent<{
     row: TableRow;
     alternative: boolean;
     rowHeight: number;
+    fontStyle: RowFontStyle;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/input-options-select/InputOptionsSelect.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 
-    import {DisplayMode} from "../common/DisplayMode";
-    import type {OnChangeHandler} from "../common/OnChangeHandler";
-    import {tick} from "svelte";
+    import {DisplayMode} from "../types";
+    import type {OnChangeHandler} from "../types";
     import CommonPicker from "../common/CommonPicker.svelte";
     import loadingGif from "../assets/loading.gif";
-    import type {LazyLoader} from "../list-box/types";
+    import type {LazyLoader} from "../types";
+    import type {RetrieveOptionText} from "../types";
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
@@ -14,7 +14,8 @@
     export let text: string = '';
     export let value: any = null;
     export let keyField: string = "code";
-    export let textField: string = "text";
+    export let textField: string | undefined = undefined;
+    export let retrieveText: RetrieveOptionText | undefined = undefined;
     export let displayCode: boolean = false;
     export let menu$height: number = 0;
     export let style: string = '';
@@ -150,10 +151,14 @@
     const handleItemClick = (data: any) => () => {
         isUserTyping = false;
         value = data[keyField];
-        text = data[textField];
         if (value != oldValue) {
             onchange?.(data);
         }
+        if (retrieveText) {
+            text = retrieveText(data)
+        } else if (textField) {
+            text = data[textField]
+        }
         editor.focus();
         showPopup = false;
     }
@@ -194,7 +199,6 @@
     const handleBlur = (event: FocusEvent) => {
         setTimeout(() => {
             const focused = scrollElement!=null && scrollElement.contains(document.activeElement);
-            console.log('当前组合组件是否聚集', focused, value)
             if (!focused) {
                 hasFocus = false;
                 if (value == null) {
@@ -205,6 +209,10 @@
         }, 50)
     };
 
+    const getDisplayText = (item: any) => {
+        return retrieveText?.(item) ?? item[textField ?? keyField];
+    }
+
     const clean = () => {
         value = null;
         text = '';
@@ -230,7 +238,7 @@
                 // 如果已选择值，根据焦点状态显示keyField或textField
                 let selectedItem = options.find(op => op[keyField] == value);
                 if (selectedItem) {
-                    inputText = hasFocus && displayCode ? selectedItem[keyField] : selectedItem[textField];
+                    inputText = hasFocus && displayCode ? selectedItem[keyField] : getDisplayText(selectedItem);
                 } else {
                     inputText = hasFocus && displayCode ? value : text;
                 }
@@ -279,7 +287,7 @@
                     <svelte:component this={itemRender} item={op}/>
                 {:else}
                     <div style="padding: 6px 8px">
-                        <span>{op[textField]}</span>
+                        <span>{getDisplayText(op)}</span>
                     </div>
                 {/if}
             </div>

package/dist/input-options-select/InputOptionsSelect.svelte.d.ts

@@ -1,6 +1,7 @@
-import { DisplayMode } from "../common/DisplayMode";
-import type { OnChangeHandler } from "../common/OnChangeHandler";
-import type { LazyLoader } from "../list-box/types";
+import { DisplayMode } from "../types";
+import type { OnChangeHandler } from "../types";
+import type { LazyLoader } from "../types";
+import type { RetrieveOptionText } from "../types";
 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;
@@ -22,7 +23,8 @@ declare const InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
     text?: string;
     value?: any;
     keyField?: string;
-    textField?: string;
+    textField?: string | undefined;
+    retrieveText?: RetrieveOptionText | undefined;
     displayCode?: boolean;
     menu$height?: number;
     style?: string;

package/dist/input-options-select/index.d.ts

@@ -1,2 +1,4 @@
 import InputOptionsSelect from "./InputOptionsSelect.svelte";
+import type { RetrieveOptionText } from "./types";
 export default InputOptionsSelect;
+export type { RetrieveOptionText };

package/dist/input-options-select/types.d.ts

@@ -0,0 +1 @@
+export type {};

package/dist/input-options-select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/list-box/ListBox.svelte

@@ -28,12 +28,11 @@
     export let onSelectChange: OnSelectChange = null as unknown as OnSelectChange;
     export let onItemDblClick: OnItemDblClick = null as unknown as OnItemDblClick;
     export let onItemClick: OnItemClick = null as unknown as OnItemDblClick;
-
     export let title: string = null as unknown as string;
     export let round: boolean = false;
     export let footer$style: string | null = null;
+    export let filterText: string = '';
 
-    let filterText: string;
     let hasMore: boolean;
     let isBusy: boolean = false;
     let pageNo: number = 1;
@@ -146,8 +145,6 @@
 
     onMount(async () => {
         if (lazyLoader != null) {
-            console.log('加载数据...')
-            filterText = '';
             await lazyLoad();
         }
     })

package/dist/list-box/ListBox.svelte.d.ts

@@ -32,6 +32,7 @@ declare const ListBox: $$__sveltets_2_IsomorphicComponent<{
     title?: string;
     round?: boolean;
     footer$style?: string | null;
+    filterText?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {

package/dist/number-editor/NumberEditor.svelte

@@ -40,8 +40,9 @@
         editor.setFocus();
     }
 
-    let textValue: string = utils.formatNumber(value, precision);
+    //let textValue: string = utils.formatNumber(value, precision);
 
+    $: textValue = utils.formatNumber(value, precision);
 
 </script>
 <CommonEditor {displayMode} {style} value={textValue} {suffix} {prefix} {readonly} {variant} {compact} class={className}

package/dist/types.d.ts

@@ -3,5 +3,11 @@ import type { MouseClickHandler } from "./common/MouseClickHandler";
 import { DisplayMode } from "./common/DisplayMode.js";
 import { DateContext } from "./base-calendar";
 import { ModalResult } from "./message-box";
+import type { LazyLoader } from "./list-box";
+/**
+ * 从选中的Option中获取对于的文字值
+ */
+type RetrieveOptionText = (item: any) => string;
 export { DateContext, ModalResult, DisplayMode };
+export type { RetrieveOptionText, LazyLoader };
 export type { OnChangeHandler, MouseClickHandler };

package/package.json

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