@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/form/common_editor/NumberInput.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+    import utils from "../../overlay/common/utils";
+    import type {EditorEvents} from "../types";
+
+    export interface Props extends EditorEvents {
+        style?: string;
+        value?: number;
+        precision?: number;
+        allowNegative?: boolean;
+        max?: number;
+        min?: number;
+        class?: string;
+        placeholder?: string;
+
+        [key: `input\$${string}`]: any;
+    }
+
+    let {
+        style = '',
+        class: className = '',
+        value = $bindable(),
+        precision,
+        placeholder,
+        allowNegative = false,
+        max,
+        min,
+        onchange,
+        onfocus,
+        onblur
+    }: Props = $props();
+
+    let textValue = $state('');
+    let regex = $derived(new RegExp(utils.getNumberRegex(precision, allowNegative)));
+    let editor: HTMLInputElement;
+    let composing = $state(false);
+    let currentText = $state('');
+    let isFocused = $state(false);
+
+    // JS 安全整数范围：超出后精度丢失，需截断
+    const SAFE_MAX = Number.MAX_SAFE_INTEGER;
+    const SAFE_MIN = Number.MIN_SAFE_INTEGER;
+
+    const isWithinSafeRange = (n: number): boolean => n >= SAFE_MIN && n <= SAFE_MAX;
+
+    const clampToSafeRange = (n: number): number => {
+        if (n > SAFE_MAX) return SAFE_MAX;
+        if (n < SAFE_MIN) return SAFE_MIN;
+        return n;
+    };
+
+    export function focus() {
+        editor?.focus();
+    }
+
+    /**
+     * 将数字格式化为带千分位的字符串
+     */
+    const formatWithThousands = (num: number, prec?: number): 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('.');
+    };
+
+    /**
+     * 剥离千分位逗号
+     */
+    const stripThousands = (s: string): string => s.replace(/,/g, '');
+
+    const handleFocus = (e: FocusEvent) => {
+        isFocused = true;
+        textValue = stripThousands(textValue);
+        onfocus?.(e);
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+        isFocused = false;
+        onblur?.(e);
+
+        const raw = stripThousands(textValue);
+        let numValue: number | undefined = parseFloat(raw);
+        if (isNaN(numValue)) {
+            numValue = undefined;
+        }
+        if (numValue != null) {
+            // 超过 JS 安全整数范围时截断，避免精度丢失
+            numValue = clampToSafeRange(numValue);
+            if (min != null && numValue < min) {
+                numValue = min;
+            }
+            if (max != null && numValue > max) {
+                numValue = max;
+            }
+            textValue = formatWithThousands(numValue, precision);
+        } else {
+            textValue = '';
+        }
+        value = numValue;
+        onchange?.(numValue);
+    }
+
+    const checkNewInputText = (s: string): boolean => {
+        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) => {
+        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;
+
+        // 仅在允许小数时(precision 为 null 或大于 0)才放行 '.'；仅在允许负数时才放行 '-'
+        const allowDecimal = precision == null || precision > 0;
+        const allowedPattern = allowDecimal ? (allowNegative ? /[\d.\-]/ : /[\d.]/) : (allowNegative ? /[\d\-]/ : /\d/);
+        if (allowedPattern.test(event.key)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const handleInput = () => {
+        if (composing) return;
+
+        const raw = editor.value;
+
+        // 修复：处理用户全选删除或按退格键清空输入框的情况
+        if (raw === '') {
+            value = undefined;
+            onchange?.(undefined);
+            textValue = '';
+            return;
+        }
+
+        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;
+                onchange?.(parsed);
+                textValue = raw;
+            } else {
+                // 未通过有效性校验（如精度/范围越界），回退为上一次有效值
+                editor.value = textValue;
+            }
+        } else {
+            // 不符合数字格式（如 precision=0 时输入了 '.'），回退为上一次有效值
+            editor.value = textValue;
+        }
+    }
+
+    const handleCompositionStart = () => {
+        currentText = editor.value;
+        composing = true;
+    };
+
+    const handleCompositionEnd = () => {
+        composing = false;
+        if (/[^\x00-\x7F]/.test(editor.value)) {
+            editor.value = currentText;
+            textValue = currentText;
+        } else {
+            handleInput();
+        }
+    };
+
+    $effect(() => {
+        if (value == null) {
+            textValue = '';
+        } else if (!isFocused) {
+            // 只有在失焦状态且有值时，才去格式化千分位
+            textValue = formatWithThousands(value, precision);
+        }
+    });
+</script>
+
+<input
+    bind:this={editor}
+    type="text"
+    class="number-input {className}"
+    inputmode="decimal"
+    {style}
+    {placeholder}
+    bind:value={textValue}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    oncompositionstart={handleCompositionStart}
+    oninput={handleInput}
+    onkeydown={handleKeyDown}
+    oncompositionend={handleCompositionEnd}
+    onpaste={handlePaste}
+/>

package/dist/form/common_editor/NumberInput.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { EditorEvents } from "../types";
+export interface Props extends EditorEvents {
+    style?: string;
+    value?: number;
+    precision?: number;
+    allowNegative?: boolean;
+    max?: number;
+    min?: number;
+    class?: string;
+    placeholder?: string;
+    [key: `input\$${string}`]: any;
+}
+declare const NumberInput: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/form/common_editor/index.d.ts

@@ -0,0 +1,8 @@
+import CommonEditor from "./CommonEditor.svelte";
+import NumberInput from "./NumberInput.svelte";
+import BasePicker from "./BasePicker.svelte";
+import CommonPicker from "./CommonPicker.svelte";
+import type CommonPickerProps from "./CommonPickerProps";
+export default CommonEditor;
+export { CommonPicker, BasePicker, NumberInput };
+export type { CommonPickerProps };

package/dist/form/common_editor/index.js

@@ -0,0 +1,6 @@
+import CommonEditor from "./CommonEditor.svelte";
+import NumberInput from "./NumberInput.svelte";
+import BasePicker from "./BasePicker.svelte";
+import CommonPicker from "./CommonPicker.svelte";
+export default CommonEditor;
+export { CommonPicker, BasePicker, NumberInput };

package/dist/form/common_range_editor/CommonRangeEditor.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+    import type {Snippet} from "svelte";
+    import FormEditor from "../FormEditor.svelte";
+    import type {EditorVariant} from "../types";
+
+    interface Props {
+        variant?: EditorVariant;
+        compact?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        error?: string;
+        tooltip?: string;
+        theme?: string;
+        className?: string;
+        style?: string;
+        showFromClean?: boolean;
+        showToClean?: boolean;
+        cleanFrom: () => void;
+        cleanTo: () => void;
+        fromChild: Snippet;
+        toChild: Snippet;
+        actionIcon?: Snippet;
+    }
+
+    let {
+        variant,
+        compact = false,
+        disabled = false,
+        readonly = false,
+        error,
+        tooltip,
+        theme,
+        className,
+        style = '',
+        showFromClean = false,
+        showToClean = false,
+        cleanFrom,
+        cleanTo,
+        fromChild,
+        toChild,
+        actionIcon
+    }: Props = $props();
+</script>
+
+<FormEditor {variant} {compact} {disabled} {readonly} {error} {tooltip} {theme} {style} {className}>
+    <div class="uniface-common-editor uniface-common-picker" tabindex="-1">
+        <div class="range-row">
+            <div class="range-cell">
+                {@render fromChild()}
+                <div class="clean-icon" class:visible={showFromClean}>
+                    <i class="icon_google_clear" aria-hidden="true" onclick={cleanFrom}></i>
+                </div>
+            </div>
+            <div class="divider"></div>
+            <div class="range-cell">
+                {@render toChild()}
+                <div class="clean-icon" class:visible={showToClean}>
+                    <i class="icon_google_clear" aria-hidden="true" onclick={cleanTo}></i>
+                </div>
+            </div>
+        </div>
+        {#if actionIcon}
+            {@render actionIcon()}
+        {/if}
+    </div>
+</FormEditor>
+
+<style>
+    .range-row {
+        flex: 1 1 auto;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        gap: 2px;
+        position: relative;
+    }
+
+    .range-cell {
+        flex: 1 1 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-width: 0;
+    }
+
+    .divider {
+        position: relative;
+        flex: 0 0 auto;
+        width: 6px;
+    }
+
+    .divider::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: var(--uniface-editor-inline-action-icon-color, #37415170);
+        transform: translateY(-50%);
+    }
+
+    .clean-icon {
+        flex: 0 0 16px;
+        width: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.15s;
+        pointer-events: none;
+    }
+
+    .clean-icon.visible {
+        opacity: 0.6;
+        pointer-events: auto;
+    }
+
+    .clean-icon.visible:hover {
+        opacity: 1;
+    }
+
+    .clean-icon i {
+        font-size: 10px;
+        cursor: pointer;
+    }
+
+    /* 覆盖全局 .uniface-form-editor .uniface-common-picker .clean-icon i { display: none } */
+    :global(.uniface-form-editor .uniface-common-picker) .range-cell .clean-icon i {
+        display: block !important;
+    }
+</style>

package/dist/form/common_range_editor/CommonRangeEditor.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+import type { EditorVariant } from "../types";
+interface Props {
+    variant?: EditorVariant;
+    compact?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: string;
+    tooltip?: string;
+    theme?: string;
+    className?: string;
+    style?: string;
+    showFromClean?: boolean;
+    showToClean?: boolean;
+    cleanFrom: () => void;
+    cleanTo: () => void;
+    fromChild: Snippet;
+    toChild: Snippet;
+    actionIcon?: Snippet;
+}
+declare const CommonRangeEditor: import("svelte").Component<Props, {}, "">;
+type CommonRangeEditor = ReturnType<typeof CommonRangeEditor>;
+export default CommonRangeEditor;

package/dist/form/date_picker/DatePicker.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+
+    import dayjs, {isDayjs} from "dayjs";
+    import Calendar from "../../base-calendar";
+    import type {UniDate} from "../../base-calendar/dateUtils";
+    import CommonPicker from "../common_editor/CommonPicker.svelte";
+    import type CommonPickerProps from "../common_editor/CommonPickerProps";
+    import type {KeyboardEvents} from "../common_editor/EditorEvents";
+
+    interface Props extends CommonPickerProps, KeyboardEvents {
+        value?: UniDate;
+        min?: UniDate;
+        max?: UniDate;
+    }
+
+    let {
+        error,
+        tooltip,
+        variant,
+        disabled = false,
+        readonly = false,
+        compact = false,
+        mandatory = false,
+        value = $bindable<UniDate>(),
+        style,
+        placeholder,
+        min,
+        max,
+        onchange,
+        onfocus,
+        onblur
+    }: Props = $props();
+
+    let textValue = $state('');
+    let isOpen = $state(false);
+
+    const handleValueChange = (d: dayjs.Dayjs | Date | undefined): void => {
+        const newValue = d == null ? undefined : isDayjs(d) ? d.toDate() : d;
+        value = newValue;
+        onchange?.(newValue);
+    }
+
+    const handleCalendarSelect = (d: dayjs.Dayjs) => {
+        handleValueChange(d);
+        isOpen = false;
+        picker.focus();
+    }
+
+    $effect(() => {
+        textValue = value == null ? '' : dayjs(value).format('YYYY-MM-DD');
+    });
+
+    let picker: CommonPicker;
+
+</script>
+
+<CommonPicker bind:this={picker} {variant} {style} {error} {tooltip} {compact} {mandatory}
+              iconName="icon_google_event_available" clear={()=> {value = undefined}} {onfocus} {onblur} {placeholder} {value}
+              bind:isOpen autoFit={false} {textValue} {readonly} {disabled}>
+    {#snippet popupLayer()}
+        <div class="date-popover">
+            <Calendar value={value} {min} {max} onselect={handleCalendarSelect}/>
+        </div>
+    {/snippet}
+</CommonPicker>
+
+<style>
+    .date-popover {
+        user-select: none;
+    }
+</style>

package/dist/form/date_picker/DatePicker.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { UniDate } from "../../base-calendar/dateUtils";
+import type CommonPickerProps from "../common_editor/CommonPickerProps";
+import type { KeyboardEvents } from "../common_editor/EditorEvents";
+interface Props extends CommonPickerProps, KeyboardEvents {
+    value?: UniDate;
+    min?: UniDate;
+    max?: UniDate;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/form/date_picker/DateTimePicker.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+    import dayjs from "dayjs";
+    import dateUtils, {type UniDate} from "../../base-calendar/dateUtils";
+    import Calendar from "../../base-calendar";
+    import TimePanel from "./TimePanel.svelte";
+    import {TextButton} from "../../general/button";
+    import CommonPicker from "../common_editor/CommonPicker.svelte";
+    import type CommonPickerProps from "../common_editor/CommonPickerProps";
+    import i18nRes from "../../i18nRes";
+
+    type Precision = "H" | "M" | "S";
+
+    interface Props extends CommonPickerProps {
+        value?: UniDate;
+        min?: UniDate;
+        max?: UniDate;
+        precision?: Precision;
+    }
+
+    let {
+        variant,
+        disabled = false,
+        readonly = false,
+        compact = false,
+        mandatory = false,
+        error,
+        tooltip,
+        theme,
+        style,
+        placeholder,
+        value = $bindable<UniDate>(),
+        min = undefined,
+        max = undefined,
+        precision = "M",
+        onchange,
+        onfocus,
+        onblur,
+    }: Props = $props();
+
+    const dateFmts: Record<Precision, string> = {
+        "H": "YYYY-MM-DD HH:mm",
+        "M": "YYYY-MM-DD HH:mm",
+        "S": "YYYY-MM-DD HH:mm:ss",
+    };
+
+    const format = $derived(dateFmts[precision]);
+    const confirmText = $derived(i18nRes.calendar.confirmText as any as string);
+
+    let isOpen = $state(false);
+    let currentValue = $state<dayjs.Dayjs>(dayjs());
+
+    const textValue = $derived(value == null ? '' : dateUtils.formatDate(value, format));
+    const displayTime = $derived(dateUtils.formatDate(currentValue, format));
+    const btnDisabled = $derived(currentValue == null);
+
+    let picker: CommonPicker;
+
+    export function focus() {
+        setTimeout(() => {
+            picker?.focus();
+        }, 50);
+    }
+
+    // Resync currentValue from external value / precision changes.
+    $effect(() => {
+        const v = value;
+        const p = precision;
+        let next = v ? (dateUtils.toDayjs(v) ?? dayjs()) : dayjs();
+        next = next.millisecond(0);
+        if (p === "H") {
+            next = next.second(0).minute(0);
+        } else if (p === "M") {
+            next = next.second(0);
+        }
+        currentValue = next;
+    });
+
+    const openPopup = () => {
+        isOpen = true;
+    };
+
+    const handleCalendarSelect = (d: dayjs.Dayjs) => {
+        currentValue = currentValue
+            .year(d.year())
+            .month(d.month())
+            .date(d.date());
+        picker?.focus();
+    };
+
+    const handleTimeChange = (t: dayjs.Dayjs) => {
+        currentValue = t;
+    };
+
+    const confirm = () => {
+        const existing = dateUtils.toDayjs(value);
+        if (existing == null || !existing.isSame(currentValue)) {
+            value = currentValue;
+            onchange?.(currentValue.toDate());
+        }
+        isOpen = false;
+        picker?.focus();
+    };
+
+    const cleanData = () => {
+        value = undefined;
+    };
+</script>
+
+<CommonPicker
+        bind:this={picker}
+        {variant} {style} {error} {tooltip} {theme}
+        {compact} {mandatory}
+        iconName="icon_google_access_time"
+        clear={cleanData}
+        {placeholder} {value} {textValue}
+        {readonly} {disabled}
+        bind:isOpen
+        autoFit={false}
+        {onfocus} {onblur}>
+    {#snippet popupLayer()}
+        <div class="date-popover">
+            <div style="display: flex; flex-direction: row">
+                <Calendar
+                        style="border-right: 1px solid var(--uniface-inside-border-color, #f0f0f0)"
+                        value={currentValue}
+                        onselect={handleCalendarSelect}
+                        {min} {max}/>
+                <TimePanel style="width: 120px" value={currentValue} {precision} onchange={handleTimeChange}/>
+            </div>
+            <div class="confirm-bar">
+                <div style="flex: 1 1 auto">
+                    <span>{displayTime}</span>
+                </div>
+                <div style="flex: 0 0 auto;">
+                    <TextButton label={confirmText} type="primary" disabled={btnDisabled} onclick={confirm}/>
+                </div>
+            </div>
+        </div>
+    {/snippet}
+</CommonPicker>
+
+<style>
+    .date-popover {
+        user-select: none;
+    }
+
+    .confirm-bar {
+        border-top: 1px solid var(--uniface-inside-border-color, #f0f0f0);
+        display: flex;
+        flex-direction: row;
+        box-sizing: border-box;
+        padding: 4px 8px;
+        text-align: left;
+        align-items: center;
+    }
+</style>

package/dist/form/date_picker/DateTimePicker.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type UniDate } from "../../base-calendar/dateUtils";
+import type CommonPickerProps from "../common_editor/CommonPickerProps";
+type Precision = "H" | "M" | "S";
+interface Props extends CommonPickerProps {
+    value?: UniDate;
+    min?: UniDate;
+    max?: UniDate;
+    precision?: Precision;
+}
+declare const DateTimePicker: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;