@ticatec/uniface-element 0.1.61 → 0.1.66

package/dist/checkbox/CheckBox.svelte

@@ -12,12 +12,20 @@
     export let compact: boolean = false;
     export let onClick: ((event: MouseEvent) => void) | null = null;
     export let onChange: OnChangeHandler<boolean> = null as unknown as OnChangeHandler<boolean>;
+    export let autoFocus: boolean = false;
+
+    export const setFocus = () => {
+        setTimeout(()=> {
+            checkbox && checkbox.focus();
+        }, 50);
+    }
 
     let oldValue = value;
 
     let checkbox: any;
     let checked: boolean;
 
+
     const handleClickEvent = (e: MouseEvent) => {
         if (readonly || disabled) {
             e.stopPropagation();
@@ -45,6 +53,9 @@
         oldValue = value;
     }
 
+    $: if (checkbox && autoFocus) {
+        checkbox.focus();
+    }
 
 </script>
 <div class="uniface-checkbox" class:disabled class:compact {style}>

package/dist/checkbox/CheckBox.svelte.d.ts

@@ -22,8 +22,12 @@ declare const CheckBox: $$__sveltets_2_IsomorphicComponent<{
     compact?: boolean;
     onClick?: ((event: MouseEvent) => void) | null;
     onChange?: OnChangeHandler<boolean>;
+    autoFocus?: boolean;
+    setFocus?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type CheckBox = InstanceType<typeof CheckBox>;
 export default CheckBox;

package/dist/common/utils.js

@@ -70,13 +70,7 @@ const formatNumber = (n, precision) => {
     }
     else {
         if (precision != null) {
-            if (precision > 0) {
-                let base = Math.pow(10, precision);
-                return (Math.floor(n * base) / base).toFixed(precision);
-            }
-            else {
-                return Math.floor(n).toString();
-            }
+            return n.toFixed(precision);
         }
         else {
             return n.toString();

package/dist/common-editor/CommonEditor.svelte

@@ -14,6 +14,7 @@
     export let value: any = null;
     export let suffix: string = '';
     export let prefix: string = '';
+    export let input$class: string = null as unknown as string;
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let showActionIcon: boolean = false;
     export let clean: () => void;
@@ -53,7 +54,7 @@
             </div>
         {/if}
         {#if disabled || readonly}
-            <input type="text" style="flex: 1 1 auto" {value} {disabled} {readonly} {placeholder}>
+            <input class={input$class} type="text" style="flex: 1 1 auto" {value} {disabled} {readonly} {placeholder}>
         {:else}
             <div style="position: relative; flex: 1 1 auto">
                 <slot/>

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

@@ -28,6 +28,7 @@ declare const CommonEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     value?: any;
     suffix?: string;
     prefix?: string;
+    input$class?: string;
     displayMode?: DisplayMode;
     showActionIcon?: boolean;
     clean: () => void;

package/dist/common-editor/NumberInput.svelte

@@ -14,8 +14,8 @@
     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 const setFocus = () => {
+    export let textValue: string;
+    export const focus = () => {
         editor.focus();
     }
 
@@ -26,6 +26,7 @@
     let editor: any;
 
     const handleBlurEvent = (e: FocusEvent) => {
+        isFocused = false;
         if (!readonly) {
             value = parseFloat(textValue);
             if (isNaN(value)) {
@@ -58,21 +59,10 @@
         }
     }
 
-    const handleKeyDown = async (event: KeyboardEvent) => {
-        let accept = (ctrlKeys.indexOf(event.key) > -1 && !composing) || checkNewInputText(event.key);
-        // if (!accept) {
-        //     accept = checkNewInputText(event.key)
-        // }
-        if (!accept) {
-            event.stopPropagation();
-            event.preventDefault();
-        } else {
-            await tick();
-        }
-    }
 
     let composing: boolean = false;
     let currentText: string;
+    let isFocused = false;
 
     const handlePaste = (event: ClipboardEvent) => {
         const pasteData = event.clipboardData?.getData('text') || '';
@@ -81,6 +71,46 @@
         }
     }
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+        // 检查是否是全角字符或中文等（非 ASCII）
+        if (/[^\x00-\x7F]/.test(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
+        // 保留 ctrl 等特殊键
+        const allowKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+        if (allowKeys.includes(event.key)) return;
+
+        // 如果是数字或小数点、负号等，可允许（你可根据 precision 精度自定义更严格规则）
+        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);
+            if (!isNaN(parsed) && utils.isValidNumber(parsed, precision, allowNegative, max, min)) {
+                value = parsed;
+            }
+        }
+
+        // 不合法时可以不更新 value，只更新 textValue（允许用户继续输）
+        textValue = raw;
+    }
+
 
     const handleCompositionStart = (event: CompositionEvent) => {
         currentText = editor.value;
@@ -89,16 +119,27 @@
 
     const handleCompositionEnd = (event: CompositionEvent) => {
         composing = false;
-        editor.value = currentText;
+        if (/[^\x00-\x7F]/.test(editor.value)) {
+            editor.value = currentText; // 恢复输入前内容
+            textValue = currentText;
+        } else {
+            handleInput(); // 正常输入
+        }
     };
 
 
-    let textValue: string = utils.formatNumber(value, precision);
+    $: if (!isFocused) {
+        textValue = value == null ? '' : utils.formatNumber(value, precision);
+    }
 
-    $: textValue = value == null ? '' : utils.formatNumber(value, precision);
     $: regex = new RegExp(utils.getNumberRegex(precision, allowNegative));
 
 </script>
-<input bind:this={editor} type="text" {readonly} {style} {disabled} placeholder={readonly || disabled ? '' : placeholder} bind:value={textValue}
-       on:keydown={handleKeyDown} on:focus on:blur={handleBlurEvent} on:compositionstart={handleCompositionStart}
+<input class="number-editor" bind:this={editor} type="text" {readonly} {style} {disabled} placeholder={readonly || disabled ? '' : placeholder}
+       bind:value={textValue}
+       on:focus={() => isFocused = true}
+       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

@@ -23,13 +23,12 @@ declare const NumberInput: $$__sveltets_2_IsomorphicComponent<{
     max?: number | null;
     min?: number | null;
     onChange?: OnChangeHandler<number | null>;
-    setFocus?: () => void;
+    textValue: string;
+    focus?: () => void;
 }, {
-    focus: FocusEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    setFocus: () => void;
+    focus: () => void;
 }, string>;
 type NumberInput = InstanceType<typeof NumberInput>;
 export default NumberInput;

package/dist/data-table/UniDataTable.js

@@ -28,11 +28,13 @@ export default class UniDataTable {
         this._frozenColumns = [];
         this._columns = [];
         (columns ?? []).forEach(col => {
-            if (col.frozen) {
-                this._frozenColumns.push(col);
-            }
-            else {
-                this._columns.push(col);
+            if (col.visible != false) {
+                if (col.frozen) {
+                    this._frozenColumns.push(col);
+                }
+                else {
+                    this._columns.push(col);
+                }
             }
         });
     }

package/dist/date-picker/DatePicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 
-    import {onMount} from "svelte";
+    import {onMount, tick} from "svelte";
     import {DisplayMode} from "../common/DisplayMode";
     import Popover from "../common/Popover.svelte";
     import dayjs from "dayjs";
@@ -21,6 +21,12 @@
     export let min: UniDate = null;
     export let max: UniDate = null;
     export let onChange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
+    export const setFocus = () => {
+        setTimeout(()=> {
+            editor && editor.focus();
+        }, 50);
+    }
+
 
     let textValue: string;
     let editor: any;

package/dist/date-picker/DatePicker.svelte.d.ts

@@ -27,11 +27,14 @@ declare const DatePicker: $$__sveltets_2_IsomorphicComponent<{
     min?: UniDate;
     max?: UniDate;
     onChange?: OnChangeHandler<Date>;
+    setFocus?: () => void;
 }, {
     blur: FocusEvent;
     focus: FocusEvent;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type DatePicker = InstanceType<typeof DatePicker>;
 export default DatePicker;

package/dist/date-picker/DateTimePicker.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 
-    import {onMount} from "svelte";
+    import {onMount, tick} from "svelte";
     import dayjs from "dayjs";
     import {DisplayMode} from "../common/DisplayMode";
     import dateUtils, {type UniDate} from "../base-calendar/dateUtils";
-    import Calendar, {DateContext} from "../base-calendar";
+    import Calendar from "../base-calendar";
     import TimePanel from "./TimePanel.svelte";
     import {TextButton} from "../button";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
@@ -24,11 +24,17 @@
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let mandatory: boolean = false;
     export let onChange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
+    export const setFocus = () => {
+        setTimeout(()=> {
+            editor && editor.focus();
+        }, 50);
+    }
+
 
     let confirmText = i18nContext.getText('uniface.calendar.confirmText');
     let textValue: string;
     let editor: any;
-    let oldValue: Date = dateUtils.toDayjs(value)?.toDate();
+
     let currentValue: dayjs.Dayjs;
 
     const dateFmts = {

package/dist/date-picker/DateTimePicker.svelte.d.ts

@@ -28,11 +28,14 @@ declare const DateTimePicker: $$__sveltets_2_IsomorphicComponent<{
     variant?: "" | "plain" | "outlined" | "filled";
     mandatory?: boolean;
     onChange?: OnChangeHandler<Date>;
+    setFocus?: () => void;
 }, {
     blur: FocusEvent;
     focus: FocusEvent;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type DateTimePicker = InstanceType<typeof DateTimePicker>;
 export default DateTimePicker;

package/dist/inline-cell-editor/EditorManager.d.ts

@@ -0,0 +1,8 @@
+declare class EditorManager {
+    private map;
+    constructor();
+    getRender(type: string): any;
+    register(type: string, render: any): void;
+}
+declare const editorManager: EditorManager;
+export default editorManager;

package/dist/inline-cell-editor/EditorManager.js

@@ -0,0 +1,29 @@
+import InlineTextEditor from "./InlineTextEditor.svelte";
+import InlineOptionsSelect from "./InlineOptionsSelect.svelte";
+import InvalidEditor from "./InvalidEditor.svelte";
+import InlineDatePicker from "./InlineDatePicker.svelte";
+import InlineNumberEditor from "./InlineNumberEditor.svelte";
+import InlineDateTimePicker from "./InlineDateTimePicker.svelte";
+import InlineOptionsMultiSelect from "./InlineOptionsMultiSelect.svelte";
+import InlineCheckbox from "./InlineCheckbox.svelte";
+class EditorManager {
+    map;
+    constructor() {
+        this.map = new Map();
+    }
+    getRender(type) {
+        return this.map.get(type) ?? InvalidEditor;
+    }
+    register(type, render) {
+        this.map.set(type, render);
+    }
+}
+const editorManager = new EditorManager();
+editorManager.register('text', InlineTextEditor);
+editorManager.register('number', InlineNumberEditor);
+editorManager.register('date', InlineDatePicker);
+editorManager.register('boolean', InlineCheckbox);
+editorManager.register('date-time', InlineDateTimePicker);
+editorManager.register('options-selector', InlineOptionsSelect);
+editorManager.register('multi-select', InlineOptionsMultiSelect);
+export default editorManager;

package/dist/inline-cell-editor/InlineCellEditor.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+
+    export let style: string = ""
+
+</script>
+
+<div class="editor-cell" {style} on:focus>
+    <slot/>
+</div>

package/dist/inline-cell-editor/InlineCellEditor.svelte.d.ts

@@ -0,0 +1,31 @@
+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 InlineCellEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    style?: string;
+}, {
+    default: {};
+}>, {
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type InlineCellEditor = InstanceType<typeof InlineCellEditor>;
+export default InlineCellEditor;

package/dist/inline-cell-editor/InlineCheckbox.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+
+
+    import InlineCellEditor from "./InlineCellEditor.svelte";
+    import {acceptProps} from "./acceptProps";
+    import Checkbox from "../checkbox";
+    import {getNestObject} from "./getNestObject";
+
+    export let data: any;
+    export let readonly: boolean = false;
+    export let field: any;
+    export let props: any;
+    export let active: boolean;
+
+    const accepts = ['indeterminate', 'compact']
+
+    let filteredProps: any = acceptProps(props, accepts);
+
+    let {parent, keyField} = getNestObject(data, field)
+
+
+    let checkbox: any;
+
+    $: if (active) {
+        checkbox.setFocus();
+    }
+
+</script>
+<InlineCellEditor style="text-align: center" on:focus={() => checkbox.focus() }>
+    <Checkbox bind:this={checkbox} style="position: relative; top: 50%; transform: translateY(-50%)"
+              bind:checked={parent[keyField]} readonly={readonly || !active} {...filteredProps}/>
+</InlineCellEditor>

package/dist/inline-cell-editor/InlineCheckbox.svelte.d.ts

@@ -0,0 +1,24 @@
+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 InlineCheckbox: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    readonly?: boolean;
+    field: any;
+    props: any;
+    active: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InlineCheckbox = InstanceType<typeof InlineCheckbox>;
+export default InlineCheckbox;

package/dist/inline-cell-editor/InlineDatePicker.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+
+
+    import InlineCellEditor from "./InlineCellEditor.svelte";
+    import {acceptProps} from "./acceptProps";
+    import DatePicker from "../date-picker";
+    import {getNestObject} from "./getNestObject";
+
+    export let data: any;
+    export let readonly: boolean = false;
+    export let field: any;
+    export let props: any;
+    export let active: boolean;
+
+    const accepts = ['placeholder',  'max', 'min', 'mandatory', 'compact'];
+
+    let attrs: any = acceptProps(props, accepts);
+
+    let {parent, keyField} = getNestObject(data, field)
+
+    let editor: any;
+
+    $: if (active) {
+        editor.setFocus();
+    }
+
+
+
+</script>
+<InlineCellEditor>
+    <DatePicker bind:this={editor} bind:value={parent[keyField]} readonly={readonly || !active} variant="plain" {...attrs} />
+</InlineCellEditor>

package/dist/inline-cell-editor/InlineDatePicker.svelte.d.ts

@@ -0,0 +1,24 @@
+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 InlineDatePicker: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    readonly?: boolean;
+    field: any;
+    props: any;
+    active: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InlineDatePicker = InstanceType<typeof InlineDatePicker>;
+export default InlineDatePicker;

package/dist/inline-cell-editor/InlineDateTimePicker.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+
+
+    import InlineCellEditor from "./InlineCellEditor.svelte";
+    import {DateTimePicker} from "../date-picker";
+    import {acceptProps} from "./acceptProps";
+    import {getNestObject} from "./getNestObject";
+
+    export let data: any;
+    export let readonly: boolean = false;
+    export let field: any;
+    export let props: any;
+    export let active: boolean;
+
+    const accepts = ['placeholder',  'max', 'min', 'precision', 'mandatory', 'compact'];
+
+    let attrs: any = acceptProps(props, accepts);
+
+    let {parent, keyField} = getNestObject(data, field)
+
+    let editor: any;
+
+    $: if (active) {
+        editor.setFocus();
+    }
+
+
+</script>
+<InlineCellEditor>
+    <DateTimePicker bind:this={editor} bind:value={parent[keyField]} readonly={readonly || !active} variant="plain" {...attrs} />
+</InlineCellEditor>

package/dist/inline-cell-editor/InlineDateTimePicker.svelte.d.ts

@@ -0,0 +1,24 @@
+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 InlineDateTimePicker: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    readonly?: boolean;
+    field: any;
+    props: any;
+    active: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InlineDateTimePicker = InstanceType<typeof InlineDateTimePicker>;
+export default InlineDateTimePicker;

package/dist/inline-cell-editor/InlineNumberEditor.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+
+
+    import InlineCellEditor from "./InlineCellEditor.svelte";
+    import {acceptProps} from "./acceptProps";
+    import NumberEditor from "../number-editor";
+    import {getNestObject} from "./getNestObject";
+
+    export let data: any;
+    export let readonly: boolean = false;
+    export let field: any;
+    export let props: any;
+    export let active: boolean;
+
+    const accepts = ['placeholder', 'precision', 'suffix', 'prefix', 'allowNegative', 'max', 'min', 'removable', 'compact'];
+
+    let attrs: any = acceptProps(props, accepts);
+
+    let {parent, keyField} = getNestObject(data, field)
+
+    let editor: any;
+
+    $: if (active) {
+        editor.setFocus();
+    }
+
+</script>
+<InlineCellEditor>
+    <NumberEditor bind:this={editor} bind:value={parent[keyField]} readonly={readonly || !active} variant="plain" {...attrs}/>
+</InlineCellEditor>

package/dist/inline-cell-editor/InlineNumberEditor.svelte.d.ts

@@ -0,0 +1,24 @@
+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 InlineNumberEditor: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    readonly?: boolean;
+    field: any;
+    props: any;
+    active: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InlineNumberEditor = InstanceType<typeof InlineNumberEditor>;
+export default InlineNumberEditor;

package/dist/inline-cell-editor/InlineOptionsMultiSelect.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+
+    import InlineCellEditor from "./InlineCellEditor.svelte";
+    import {acceptProps} from "./acceptProps";
+    import OptionsMultiSelect from "../options-multi-select";
+    import {getNestObject} from "./getNestObject";
+
+    export let data: any;
+    export let readonly: boolean = false;
+    export let field: any;
+    export let props: any;
+    export let active: boolean;
+
+    const accepts = ['menu$height', 'delimiter', 'keyField', 'textField', 'placeholder', 'disableOptions', 'hideOptions', 'compact', 'tagColor', 'tagVariant']
+
+    let attrs: any = acceptProps(props, accepts);
+
+    let options: Array<any> = props?.options ?? [];
+
+    let {parent, keyField} = getNestObject(data, field)
+
+    let editor: any;
+
+    $: if (active) {
+        editor.setFocus();
+    }
+
+</script>
+<InlineCellEditor>
+    <OptionsMultiSelect bind:this={editor} variant="plain" bind:value={parent[keyField]} readonly={readonly || !active} {options}
+                        {...attrs}/>
+</InlineCellEditor>

package/dist/inline-cell-editor/InlineOptionsMultiSelect.svelte.d.ts

@@ -0,0 +1,24 @@
+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 InlineOptionsMultiSelect: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    readonly?: boolean;
+    field: any;
+    props: any;
+    active: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InlineOptionsMultiSelect = InstanceType<typeof InlineOptionsMultiSelect>;
+export default InlineOptionsMultiSelect;

package/dist/inline-cell-editor/InlineOptionsSelect.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+
+    import InlineCellEditor from "./InlineCellEditor.svelte";
+    import {acceptProps} from "./acceptProps";
+    import OptionsSelect from "../options-select";
+    import {getNestObject} from "./getNestObject";
+
+    export let data: any;
+    export let readonly: boolean = false;
+    export let field: any;
+    export let props: any;
+    export let active: boolean;
+
+    const accepts = ['mandatory', 'keyField', 'textField', 'menu$height', 'placeholder', 'disableOptions', 'hideOptions', 'itemRender', 'compact']
+
+    let attrs: any = acceptProps(props, accepts);
+
+    let options: Array<any> = props.options ?? [];
+
+    let {parent, keyField} = getNestObject(data, field)
+
+    let editor: any;
+
+    $: if (active) {
+        editor.setFocus();
+    }
+</script>
+<InlineCellEditor>
+    <OptionsSelect bind:this={editor} variant="plain" bind:value={parent[keyField]} readonly={readonly || !active} {options} {...attrs}/>
+</InlineCellEditor>

package/dist/inline-cell-editor/InlineOptionsSelect.svelte.d.ts

@@ -0,0 +1,24 @@
+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 InlineOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    readonly?: boolean;
+    field: any;
+    props: any;
+    active: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InlineOptionsSelect = InstanceType<typeof InlineOptionsSelect>;
+export default InlineOptionsSelect;

package/dist/inline-cell-editor/InlineTextEditor.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+
+
+    import InlineCellEditor from "./InlineCellEditor.svelte";
+    import TextEditor from "../text-editor";
+    import {acceptProps} from "./acceptProps";
+    import {getNestObject} from "./getNestObject";
+
+    export let data: any;
+    export let readonly: boolean = false;
+    export let field: any;
+    export let props: any;
+    export let active: boolean;
+
+    const accepts = ['suffix', 'prefix', 'removable', 'compact']
+
+    let attrs: any = acceptProps(props, accepts);
+
+    let {parent, keyField} = getNestObject(data, field)
+
+    let editor: any;
+
+    $: if (active) {
+        editor.setFocus();
+    }
+
+</script>
+<InlineCellEditor>
+    <TextEditor bind:this={editor} bind:value={parent[keyField]} readonly={readonly || !active} variant="plain" {...attrs}/>
+</InlineCellEditor>

package/dist/inline-cell-editor/InlineTextEditor.svelte.d.ts

@@ -0,0 +1,24 @@
+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 InlineTextEditor: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    readonly?: boolean;
+    field: any;
+    props: any;
+    active: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InlineTextEditor = InstanceType<typeof InlineTextEditor>;
+export default InlineTextEditor;

package/dist/inline-cell-editor/InvalidEditor.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+
+
+    export let readonly: boolean = false;
+    export let field: any;
+    export let props: any;
+    export let active: boolean;
+
+
+</script>
+<div>
+    <span>Invalid type on {field}</span>
+</div>

package/dist/inline-cell-editor/InvalidEditor.svelte.d.ts

@@ -0,0 +1,23 @@
+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 InvalidEditor: $$__sveltets_2_IsomorphicComponent<{
+    readonly?: boolean;
+    field: any;
+    props: any;
+    active: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InvalidEditor = InstanceType<typeof InvalidEditor>;
+export default InvalidEditor;

package/dist/inline-cell-editor/acceptProps.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 拷贝属性，接收所有input$开头和预定义的属性
+ * @param obj
+ * @param acceptKeys
+ */
+export declare const acceptProps: (obj: any, acceptKeys: Array<string>) => any;

package/dist/inline-cell-editor/acceptProps.js

@@ -0,0 +1,20 @@
+/**
+ * 拷贝属性，接收所有input$开头和预定义的属性
+ * @param obj
+ * @param acceptKeys
+ */
+export const acceptProps = (obj, acceptKeys) => {
+    if (obj == null) {
+        return {};
+    }
+    let result = {};
+    for (let attr in obj) {
+        if (attr.startsWith('input$')) {
+            result[attr] = obj[attr];
+        }
+        else if (acceptKeys.indexOf(attr) > -1) {
+            result[attr] = obj[attr];
+        }
+    }
+    return result;
+};

package/dist/inline-cell-editor/getNestObject.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 返回嵌套对象和属性
+ * @param data
+ * @param key
+ */
+export declare function getNestObject(data: any, key: string): {
+    parent: any;
+    keyField: string;
+};

package/dist/inline-cell-editor/getNestObject.js

@@ -0,0 +1,28 @@
+/**
+ * 返回嵌套对象和属性
+ * @param data
+ * @param key
+ */
+export function getNestObject(data, key) {
+    // 如果 key 为空或无效，返回默认值
+    if (!key || typeof key !== 'string') {
+        throw new Error('invalid key');
+    }
+    // 分割 key 为数组
+    const keys = key.split('.'); // ["aaa", "bbb", "ccc"]
+    const field = keys[keys.length - 1]; // 最后一个属性: "ccc"
+    const parentPath = keys.slice(0, -1); // 倒数第二层路径: ["aaa", "bbb"]
+    // 如果没有父路径（例如 key="ccc"），返回 data 和 field
+    if (parentPath.length === 0) {
+        return { parent: data, keyField: field };
+    }
+    // 遍历父路径，补全 null/undefined
+    let current = data;
+    for (const k of parentPath) {
+        if (current[k] == null) { // 包括 null 和 undefined
+            current[k] = {};
+        }
+        current = current[k];
+    }
+    return { parent: current, keyField: field };
+}

package/dist/inline-cell-editor/index.d.ts

@@ -0,0 +1,6 @@
+import editorManager from "./EditorManager";
+import { acceptProps } from "./acceptProps";
+import InlineCellEditor from "./InlineCellEditor.svelte";
+import { getNestObject } from "./getNestObject";
+export default InlineCellEditor;
+export { editorManager, acceptProps, getNestObject };

package/dist/inline-cell-editor/index.js

@@ -0,0 +1,6 @@
+import editorManager from "./EditorManager";
+import { acceptProps } from "./acceptProps";
+import InlineCellEditor from "./InlineCellEditor.svelte";
+import { getNestObject } from "./getNestObject";
+export default InlineCellEditor;
+export { editorManager, acceptProps, getNestObject };

package/dist/number-editor/NumberEditor.svelte

@@ -4,6 +4,8 @@
     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";
 
 
 
@@ -24,6 +26,11 @@
     export let min: number | null = null;
     export let removable: boolean = true;
     export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
+    export const setFocus = () => {
+        setTimeout(()=> {
+            editor && editor.focus();
+        }, 50);
+    }
 
     let className: string = '';
     let editor: NumberInput;
@@ -33,9 +40,12 @@
         editor.setFocus();
     }
 
+    let textValue: string = utils.formatNumber(value, precision);
+
 
 </script>
-<CommonEditor {displayMode} {style} {value} {suffix} {prefix} {readonly} {variant} {compact} class={className}
+<CommonEditor {displayMode} {style} value={textValue} {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}>
     <svelte:fragment slot="leading-icon">
@@ -45,7 +55,8 @@
             </div>
         {/if}
     </svelte:fragment>
-    <NumberInput bind:this={editor} style="flex: 1 1 auto" {disabled} {placeholder} bind:value {precision} {allowNegative} {max} {min} {readonly} {onChange}/>
+    <NumberInput bind:this={editor} bind:textValue style="flex: 1 1 auto" {disabled} {placeholder} bind:value {precision} {allowNegative} {max} {min}
+                 {readonly} {onChange}/>
     <svelte:fragment slot="trailing-icon">
         {#if $$slots['trailing-icon']}
             <div class="editor-embed-icon">

package/dist/number-editor/NumberEditor.svelte.d.ts

@@ -31,6 +31,7 @@ declare const NumberEditor: $$__sveltets_2_IsomorphicComponent<{
     min?: number | null;
     removable?: boolean;
     onChange?: OnChangeHandler<number | null>;
+    setFocus?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -38,6 +39,7 @@ declare const NumberEditor: $$__sveltets_2_IsomorphicComponent<{
     'trailing-icon': {};
 }, {
     class: string;
+    setFocus: () => void;
 }, string>;
 type NumberEditor = InstanceType<typeof NumberEditor>;
 export default NumberEditor;

package/dist/options-multi-select/OptionsMultiSelect.svelte

@@ -6,6 +6,7 @@
     import utils from "../common/utils";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import Tag from "../tag";
+    import {tick} from "svelte";
 
     export let style: string = "";
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
@@ -27,6 +28,11 @@
     export let tagColor: string = '';
     export let tagVariant: 'borderless' | 'border' | 'round' = 'border';
 
+    export const setFocus = () => {
+        setTimeout(()=> {
+            editor && editor.focus();
+        }, 50);
+    }
 
     let selectedList: Array<string> = [];
 

package/dist/options-multi-select/OptionsMultiSelect.svelte.d.ts

@@ -33,8 +33,11 @@ declare const OptionsMultiSelect: $$__sveltets_2_IsomorphicComponent<{
     onChange?: OnChangeHandler<Array<string>>;
     tagColor?: string;
     tagVariant?: "borderless" | "border" | "round";
+    setFocus?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type OptionsMultiSelect = InstanceType<typeof OptionsMultiSelect>;
 export default OptionsMultiSelect;

package/dist/options-select/OptionsSelect.svelte

@@ -3,6 +3,7 @@
     import {DisplayMode} from "../common/DisplayMode";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import CommonPicker from "../common/CommonPicker.svelte";
+    import {tick} from "svelte";
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
@@ -23,6 +24,11 @@
     export let emptyText: string = null as unknown as string;
     export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
 
+    export const setFocus = () => {
+        setTimeout(()=> {
+            editor && editor.focus();
+        }, 50);
+    }
 
     let textValue: string;
     let editor: any;

package/dist/options-select/OptionsSelect.svelte.d.ts

@@ -32,11 +32,14 @@ declare const OptionsSelect: $$__sveltets_2_IsomorphicComponent<{
     itemRender?: any;
     emptyText?: string;
     onChange?: OnChangeHandler<any>;
+    setFocus?: () => void;
 }, {
     blur: FocusEvent;
     focus: FocusEvent;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type OptionsSelect = InstanceType<typeof OptionsSelect>;
 export default OptionsSelect;

package/dist/text-editor/TextEditor.svelte

@@ -3,6 +3,7 @@
     import {DisplayMode} from "../common/DisplayMode";
     import prefixFilter from "../utils/prefixFilter";
     import CommonEditor from "../common-editor/CommonEditor.svelte";
+    import {tick} from "svelte";
 
     const excludeAttrs = ['type', 'readonly', 'disabled', 'required', "form", "wrap"]
 
@@ -19,7 +20,12 @@
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let onChange: ((value: string) => void) | undefined = undefined;
 
-    export let autoFocus: boolean = false;
+    export const setFocus = () => {
+        setTimeout(()=> {
+            editor && editor.focus();
+        }, 50);
+    }
+
 
     let className: string = '';
     let input$: any;
@@ -41,9 +47,6 @@
         oldValue = value;
     }
 
-    $: if (editor && autoFocus) {
-        editor.focus();
-    }
 
 </script>
 <CommonEditor {displayMode} {style} {value} {suffix} {prefix} {readonly} {disabled} {variant} {compact}

package/dist/text-editor/TextEditor.svelte.d.ts

@@ -26,7 +26,7 @@ declare const TextEditor: $$__sveltets_2_IsomorphicComponent<{
     removable?: boolean | undefined;
     displayMode?: DisplayMode | undefined;
     onChange?: ((value: string) => void) | undefined | undefined;
-    autoFocus?: boolean | undefined;
+    setFocus?: (() => void) | undefined;
 }, {
     blur: FocusEvent;
     focus: FocusEvent;
@@ -44,6 +44,7 @@ declare const TextEditor: $$__sveltets_2_IsomorphicComponent<{
     'trailing-icon': {};
 }, {
     class: string;
+    setFocus: () => void;
 }, string>;
 type TextEditor = InstanceType<typeof TextEditor>;
 export default TextEditor;

package/dist/ticatec-uniface-web.css

@@ -598,6 +598,10 @@
   padding: 0;
   color: var(--uniface-editor-text-color, #374151);
 }
+.uniface-common-editor input.number-editor {
+  text-align: right; /* 默认右对齐 */
+  padding-right: 16px;
+}
 .uniface-common-editor input:focus {
   outline: none;
 }
@@ -665,9 +669,7 @@
 }
 .uniface-common-editor.plain {
   border: none;
-}
-.uniface-common-editor.plain:focus-within {
-  border-bottom-color: transparent;
+  padding: 0 4px;
 }
 .uniface-common-editor .editor-prefix, .uniface-common-editor .editor-suffix {
   color: #6B7280;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.61",
+  "version": "0.1.66",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",
@@ -192,6 +192,10 @@
       "types": "./dist/icon/index.d.ts",
       "import": "./dist/icon/index.js"
     },
+    "./InlineCellEditor": {
+      "types": "./dist/inline-cell-editor/index.d.ts",
+      "import": "./dist/inline-cell-editor/index.js"
+    },
     "./ImageFiles": {
       "types": "./dist/image-files/index.d.ts",
       "import": "./dist/image-files/index.js"