@ticatec/uniface-element 5.0.5 → 5.1.0

package/dist/form/common_editor/NumberInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import utils from "../../overlay/common/utils";
-    import type {EditorEvents} from "../types";
+    import type {EditorEvents} from "../events";
 
     export interface Props extends EditorEvents {
         style?: string;
@@ -26,7 +26,10 @@
         min,
         onchange,
         onfocus,
-        onblur
+        onblur,
+        onkeydown,
+        onkeyup,
+        onkeypress
     }: Props = $props();
 
     let textValue = $state('');
@@ -120,6 +123,9 @@
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
+        // Consumer handler runs first so it sees every key, including the ones filtered below.
+        onkeydown?.(event);
+        if (event.defaultPrevented) return;
         if (/[^\x00-\x7F]/.test(event.key)) {
             event.preventDefault();
             event.stopPropagation();
@@ -210,6 +216,8 @@
     oncompositionstart={handleCompositionStart}
     oninput={handleInput}
     onkeydown={handleKeyDown}
+    {onkeyup}
+    {onkeypress}
     oncompositionend={handleCompositionEnd}
     onpaste={handlePaste}
 />

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

@@ -1,4 +1,4 @@
-import type { EditorEvents } from "../types";
+import type { EditorEvents } from "../events";
 export interface Props extends EditorEvents {
     style?: string;
     value?: number;

package/dist/form/common_range_editor/CommonRangeEditor.svelte

@@ -11,14 +11,14 @@
         error?: string;
         tooltip?: string;
         theme?: string;
-        className?: string;
+        class?: string;
         style?: string;
-        showFromClean?: boolean;
-        showToClean?: boolean;
+        fromClearable?: boolean;
+        toClearable?: boolean;
         cleanFrom: () => void;
         cleanTo: () => void;
-        fromChild: Snippet;
-        toChild: Snippet;
+        from: Snippet;
+        to: Snippet;
         actionIcon?: Snippet;
     }
 
@@ -30,14 +30,14 @@
         error,
         tooltip,
         theme,
-        className,
+        class: className,
         style = '',
-        showFromClean = false,
-        showToClean = false,
+        fromClearable = false,
+        toClearable = false,
         cleanFrom,
         cleanTo,
-        fromChild,
-        toChild,
+        from,
+        to,
         actionIcon
     }: Props = $props();
 
@@ -49,21 +49,21 @@
     };
 </script>
 
-<FormEditor {variant} {compact} {disabled} {readonly} {error} {tooltip} {theme} {style} {className}>
+<FormEditor {variant} {compact} {disabled} {readonly} {error} {tooltip} {theme} {style} class={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" role="button" tabindex={showFromClean ? 0 : -1} aria-label="Clear"
+                {@render from()}
+                <div class="clean-icon" class:visible={fromClearable}>
+                    <i class="icon_google_clear" role="button" tabindex="-1" aria-label="Clear"
                        onclick={cleanFrom} onkeydown={handleCleanKeyDown(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" role="button" tabindex={showToClean ? 0 : -1} aria-label="Clear"
+                {@render to()}
+                <div class="clean-icon" class:visible={toClearable}>
+                    <i class="icon_google_clear" role="button" tabindex="-1" aria-label="Clear"
                        onclick={cleanTo} onkeydown={handleCleanKeyDown(cleanTo)}></i>
                 </div>
             </div>

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

@@ -8,14 +8,14 @@ interface Props {
     error?: string;
     tooltip?: string;
     theme?: string;
-    className?: string;
+    class?: string;
     style?: string;
-    showFromClean?: boolean;
-    showToClean?: boolean;
+    fromClearable?: boolean;
+    toClearable?: boolean;
     cleanFrom: () => void;
     cleanTo: () => void;
-    fromChild: Snippet;
-    toChild: Snippet;
+    from: Snippet;
+    to: Snippet;
     actionIcon?: Snippet;
 }
 declare const CommonRangeEditor: import("svelte").Component<Props, {}, "">;

package/dist/form/date_picker/DatePicker.svelte

@@ -5,7 +5,7 @@
     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";
+    import type {KeyboardEvents} from "../events";
 
     interface Props extends CommonPickerProps, KeyboardEvents {
         value?: UniDate;
@@ -20,7 +20,7 @@
         disabled = false,
         readonly = false,
         compact = false,
-        mandatory = false,
+        clearable,
         value = $bindable<UniDate>(),
         style,
         placeholder,
@@ -54,10 +54,10 @@
 
 </script>
 
-<CommonPicker bind:this={picker} {variant} {style} {error} {tooltip} {compact} {mandatory}
+<CommonPicker bind:this={picker} {variant} {style} {error} {tooltip} {compact} {clearable}
               iconName="icon_google_event_available" clear={()=> {value = undefined}} {onfocus} {onblur} {placeholder} {value}
-              bind:isOpen autoFit={false} {textValue} {readonly} {disabled}>
-    {#snippet popupLayer()}
+              bind:expanded={isOpen} autoFit={false} {textValue} {readonly} {disabled}>
+    {#snippet popup()}
         <div class="date-popover">
             <Calendar value={value} {min} {max} onchange={handleCalendarSelect}/>
         </div>

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

@@ -1,6 +1,6 @@
 import type { UniDate } from "../../base-calendar/dateUtils";
 import type CommonPickerProps from "../common_editor/CommonPickerProps";
-import type { KeyboardEvents } from "../common_editor/EditorEvents";
+import type { KeyboardEvents } from "../events";
 interface Props extends CommonPickerProps, KeyboardEvents {
     value?: UniDate;
     min?: UniDate;

package/dist/form/date_picker/DateTimePicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import {onDestroy} from 'svelte';
     import dayjs from "dayjs";
     import dateUtils, {type UniDate} from "../../base-calendar/dateUtils";
     import Calendar from "../../base-calendar";
@@ -22,7 +23,7 @@
         disabled = false,
         readonly = false,
         compact = false,
-        mandatory = false,
+        clearable,
         error,
         tooltip,
         theme,
@@ -54,13 +55,22 @@
     const btnDisabled = $derived(currentValue == null);
 
     let picker: CommonPicker;
+    let focusTimer: any;
 
     export function focus() {
-        setTimeout(() => {
+        clearTimeout(focusTimer);
+        focusTimer = setTimeout(() => {
             picker?.focus();
         }, 50);
     }
 
+    onDestroy(() => {
+        if (focusTimer != null) {
+            clearTimeout(focusTimer);
+            focusTimer = null;
+        }
+    });
+
     // Resync currentValue from external value / precision changes.
     $effect(() => {
         const v = value;
@@ -109,15 +119,15 @@
 <CommonPicker
         bind:this={picker}
         {variant} {style} {error} {tooltip} {theme}
-        {compact} {mandatory}
+        {compact} {clearable}
         iconName="icon_google_access_time"
         clear={cleanData}
         {placeholder} {value} {textValue}
         {readonly} {disabled}
-        bind:isOpen
+        bind:expanded={isOpen}
         autoFit={false}
         {onfocus} {onblur}>
-    {#snippet popupLayer()}
+    {#snippet popup()}
         <div class="date-popover">
             <div style="display: flex; flex-direction: row">
                 <Calendar

package/dist/form/date_picker/README.md

@@ -1,5 +1,7 @@
 # DatePicker & DateTimePicker
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `mandatory` were removed in 5.1.0 (no compatibility aliases are kept).
+
 Date and datetime selection components built on a shared popup picker. `DatePicker` selects a calendar date; `DateTimePicker` combines a calendar with a time panel and requires explicit confirmation.
 
 ## Installation
@@ -21,7 +23,7 @@ import { DateTimePicker } from "@ticatec/uniface-element/DatePicker";
 - **DateTimePicker**: date + time selection with confirm bar; supports hour / minute / second precision
 - Visual variants: default, `plain`, `outlined`, `filled`
 - `min` / `max` date limits enforced in the calendar
-- `mandatory` hides the clear action
+- `clearable={false}` hides the clear action
 - Read-only and disabled states
 - Error text and tooltip via the shared form editor shell
 - Day.js used internally; bound values accept `Date`, Day.js, or string
@@ -53,7 +55,7 @@ import { DateTimePicker } from "@ticatec/uniface-element/DatePicker";
 | `compact` | `boolean` | `false` | Compact spacing |
 | `disabled` | `boolean` | `false` | Non-interactive, muted style |
 | `readonly` | `boolean` | `false` | Display-only; popup does not open |
-| `mandatory` | `boolean` | `false` | Required field; hides clear control |
+| `clearable` | `boolean` | `true` | Whether the value can be cleared (shows the clear button). The old `mandatory` prop meant the opposite (`mandatory={true}` = `clearable={false}`) and was removed in 5.1.0. |
 | `placeholder` | `string` | — | Placeholder when empty |
 | `tooltip` | `string` | — | Hover tooltip |
 | `error` | `string` | — | Error message shown by the field shell |
@@ -162,7 +164,7 @@ Display format is always `YYYY-MM-DD`.
 
 1. Click the field or calendar icon to open the popup (unless `readonly` / `disabled`).
 2. Selecting a day writes a native `Date` to `value`, calls `onchange`, and closes the popup.
-3. Clear (×) appears when there is a value and `mandatory` is false; clearing sets `value` to `undefined`.
+3. Clear (×) appears when there is a value and `clearable={false}` is false; clearing sets `value` to `undefined`.
 4. Display text is formatted with Day.js as `YYYY-MM-DD`.
 5. `min` / `max` are passed to the calendar and restrict selectable days.
 
@@ -194,7 +196,7 @@ Display format is always `YYYY-MM-DD`.
 | `compact` | `boolean` | `false` | Compact spacing |
 | `disabled` | `boolean` | `false` | Non-interactive |
 | `readonly` | `boolean` | `false` | Display-only |
-| `mandatory` | `boolean` | `false` | Hides clear control |
+| `clearable` | `boolean` | `true` | Whether the value can be cleared (shows the clear button). The old `mandatory` prop meant the opposite (`mandatory={true}` = `clearable={false}`) and was removed in 5.1.0. |
 | `placeholder` | `string` | — | Placeholder when empty |
 | `tooltip` | `string` | — | Hover tooltip |
 | `error` | `string` | — | Error message |
@@ -288,7 +290,7 @@ Display format is always `YYYY-MM-DD`.
 2. Changing the day or scrolling time updates a temporary `currentValue` only.
 3. Clicking **Confirm** commits `currentValue` to `value` as a native `Date`, calls `onchange` when the value actually changed, and closes the popup.
 4. Closing without confirm discards temporary edits (next open re-syncs from `value`).
-5. Clear sets `value` to `undefined` (when not `mandatory`).
+5. Clear sets `value` to `undefined` (when not `clearable={false}`).
 6. `min` / `max` apply to the calendar day selection, not to the time columns.
 
 ---

package/dist/form/date_picker/README_CN.md

@@ -1,5 +1,7 @@
 # DatePicker 与 DateTimePicker
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `mandatory` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 基于共享弹层选择器的日期 / 日期时间组件。`DatePicker` 用于选择日历日期；`DateTimePicker` 在日历基础上增加时间面板，并需要显式确认后才会写回值。
 
 ## 安装
@@ -21,7 +23,7 @@ import { DateTimePicker } from "@ticatec/uniface-element/DatePicker";
 - **DateTimePicker**：日期 + 时间选择，底部确认栏；支持时 / 分 / 秒精度
 - 视觉变体：默认、`plain`、`outlined`、`filled`
 - 日历内强制 `min` / `max` 日期范围
-- `mandatory` 时隐藏清除按钮
+- `clearable={false}` 时隐藏清除按钮
 - 只读与禁用状态
 - 通过表单编辑器外壳支持错误信息与 tooltip
 - 内部使用 Day.js；`value` 可接受 `Date`、Day.js 或字符串
@@ -53,7 +55,7 @@ import { DateTimePicker } from "@ticatec/uniface-element/DatePicker";
 | `compact` | `boolean` | `false` | 紧凑间距 |
 | `disabled` | `boolean` | `false` | 禁用，不可交互 |
 | `readonly` | `boolean` | `false` | 只读，不打开弹层 |
-| `mandatory` | `boolean` | `false` | 必填，隐藏清除按钮 |
+| `clearable` | `boolean` | `true` | 是否允许清空（显示清空按钮）。旧名 `mandatory` 语义相反（`mandatory={true}` = `clearable={false}`），5.1.0 已移除。 |
 | `placeholder` | `string` | — | 空值占位文本 |
 | `tooltip` | `string` | — | 悬停提示 |
 | `error` | `string` | — | 错误信息（由表单外壳展示） |
@@ -162,7 +164,7 @@ import { DateTimePicker } from "@ticatec/uniface-element/DatePicker";
 
 1. 点击输入区或日历图标打开弹层（`readonly` / `disabled` 除外）。
 2. 点击某一天会把原生 `Date` 写入 `value`，调用 `onchange`，并关闭弹层。
-3. 有值且非 `mandatory` 时显示清除（×）；清除后 `value` 为 `undefined`。
+3. 有值且非 `clearable={false}` 时显示清除（×）；清除后 `value` 为 `undefined`。
 4. 展示文本由 Day.js 格式化为 `YYYY-MM-DD`。
 5. `min` / `max` 传给日历，限制可选日期。
 
@@ -194,7 +196,7 @@ import { DateTimePicker } from "@ticatec/uniface-element/DatePicker";
 | `compact` | `boolean` | `false` | 紧凑间距 |
 | `disabled` | `boolean` | `false` | 禁用 |
 | `readonly` | `boolean` | `false` | 只读 |
-| `mandatory` | `boolean` | `false` | 隐藏清除按钮 |
+| `clearable` | `boolean` | `true` | 是否允许清空（显示清空按钮）。旧名 `mandatory` 语义相反（`mandatory={true}` = `clearable={false}`），5.1.0 已移除。 |
 | `placeholder` | `string` | — | 空值占位 |
 | `tooltip` | `string` | — | 悬停提示 |
 | `error` | `string` | — | 错误信息 |
@@ -288,7 +290,7 @@ import { DateTimePicker } from "@ticatec/uniface-element/DatePicker";
 2. 修改日期或滚动时间只更新临时的 `currentValue`。
 3. 点击**确认**后，将 `currentValue` 以原生 `Date` 写回 `value`；若与原值不同则调用 `onchange`，并关闭弹层。
 4. 未确认直接关闭会丢弃临时修改（下次打开会从 `value` 重新同步）。
-5. 清除会将 `value` 设为 `undefined`（非 `mandatory` 时）。
+5. 清除会将 `value` 设为 `undefined`（非 `clearable={false}` 时）。
 6. `min` / `max` 仅约束日历日期，不约束时间列。
 
 ---

package/dist/form/date_picker/ScrollBar.svelte

@@ -1,44 +1,44 @@
 <script lang="ts">
 
-    import type {OnChangeHandler} from "../../types";
+    import {onDestroy} from 'svelte';
+    import type {OnChange} from "../../types";
 
     interface Props {
         value: number;
         mode?: 24 | 60;
-        enable?: boolean;
-        onchange?: OnChangeHandler<number>;
+        disabled?: boolean;
+        onchange?: OnChange<number>;
     }
 
-    let {value = $bindable(), mode = 60, enable = true, onchange}: Props = $props();
+    let {value = $bindable(), mode = 60, disabled = false, onchange}: Props = $props();
 
-    let list: Array<any> = $state([]);
+    // 显示窗口：当前值前后各 3 个刻度。用 $derived 而不是在 $effect 里 push 到 $state 数组 ——
+    // 后者在同一个 effect 里既读又写 list，会触发 effect_update_depth_exceeded（DateTimePicker 弹层打不开）。
+    const list = $derived(Array.from({length: 7}, (_, i) => (value + i - 3 + mode) % mode));
 
     const decValue = () => {
-        if (enable) {
+        if (!disabled) {
             value = (value - 1 + mode) % mode;
             resetList();
         }
     }
 
     const incValue = () => {
-        if (enable) {
+        if (!disabled) {
             value = (value + 1 + mode) % mode;
             resetList();
         }
     }
 
+    // 只在用户操作后通知父组件；外部通过 bind:value 写入时不再回调
     const resetList = () => {
-        list = [];
         onchange?.(value);
-        for (let i=0; i<7; i++) {
-            list.push((value + i - 3 + mode) % mode);
-        }
     }
 
     let amendValue = 0;
 
     const handleMouseWheel = (e: WheelEvent) => {
-        if (enable) {
+        if (!disabled) {
             value = (value + Math.round(e.deltaY / 5) + mode) % mode;
             resetList();
             e.stopPropagation();
@@ -47,7 +47,7 @@
     }
 
     const handleMouseDown = (v: number) => (e: MouseEvent) => {
-        if (enable) {
+        if (!disabled) {
             amendValue = v;
             timer = setInterval(() => {
                 if (amendValue != 0) {
@@ -79,27 +79,28 @@
 
     let timer: any;
 
-    $effect(() => {
-        void value;
-        void mode;
-        resetList();
+    onDestroy(() => {
+        if (timer != null) {
+            clearInterval(timer);
+            timer = null;
+        }
     });
 
 </script>
 <div class="scroll-bar" onwheel={handleMouseWheel}>
     <div class="action-bar">
-        <div class="arrow-up" class:disabled={!enable}>
+        <div class="arrow-up" class:disabled={disabled}>
             <i class="icon_google_keyboard_arrow_up" onclick={decValue} onkeydown={handleKeyDown(decValue)} ondragstart={(e)=>{e.preventDefault()}}
                  onmousedown={handleMouseDown(-1)} onmouseup={handleMouseUp} onmouseleave={handleMouseUp}
                  role="button" tabindex="0" aria-label="Decrease value"></i>
         </div>
     </div>
     {#each list as v}
-        <div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" onclick={()=>{handleDigitalClick(v)}} onkeydown={handleKeyDown(() => handleDigitalClick(v))} class:inactive={v!=value}
+        <div style={disabled && v!= value ? "visibility: hidden; " : ""} class="digital-block" onclick={()=>{handleDigitalClick(v)}} onkeydown={handleKeyDown(() => handleDigitalClick(v))} class:inactive={v!=value}
              role="button" tabindex="0" aria-label="Select {v}"><span>{v}</span></div>
     {/each}
     <div class="action-bar">
-        <div class="arrow-down" class:disabled={!enable}>
+        <div class="arrow-down" class:disabled={disabled}>
             <i class="icon_google_keyboard_arrow_down" onclick={incValue} onkeydown={handleKeyDown(incValue)} ondragstart={(e)=>{e.preventDefault()}}
                  onmousedown={handleMouseDown(1)} onmouseup={handleMouseUp} onmouseleave={handleMouseUp}
                  role="button" tabindex="0" aria-label="Increase value"></i>

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

@@ -1,9 +1,9 @@
-import type { OnChangeHandler } from "../../types";
+import type { OnChange } from "../../types";
 interface Props {
     value: number;
     mode?: 24 | 60;
-    enable?: boolean;
-    onchange?: OnChangeHandler<number>;
+    disabled?: boolean;
+    onchange?: OnChange<number>;
 }
 declare const ScrollBar: import("svelte").Component<Props, {}, "value">;
 type ScrollBar = ReturnType<typeof ScrollBar>;

package/dist/form/date_range/DateRangeEditor.svelte

@@ -60,8 +60,8 @@
     const maxFrom = $derived(normalizedToValue ?? max);
     const minTo = $derived(normalizedFromValue ?? min);
 
-    const showFromClean = $derived(!disabled && !readonly && normalizedFromValue != null);
-    const showToClean = $derived(!disabled && !readonly && normalizedToValue != null);
+    const fromClearable = $derived(!disabled && !readonly && normalizedFromValue != null);
+    const toClearable = $derived(!disabled && !readonly && normalizedToValue != null);
 
     const showPopover = () => {
         if (!disabled && !readonly) {
@@ -90,15 +90,15 @@
 </script>
 
 <div bind:this={rootElement}>
-    <CommonRangeEditor {compact} {disabled} {readonly} {error} {tooltip} {theme} {showFromClean} {showToClean} className={className} {variant} {style} cleanFrom={cleanFromValue} cleanTo={cleanToValue}>
-        {#snippet fromChild()}
+    <CommonRangeEditor {compact} {disabled} {readonly} {error} {tooltip} {theme} {fromClearable} {toClearable} class={className} {variant} {style} cleanFrom={cleanFromValue} cleanTo={cleanToValue}>
+        {#snippet from()}
             <input style="width: 100%; text-align: center" readonly onclick={showPopover} value={textFrom}/>
         {/snippet}
-        {#snippet toChild()}
+        {#snippet to()}
             <input style="width: 100%; text-align: center" readonly onclick={showPopover} value={textTo}/>
         {/snippet}
         {#snippet actionIcon()}
-            <i class="icon_google_event_note action-icon" role="button" tabindex="0" aria-label="Open date range picker"
+            <i class="icon_google_event_note action-icon" role="button" tabindex="-1" aria-label="Open date range picker"
                onclick={showPopover} onkeydown={handleIconKeyDown}></i>
         {/snippet}
     </CommonRangeEditor>

package/dist/form/events.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 事件接口的唯一定义处（NAMING R13）。
+ * 组件 Props 通过 extends 组合这些接口；参数名统一为 event。
+ */
+export interface FocusEvents {
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onfocusin?: (event: FocusEvent) => void;
+    onfocusout?: (event: FocusEvent) => void;
+}
+export interface KeyboardEvents {
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onkeypress?: (event: KeyboardEvent) => void;
+}
+export interface InputEvents {
+    oninput?: (event: InputEvent) => void;
+    onbeforeinput?: (event: InputEvent) => void;
+}
+export interface CompositionEvents {
+    oncompositionstart?: (event: CompositionEvent) => void;
+    oncompositionend?: (event: CompositionEvent) => void;
+    oncompositionupdate?: (event: CompositionEvent) => void;
+}
+export interface ClipboardEvents {
+    oncopy?: (event: ClipboardEvent) => void;
+    oncut?: (event: ClipboardEvent) => void;
+    onpaste?: (event: ClipboardEvent) => void;
+}
+export interface MouseEvents {
+    onclick?: (event: MouseEvent) => void;
+    ondblclick?: (event: MouseEvent) => void;
+    onmousedown?: (event: MouseEvent) => void;
+    onmouseup?: (event: MouseEvent) => void;
+    onmouseover?: (event: MouseEvent) => void;
+    onmousemove?: (event: MouseEvent) => void;
+    onmouseout?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    onmouseleave?: (event: MouseEvent) => void;
+    onwheel?: (event: WheelEvent) => void;
+}
+export interface TouchEvents {
+    ontouchstart?: (event: TouchEvent) => void;
+    ontouchend?: (event: TouchEvent) => void;
+    ontouchmove?: (event: TouchEvent) => void;
+    ontouchcancel?: (event: TouchEvent) => void;
+}
+export interface DragEvents {
+    ondrag?: (event: DragEvent) => void;
+    ondragstart?: (event: DragEvent) => void;
+    ondragend?: (event: DragEvent) => void;
+    ondragover?: (event: DragEvent) => void;
+    ondragenter?: (event: DragEvent) => void;
+    ondragleave?: (event: DragEvent) => void;
+    ondrop?: (event: DragEvent) => void;
+}
+export interface FormEvents {
+    onselect?: (event: Event) => void;
+    oninvalid?: (event: Event) => void;
+    onreset?: (event: Event) => void;
+}
+/**
+ * 原生输入控件的完整事件集合。
+ * onchange 由 Uniface 接管：各组件传新值 (value) 而不是 DOM 事件。
+ */
+export interface EditorEvents extends FocusEvents, KeyboardEvents, InputEvents, CompositionEvents, ClipboardEvents, MouseEvents, TouchEvents, DragEvents, FormEvents {
+    onchange?: (value: any) => void;
+}
+/** 透传到原生 input 的键盘事件属性名；用 satisfies 绑定到 KeyboardEvents 的键。 */
+export declare const keyboardAttrs: readonly ["onkeydown", "onkeyup", "onkeypress"];

package/dist/form/events.js

@@ -0,0 +1,6 @@
+/**
+ * 事件接口的唯一定义处（NAMING R13）。
+ * 组件 Props 通过 extends 组合这些接口；参数名统一为 event。
+ */
+/** 透传到原生 input 的键盘事件属性名；用 satisfies 绑定到 KeyboardEvents 的键。 */
+export const keyboardAttrs = ['onkeydown', 'onkeyup', 'onkeypress'];

package/dist/form/group_box/group-check-box/GroupCheckBox.svelte

@@ -2,7 +2,8 @@
     import utils from "../../../overlay/common/utils";
     import CheckBox from "../../checkbox/CheckBox.svelte";
     import FormEditor from "../../FormEditor.svelte";
-    import type {EditorEvents, EditorVariant} from "../../types";
+    import type {EditorVariant} from "../../types";
+    import type {EditorEvents} from "../../events";
 
     interface OptionItem {
         [key: string]: any;
@@ -20,15 +21,16 @@
         keyField?: string;
         textField?: string;
         delimiter?: string;
-        itemStyle?: string;
+        /** 每个选项的内联样式 */
+        item$style?: string;
         disabledOptions?: Array<string>;
         hideOptions?: Array<string>;
         variant?: EditorVariant;
         compact?: boolean;
         class?: string;
         onchange?: (value: any) => void;
-        onblur?: (e: FocusEvent) => void;
-        onfocus?: (e: FocusEvent) => void;
+        onblur?: (event: FocusEvent) => void;
+        onfocus?: (event: FocusEvent) => void;
     }
 
     let {
@@ -43,7 +45,7 @@
         keyField = "code",
         textField = "text",
         delimiter = ';',
-        itemStyle = '',
+        item$style = '',
         disabledOptions = [],
         hideOptions = [],
         variant,
@@ -166,7 +168,7 @@
         {readonly}
         {compact}
         {style}
-        className={className}
+        class={className}
 >
     <!-- onclick only forwards focus to the first checkbox when the container's
          own background is clicked; each CheckBox inside is independently
@@ -182,7 +184,7 @@
                         {readonly}
                         disabled={disabled || disabledOptions.indexOf(op[keyField]) > -1}
                         label={op[textField]}
-                        style={itemStyle}
+                        style={item$style}
                         bind:value={checkboxStates[op[keyField]]}
                         onchange={handleCheckboxChange(op[keyField])}
                         onfocus={handleFocus}

package/dist/form/group_box/group-check-box/GroupCheckBox.svelte.d.ts

@@ -14,15 +14,16 @@ interface Props {
     keyField?: string;
     textField?: string;
     delimiter?: string;
-    itemStyle?: string;
+    /** 每个选项的内联样式 */
+    item$style?: string;
     disabledOptions?: Array<string>;
     hideOptions?: Array<string>;
     variant?: EditorVariant;
     compact?: boolean;
     class?: string;
     onchange?: (value: any) => void;
-    onblur?: (e: FocusEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
 }
 declare const GroupCheckBox: import("svelte").Component<Props, {
     focus: () => void;