@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/common-editor/NumberInput.svelte

@@ -1,187 +0,0 @@
-<script lang="ts">
-
-    import type {OnChangeHandler} from "../common/OnChangeHandler";
-    import utils from "../common/utils";
-    import {tick} from "svelte";
-
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let style: string = '';
-    export let value: number | null;
-    export let precision: number | null = null;
-    export let placeholder: string;
-    export let allowNegative: boolean = false;
-    export let max: number | null = null;
-    export let min: number | null = null;
-    export let onchange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
-    export let onfocus: (() => void) | null = null;
-    export let onblur: (() => void) | null = null;
-    export let textValue: string = '';
-
-    export const focus = () => {
-        editor.focus();
-    }
-
-    export const setFocus = () => {
-        setTimeout(() => {
-            editor && editor.focus();
-        }, 50);
-    }
-
-    let regex: RegExp;
-    let editor: HTMLInputElement;
-    let composing: boolean = false;
-    let currentText: string;
-    let isFocused = false;
-
-    /**
-     * 将数字格式化为带千分位的字符串
-     * 例：1234567.89 → "1,234,567.89"
-     */
-    const formatWithThousands = (num: number, prec: number | null): string => {
-        const base = utils.formatNumber(num, prec);
-        if (!base) return base;
-        const parts = base.split('.');
-        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        return parts.join('.');
-    };
-
-    /**
-     * 剥离千分位逗号，还原为可供 parseFloat 使用的原始字符串
-     */
-    const stripThousands = (s: string): string => s.replace(/,/g, '');
-
-    const handleFocusEvent = (e: FocusEvent) => {
-        isFocused = true;
-        // 获焦时剥掉千分位逗号，让用户直接编辑原始数字
-        textValue = stripThousands(textValue);
-        onfocus?.();
-    }
-
-    const handleBlurEvent = (e: FocusEvent) => {
-        isFocused = false;
-        onblur?.();
-        if (!readonly) {
-            // 解析前先剥逗号（容错）
-            const raw = stripThousands(textValue);
-            value = parseFloat(raw);
-            if (isNaN(value)) {
-                value = null;
-            }
-            if (value != null) {
-                if (min != null && value < min) {
-                    value = min;
-                }
-                if (max != null && value > max) {
-                    value = max;
-                }
-                // 失焦后格式化为千分位
-                textValue = formatWithThousands(value, precision);
-            } else {
-                textValue = '';
-            }
-            onchange?.(value);
-        } else {
-            e.stopPropagation();
-        }
-    }
-
-    const checkNewInputText = (s: string): boolean => {
-        // 编辑过程中 editor.value 不含逗号（获焦时已剥），直接使用
-        const currentValue = editor.value;
-        const cursorStart = editor.selectionStart;
-        const cursorEnd = editor.selectionEnd;
-        const resultingString = currentValue.slice(0, cursorStart!) + s + currentValue.slice(cursorEnd!);
-        if (/[^0-9.\-]/.test(resultingString)) {
-            return false;
-        }
-        return regex.test(resultingString) &&
-            utils.isValidNumber(parseFloat(resultingString), precision, allowNegative, max, min);
-    }
-
-    const handlePaste = (event: ClipboardEvent) => {
-        const pasteData = event.clipboardData?.getData('text') || '';
-        if (!checkNewInputText(pasteData)) {
-            event.preventDefault();
-        }
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-        // 拦截全角/非 ASCII 字符
-        if (/[^\x00-\x7F]/.test(event.key)) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-
-        // 允许功能键
-        const allowKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-        if (allowKeys.includes(event.key)) return;
-
-        // 允许数字、小数点、负号
-        if (/[\d.\-]/.test(event.key)) return;
-
-        event.preventDefault();
-        event.stopPropagation();
-    };
-
-    const handleInput = () => {
-        if (composing) return;
-
-        const raw = editor.value;
-
-        // 拦截中文/全角字符（输入法直接上屏的情况）
-        if (/[^\x00-\x7F]/.test(raw)) {
-            editor.value = textValue;
-            return;
-        }
-
-        if (regex.test(raw)) {
-            const parsed = parseFloat(raw);
-            // 仅在数值合法时同步 value，此处不触发格式化
-            if (!isNaN(parsed) && utils.isValidNumber(parsed, precision, allowNegative, max, min)) {
-                value = parsed;
-                onchange?.(value);
-            }
-        }
-
-        // 编辑过程中只更新原始字符串，禁止在此处对 textValue 做任何格式化
-        textValue = raw;
-    }
-
-    const handleCompositionStart = (event: CompositionEvent) => {
-        currentText = editor.value;
-        composing = true;
-    };
-
-    const handleCompositionEnd = (event: CompositionEvent) => {
-        composing = false;
-        if (/[^\x00-\x7F]/.test(editor.value)) {
-            editor.value = currentText;
-            textValue = currentText;
-        } else {
-            handleInput();
-        }
-    };
-
-    /**
-     * 仅在非焦点状态下根据外部 value 更新显示文本（含千分位）。
-     * 焦点状态下绝不重写 textValue，避免干扰用户输入过程。
-     */
-    $: if (!isFocused) {
-        textValue = value == null ? '' : formatWithThousands(value, precision);
-    }
-
-    $: regex = new RegExp(utils.getNumberRegex(precision, allowNegative));
-
-</script>
-<input class="number-editor" bind:this={editor} type="text" {readonly} {style} {disabled}
-       placeholder={readonly || disabled ? '' : placeholder}
-       bind:value={textValue}
-       on:focus={handleFocusEvent}
-       on:blur={handleBlurEvent}
-       on:compositionstart={handleCompositionStart}
-       on:input={handleInput}
-       on:keydown={handleKeyDown}
-       on:compositionend={handleCompositionEnd}
-       on:paste={handlePaste}/>

package/dist/common-editor/NumberInput.svelte.d.ts

@@ -1,38 +0,0 @@
-import type { OnChangeHandler } from "../common/OnChangeHandler";
-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 NumberInput: $$__sveltets_2_IsomorphicComponent<{
-    disabled?: boolean;
-    readonly?: boolean;
-    style?: string;
-    value: number | null;
-    precision?: number | null;
-    placeholder: string;
-    allowNegative?: boolean;
-    max?: number | null;
-    min?: number | null;
-    onchange?: OnChangeHandler<number | null>;
-    onfocus?: (() => void) | null;
-    onblur?: (() => void) | null;
-    textValue?: string;
-    focus?: () => void;
-    setFocus?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    focus: () => void;
-    setFocus: () => void;
-}, string>;
-type NumberInput = InstanceType<typeof NumberInput>;
-export default NumberInput;

package/dist/common-range-editor/CommonRangeEditor.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let compact: boolean = false;
-    export {className as class};
-    export let style: string = '';
-    export let showActionIcon: boolean = false;
-    export let clean: () => void;
-
-    let className: string = '';
-
-</script>
-
-<div class="uniface-common-editor uniface-range-editor uniface-common-picker {variant} {className}" class:compact tabindex="-1" {style}
-     on:blur>
-    <div style="flex: 1 1 auto; height: 100%; display: flex; flex-direction: row; gap: 2px; position: relative">
-        <slot name="from"/>
-        <div class="divider"></div>
-        <slot name="to"/>
-        <div class="uniface-editor-clean-icon {showActionIcon ? '' : 'hidden'}">
-            <i class="icon_google_clear clickable" aria-hidden="true" on:click={clean}></i>
-        </div>
-    </div>
-    <slot/>
-</div>

package/dist/common-range-editor/CommonRangeEditor.svelte.d.ts

@@ -1,42 +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 CommonRangeEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    variant?: "" | "plain" | "outlined" | "filled";
-    compact?: boolean;
-    class?: string;
-    style?: string;
-    showActionIcon?: boolean;
-    clean: () => void;
-}, {
-    from: {};
-    to: {};
-    default: {};
-}>, {
-    blur: FocusEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    from: {};
-    to: {};
-    default: {};
-}, {
-    class: string;
-}, string>;
-type CommonRangeEditor = InstanceType<typeof CommonRangeEditor>;
-export default CommonRangeEditor;

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

@@ -1,256 +0,0 @@
-<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";
-    import type Column from "./Column";
-
-    // 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;
-    // Table styling and behavior options
-    export let options: TableOptions;
-    // Custom CSS styles for the table container
-    export let style: string = '';
-    // Additional CSS classes
-    export let className: string = '';
-    // Focus/blur event handlers
-    export let onfocus: ((event: FocusEvent) => void) | null = null;
-    export let onblur: ((event: FocusEvent) => void) | null = null;
-
-    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;
-                
-                // 为无缝滚动准备足够的克隆数据
-                const duplicateCount = Math.ceil(visibleRowCount / list.length) + 1;
-                clonedRows = Array(duplicateCount).fill(list).flat();
-                
-                startAutoScroll();
-            }
-        }
-    }
-
-    const startAutoScroll = () => {
-        // Clear any existing timer
-        if (scrollTimer) clearInterval(scrollTimer);
-
-        const originalDataHeight = list.length * rowHeight;
-        
-        // 使用连续动画，通过动态创建style元素实现真正的无缝循环
-        const tableBody = tableContainer.querySelector('.table-body');
-        if (tableBody) {
-            // 创建CSS动画
-            const animationDuration = scrollInterval * list.length / 1000; // 总动画时长（秒）
-            
-            // 移除之前的动画
-            tableBody.style.animation = 'none';
-            
-            // 删除之前的style元素（如果存在）
-            const existingStyle = document.getElementById(`marqueeStyle_${id}`);
-            if (existingStyle) {
-                existingStyle.remove();
-            }
-            
-            // 创建新的style元素
-            const styleElement = document.createElement('style');
-            styleElement.id = `marqueeStyle_${id}`;
-            styleElement.textContent = `
-                @keyframes marqueeScroll_${id} {
-                    0% { transform: translateY(0px); }
-                    100% { transform: translateY(-${originalDataHeight}px); }
-                }
-            `;
-            document.head.appendChild(styleElement);
-            
-            // 强制浏览器重新计算样式
-            tableBody.offsetHeight;
-            
-            // 应用新的动画
-            tableBody.style.animation = `marqueeScroll_${id} ${animationDuration}s linear infinite`;
-        }
-    }
-
-    const stopAutoScroll = () => {
-        if (scrollTimer) {
-            clearInterval(scrollTimer);
-            scrollTimer = null;
-        }
-        
-        // 停止CSS动画
-        const tableBody = tableContainer?.querySelector('.table-body');
-        if (tableBody) {
-            tableBody.style.animation = 'none';
-            tableBody.style.transform = 'translateY(0px)';
-        }
-    }
-
-    onMount(async () => {
-        await setupAutoScroll();
-    });
-
-    onDestroy(() => {
-        stopAutoScroll();
-        // 清理动态创建的style元素
-        const existingStyle = document.getElementById(`marqueeStyle_${id}`);
-        if (existingStyle) {
-            existingStyle.remove();
-        }
-    });
-
-    $: if (list || autoScroll || scrollInterval) {
-        stopAutoScroll();
-        setupAutoScroll();
-    }
-
-    $: tableStyle = utils.generateTableStyle(id, columns, tabOptions, viewWidth);
-
-    const handleRowClick = (row: any) => (event: MouseEvent) => {
-        rowClickHandler?.(row)
-    }
-
-    const handleTableFocus = (event: FocusEvent) => {
-        onfocus?.(event);
-    }
-
-    const handleTableBlur = (event: FocusEvent) => {
-        onblur?.(event);
-    }
-
-    export const setFocus = () => {
-        const firstRow = tableContainer?.querySelector('.table-body .table-row');
-        if (firstRow) {
-            setTimeout(() => {
-                (firstRow as HTMLElement).focus();
-            }, 50);
-        }
-    }
-
-</script>
-
-<div 
-    id="tab_{id}" 
-    class="uniface-concise-datatable {className}" 
-    {style}
-    on:focusin={handleTableFocus}
-    on:focusout={handleTableBlur}
->
-    {@html tableStyle}
-    <div class="table-container" bind:this={tableContainer}>
-        <!-- Fixed header -->
-        <div class="table-header">
-            <div class="table-row" bind:this={headerRow} role="row">
-                {#each columns as column, idx}
-                    <div class="data-cell col_{idx}" role="columnheader">
-                        {column.title ?? ''}
-                    </div>
-                {/each}
-            </div>
-        </div>
-
-        <!-- Scrollable body -->
-        <div 
-            class="table-body-container" 
-            bind:this={viewPanel} 
-            class:auto-scroll={autoScroll}
-            role="table"
-            aria-label="Data table"
-            aria-rowcount={list.length + 1}
-        >
-            <div class="table-body">
-                {#if autoScroll}
-                    <!-- 无缝滚动模式：渲染原始数据 + 足够的重复数据确保无缝滚动 -->
-                    {#each list as row, rowIndex}
-                        <DataRow 
-                            data={row} 
-                            {columns} 
-                            {rowIndex}
-                            showAlternative={rowIndex % 2 == 1} 
-                            on:click={handleRowClick(row)}
-                        />
-                    {/each}
-                    <!-- 渲染第二份数据，确保无缝滚动 -->
-                    {#each list as row, rowIndex}
-                        <DataRow 
-                            data={row} 
-                            {columns} 
-                            rowIndex={rowIndex + list.length}
-                            showAlternative={(rowIndex + list.length) % 2 == 1} 
-                            on:click={handleRowClick(row)}
-                        />
-                    {/each}
-                    <!-- 渲染第三份数据，确保视窗始终有足够内容 -->
-                    {#each list as row, rowIndex}
-                        <DataRow 
-                            data={row} 
-                            {columns} 
-                            rowIndex={rowIndex + list.length * 2}
-                            showAlternative={(rowIndex + list.length * 2) % 2 == 1} 
-                            on:click={handleRowClick(row)}
-                        />
-                    {/each}
-                {:else}
-                    <!-- 正常模式：只渲染原始数据 -->
-                    {#each list as row, rowIndex}
-                        <DataRow 
-                            data={row} 
-                            {columns} 
-                            {rowIndex}
-                            showAlternative={rowIndex % 2 == 1} 
-                            on:click={handleRowClick(row)}
-                        />
-                    {/each}
-                {/if}
-            </div>
-        </div>
-    </div>
-</div>

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

@@ -1,34 +0,0 @@
-import { type RowClickHandler, type TableOptions } from "./TableOptions";
-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 ConciseListTable: $$__sveltets_2_IsomorphicComponent<{
-    list: Array<any>;
-    columns: Array<Column>;
-    autoScroll?: boolean;
-    scrollInterval?: number;
-    rowClickHandler?: RowClickHandler | null;
-    options: TableOptions;
-    style?: string;
-    className?: string;
-    onfocus?: ((event: FocusEvent) => void) | null;
-    onblur?: ((event: FocusEvent) => void) | null;
-    setFocus?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    setFocus: () => void;
-}, string>;
-type ConciseListTable = InstanceType<typeof ConciseListTable>;
-export default ConciseListTable;

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

@@ -1,21 +0,0 @@
-<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] ?? '');
-    $: escapeHTML = column.escapeHTML ?? false;
-</script>
-
-<div class="data-cell col_{idx}" role="cell">
-    {#if escapeHTML}
-        <span>{text}</span>
-    {:else }
-        {@html text}
-    {/if}
-</div>

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

@@ -1,23 +0,0 @@
-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 DataCell: $$__sveltets_2_IsomorphicComponent<{
-    column: Column;
-    idx: number;
-    data: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DataCell = InstanceType<typeof DataCell>;
-export default DataCell;

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

@@ -1,35 +0,0 @@
-<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;
-    export let rowIndex: number = 0;
-
-    const handleRowKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            // Trigger click event for keyboard users
-            const clickEvent = new MouseEvent('click', {
-                bubbles: true,
-                cancelable: true
-            });
-            event.currentTarget?.dispatchEvent(clickEvent);
-        }
-    };
-</script>
-
-<div 
-    class="table-row" 
-    class:alternative={showAlternative}
-    role="row"
-    tabindex="0"
-    aria-rowindex={rowIndex + 2}
-    on:click
-    on:keydown={handleRowKeyDown}
->
-    {#each columns as column, idx}
-        <DataCell {idx} {column} {data}/>
-    {/each}
-</div>