@ticatec/topside-elements 1.0.0

package/dist/form/common_editor/CommonPicker.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+
+    import Popover from "../../overlay/common/Popover.svelte";
+    import Icon from "../../general/icon";
+    import type {Snippet} from "svelte";
+    import FormEditor from "../FormEditor.svelte";
+    import type CommonPickerProps from "./CommonPickerProps";
+
+
+    interface Props extends CommonPickerProps {
+        textValue?: string;
+        value?: any;
+        autoFit?: boolean;
+        iconName?: string;
+        class?: string;
+        children?: Snippet;
+        popup?: Snippet;
+        clear?: () => void;
+        expanded?: boolean;
+        showAction?: boolean;
+        oninput?: (event: Event) => void;
+        oncompositionstart?: (event: CompositionEvent) => void;
+        oncompositionend?: (event: CompositionEvent) => void;
+        input$readonly?: boolean;
+        input$style?: string;
+        /**
+         * 后置图标片段，渲染在输入区域后方
+         */
+        trailingIcon?: Snippet;
+        onIconClick?: () => void;
+    }
+
+    let {
+        variant,
+        theme,
+        disabled = false,
+        readonly = false,
+        compact = false,
+        clearable = true,
+        expanded = $bindable(false),
+        value,
+        textValue,
+        style,
+        placeholder,
+        autoFit = true,
+        tooltip,
+        error,
+        class: className,
+        iconName = 'icon_google_arrow_drop_down',
+        onIconClick,
+        children,
+        onfocus,
+        onblur,
+        clear,
+        popup,
+        trailingIcon,
+        input$readonly = true,
+        showAction = true,
+        input$style,
+        oninput,
+        onchange,
+        oncompositionstart,
+        oncompositionend,
+    }: Props = $props();
+
+
+    export function focus() {
+        editor?.focus();
+    }
+
+
+    let editorElement: HTMLElement | undefined = $state();
+    let editor: HTMLDivElement | undefined = $state();
+    let hasFocus = $state(false);
+
+
+    const handleFocus = (event: FocusEvent) => {
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.(event);
+        }
+    }
+
+    const handleBlur = (event: FocusEvent) => {
+        if (!expanded) {
+            hasFocus = false;
+            onblur?.(event);
+        }
+    }
+
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        switch (e.code) {
+            case 'Backspace':
+            case 'Delete':
+                if (input$readonly && clearable) {
+                    clear?.();
+                    expanded = false;
+                }
+                break;
+            case 'Tab':
+            case 'Escape':
+                expanded = false;
+                break;
+            case 'Space':
+                if (input$readonly) {
+                    expanded = true;
+                }
+                break;
+        }
+
+    }
+
+    $effect(() => {
+        if (!expanded && hasFocus) {
+            const timer = setTimeout(() => {
+                if (document.activeElement !== editor) {
+                    hasFocus = false;
+                    onblur?.(new FocusEvent('blur'));
+                }
+            }, 50);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    });
+
+    const openPopup = (event: Event) => {
+        if (!readonly && !disabled) {
+            if (!expanded) {
+                expanded = true;
+            }
+        }
+    }
+
+    const doClean = () => {
+        clear?.();
+        editor?.focus();
+        onchange?.();
+        expanded = false;
+    }
+
+
+</script>
+<FormEditor {variant} {readonly} {disabled} {theme} {style} {tooltip} {compact} {error} class={className}>
+    <div bind:this={editorElement} class="topside-common-picker" tabindex="-1">
+        {#if readonly || disabled}
+            {#if children}
+                {@render children()}
+            {:else}
+                <input style={input$style} tabindex="-1" readonly {disabled} value={textValue}/>
+            {/if}
+        {:else}
+            <div style="flex: 1 1 auto; position: relative; overflow: hidden; height: 100%">
+                {#if input$readonly}
+                    <input bind:this={editor} style={input$style} value={textValue} readonly {placeholder} onclick={openPopup} onkeydown={handleKeyDown}
+                           tabindex="0"/>
+                {:else}
+                    <input bind:this={editor} style={input$style} value={textValue} {oninput} {oncompositionstart} {oncompositionend} onclick={openPopup}
+                           {placeholder} tabindex="0" onkeydown={handleKeyDown}/>
+                {/if}
+                {#if children}
+                    {@render children()}
+                {/if}
+                {#if clearable}
+                    <!-- Space is reserved (and input padding-right adjusted via
+                         .topside-common-picker:has(.clean-icon) in
+                         topside-form-editor.scss) whenever clearing is allowed
+                         at all, not only once a value is picked — otherwise the
+                         whole picker visibly grows/shifts by that padding the
+                         moment a value is first selected. Visibility of the
+                         glyph itself still depends on there being something to
+                         clear. -->
+                    <div class="clean-icon" class:has-value={textValue}>
+                        <i class="icon_google_clear" role="button" tabindex="-1" aria-label="Clear"
+                           onmousedown={(e: MouseEvent)=>{e.preventDefault()}} onclick={textValue ? doClean : undefined}
+                           onkeydown={(e: KeyboardEvent) => { if (textValue && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); doClean(); } }}></i>
+                    </div>
+                {/if}
+            </div>
+            {#if trailingIcon}
+                <div class="trailing-icon" style="flex: 0 0 auto">
+                    {@render trailingIcon()}
+                </div>
+            {/if}
+            {#if showAction}
+                <div class="action-icon" style="flex: 0 0 auto">
+                    <Icon name={iconName} tabindex={-1} onclick={onIconClick ?? openPopup}/>
+                </div>
+            {/if}
+        {/if}
+    </div>
+</FormEditor>
+
+{#if !disabled && !readonly && expanded}
+    <Popover target={editorElement} onclose={()=>{expanded=false}} {autoFit} {theme}>
+        {#if popup}
+            {@render popup()}
+        {/if}
+    </Popover>
+{/if}

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

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+import type CommonPickerProps from "./CommonPickerProps";
+interface Props extends CommonPickerProps {
+    textValue?: string;
+    value?: any;
+    autoFit?: boolean;
+    iconName?: string;
+    class?: string;
+    children?: Snippet;
+    popup?: Snippet;
+    clear?: () => void;
+    expanded?: boolean;
+    showAction?: boolean;
+    oninput?: (event: Event) => void;
+    oncompositionstart?: (event: CompositionEvent) => void;
+    oncompositionend?: (event: CompositionEvent) => void;
+    input$readonly?: boolean;
+    input$style?: string;
+    /**
+     * 后置图标片段，渲染在输入区域后方
+     */
+    trailingIcon?: Snippet;
+    onIconClick?: () => void;
+}
+declare const CommonPicker: import("svelte").Component<Props, {
+    focus: () => void;
+}, "expanded">;
+type CommonPicker = ReturnType<typeof CommonPicker>;
+export default CommonPicker;

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

@@ -0,0 +1,12 @@
+import type CommonFieldProps from "./CommonFieldProps";
+/**
+ * 通用选择器属性接口
+ *
+ * 在 [[CommonFieldProps]] 基础上扩展选择器专属属性，用于 Picker 类组件。
+ */
+export default interface CommonPickerProps extends CommonFieldProps {
+    /**
+     * 是否允许清空（显示清空按钮），默认 true
+     */
+    clearable?: boolean;
+}

package/dist/form/common_editor/CommonPickerProps.js

@@ -0,0 +1 @@
+export {};

package/dist/form/common_editor/CommonPopupEditor.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import CommonEditor from "./CommonEditor.svelte";
+    import Popover from "../../overlay/common/Popover.svelte";
+    import type CommonFieldProps from "./CommonFieldProps";
+    import {type Snippet} from "svelte";
+
+    interface Props extends CommonFieldProps {
+        textValue?: string;
+        prefix?: string;
+        suffix?: string;
+        children: Snippet;
+        autoFit?: boolean
+        popup: Snippet;
+        leadingIcon?: Snippet;
+        clear?: () => void;
+    }
+
+    let {
+        variant,
+        theme,
+        compact = false,
+        disabled = false,
+        readonly = false,
+        style,
+        textValue,
+        prefix,
+        suffix,
+        autoFit = false,
+        tooltip,
+        clear,
+        leadingIcon,
+        popup,
+        children,
+    }: Props = $props();
+
+    let hasFocus = $state(false);
+
+    let showPopup = $state(false);
+    let editorRef = $state<any>(null);
+
+    export function focus() {
+        hasFocus = true;
+        editorRef?.focus();
+    }
+
+    // 正确获取经由子组件暴露的原生 DOM 节点
+    const getTargetElement = () => {
+        return editorRef?.getElement() || null;
+    };
+
+    const openPopup = () => {
+        if (!disabled && !readonly) {
+            showPopup = true;
+        }
+    };
+
+    export function close() {
+        showPopup = false;
+    }
+
+    const handleTriggerKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            openPopup();
+        }
+    }
+</script>
+
+<CommonEditor
+        bind:this={editorRef}
+        {variant}
+        {theme}
+        {compact}
+        {style}
+        {tooltip}
+        {disabled}
+        {readonly}
+        {prefix}
+        {suffix}
+        {clear}
+        {textValue}
+>
+    {@render children()}
+
+    {#snippet trailingIcon()}
+        {#if !disabled && !readonly}
+            <i class="icon_google_arrow_drop_down" role="button" tabindex="-1" aria-label="Open" aria-expanded={showPopup}
+               onclick={openPopup} onkeydown={handleTriggerKeyDown}></i>
+        {/if}
+    {/snippet}
+
+    {#if showPopup && getTargetElement()}
+        <Popover target={getTargetElement()} {autoFit} {theme} align="right" onclose={close}>
+            {#if popup}
+                {@render popup()}
+            {/if}
+        </Popover>
+    {/if}
+</CommonEditor>

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

@@ -0,0 +1,18 @@
+import type CommonFieldProps from "./CommonFieldProps";
+import { type Snippet } from "svelte";
+interface Props extends CommonFieldProps {
+    textValue?: string;
+    prefix?: string;
+    suffix?: string;
+    children: Snippet;
+    autoFit?: boolean;
+    popup: Snippet;
+    leadingIcon?: Snippet;
+    clear?: () => void;
+}
+declare const CommonPopupEditor: import("svelte").Component<Props, {
+    focus: () => void;
+    close: () => void;
+}, "">;
+type CommonPopupEditor = ReturnType<typeof CommonPopupEditor>;
+export default CommonPopupEditor;

package/dist/form/common_editor/NumberInput.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+    import utils from "../../overlay/common/utils";
+    import type {EditorEvents} from "../events";
+
+    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,
+        onkeydown,
+        onkeyup,
+        onkeypress
+    }: Props = $props();
+
+    // 输入框里"最后一次被接受"的文本。只由本组件写入、单向绑定到 input：
+    // 若用 bind:value，Svelte 的 input 监听会先于 oninput（委托事件）把非法文本写进来，回退就失效了
+    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);
+    }
+
+    /**
+     * 在光标处插入文本：优先 execCommand('insertText')，这样能进浏览器的撤销栈（Ctrl+Z 可撤回）；
+     * 不支持时退回 setRangeText 并手动走一遍 handleInput
+     */
+    const insertText = (s: string) => {
+        let done = false;
+        try {
+            done = typeof document.execCommand === 'function' && document.execCommand('insertText', false, s);
+        } catch {
+            done = false;
+        }
+        if (!done) {
+            editor.setRangeText(s, editor.selectionStart ?? editor.value.length, editor.selectionEnd ?? editor.value.length, 'end');
+            handleInput();
+        }
+    }
+
+    const handlePaste = (event: ClipboardEvent) => {
+        const pasteData = event.clipboardData?.getData('text') || '';
+        // 原样合法：交给浏览器默认粘贴
+        if (checkNewInputText(pasteData)) return;
+        event.preventDefault();
+        // 从表格 / 其它单元格复制来的常带千分位或首尾空白（如 "1,234.50"），清理后再试一次
+        const cleaned = stripThousands(pasteData).replace(/\s/g, '');
+        if (cleaned && cleaned !== pasteData && checkNewInputText(cleaned)) {
+            insertText(cleaned);
+        }
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+        // Consumer handler runs first so it sees every key, including the ones filtered below.
+        onkeydown?.(event);
+        if (event.defaultPrevented) return;
+        // 组合键（Ctrl/⌘ + A/C/V/X/Z/Y 等）交给浏览器：全选、剪贴板、撤销/重做。
+        // 真正写进输入框的内容仍由 handlePaste / handleInput 把关（AltGr、Option 打出的字符也会在 handleInput 里回退）
+        if (event.ctrlKey || event.metaKey || event.altKey) return;
+        // 具名键（Enter / Escape / Tab / Home / End / F2 / 方向键 / 输入法的 Process 等）不直接产生字符，放行，
+        // 也不再 stopPropagation：外层（表格单元格、表单）需要收到 Enter / Esc
+        if (event.key.length !== 1) return;
+
+        // 以下只处理会直接产生字符的按键
+        if (/[^\x00-\x7F]/.test(event.key)) {
+            event.preventDefault();
+            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();
+    };
+
+    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;
+        }
+
+        // 负数的中间态：只输入了 "-"，先保留文本、不改 value（失焦时解析不出数字会清空）
+        if (allowNegative && raw === '-') {
+            textValue = raw;
+            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}
+    value={textValue}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    oncompositionstart={handleCompositionStart}
+    oninput={handleInput}
+    onkeydown={handleKeyDown}
+    {onkeyup}
+    {onkeypress}
+    oncompositionend={handleCompositionEnd}
+    onpaste={handlePaste}
+/>

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

@@ -0,0 +1,17 @@
+import type { EditorEvents } from "../events";
+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 };