@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/overlay/common/ModalPopover.svelte

@@ -6,14 +6,15 @@
 
     interface Props {
         visible?: boolean;
-        canClose?: boolean;
+        /** 是否允许点击遮罩/Escape 关闭 */
+        closable?: boolean;
         theme?: string;
         children: Snippet;
     }
 
     let {
         visible = $bindable(false),
-        canClose = true,
+        closable = true,
         theme,
         children
     }: Props = $props();
@@ -26,7 +27,7 @@
         // or closed on Escape.
         const release = acquireScrollLock();
         const unregisterEscape = registerEscapeHandler(() => {
-            if (canClose) visible = false;
+            if (closable) visible = false;
         });
         return () => {
             release();
@@ -44,7 +45,7 @@
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div class="uniface-mask-center"
-                 onclick={() => { if (canClose) visible = false; }}>
+                 onclick={() => { if (closable) visible = false; }}>
                 <div style="flex: 0 0 auto">
                     {@render children()}
                 </div>

package/dist/overlay/common/ModalPopover.svelte.d.ts

@@ -1,7 +1,8 @@
 import { type Snippet } from "svelte";
 interface Props {
     visible?: boolean;
-    canClose?: boolean;
+    /** 是否允许点击遮罩/Escape 关闭 */
+    closable?: boolean;
     theme?: string;
     children: Snippet;
 }

package/dist/overlay/common/Popover.svelte

@@ -14,7 +14,8 @@
         margin?: number;
         onclose?: () => void;
         /** 附加到 .contents-inner 上的 class（用于覆盖 overflow 等样式） */
-        bodyClass?: string;
+        /** 内容容器附加 class */
+        body$class?: string;
         children?: Snippet;
     }
 
@@ -26,7 +27,7 @@
         align = 'left',
         autoFit = true,
         margin = 0,
-        bodyClass = '',
+        body$class = '',
         children
     }: Props = $props();
 
@@ -142,7 +143,7 @@
         <div class="uniface-popover" use:outsideClick={close}>
             <div bind:this={contentPanel} style="{horzPos}">
                 <div class="contents" style="{style}">
-                    <div class="contents-inner {bodyClass}">
+                    <div class="contents-inner {body$class}">
                         {#if children}
                             {@render children()}
                         {/if}

package/dist/overlay/common/Popover.svelte.d.ts

@@ -8,7 +8,8 @@ interface Props {
     margin?: number;
     onclose?: () => void;
     /** 附加到 .contents-inner 上的 class（用于覆盖 overflow 等样式） */
-    bodyClass?: string;
+    /** 内容容器附加 class */
+    body$class?: string;
     children?: Snippet;
 }
 declare const Popover: import("svelte").Component<Props, {}, "">;

package/dist/overlay/context-menu/ContextMenuItem.d.ts

@@ -1,13 +1,13 @@
-export type ActionCallback = () => void;
+export type ContextMenuAction = () => void;
 export interface ContextMenuItem {
     /**
      * Display text for the menu item
      */
-    text?: string;
+    label?: string;
     /**
      * Action to execute when item is clicked
      */
-    action?: ActionCallback;
+    handler?: ContextMenuAction;
     /**
      * Whether the item is disabled
      */

package/dist/overlay/context-menu/ContextMenuPanel.svelte

@@ -71,8 +71,8 @@
                 event.preventDefault();
                 if (focusedIndex >= 0) {
                     const item = contextMenuSvelte.items[focusedIndex];
-                    if (!item.disabled && item.action) {
-                        item.action();
+                    if (!item.disabled && item.handler) {
+                        item.handler();
                     }
                     contextMenuSvelte.hide();
                 }
@@ -97,7 +97,7 @@
         event.stopPropagation();
         const item = contextMenuSvelte.items[index];
         if (item.disabled) return;
-        item.action?.();
+        item.handler?.();
         contextMenuSvelte.hide();
     }
 </script>
@@ -134,7 +134,7 @@
                     {#if item.icon}
                         <img class="menu-item-icon" src={item.icon} alt=""/>
                     {/if}
-                    <span class="menu-item-text">{item.text}</span>
+                    <span class="menu-item-text">{item.label}</span>
                 </div>
             {/if}
         {/each}

package/dist/overlay/context-menu/index.d.ts

@@ -1,6 +1,6 @@
 import contextMenu from "./ContextMenu.svelte";
 import type { ContextMenuItem } from "./ContextMenuItem.js";
-import type { OnContextMenu, ActionCallback } from "./ContextMenuItem.js";
+import type { OnContextMenu, ContextMenuAction } from "./ContextMenuItem.js";
 export default contextMenu;
 export { contextMenu };
-export type { ContextMenuItem, OnContextMenu, ActionCallback };
+export type { ContextMenuItem, OnContextMenu, ContextMenuAction };

package/dist/overlay/dialog/CommonDialog.svelte

@@ -2,7 +2,7 @@
     import type {Snippet} from 'svelte';
     import Dialog from "./Dialog.svelte";
     import type {ButtonAction, ButtonActions} from "../../types";
-    import type {DialogCloseConfirm} from "./DialogCloseConfirm";
+    import type {BeforeClose} from "./DialogCloseConfirm";
     import {ModalResult, type OnClose} from "./IDialog";
     import i18nRes from "../../i18nRes";
 
@@ -10,12 +10,16 @@
         title: string;
         width?: string;
         height?: string;
-        closeConfirm?: DialogCloseConfirm | null;
+        /** 关闭前的否决钩子：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭 */
+        beforeClose?: BeforeClose | null;
         content$style?: string;
-        enableConfirm?: boolean;
-        confirmHandler?: (() => Promise<any>) | null;
+        /** 确认按钮是否可用 */
+        confirmable?: boolean;
+        /** 点击确认时调用；返回 truthy 值则以 MR_OK 关闭 */
+        onconfirm?: (() => Promise<any>) | null;
         confirmText?: string | null;
-        onClose?: OnClose | null;
+        /** 关闭后的通知回调，参数为 ModalResult */
+        onclose?: OnClose | null;
         children?: Snippet;
     }
 
@@ -23,23 +27,23 @@
         title,
         width = 'unset',
         height = 'unset',
-        closeConfirm = null,
+        beforeClose = null,
         content$style = '',
-        enableConfirm = true,
-        confirmHandler = null,
+        confirmable = true,
+        onconfirm = null,
         confirmText = null,
-        onClose = null,
+        onclose = null,
         children
     }: Props = $props();
 
     let dialog: Dialog;
 
     const confirmAction = $derived<ButtonAction>({
-        label: confirmText ?? i18nRes.common.btnConfirm.toString(),
+        label: confirmText ?? i18nRes.common.btnConfirm(),
         type: "primary",
-        disabled: confirmHandler == null || !enableConfirm,
+        disabled: onconfirm == null || !confirmable,
         handler: async () => {
-            const result = await confirmHandler?.();
+            const result = await onconfirm?.();
             if (result && result == true) { // 返回 true 自动关闭
                 await dialog.close(ModalResult.MR_OK);
             }
@@ -49,6 +53,6 @@
     const actions = $derived<ButtonActions>([confirmAction]);
 </script>
 
-<Dialog bind:this={dialog} {title} {content$style} {width} {height} {actions} {closeConfirm} {onClose}>
+<Dialog bind:this={dialog} {title} {content$style} {width} {height} {actions} {beforeClose} {onclose}>
     {@render children?.()}
 </Dialog>

package/dist/overlay/dialog/CommonDialog.svelte.d.ts

@@ -1,16 +1,20 @@
 import type { Snippet } from 'svelte';
-import type { DialogCloseConfirm } from "./DialogCloseConfirm";
+import type { BeforeClose } from "./DialogCloseConfirm";
 import { type OnClose } from "./IDialog";
 interface Props {
     title: string;
     width?: string;
     height?: string;
-    closeConfirm?: DialogCloseConfirm | null;
+    /** 关闭前的否决钩子：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭 */
+    beforeClose?: BeforeClose | null;
     content$style?: string;
-    enableConfirm?: boolean;
-    confirmHandler?: (() => Promise<any>) | null;
+    /** 确认按钮是否可用 */
+    confirmable?: boolean;
+    /** 点击确认时调用；返回 truthy 值则以 MR_OK 关闭 */
+    onconfirm?: (() => Promise<any>) | null;
     confirmText?: string | null;
-    onClose?: OnClose | null;
+    /** 关闭后的通知回调，参数为 ModalResult */
+    onclose?: OnClose | null;
     children?: Snippet;
 }
 declare const CommonDialog: import("svelte").Component<Props, {}, "">;

package/dist/overlay/dialog/Dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {getContext, hasContext, onMount} from "svelte";
-    import type {DialogCloseConfirm} from "./DialogCloseConfirm";
+    import type {BeforeClose} from "./DialogCloseConfirm";
     import ActionBar from "../../layouts/action_bar";
     import type {ButtonAction, ButtonActions} from "../../types";
     import dialogManager from "./DialogManager.svelte";
@@ -16,12 +16,18 @@
         width?: string;
         height?: string;
         actions?: ButtonActions | null;
-        closeConfirm?: DialogCloseConfirm | null;
+        /** 关闭前的否决钩子：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭 */
+        beforeClose?: BeforeClose | null;
         content$style?: string;
-        hideClose?: boolean;
-        closeButton?: string;
-        onClose?: OnClose | null;
+        /**
+         * 是否允许用户不经过显式动作直接关闭：控制标题栏 X、Escape 键和自动追加的"关闭"动作。
+         * 为 false 时用户必须点击 actions 中的某个动作。
+         */
         closable?: boolean;
+        /** 自动追加的"关闭"动作的文字 */
+        closeText?: string;
+        /** 关闭后的通知回调，参数为 ModalResult */
+        onclose?: OnClose | null;
         dialog$style?: string;
         children?: Snippet;
     }
@@ -31,32 +37,32 @@
         width = 'unset',
         height = 'unset',
         actions = null,
-        closeConfirm = null,
+        beforeClose = null,
         content$style = '',
-        hideClose = false,
-        closeButton = i18nRes.common.btnClose,
-        onClose = null,
+        closeText = i18nRes.common.btnClose(),
+        onclose = null,
         closable = true,
         dialog$style = "",
         children
     }: Props = $props();
 
+
     const dialogId = (function() {
         try { return hasContext('dialogId') ? getContext<string | undefined>('dialogId') : undefined; } catch { return undefined; }
     })();
 
-    export const close = async (result: ModalResult) => {
+    export async function close(result: ModalResult) {
         const isCancelLike = result === ModalResult.MR_CANCEL || result === ModalResult.MR_CLOSE;
-        const confirm = closeConfirm && isCancelLike ? await closeConfirm() : true;
+        const confirm = beforeClose && isCancelLike ? (await beforeClose()) !== false : true;
         if (!confirm) return;
         if (dialogId) {
-            // stack 模式：onClose 由 manager 统一调用
+            // stack 模式：onclose 由 manager 统一调用
             dialogManager.resolveWith(dialogId, result);
         } else {
-            // 直接渲染模式：自己调 onClose
-            onClose?.(result);
+            // 直接渲染模式：自己调 onclose
+            onclose?.(result);
         }
-    };
+    }
 
     // Dialog is modal — the page behind it should not scroll (regression fix:
     // this was previously entirely missing, unlike Popover). Escape now goes
@@ -67,7 +73,7 @@
     onMount(() => {
         const releaseScrollLock = acquireScrollLock();
         const unregisterEscape = registerEscapeHandler(() => {
-            void close(ModalResult.MR_CANCEL);
+            if (closable) void close(ModalResult.MR_CANCEL);
         });
         return () => {
             releaseScrollLock();
@@ -76,7 +82,7 @@
     });
 
     const closeAction = $derived<ButtonAction>({
-        label: closeButton,
+        label: closeText,
         type: 'secondary',
         handler: () => close(ModalResult.MR_CANCEL)
     });
@@ -139,7 +145,7 @@
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div class="title-bar" onmousedown={handleMouseDown} onmouseup={handleMouseUp}>
             <div style="flex: 1 1 auto"><span>{title ?? 'New window'}</span></div>
-            {#if !hideClose}
+            {#if closable}
                 <div style="flex: 0 0 auto; padding-left: 12px">
                     <button type="button" class="dialog-action-button" aria-label="Close"
                             onclick={() => close(ModalResult.MR_CANCEL)}>
@@ -152,7 +158,7 @@
             {@render children?.()}
         </div>
         <div class="control-bar">
-            <ActionBar buttons={dialogActions}/>
+            <ActionBar actions={dialogActions}/>
         </div>
     </div>
 </div>

package/dist/overlay/dialog/Dialog.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DialogCloseConfirm } from "./DialogCloseConfirm";
+import type { BeforeClose } from "./DialogCloseConfirm";
 import type { ButtonActions } from "../../types";
 import { ModalResult, type OnClose } from "./IDialog";
 import type { Snippet } from "svelte";
@@ -7,12 +7,18 @@ interface Props {
     width?: string;
     height?: string;
     actions?: ButtonActions | null;
-    closeConfirm?: DialogCloseConfirm | null;
+    /** 关闭前的否决钩子：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭 */
+    beforeClose?: BeforeClose | null;
     content$style?: string;
-    hideClose?: boolean;
-    closeButton?: string;
-    onClose?: OnClose | null;
+    /**
+     * 是否允许用户不经过显式动作直接关闭：控制标题栏 X、Escape 键和自动追加的"关闭"动作。
+     * 为 false 时用户必须点击 actions 中的某个动作。
+     */
     closable?: boolean;
+    /** 自动追加的"关闭"动作的文字 */
+    closeText?: string;
+    /** 关闭后的通知回调，参数为 ModalResult */
+    onclose?: OnClose | null;
     dialog$style?: string;
     children?: Snippet;
 }

package/dist/overlay/dialog/DialogActions.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonActions } from "../../types";
-import type { ButtonAction } from "../../layouts/action_bar/ButtonAction";
+import type { ButtonAction } from "../../types";
 export default interface DialogActions {
     /**
      * 操作类

package/dist/overlay/dialog/DialogCloseConfirm.d.ts

@@ -1 +1,4 @@
-export type DialogCloseConfirm = () => Promise<boolean>;
+/**
+ * 关闭前的否决钩子（NAMING R2）：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭。
+ */
+export type BeforeClose = () => boolean | void | Promise<boolean | void>;

package/dist/overlay/dialog/DialogCloseConfirm.js

@@ -1 +1 @@
-import { ModalResult } from "../message-box";
+export {};

package/dist/overlay/dialog/DialogManager.svelte.js

@@ -27,7 +27,8 @@ class DialogManager {
     show(component, params = {}) {
         ensureMounted();
         const id = Math.floor((Date.now() + Math.random()) * 100).toString(36);
-        const onClose = params.onClose ?? null;
+        // onclose 为规范名；onClose 为 5.x 兼容别名（NAMING R1）
+        const onClose = (params.onclose ?? params.onClose) ?? null;
         return new Promise(resolve => {
             this.stack = [...this.stack, { id, component, params, resolve, onClose }];
         });

package/dist/overlay/dialog/README.md

@@ -1,5 +1,7 @@
 # Dialog
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `DialogCloseConfirm`, `closeConfirm`, `confirmHandler`, `enableConfirm`, `onClose` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A flexible modal dialog system built with Svelte 5, offering stack-based management, a Promise API, draggable dialogs, configurable action buttons, and close confirmation. Exposes three things: `Dialog` (the base customizable dialog component), `CommonDialog` (simplified confirm/cancel wrapper), and `dialogManager` (a global stack controller that auto-mounts and returns `Promise<ModalResult>`).
 
 ## Features
@@ -13,7 +15,7 @@ A flexible modal dialog system built with Svelte 5, offering stack-based managem
 - **Action buttons**: configurable button actions; returning `true` auto-closes
 - **Close confirmation**: optional confirmation before closing (useful for unsaved changes)
 - **ESC to close**: ESC closes the dialog (picker ESC handling takes precedence automatically)
-- **Lifecycle hooks**: `onClose` callback + Promise resolve, both carrying a `ModalResult`
+- **Lifecycle hooks**: `onclose` callback + Promise resolve, both carrying a `ModalResult`
 - **Customizable styling**: flexible theming and sizing via inline styles
 
 ## Installation
@@ -182,7 +184,7 @@ If you don't want the stack / Promise and just want to conditionally render a di
 {#if showDialog}
   <Dialog
     title="My Dialog"
-    onClose={handleClose}
+    onclose={handleClose}
     width="500px"
     height="300px"
   >
@@ -191,7 +193,7 @@ If you don't want the stack / Promise and just want to conditionally render a di
 {/if}
 ```
 
-In direct-render mode there is no `dialogId` context, so `close()` invokes `onClose` itself.
+In direct-render mode there is no `dialogId` context, so `close()` invokes `onclose` itself.
 
 ## Components Overview
 
@@ -217,11 +219,11 @@ The global stack controller. Maintains the dialog stack and exposes `show` / `re
 | `width` | `string` | `'unset'` | Dialog width (CSS value) |
 | `height` | `string` | `'unset'` | Dialog height (CSS value) |
 | `actions` | `ButtonActions \| null` | `null` | Action button array. Use `null` entries as separators |
-| `closeConfirm` | `DialogCloseConfirm \| null` | `null` | Confirmation function called before closing (when result is `MR_CANCEL` or `MR_CLOSE`). Should return `Promise<boolean>` |
+| `beforeClose` | `BeforeClose \| null` | `null` | Confirmation function called before closing (when result is `MR_CANCEL` or `MR_CLOSE`). Should return `Promise<boolean>` |
 | `content$style` | `string` | `''` | Custom inline styles for the content area |
 | `hideClose` | `boolean` | `false` | When `true`, hides the close (X) icon in the title bar |
 | `closeAction` | `ButtonAction \| null` | `null` | Override the default close button (label, type, etc.). The handler is always wired to internal close |
-| `onClose` | `OnClose \| null` | `null` | Callback when dialog closes. Receives a `ModalResult` (see [Modal Results](#modal-results)) |
+| `onclose` | `OnClose \| null` | `null` | Callback when dialog closes. Receives a `ModalResult` (see [Modal Results](#modal-results)) |
 | `dialog$style` | `string` | `''` | Custom inline styles for the dialog container |
 
 ### Methods
@@ -234,7 +236,7 @@ The global stack controller. Maintains the dialog stack and exposes `show` / `re
 
 | Event | Description |
 |-------|-------------|
-| `onClose` | Fires when the dialog closes. Receives `ModalResult.MR_OK` / `MR_CANCEL` / `MR_CLOSE` |
+| `onclose` | Fires when the dialog closes. Receives `ModalResult.MR_OK` / `MR_CANCEL` / `MR_CLOSE` |
 
 ## CommonDialog Component
 
@@ -262,8 +264,8 @@ Simplified wrapper that automatically provides a "Confirm" button. Works in both
 {#if showDialog}
   <CommonDialog
     title="Confirm Action"
-    confirmHandler={handleConfirm}
-    onClose={handleClose}
+    onconfirm={handleConfirm}
+    onclose={handleClose}
     width="400px"
   >
     <p>Are you sure you want to proceed?</p>
@@ -278,12 +280,12 @@ Simplified wrapper that automatically provides a "Confirm" button. Works in both
 | `title` | `string` | `''` | Dialog title |
 | `width` | `string` | `'unset'` | Dialog width |
 | `height` | `string` | `'unset'` | Dialog height |
-| `closeConfirm` | `DialogCloseConfirm \| null` | `null` | Close confirmation function |
+| `beforeClose` | `BeforeClose \| null` | `null` | Close confirmation function |
 | `content$style` | `string` | `''` | Content area styles |
-| `enableConfirm` | `boolean` | `true` | Enable/disable the confirm button |
-| `confirmHandler` | `(() => Promise<any>) \| null` | `null` | Confirm button handler |
+| `confirmable` | `boolean` | `true` | Enable/disable the confirm button |
+| `onconfirm` | `(() => Promise<any>) \| null` | `null` | Confirm button handler |
 | `confirmText` | `string \| null` | `null` | Custom confirm button text (defaults to i18n "Confirm") |
-| `onClose` | `OnClose \| null` | `null` | Close callback receiving `ModalResult` |
+| `onclose` | `OnClose \| null` | `null` | Close callback receiving `ModalResult` |
 
 ## Global API
 
@@ -296,7 +298,7 @@ import { dialogManager, ModalResult } from "@ticatec/uniface-element/Dialog";
 
 const result = await dialogManager.show(MyDialog, {
   title: "Example",
-  onClose: (r) => console.log("closed:", r)  // you can also get the result here
+  onclose: (r) => console.log("closed:", r)  // you can also get the result here
 });
 ```
 
@@ -367,7 +369,7 @@ Add confirmation before closing with unsaved changes (triggered on X click / ESC
 
   let originalData = JSON.stringify(data);
 
-  const closeConfirm = async () => {
+  const beforeClose = async () => {
     const hasChanges = JSON.stringify(data) !== originalData;
     if (hasChanges) {
       return await messageBox.showConfirm("You have unsaved changes. Close anyway?", { title: "Confirm Close" })
@@ -377,7 +379,7 @@ Add confirmation before closing with unsaved changes (triggered on X click / ESC
   };
 </script>
 
-<Dialog {closeConfirm}>
+<Dialog {beforeClose}>
   <!-- content -->
 </Dialog>
 ```
@@ -501,7 +503,7 @@ Key points:
 1. **Prefer the imperative API (`dialogManager.show`)**: it returns a Promise, makes result handling ergonomic, and works from services / stores.
 2. **No need to manually mount `DialogBoard`**: the controller auto-mounts. Existing `<DialogBoard/>` placements in legacy code can stay or be removed.
 3. **Return `false` from action handlers** to keep the dialog open (e.g., when validation fails).
-4. **Use `closeConfirm` for dirty forms** — show a MessageBox asking if the user really wants to leave unsaved changes.
+4. **Use `beforeClose` for dirty forms** — show a MessageBox asking if the user really wants to leave unsaved changes.
 5. **Pick appropriate sizes** — 400–600px for simple dialogs, 700–900px for form dialogs, responsive sizing for mobile.
 6. **Stacking is supported, but don't overuse it**: multiple simultaneous dialogs can confuse users. Reach for it when genuinely needed.
 
@@ -526,7 +528,7 @@ declare global {
 | `<DialogBoard/>` in app root | nothing | Controller auto-mounts; legacy placement can stay |
 | `window.Dialog.showModal(Component, params)` | `window.Dialog.show(Component, params)` or `dialogManager.show(...)` | `showModal` still works (compat alias) but discards the Promise |
 | `ModalResult.Ok` / `ModalResult.Cancel` | `ModalResult.MR_OK` / `ModalResult.MR_CANCEL` | Enum unified with MessageBox |
-| `onClose(result)` callback | `onClose(result)` + `await dialogManager.show(...)` | Both supported; Promise is the new way |
+| `onclose(result)` callback | `onclose(result)` + `await dialogManager.show(...)` | Both supported; Promise is the new way |
 
 ## Related Components