@ticatec/uniface-element 0.3.9 → 0.3.11

package/dist/common-editor/NumberInput.svelte

@@ -17,11 +17,11 @@
     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();
@@ -34,8 +34,27 @@
     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?.();
     }
 
@@ -43,7 +62,9 @@
         isFocused = false;
         onblur?.();
         if (!readonly) {
-            value = parseFloat(textValue);
+            // 解析前先剥逗号（容错）
+            const raw = stripThousands(textValue);
+            value = parseFloat(raw);
             if (isNaN(value)) {
                 value = null;
             }
@@ -54,7 +75,10 @@
                 if (max != null && value > max) {
                     value = max;
                 }
-                textValue = utils.formatNumber(value, precision);
+                // 失焦后格式化为千分位
+                textValue = formatWithThousands(value, precision);
+            } else {
+                textValue = '';
             }
             onchange?.(value);
         } else {
@@ -63,16 +87,16 @@
     }
 
     const checkNewInputText = (s: string): boolean => {
+        // 编辑过程中 editor.value 不含逗号（获焦时已剥），直接使用
         const currentValue = editor.value;
-        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)) {
+        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;
-        } 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);
     }
 
     const handlePaste = (event: ClipboardEvent) => {
@@ -83,46 +107,47 @@
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-        // Check for full-width characters or non-ASCII characters
+        // 拦截全角/非 ASCII 字符
         if (/[^\x00-\x7F]/.test(event.key)) {
             event.preventDefault();
             event.stopPropagation();
             return;
         }
 
-        // Allow special keys like ctrl
+        // 允许功能键
         const allowKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
         if (allowKeys.includes(event.key)) return;
 
-        // Allow numbers, decimal points, negative signs (can customize based on precision)
-        if (/[\d\.\-]/.test(event.key)) return;
+        // 允许数字、小数点、负号
+        if (/[\d.\-]/.test(event.key)) return;
 
-        // Block other invalid characters
         event.preventDefault();
         event.stopPropagation();
     };
+
     const handleInput = () => {
-        if (composing) return; // Ignore during composition (e.g., pinyin input)
+        if (composing) return;
 
-        // Validate if it's a valid number string
         const raw = editor.value;
+
+        // 拦截中文/全角字符（输入法直接上屏的情况）
         if (/[^\x00-\x7F]/.test(raw)) {
-            // Contains Chinese, Japanese, Korean, full-width characters, emojis, etc.
-            editor.value = textValue; // Restore previous state
+            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;
             }
         }
 
-        // When invalid, don't update value, only update textValue (allow user to continue typing)
+        // 编辑过程中只更新原始字符串，禁止在此处对 textValue 做任何格式化
         textValue = raw;
     }
 
-
     const handleCompositionStart = (event: CompositionEvent) => {
         currentText = editor.value;
         composing = true;
@@ -131,26 +156,31 @@
     const handleCompositionEnd = (event: CompositionEvent) => {
         composing = false;
         if (/[^\x00-\x7F]/.test(editor.value)) {
-            editor.value = currentText; // Restore previous content
+            editor.value = currentText;
             textValue = currentText;
         } else {
-            handleInput(); // Normal input
+            handleInput();
         }
     };
 
-
+    /**
+     * 仅在非焦点状态下根据外部 value 更新显示文本（含千分位）。
+     * 焦点状态下绝不重写 textValue，避免干扰用户输入过程。
+     */
     $: if (!isFocused) {
-        textValue = value == null ? '' : utils.formatNumber(value, precision);
+        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}
+<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}/>
+       on:compositionend={handleCompositionEnd}
+       on:paste={handlePaste}/>

package/dist/number-editor/NumberEditor.svelte

@@ -1,10 +1,9 @@
- <script lang="ts">
+<script lang="ts">
 
     import {DisplayMode} from "../common/DisplayMode";
     import CommonEditor from "../common-editor/CommonEditor.svelte";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import NumberInput from "../common-editor/NumberInput.svelte";
-    import {tick} from "svelte";
     import utils from "../common/utils";
 
 
@@ -40,12 +39,23 @@
         editor.setFocus();
     }
 
-    //let textValue: string = utils.formatNumber(value, precision);
+    /**
+     * 仅用于 CommonEditor 只读/禁用模式下的展示文本（含千分位）。
+     * 与 NumberInput 内部的 textValue 完全解耦，不再干涉编辑状态。
+     */
+    const formatWithThousands = (num: number | null, prec: number | null): string => {
+        if (num == null) return '';
+        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('.');
+    };
 
-    $: textValue = utils.formatNumber(value, precision);
+    $: displayValue = formatWithThousands(value, precision);
 
 </script>
-<CommonEditor {displayMode} {style} value={textValue} {suffix} {prefix} {readonly} {variant} {compact} class={className}
+<CommonEditor {displayMode} {style} value={displayValue} {suffix} {prefix} {readonly} {variant} {compact} class={className}
               input$class="number-editor"
               hasLeadingIcon={$$slots['leading-icon']!=null} hasTrailingIcon={$$slots['trailing-icon']!=null}
               showActionIcon={removable && !readonly && !disabled && value != null} {clean}>
@@ -56,7 +66,8 @@
             </div>
         {/if}
     </svelte:fragment>
-    <NumberInput bind:this={editor} bind:textValue style="flex: 1 1 auto" {disabled} {placeholder} bind:value {precision} {allowNegative} {max} {min}
+    <!-- 不再 bind:textValue，让 NumberInput 完全自主管理编辑态文本 -->
+    <NumberInput bind:this={editor} style="flex: 1 1 auto" {disabled} {placeholder} bind:value {precision} {allowNegative} {max} {min}
                  {readonly} {onchange}/>
     <svelte:fragment slot="trailing-icon">
         {#if $$slots['trailing-icon']}

package/dist/types.d.ts

@@ -4,6 +4,9 @@ import { DisplayMode } from "./common/DisplayMode.js";
 import { DateContext } from "./base-calendar";
 import { ModalResult } from "./message-box";
 import type { LazyLoader } from "./list-box";
+import type { GetRowActions } from "./data-table";
+import type { GetCellStyle } from "./data-table/lib/types";
+import type { GetRowFontStyle, RowFontStyle } from "./data-table/lib/types";
 /**
  * 从选中的Option中获取对于的文字值
  */
@@ -11,3 +14,4 @@ type RetrieveOptionText = (item: any) => string;
 export { DateContext, ModalResult, DisplayMode };
 export type { RetrieveOptionText, LazyLoader };
 export type { OnChangeHandler, MouseClickHandler };
+export type { GetRowActions, GetCellStyle, GetRowFontStyle, RowFontStyle };

package/package.json

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