@ticatec/uniface-element 5.0.5 → 5.1.1

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

@@ -2,7 +2,7 @@ import Dialog from "./Dialog.svelte";
 import dialogManager from "./DialogManager.svelte";
 import type IDialog from "./IDialog";
 import { ModalResult, type OnClose } from "./IDialog";
-import type { DialogCloseConfirm } from "./DialogCloseConfirm";
+import type { BeforeClose } from "./BeforeClose";
 import CommonDialog from "./CommonDialog.svelte";
 import DialogBoard from "./DialogBoard.svelte";
 declare global {
@@ -11,4 +11,4 @@ declare global {
     }
 }
 export default Dialog;
-export { dialogManager, ModalResult, type OnClose, type IDialog, type DialogCloseConfirm, CommonDialog, DialogBoard };
+export { dialogManager, ModalResult, type OnClose, type IDialog, type BeforeClose, CommonDialog, DialogBoard };

package/dist/overlay/message-box/IMessageBox.d.ts

@@ -1,14 +1,14 @@
-export type ShowInfoFun = (message: string, options?: {
+export type ShowInfo = (message: string, options?: {
     title?: string;
     type?: 'warning' | 'info';
 }) => Promise<void>;
-export type ShowConfirmFun = (message: string, options?: {
+export type ShowConfirm = (message: string, options?: {
     title?: string;
     type?: 'warning' | 'question';
 }) => Promise<any>;
 export default interface IMessageBox {
-    showInfo: ShowInfoFun;
-    showConfirm: ShowConfirmFun;
+    showInfo: ShowInfo;
+    showConfirm: ShowConfirm;
 }
 export declare enum ModalResult {
     MR_OK = 1,

package/dist/overlay/tooltip/README.md

@@ -9,7 +9,7 @@ A global tooltip system that automatically detects and shows contextual hints wh
 - **Edge-Aware Alignment**: Adjusts horizontal alignment (left/center/right) to prevent screen overflow.
 - **Markdown Support**: Renders rich text with bold, italic, code, lists, and more via snarkdown.
 - **Delayed Display**: Configurable delay (default 200ms) to prevent flickering.
-- **Auto Hide**: Automatically hides when mouse leaves the element.
+- **Auto Hide**: Hides when the mouse leaves the element — and also when the element itself goes away (removed from the DOM, hidden by `display:none` / `visibility:hidden`, or its `data-tip` cleared), on scroll, and when the window loses focus.
 - **Zero Boilerplate**: Just add `data-tip` attribute, no JavaScript needed.
 
 ## Installation
@@ -147,6 +147,21 @@ The tooltip automatically adjusts its position to stay within the viewport:
 <button data-tip="Right-aligned tooltip" style="margin-right: 0;">Right edge</button>
 ```
 
+## Dismissal Behavior
+
+A tooltip is dismissed when any of the following happens:
+
+| Trigger | Why it matters |
+| --- | --- |
+| The pointer leaves the element (`mouseleave`) | The normal case. |
+| The element is removed from the DOM | A destroyed component, a closed dialog, a re-rendered row: the browser does **not** reliably fire `mouseleave` for a node that disappears under the cursor, so the tooltip watches the element and hides itself. |
+| The element (or an ancestor) becomes hidden | `display:none`, `visibility:hidden`, a collapsed panel, a switched tab. |
+| `data-tip` / `data-tooltip` is cleared | E.g. a validation error tooltip whose error has just been fixed. Changing the text instead updates the tooltip in place. |
+| The page or any scroll container scrolls | The tooltip is `position: fixed`; without this it would drift away from its target. |
+| The window loses focus | Alt-tabbing away while hovering. |
+
+This is handled internally (a `MutationObserver` is attached only while a tooltip is pending or visible, so there is no cost when idle) — nothing is required from the calling code.
+
 ## Styling & Theming
 
 ### CSS Variables

package/dist/overlay/tooltip/README_CN.md

@@ -9,7 +9,7 @@
 - **边缘对齐**：自动调整水平对齐（左/中/右）防止溢出屏幕
 - **Markdown 支持**：支持富文本格式（粗体、斜体、代码、列表等），通过 snarkdown 渲染
 - **延迟显示**：可配置延迟（默认 200 毫秒）防止误触发
-- **自动隐藏**：鼠标离开元素时自动隐藏
+- **自动隐藏**：鼠标离开元素时隐藏；元素本身消失（从 DOM 移除、被 `display:none` / `visibility:hidden` 隐藏、`data-tip` 被清空）、页面滚动、窗口失焦时同样会自动隐藏
 - **零样板代码**：只需添加 `data-tip` 属性，无需编写 JavaScript
 
 ## 安装
@@ -147,6 +147,21 @@ import Tooltip from "@ticatec/uniface-element/Tooltip";
 <button data-tip="右对齐提示" style="margin-right: 0;">右边缘</button>
 ```
 
+## 隐藏时机
+
+出现以下任一情况时，tooltip 都会收起：
+
+| 触发条件 | 说明 |
+| --- | --- |
+| 鼠标离开元素（`mouseleave`） | 常规情况。 |
+| 元素从 DOM 中被移除 | 组件被销毁、对话框关闭、列表行重新渲染等。光标下的节点消失时浏览器**不会**可靠地派发 `mouseleave`，因此 tooltip 会自己监视目标元素并收起——否则它会一直挂在屏幕上无法消除。 |
+| 元素（或其祖先）被隐藏 | `display:none`、`visibility:hidden`、折叠面板、切换标签页等。 |
+| `data-tip` / `data-tooltip` 被清空 | 例如校验错误已修正。若只是文本变化，则原地更新 tooltip 内容。 |
+| 页面或任意滚动容器发生滚动 | tooltip 使用 `position: fixed`，不收起就会与目标元素脱节。 |
+| 窗口失去焦点 | 悬停时切换到其他窗口。 |
+
+这些都由组件内部处理（`MutationObserver` 仅在 tooltip 等待显示或已显示期间才连接，空闲时无任何开销），调用方无需做任何事情。
+
 ## 样式与主题定制
 
 ### CSS 变量

package/dist/overlay/tooltip/Tooltip.svelte

@@ -36,28 +36,104 @@
         ALLOWED_ATTR: ['href', 'src', 'alt', 'class']
     };
 
+    /** 当前触发 tooltip 的元素。元素被销毁或隐藏后浏览器不再派发 mouseleave，需要由 tooltip 自己收起。 */
+    let activeTarget: HTMLElement | null = null;
+    let observer: MutationObserver | null = null;
+
+    const getTipText = (el: Element | null): string =>
+        (el?.getAttribute('data-tip') || el?.getAttribute('data-tooltip') || '');
+
+    /**
+     * 目标元素是否仍然渲染在页面上。
+     * 元素从 DOM 移除（isConnected === false），或自身/祖先被 display:none、visibility:hidden
+     * 隐藏时，浏览器不会再派发 mouseleave —— 这正是 tooltip 会一直挂在屏幕上的原因。
+     */
+    const isRendered = (el: HTMLElement | null): boolean => {
+        if (el == null || !el.isConnected) return false;
+        const checkVisibility = (el as any).checkVisibility;
+        if (typeof checkVisibility === 'function') {
+            // 现代浏览器：一次性覆盖自身及祖先的 display / visibility / content-visibility
+            return checkVisibility.call(el, {checkVisibilityCSS: true, visibilityProperty: true});
+        }
+        // 兜底（老浏览器 / jsdom）：只能判断元素自身的计算样式
+        const style = window.getComputedStyle(el);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    };
+
+    const renderTip = (text: string) => {
+        state.message = text;
+        // Parse markdown to HTML, converting \n to actual newlines first
+        const parsedText = text.replace(/\\n/g, '\n');
+        state.html = DOMPurify.sanitize(snarkdown(parsedText), DOMPURIFY_CONFIG);
+    };
+
+    /** 收起 tooltip，并解除对当前目标元素的所有监听 */
+    const hide = () => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+        observer?.disconnect();
+        activeTarget?.removeEventListener('mouseleave', hide);
+        activeTarget = null;
+        state.visible = false;
+    };
+
+    /** 目标元素被移除 / 隐藏 / data-tip 被清空时收起；data-tip 变化时更新内容 */
+    const checkTarget = () => {
+        if (activeTarget == null) return;
+        const text = getTipText(activeTarget);
+        if (!text || !isRendered(activeTarget)) {
+            hide();
+        } else if (state.visible && text !== state.message) {
+            renderTip(text);
+        }
+    };
+
+    const watchTarget = (target: HTMLElement) => {
+        activeTarget = target;
+        target.addEventListener('mouseleave', hide);
+        if (typeof MutationObserver === 'undefined') return;
+        observer ??= new MutationObserver(checkTarget);
+        // 只在 tooltip 处于等待/显示状态时观察，空闲时不产生任何开销
+        observer.observe(document.documentElement ?? document, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style', 'class', 'hidden', 'data-tip', 'data-tooltip']
+        });
+    };
+
     // 全局事件监听：利用事件冒泡实现自动绑定
     onMount(() => {
         const handleMouseOver = (e: MouseEvent) => {
             const el = e.target as HTMLElement;
             if (!el || typeof el.closest !== 'function') return;
-            const target = el.closest('[data-tip], [data-tooltip]');
+            const target = el.closest('[data-tip], [data-tooltip]') as HTMLElement | null;
             if (!target) return;
 
-            const text = target.getAttribute('data-tip') || target.getAttribute('data-tooltip');
+            const text = getTipText(target);
             if (!text) return;
 
-            // 获取元素相对于视口的位置，用来精准定位
-            const rect = target.getBoundingClientRect();
-
-            // 清除之前的定时器
-            if (timer) clearTimeout(timer);
+            // 已经在为同一个元素显示，保持不动（避免在其子元素间移动时闪烁 / 重新定位）
+            if (target === activeTarget && state.visible) return;
 
-            // 监听该元素的离开，以便隐藏
-            target.addEventListener('mouseleave', handleMouseLeave, { once: true });
+            // 清除上一个目标的定时器与监听
+            hide();
+            // 监听该元素的移除 / 隐藏 / 离开，以便收起
+            watchTarget(target);
 
             // 延迟触发显示
             timer = setTimeout(() => {
+                timer = null;
+                // 延迟期间目标可能已经被销毁或隐藏
+                if (!isRendered(target)) {
+                    hide();
+                    return;
+                }
+
+                // 获取元素相对于视口的位置，用来精准定位
+                const rect = target.getBoundingClientRect();
                 // 计算触发位置（这里以元素的中心/边缘为基准，比纯鼠标坐标更稳定）
                 const x = rect.left + rect.width / 2;
                 const elementBottom = rect.bottom;
@@ -65,10 +141,7 @@
 
                 const position = calculateOptimalPosition(x, elementBottom, rect);
 
-                state.message = text;
-                // Parse markdown to HTML, converting \n to actual newlines first
-                const parsedText = text.replace(/\\n/g, '\n');
-                state.html = DOMPurify.sanitize(snarkdown(parsedText), DOMPURIFY_CONFIG);
+                renderTip(getTipText(target) || text);
                 state.position = position;
                 state.transform = getTransformStyle(position, x, elementBottom);
                 state.x = x;
@@ -78,17 +151,19 @@
             }, delay);
         };
 
-        const handleMouseLeave = () => {
-            if (timer) clearTimeout(timer);
-            state.visible = false;
-        };
-
         // 绑定到 document 上
         document.addEventListener('mouseover', handleMouseOver);
+        // 指针移出整个文档、窗口失焦、页面滚动（tooltip 是 fixed 定位，滚动后会与目标脱节）
+        document.addEventListener('mouseleave', hide);
+        window.addEventListener('blur', hide);
+        window.addEventListener('scroll', hide, {capture: true, passive: true});
 
         return () => {
             document.removeEventListener('mouseover', handleMouseOver);
-            if (timer) clearTimeout(timer);
+            document.removeEventListener('mouseleave', hide);
+            window.removeEventListener('blur', hide);
+            window.removeEventListener('scroll', hide, {capture: true} as any);
+            hide();
         };
     });
 

package/dist/ticatec-uniface-web.css

@@ -175,6 +175,8 @@
   --uniface-card-footer-margin: 12px 24px;
   --uniface-card-footer-height: 40px;
   --uniface-card-color-surface: #ffffff;
+  /* PageStack Tokens */
+  --uniface-page-stack-color-surface: var(--uniface-color-surface);
   --uniface-card-color: #111827;
   /* Card.svelte (and the component's own README/README_CN) reference
      --uniface-card-text-muted; this used to be named --uniface-card-color-muted
@@ -615,6 +617,8 @@
      with no [data-theme="dark"] override, so cards stayed white/light
      regardless of dark mode. */
   --uniface-card-color-surface: #262626;
+  /* PageStack Tokens - Dark Theme */
+  --uniface-page-stack-color-surface: var(--uniface-color-surface);
   --uniface-card-color: #e5e7eb;
   --uniface-card-text-muted: #9ca3af;
   --uniface-card-color-inside-border: rgba(255, 255, 255, 0.08);
@@ -873,7 +877,7 @@
   padding: 0 var(--uniface-button-margin);
   border-radius: var(--radius-md, 4px);
 }
-.uniface-button.common-button.big {
+.uniface-button.common-button.large {
   height: var(--uniface-button-height-big);
   font-size: 1.1rem;
 }
@@ -887,7 +891,7 @@
 .uniface-button.common-button.round {
   border-radius: var(--uniface-button-radius-round);
 }
-.uniface-button.common-button.round.big {
+.uniface-button.common-button.round.large {
   border-radius: var(--uniface-button-radius-round-big);
 }
 .uniface-button.common-button.round.small {
@@ -910,11 +914,11 @@
 .uniface-button.icon-button i {
   font-size: 18px;
 }
-.uniface-button.icon-button.big {
+.uniface-button.icon-button.large {
   width: var(--uniface-button-height-big);
   height: var(--uniface-button-height-big);
 }
-.uniface-button.icon-button.big i {
+.uniface-button.icon-button.large i {
   font-size: 22px;
 }
 .uniface-button.icon-button.small {
@@ -924,6 +928,10 @@
 .uniface-button.icon-button.small i {
   font-size: 16px;
 }
+.uniface-button.icon-button.no-outer:focus, .uniface-button.icon-button.no-outer:focus-visible, .uniface-button.icon-button.no-outer:active {
+  outline: none !important;
+  box-shadow: none !important;
+}
 .uniface-button:hover {
   background-color: var(--uniface-button-plain-color-surface-hover);
 }
@@ -995,6 +1003,10 @@
 .uniface-button.forth:focus-visible, .uniface-button.forth:focus {
   box-shadow: 0 0 0 3px var(--uniface-button-color-gap), 0 0 0 4px var(--uniface-button-forth-color-surface);
 }
+.uniface-button.no-outer:focus, .uniface-button.no-outer:focus-visible, .uniface-button.no-outer:active {
+  outline: none !important;
+  box-shadow: none !important;
+}
 .uniface-button.disabled {
   background-color: var(--uniface-button-disabled-color-surface) !important;
   border-color: var(--uniface-button-disabled-border-color) !important;
@@ -1010,17 +1022,34 @@
   background-color: var(--uniface-button-disabled-color-surface) !important;
 }
 .uniface-button.text-button {
+  outline: none;
   border: none;
   background-color: transparent !important;
   color: var(--uniface-text-button-plain-color);
+  border-radius: var(--uniface-button-radius-round);
+  padding: 3px 6px;
 }
-.uniface-button.text-button.big {
+.uniface-button.text-button.large {
   font-size: 1.2em;
   padding: 4px 8px;
+  border-radius: var(--uniface-button-radius-round-big);
 }
 .uniface-button.text-button.small {
   font-size: 0.9em;
   padding: 2px 4px;
+  border-radius: var(--uniface-button-radius-round-small);
+}
+.uniface-button.text-button.plain {
+  border-radius: 0;
+}
+.uniface-button.text-button.round {
+  border-radius: var(--uniface-button-radius-round);
+}
+.uniface-button.text-button.round.large {
+  border-radius: var(--uniface-button-radius-round-big);
+}
+.uniface-button.text-button.round.small {
+  border-radius: var(--uniface-button-radius-round-small);
 }
 .uniface-button.text-button:hover {
   color: var(--uniface-text-button-plain-color-hover);
@@ -1066,6 +1095,10 @@
 .uniface-button.text-button.forth:active {
   color: var(--uniface-button-forth-color-surface-active);
 }
+.uniface-button.text-button.no-outer:focus, .uniface-button.text-button.no-outer:focus-visible, .uniface-button.text-button.no-outer:active {
+  outline: none !important;
+  box-shadow: none !important;
+}
 .uniface-button.text-button.disabled {
   background-color: transparent !important;
   cursor: not-allowed;
@@ -1236,12 +1269,8 @@
 .uniface-form-editor .uniface-common-picker {
   height: 38px;
 }
-.uniface-form-editor .uniface-common-picker .editor-dropdown {
-  visibility: hidden;
-}
 .uniface-form-editor .uniface-common-picker .action-icon {
   display: block;
-  visibility: hidden;
   box-sizing: border-box;
   color: var(--uniface-editor-text-color, #374151);
   align-self: center;
@@ -1252,9 +1281,6 @@
 .uniface-form-editor .uniface-common-picker .action-icon:active {
   color: var(--uniface-active-dropdown-color, #9d9d9d);
 }
-.uniface-form-editor .uniface-common-picker:hover .action-icon, .uniface-form-editor .uniface-common-picker:focus-within .action-icon, .uniface-form-editor .uniface-common-picker:focus .action-icon {
-  visibility: visible;
-}
 .uniface-form-editor .uniface-common-picker .options-item-render {
   width: 100%;
 }

package/dist/types.d.ts

@@ -5,19 +5,19 @@ export type RetrieveOptionText = (item: any) => string;
 /**
  * 通用变更处理器
  */
-export type OnChangeHandler<T> = (value: T) => void;
+export type OnChange<T> = (value: T) => void;
 /**
  * 通用选择处理器
  */
-export type OnSelectHandler<T> = (value: T) => void;
+export type OnSelect<T> = (value: T) => void;
 /**
- * 选中项处理器（用于单选）
+ * 鼠标点击处理器
  */
-export type OnSelectedHandler = (item: any) => void;
+export type OnClick = (event: MouseEvent) => void;
 /**
- * 鼠标点击处理器
+ * 动作对象（ButtonAction / RowAction / CardAction …）的处理函数（NAMING R10）
  */
-export type MouseClickHandler = (event: MouseEvent) => void;
+export type ActionHandler<T = any> = (data: T) => void | Promise<void>;
 /**
  * 页面操作处理器（用于返回、刷新等）
  */
@@ -29,7 +29,14 @@ export { DateContext, ModalResult };
  * 按钮类型枚举
  */
 export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
-export type FieldLayout = 'vertical' | 'horizontal';
+/**
+ * 纵横方向（NAMING R6）
+ */
+export type Direction = 'vertical' | 'horizontal';
+/**
+ * 离散尺寸档位（NAMING R6）
+ */
+export type Size = 'small' | 'medium' | 'large';
 /**
  * 按钮操作接口
  */
@@ -57,7 +64,7 @@ export interface ButtonAction {
     /**
      * click处理函数
      */
-    handler?: MouseClickHandler;
+    handler?: OnClick;
 }
 /**
  * 按钮操作数组类型（可包含null作为分隔符）
@@ -66,11 +73,15 @@ export type ButtonActions = Array<ButtonAction | null>;
 /**
  * 标签页操作处理器
  */
-export type TabActionHandler = (tab: any) => void;
+export type OnTabAction = (tab: any) => void;
 /**
- * 标签页关闭处理器：返回 false（含 Promise<false>）可阻止关闭
+ * 标签页关闭前的否决钩子（NAMING R2）：返回 false（含 Promise<false>）可阻止关闭
  */
-export type TabCloseHandler = (tab: any) => boolean | Promise<boolean>;
+export type BeforeTabClose = (tab: any) => boolean | void | Promise<boolean | void>;
+/**
+ * 判定某个标签是否可关闭（Tabs.closable 的函数形式）
+ */
+export type IsTabClosable = (tab: any) => boolean;
 /**
  * 标签页渲染器
  */
@@ -85,7 +96,7 @@ export interface LoadResult {
 /**
  * 列表过滤函数
  */
-export type FunFilter = (item: any, text: string) => boolean;
+export type FilterFn = (item: any, text: string) => boolean;
 /**
  * 分页加载列表数据
  * @param text 搜索文本
@@ -95,17 +106,21 @@ export type FunFilter = (item: any, text: string) => boolean;
 export type ListLazyLoader = (text: string, pageNo: number) => Promise<LoadResult>;
 import type { IHierarchyData } from "./lib";
 /**
- * 节点选择变更处理器
+ * 节点切换前的否决钩子（NAMING R2）：返回 false 可阻止切换；node 为 null 表示取消选中
+ */
+export type BeforeNodeChange = (node: IHierarchyData<any> | null) => boolean | void | Promise<boolean | void>;
+/**
+ * 节点切换后的通知
  */
-export type OnNodeSelectionChange = (node: IHierarchyData<any>) => Promise<boolean>;
+export type OnNodeChange = (node: IHierarchyData<any> | null) => void;
 /**
  * 节点是否可见
  */
-export type NodeVisibleFun = (node: IHierarchyData<any>) => boolean;
+export type IsNodeVisible = (node: IHierarchyData<any>) => boolean;
 /**
  * 加载子节点（返回纯数据对象）
  */
-export type LoadChildrenFun = (item: IHierarchyData<any>) => Promise<Array<any>>;
+export type LoadChildren = (item: IHierarchyData<any>) => Promise<Array<any>>;
 /**
  * 按需加载树节点的子节点
  */
@@ -117,41 +132,18 @@ export interface TreeLazyLoader {
     /**
      * 加载子节点数据
      */
-    load: LoadChildrenFun;
-}
-/**
- * 穿梭框数据处理器
- */
-export type TransferData = (list: Array<any>, direction: "left" | "right") => Promise<boolean>;
-/**
- * Action cell中的事件处理
- */
-export type HandleAction = (data: any) => Promise<void>;
-/**
- * 单元格操作接口
- */
-export interface CellAction {
-    /**
-     * action的文本
-     */
-    text: string;
-    /**
-     * action的类型
-     */
-    type?: ButtonType;
-    /**
-     * 点击处理
-     */
-    handle: HandleAction;
+    load: LoadChildren;
 }
 /**
- * 获取单元格操作
+ * 穿梭前的否决钩子（NAMING R2）：返回 false 可阻止移动
  */
-export type GetCellAction = (data: any) => CellAction | undefined;
+export type BeforeTransfer = (list: Array<any>, direction: "left" | "right") => boolean | void | Promise<boolean | void>;
 /**
- * 获取行操作
+ * 穿梭完成后的通知
  */
-export type GetRowActions = (data: any) => Array<CellAction>;
+export type OnTransfer = (list: Array<any>, direction: "left" | "right") => void;
+export type { CellAction, GetCellAction } from "./data_table/lib/CellAction";
+export type { GetRowActions } from "./data_table/lib/RowAction";
 /**
  * 行字体样式接口
  */

package/dist/unifaceContext.d.ts

@@ -1,6 +1,6 @@
 import type { EditorVariant } from './form/types';
-import type { FieldLayout } from './types';
-export declare function getLayoutMode(): FieldLayout;
+import type { Direction } from './types';
+export declare function getLayoutMode(): Direction;
 export declare function setLayoutMode(layoutMode: string): void;
 export declare function getEditorVariant(): EditorVariant;
 export declare function setEditorVariant(variant: EditorVariant): void;

package/dist/utils/prefixFilter.js

@@ -1,4 +1,3 @@
-import { keyboardAttrs } from "../form/common_editor/EditorEvents";
 const prefixFilter = (attrs, prefix, excludes = []) => {
     const obj = {};
     let len = prefix.length;