@ticatec/uniface-element 0.2.4 → 0.3.0

package/dist/common-editor/NumberInput.svelte

@@ -13,33 +13,50 @@
     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 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;
 
-    let editor: any;
+    const handleFocusEvent = (e: FocusEvent) => {
+        isFocused = true;
+        onfocus?.();
+    }
 
     const handleBlurEvent = (e: FocusEvent) => {
         isFocused = false;
+        onblur?.();
         if (!readonly) {
             value = parseFloat(textValue);
             if (isNaN(value)) {
                 value = null;
             }
             if (value != null) {
-                if (min != null && value != null && value < min) {
+                if (min != null && value < min) {
                     value = min;
                 }
-                if (max != null && value != null && value > max) {
+                if (max != null && value > max) {
                     value = max;
                 }
                 textValue = utils.formatNumber(value, precision);
             }
-            onChange?.(value);
+            onchange?.(value);
         } else {
             e.stopPropagation();
         }
@@ -47,21 +64,17 @@
 
     const checkNewInputText = (s: string): boolean => {
         const currentValue = editor.value;
-        const cursorStart = editor.selectionStart; // 光标起始位置
-        const cursorEnd = editor.selectionEnd; // 光标结束位置
+        const cursorStart = editor.selectionStart; // cursor start position
+        const cursorEnd = editor.selectionEnd; // cursor end position
         let resultingString = currentValue.slice(0, cursorStart) + s + currentValue.slice(cursorEnd);
-        if (/[^0-9.\-]/.test(resultingString)) {
+        if (/[^0-9\.\-]/.test(resultingString)) {
             return false;
         } else {
-            return regex.test(resultingString) && utils.isValidNumber(parseFloat(resultingString), precision, allowNegative, max, min);
+            return regex.test(resultingString) && 
+                utils.isValidNumber(parseFloat(resultingString), precision, allowNegative, max, min);
         }
     }
 
-
-    let composing: boolean = false;
-    let currentText: string;
-    let isFocused = false;
-
     const handlePaste = (event: ClipboardEvent) => {
         const pasteData = event.clipboardData?.getData('text') || '';
         if (!checkNewInputText(pasteData)) {
@@ -70,32 +83,32 @@
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-        // 检查是否是全角字符或中文等（非 ASCII）
+        // Check for full-width characters or non-ASCII characters
         if (/[^\x00-\x7F]/.test(event.key)) {
             event.preventDefault();
             event.stopPropagation();
             return;
         }
 
-        // 保留 ctrl 等特殊键
+        // Allow special keys like ctrl
         const allowKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
         if (allowKeys.includes(event.key)) return;
 
-        // 如果是数字或小数点、负号等，可允许（你可根据 precision 精度自定义更严格规则）
+        // Allow numbers, decimal points, negative signs (can customize based on precision)
         if (/[\d\.\-]/.test(event.key)) return;
 
-        // 拦截其他非法字符
+        // Block other invalid characters
         event.preventDefault();
         event.stopPropagation();
     };
     const handleInput = () => {
-        if (composing) return; // 正在输入拼音等，忽略
+        if (composing) return; // Ignore during composition (e.g., pinyin input)
 
-        // 校验是否为合法数字字符串
+        // Validate if it's a valid number string
         const raw = editor.value;
         if (/[^\x00-\x7F]/.test(raw)) {
-            // 包含中文、日文、韩文、全角字符、表情等
-            editor.value = textValue; // 恢复输入前状态
+            // Contains Chinese, Japanese, Korean, full-width characters, emojis, etc.
+            editor.value = textValue; // Restore previous state
             return;
         }
         if (regex.test(raw)) {
@@ -105,7 +118,7 @@
             }
         }
 
-        // 不合法时可以不更新 value，只更新 textValue（允许用户继续输）
+        // When invalid, don't update value, only update textValue (allow user to continue typing)
         textValue = raw;
     }
 
@@ -118,10 +131,10 @@
     const handleCompositionEnd = (event: CompositionEvent) => {
         composing = false;
         if (/[^\x00-\x7F]/.test(editor.value)) {
-            editor.value = currentText; // 恢复输入前内容
+            editor.value = currentText; // Restore previous content
             textValue = currentText;
         } else {
-            handleInput(); // 正常输入
+            handleInput(); // Normal input
         }
     };
 
@@ -135,7 +148,7 @@
 </script>
 <input class="number-editor" bind:this={editor} type="text" {readonly} {style} {disabled} placeholder={readonly || disabled ? '' : placeholder}
        bind:value={textValue}
-       on:focus={() => isFocused = true}
+       on:focus={handleFocusEvent}
        on:blur={handleBlurEvent}
        on:compositionstart={handleCompositionStart}
        on:input={handleInput}

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

@@ -22,13 +22,17 @@ declare const NumberInput: $$__sveltets_2_IsomorphicComponent<{
     allowNegative?: boolean;
     max?: number | null;
     min?: number | null;
-    onChange?: OnChangeHandler<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/concise-data-table/ConciseListTable.svelte

@@ -15,11 +15,15 @@
     // 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
+    // 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;
 
@@ -66,7 +70,11 @@
                 rowHeight = tableBody.children[0].offsetHeight;
                 visibleRowCount = Math.floor((tableContainer.offsetHeight - headerRow.offsetHeight) / rowHeight);
                 if (list.length <= visibleRowCount) return;
-                clonedRows = [...list];
+                
+                // 为无缝滚动准备足够的克隆数据
+                const duplicateCount = Math.ceil(visibleRowCount / list.length) + 1;
+                clonedRows = Array(duplicateCount).fill(list).flat();
+                
                 startAutoScroll();
             }
         }
@@ -76,27 +84,40 @@
         // 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);
-                }
+        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();
             }
-        }, scrollInterval);
+            
+            // 创建新的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 = () => {
@@ -104,6 +125,13 @@
             clearInterval(scrollTimer);
             scrollTimer = null;
         }
+        
+        // 停止CSS动画
+        const tableBody = tableContainer?.querySelector('.table-body');
+        if (tableBody) {
+            tableBody.style.animation = 'none';
+            tableBody.style.transform = 'translateY(0px)';
+        }
     }
 
     onMount(async () => {
@@ -112,6 +140,11 @@
 
     onDestroy(() => {
         stopAutoScroll();
+        // 清理动态创建的style元素
+        const existingStyle = document.getElementById(`marqueeStyle_${id}`);
+        if (existingStyle) {
+            existingStyle.remove();
+        }
     });
 
     $: if (list || autoScroll || scrollInterval) {
@@ -125,17 +158,39 @@
         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">
+<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}>
+            <div class="table-row" bind:this={headerRow} role="row">
                 {#each columns as column, idx}
-                    <div class="data-cell col_{idx}">
+                    <div class="data-cell col_{idx}" role="columnheader">
                         {column.title ?? ''}
                     </div>
                 {/each}
@@ -143,14 +198,56 @@
         </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={handleRowClick(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={handleRowClick(row)}/>
+        <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>

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

@@ -20,8 +20,15 @@ declare const ConciseListTable: $$__sveltets_2_IsomorphicComponent<{
     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>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type ConciseListTable = InstanceType<typeof ConciseListTable>;
 export default ConciseListTable;

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

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

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

@@ -4,11 +4,31 @@
 
     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} aria-hidden="true" on:click>
+<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}

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

@@ -16,6 +16,7 @@ declare const DataRow: $$__sveltets_2_IsomorphicComponent<{
     columns: Array<Column>;
     data: any;
     showAlternative: boolean;
+    rowIndex?: number;
 }, {
     click: MouseEvent;
 } & {