@ticatec/uniface-element 0.1.14 → 0.1.16

package/dist/concise-data-table/ConciseListTable.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+
+    import {onMount, onDestroy, tick} from 'svelte';
+    import DataRow from "./DataRow.svelte";
+    import {type RowClickHandler, type TableOptions} from "./TableOptions";
+    import utils from "./utils";
+
+    // list array to display
+    export let list: Array<any>;
+    // Column definitions with configuration
+    export let columns: Array<Column>;
+    // Enable auto-scroll feature
+    export let autoScroll: boolean = false;
+    // Milliseconds between each scroll step
+    export let scrollInterval: number = 2000;
+    export let rowClickHandler: RowClickHandler | null = null;
+    //行高
+
+    // Height of the component in pixels
+    //table background color
+    export let options: TableOptions;
+
+    let tabOptions: TableOptions;
+
+    $: tabOptions = {headerHeight: 36, rowHeight: 32, ...options}
+
+
+    let id = (new Date().getTime() * 1000 + Math.floor(Math.random() * 1000)).toString(36);
+    let tableStyle: string = '';
+    let tableContainer: any;
+    let viewPanel: any;
+    let headerRow: any;
+    let scrollTimer: any;
+    let currentScrollIndex: number = 0;
+    let visibleRowCount: number = 0;
+
+    $: totalWeight = columns.reduce((sum, col) => sum + (col.weight || 0), 0);
+
+    let rowHeight: number;
+
+
+    let clonedRows: Array<any> = []; // 用于无缝滚动的克隆行
+    let viewWidth = 0;
+    let viewHeight = 0;
+    let resizeObserver: any;
+
+    onMount(async () => {
+        resizeObserver = new ResizeObserver(() => {
+            viewWidth = Math.round(viewPanel?.clientWidth) - 1;
+            viewHeight = Math.round(viewPanel?.clientHeight) - 1;
+        });
+        resizeObserver.observe(viewPanel);
+    });
+
+    onDestroy(() => {
+        resizeObserver.disconnect();
+    })
+
+
+    const setupAutoScroll = async () => {
+        if (autoScroll && tableContainer && list.length > 0) {
+            await tick();
+            const tableBody = tableContainer.querySelector('.table-body');
+            if (tableBody && tableBody.children.length > 0) {
+                rowHeight = tableBody.children[0].offsetHeight;
+                visibleRowCount = Math.floor((tableContainer.offsetHeight - headerRow.offsetHeight) / rowHeight);
+                if (list.length <= visibleRowCount) return;
+                clonedRows = [...list];
+                startAutoScroll();
+            }
+        }
+    }
+
+    const startAutoScroll = () => {
+        // Clear any existing timer
+        if (scrollTimer) clearInterval(scrollTimer);
+
+        currentScrollIndex = 0;
+
+        scrollTimer = setInterval(() => {
+            currentScrollIndex++;
+            const tableBody = tableContainer.querySelector('.table-body');
+            if (tableBody) {
+                tableBody.style.transform = `translateY(-${currentScrollIndex * rowHeight}px)`;
+                if (currentScrollIndex >= list.length) {
+                    setTimeout(() => {
+                        tableBody.style.transition = 'none';
+                        tableBody.style.transform = `translateY(0)`;
+                        currentScrollIndex = 0;
+
+                        // 恢复过渡效果
+                        setTimeout(() => {
+                            tableBody.style.transition = 'transform 2s ease';
+                        }, 50);
+                    }, 50);
+                }
+            }
+        }, scrollInterval);
+    }
+
+    const stopAutoScroll = () => {
+        if (scrollTimer) {
+            clearInterval(scrollTimer);
+            scrollTimer = null;
+        }
+    }
+
+    onMount(async () => {
+        await setupAutoScroll();
+    });
+
+    onDestroy(() => {
+        stopAutoScroll();
+    });
+
+    $: if (list || autoScroll || scrollInterval) {
+        stopAutoScroll();
+        setupAutoScroll();
+    }
+
+    $: tableStyle = utils.generateTableStyle(id, columns, tabOptions, viewWidth);
+
+
+</script>
+
+<div id="tab_{id}" class="uniface-concise-datatable">
+    {@html tableStyle}
+    <div class="table-container" bind:this={tableContainer}>
+        <!-- Fixed header -->
+        <div class="table-header">
+            <div class="table-row" bind:this={headerRow}>
+                {#each columns as column, idx}
+                    <div class="data-cell col_{idx}">
+                        {column.title ?? ''}
+                    </div>
+                {/each}
+            </div>
+        </div>
+
+        <!-- Scrollable body -->
+        <div class="table-body-container" bind:this={viewPanel} class:auto-scroll={autoScroll}>
+            <div class="table-body" style="transition: transform {autoScroll ? '2s' : '0s'} ease;">
+                {#each list as row, rowIndex}
+                    <DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={rowClickHandler?.(row)}/>
+                {/each}
+                {#if autoScroll && list.length > visibleRowCount}
+                    {#each list.slice(0, visibleRowCount) as row, rowIndex}
+                        <DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={rowClickHandler?.(row)}/>
+                    {/each}
+                {/if}
+            </div>
+        </div>
+    </div>
+</div>

package/dist/concise-data-table/ConciseListTable.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type RowClickHandler, type TableOptions } from "./TableOptions";
+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;
+}
+declare const ConciseListTable: $$__sveltets_2_IsomorphicComponent<{
+    list: Array<any>;
+    columns: Array<Column>;
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    rowClickHandler?: RowClickHandler | null;
+    options: TableOptions;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConciseListTable = InstanceType<typeof ConciseListTable>;
+export default ConciseListTable;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type Column from "./Column";
+
+    export let column: Column;
+    export let idx: number;
+
+    export let data: any;
+
+    let text: string;
+    let escapeHTML: boolean = false;
+
+    $: text = column.formatter ? column.formatter(data[column.field]) : data[column.field];
+
+</script>
+
+<div class="data-cell col_{idx}">
+    {#if escapeHTML}
+        {@html text}
+    {:else }
+        <span>{text}</span>
+    {/if}
+</div>

package/dist/{data-table/parts/LinkButton.svelte.d.ts → concise-data-table/DataCell.svelte.d.ts}

@@ -1,3 +1,4 @@
+import type Column from "./Column";
 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;
@@ -11,12 +12,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const LinkButton: $$__sveltets_2_IsomorphicComponent<{
-    text: any;
-    action: any;
-    style?: string;
+declare const DataCell: $$__sveltets_2_IsomorphicComponent<{
+    column: Column;
+    idx: number;
+    data: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type LinkButton = InstanceType<typeof LinkButton>;
-export default LinkButton;
+type DataCell = InstanceType<typeof DataCell>;
+export default DataCell;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import type Column from "./Column";
+    import DataCell from "./DataCell.svelte";
+
+    export let columns: Array<Column>;
+    export let data: any;
+
+    export let showAlternative: boolean;
+</script>
+
+<div class="table-row" class:alternative={showAlternative} on:click>
+    {#each columns as column, idx}
+        <DataCell {idx} {column} {data}/>
+    {/each}
+</div>

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

@@ -0,0 +1,25 @@
+import type Column from "./Column";
+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;
+}
+declare const DataRow: $$__sveltets_2_IsomorphicComponent<{
+    columns: Array<Column>;
+    data: any;
+    showAlternative: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataRow = InstanceType<typeof DataRow>;
+export default DataRow;

package/dist/concise-data-table/TableOptions.d.ts

@@ -0,0 +1,11 @@
+export interface TableOptions {
+    backgroundColor?: string;
+    color?: string;
+    headerHeight?: number;
+    headerBackgroundColor?: string;
+    headerColor?: string;
+    alternativeBackgroundColor?: string;
+    alternativeColor?: string;
+    rowHeight?: number;
+}
+export type RowClickHandler = (row: any) => (event: MouseEvent) => void;

package/dist/concise-data-table/TableOptions.js

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

package/dist/concise-data-table/index.d.ts

@@ -0,0 +1,5 @@
+import ConciseListTable from "./ConciseListTable.svelte";
+import type Column from "./Column";
+import type { TableOptions } from "./TableOptions";
+export default ConciseListTable;
+export type { Column, TableOptions };

package/dist/concise-data-table/index.js

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

package/dist/concise-data-table/utils.d.ts

@@ -0,0 +1,6 @@
+import type Column from "./Column";
+import type { TableOptions } from "./TableOptions";
+declare const _default: {
+    generateTableStyle: (id: string, columns: Array<Column>, options: TableOptions, viewWidth: number) => string;
+};
+export default _default;

package/dist/concise-data-table/utils.js

@@ -0,0 +1,38 @@
+const generateBlockStyle = (prefix, options, keys) => {
+    let style = '';
+    keys.forEach(key => {
+        if (options[key.code]) {
+            style += `${key.attr}: ${options[key.code]}${key.suffix ?? ''};\n`;
+        }
+    });
+    if (style.length > 0) {
+        return `${prefix} { ${style} }`;
+    }
+    else {
+        return '';
+    }
+};
+/**
+ *
+ * @param id
+ * @param columns
+ * @param options
+ * @param viewWidth
+ */
+const generateTableStyle = (id, columns, options, viewWidth) => {
+    let style = '';
+    if (options && columns) {
+        style += generateBlockStyle(`#tab_${id}`, options, [{ code: 'backgroundColor', attr: 'background-color' }, { code: 'color', attr: 'color' }]);
+        style += generateBlockStyle(`#tab_${id} .table-row.alternative `, options, [{ code: 'alternativeBackgroundColor', attr: 'background-color' }, { code: 'alternativeColor', attr: 'color' }]);
+        style += generateBlockStyle(`#tab_${id} .table-header .table-row `, options, [{ code: 'headerBackgroundColor', attr: 'background-color' }, { code: 'headerColor', attr: 'color' }, { code: 'headerHeight', attr: 'height', suffix: 'px' }]);
+        style += generateBlockStyle(`#tab_${id} .table-body .table-row`, options, [{ code: 'headerHeight', attr: 'height', suffix: 'px' }]);
+        let totalWeight = columns.reduce((sum, col) => sum + (col.weight || 0), 0);
+        let tabWidth = columns.reduce((sum, col) => sum + col.width, 0);
+        let diff = (viewWidth - tabWidth) / totalWeight;
+        columns.forEach((col, idx) => {
+            style += `#tab_${id} .col_${idx} {\n width: ${col.width + (col.weight ?? 0) * diff}px; \n text-align: ${col.align ?? 'left'};} \n`;
+        });
+    }
+    return `<style>${style}</style>`;
+};
+export default { generateTableStyle };

package/dist/criteria-field/CriteriaField.svelte

@@ -6,14 +6,15 @@
     export let label$style: string = '';
     export let arrangement: 'vertical' | 'horizontal' = 'vertical' ;
     export let size: '' | 'x15' | 'x20' | 'x25' | 'x30' | 'x35' | 'x40' = '';
+    export let labelSuffix: string = ':';
 
     let className: string = '';
 
 </script>
 <div class="uniface-filter-field {size} {arrangement} {className}" {style} >
-    <div>
+    <div class="field-container">
         <div class="field-label" style={label$style}>
-            <span>{label}</span>
+            <span>{label}{labelSuffix}</span>
         </div>
         <div class="field">
             <slot/>

package/dist/criteria-field/CriteriaField.svelte.d.ts

@@ -23,6 +23,7 @@ declare const CriteriaField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
     label$style?: string;
     arrangement?: "vertical" | "horizontal";
     size?: "" | "x15" | "x20" | "x25" | "x30" | "x35" | "x40";
+    labelSuffix?: string;
 }, {
     default: {};
 }>, {

package/dist/data-table/DataTable.svelte

@@ -96,6 +96,8 @@
         }
     }
 
+    $: rowHeight = rowHeight ?? 42;
+
 </script>
 
 <div id="tab-{id}" {style} class="uniface-data-table" class:cell-border={colBorder} class:row-border={rowBorder}>

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

@@ -1,9 +1,5 @@
 import type { GetRowActions } from "./RowAction";
 export default interface ActionsColumn {
-    /**
-     * 栏标题
-     */
-    title: string;
     /**
      * 宽度
      */

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

@@ -1,4 +1,4 @@
-export type HrefBuilder = (item: any) => Array<HrefLink | string> | HrefLink;
+export type HrefBuilder = (item: any) => Array<HrefLink> | HrefLink;
 export type HrefAction = () => void;
 export default interface HrefLink {
     /**

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

@@ -4,7 +4,7 @@
     import type ActionsColumn from "../lib/ActionsColumn";
     import type TableRow from "./TableRow";
     import {onDestroy, onMount} from "svelte";
-    import i18n from "../../i18nContext";
+    import i18n from "@ticatec/i18n";
 
     export let actionsColumn: ActionsColumn;
     export let scrollTop: number = 0;
@@ -43,7 +43,7 @@
         resizeObserver.disconnect();
     });
 
-    let actionText = i18n.getText('uniface.element.tableActions', 'Actions');
+    let actionText = i18n.getText('uniface.dataTable.actions', 'Actions');
 
 </script>
 

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

@@ -3,7 +3,7 @@
     import DataRow from "./DataRow.svelte";
     import type DataColumn from "../lib/DataColumn";
     import type TableRow from "./TableRow";
-    import {onMount} from "svelte";
+    import {onDestroy, onMount} from "svelte";
     import TableHeaderPanel from "./TableHeaderPanel.svelte";
     import UniDataTable, {type TableEventHandler} from "../UniDataTable";
     import {OrderDirection} from "../lib/OrderDirection";
@@ -52,6 +52,10 @@
         resizeObserver.observe(viewPanel);
     });
 
+    onDestroy(()=>{
+        resizeObserver.disconnect();
+    })
+
     const handleDataTableScroll = (e: Event) => {
         if (showVerticalScroll) {
             scrollTop = e.target?.scrollTop;
@@ -121,7 +125,7 @@
                         <div class="expand-data-row" bind:clientHeight={inlineRowHeight}
                              style="position: relative; box-sizing: content-box; width: 100%; height: auto">
                             <div class="inline-panel">
-                                <svelte:component this={inlineComponent} data={row}/>
+                                <svelte:component this={inlineComponent} data={row.data}/>
                             </div>
                         </div>
                     {/if}

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

@@ -22,7 +22,7 @@
 
 </script>
 <div class="data-cell {col$class}">
-    <div>
+    <div class="vertical-center">
         {#if column.render}
             <svelte:component this={column.render.component} {...column.render.props} {data}/>
         {:else if column.href}

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

@@ -5,7 +5,7 @@
     import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
     import utils from "../../common/utils";
     import {OrderDirection} from "../lib/OrderDirection";
-    import i18n from "../../i18nContext";
+    import i18n from "@ticatec/i18n";
 
     export let columns: Array<DataColumn>;
     export let indicatorColumn: IndicatorColumn | null;

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

@@ -1,22 +1,20 @@
 <script lang="ts">
+    import type HrefLink from "../lib/HrefLink";
     import type {HrefBuilder} from "../lib/HrefLink";
 
     export let data;
     export let href: HrefBuilder;
 
-    let text: string;
-    let action: any;
+    let list: Array<HrefLink> = [];
+
 
     $: {
         let h = href(data);
-        if (Array.isArray(h)) {
-
-        } else {
-            text = h.text;
-            action = h.action;
-        }
+        list = Array.isArray(h) ? h : [h];
     }
 </script>
-<div>
-    <a href="javascript:void(0)" on:click={()=>action(data)}>{text}</a>
+<div style="display: flex; flex-direction: row; gap: 8px; justify-content: center">
+    {#each list as item, idx}
+        <a href="javascript:void(0)" on:click={()=>item.action()}>{item.text}</a>
+    {/each}
 </div>

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

@@ -10,8 +10,6 @@
     let escapeHTML: boolean = false;
 
 
-
-
     $: {
         let value = tableUtils.extractFieldValue(data, column.field);
         if (column.formatter) {
@@ -26,10 +24,9 @@
 
 </script>
 
-<div class="cell-text">
-    {#if escapeHTML == true}
-        {@html text}
-    {:else}
-        <span>{text}</span>
-    {/if}
-</div>
+
+{#if escapeHTML == true}
+    {@html text}
+{:else}
+    <span>{text}</span>
+{/if}

package/dist/date-picker/DateTimePicker.svelte

@@ -9,6 +9,7 @@
     import {TextButton} from "../button";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import CommonPicker from "../common/CommonPicker.svelte";
+    import i18nContext from "@ticatec/i18n";
 
     export let disabled: boolean = false;
     export let readonly: boolean = false;
@@ -24,7 +25,7 @@
     export let mandatory: boolean = false;
     export let onChange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
 
-    let confirmText = DateContext.getInstance().confirmText;
+    let confirmText = i18nContext.getText('uniface.calendar.confirmText');
     let textValue: string;
     let editor: any;
     let oldValue: Date = dateUtils.toDayjs(value)?.toDate();
@@ -44,11 +45,6 @@
 
     })
 
-    const extractDisplayTime = () => {
-        displayTime = dateUtils.formatDate(value, format);
-        editor && editor.focus();
-    }
-
     const openPopup = () => {
         displayTime = dateUtils.formatDate(currentValue, format);
         showPopup = true;
@@ -136,7 +132,7 @@
                 <span>{displayTime}</span>
             </div>
             <div style="flex: 0 0 auto;">
-                <TextButton label={confirmText} disabled={btnDisabled} onClick={confirm}/>
+                <TextButton label={confirmText} type="primary" disabled={btnDisabled} onClick={confirm}/>
             </div>
         </div>
     </div>

package/dist/date-range/DateRangeEditor.svelte

@@ -65,8 +65,8 @@
         <svelte:fragment slot="to">
             <input style="width: 100%; text-align: center" readonly on:click={showPopover} value={textTo}/>
         </svelte:fragment>
-        <svelte:fragment slot="trailing-icon">
-            <i class="uniface-icon-calendar uniface-editor-action-icon" aria-hidden="true" on:click={showPopover}></i>
+        <svelte:fragment>
+            <i class="uniface-icon-calendar action-icon" aria-hidden="true" on:click={showPopover}></i>
         </svelte:fragment>
     </CommonRangeEditor>
 

package/dist/dialog/Dialog.svelte

@@ -3,7 +3,7 @@
     import {fade} from "svelte/transition";
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
     import ActionBar, {type ButtonActions} from "../action-bar";
-    import i18n from "../i18nContext";
+    import i18n from "@ticatec/i18n";
     import {onMount} from "svelte";
 
     export let title: string = null as unknown as string;

package/dist/form-field/FormField.svelte

@@ -5,18 +5,20 @@
     export {className as class}
     export let label: string = "Label:"
     export let style: string = '';
-    export let label$style: string = '';
+    export let label$style: string | null = null;
     export let required: boolean = false;
     export let error: string = '';
     export let arrangement: 'vertical' | 'horizontal' = 'vertical';
     export let labelSuffix: string = ':';
 
+    export let label$alignment: 'center' | 'top' = 'center'
+
     let className: string = '';
 
 </script>
 <div class="uniface-form-field {arrangement} {className}" {style}>
     <div class="form-content" style="width: 100%">
-        <div class="field-label" style="align-self: center; {label$style};">
+        <div class="field-label" style={label$style} class:vert-top={arrangement== 'horizontal' && label$alignment=='top'}>
             {#if required}
                 <span class="required-indicator">*</span>
             {/if}
@@ -25,14 +27,10 @@
         <div class="field">
             <slot/>
         </div>
-    </div>
-    {#if !utils.isEmpty(error)}
-        <div class="form-content" style="width: 100%">
-            {#if arrangement == "horizontal"}
-                <div class="field-label" style={label$style}>
-                </div>
-            {/if}
+        {#if !utils.isEmpty(error)}
+            <div class="empty-field"></div>
             <div class="field-hint"><span>{error}</span></div>
-        </div>
-    {/if}
+        {/if}
+    </div>
+
 </div>

package/dist/form-field/FormField.svelte.d.ts

@@ -20,11 +20,12 @@ declare const FormField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Props
     class?: string;
     label?: string;
     style?: string;
-    label$style?: string;
+    label$style?: string | null;
     required?: boolean;
     error?: string;
     arrangement?: "vertical" | "horizontal";
     labelSuffix?: string;
+    label$alignment?: "center" | "top";
 }, {
     default: {};
 }>, {

package/dist/i18n_resources/index.d.ts

@@ -0,0 +1,3 @@
+import cn_resource from "./uniface_cn_resource";
+import en_resource from "./uniface_en_resource";
+export { cn_resource, en_resource };

package/dist/i18n_resources/index.js

@@ -0,0 +1,3 @@
+import cn_resource from "./uniface_cn_resource";
+import en_resource from "./uniface_en_resource";
+export { cn_resource, en_resource };