@ticatec/uniface-element 5.1.0 → 5.1.1

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 {BeforeClose} from "./DialogCloseConfirm";
+    import type {BeforeClose} from "./BeforeClose";
     import {ModalResult, type OnClose} from "./IDialog";
     import i18nRes from "../../i18nRes";
 

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { BeforeClose } from "./DialogCloseConfirm";
+import type { BeforeClose } from "./BeforeClose";
 import { type OnClose } from "./IDialog";
 interface Props {
     title: string;

package/dist/overlay/dialog/Dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {getContext, hasContext, onMount} from "svelte";
-    import type {BeforeClose} from "./DialogCloseConfirm";
+    import type {BeforeClose} from "./BeforeClose";
     import ActionBar from "../../layouts/action_bar";
     import type {ButtonAction, ButtonActions} from "../../types";
     import dialogManager from "./DialogManager.svelte";

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

@@ -1,4 +1,4 @@
-import type { BeforeClose } from "./DialogCloseConfirm";
+import type { BeforeClose } from "./BeforeClose";
 import type { ButtonActions } from "../../types";
 import { ModalResult, type OnClose } from "./IDialog";
 import type { Snippet } from "svelte";

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 { BeforeClose } from "./DialogCloseConfirm";
+import type { BeforeClose } from "./BeforeClose";
 import CommonDialog from "./CommonDialog.svelte";
 import DialogBoard from "./DialogBoard.svelte";
 declare global {

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/docs/NAMING.md

@@ -284,6 +284,8 @@ interface Action<T = any> {
 | `ContextMenuItem.ts` | `ActionCallback` → `ContextMenuAction`; fields `text`/`action` → `label`/`handler` |
 | ImageFilesField | remove `text` from Props |
 | AttachmentEditor, ImageEditor | type icons `icon_google_image` / `icon_google_picture` do not exist in the icon font (image / PDF types never had an icon) → `icon_google_insert_photo` / `icon_google_picture_as_pdf` |
+| Tooltip (5.1.1) | Browsers do not fire `mouseleave` for an element removed/hidden under the cursor, so the tooltip stayed on screen forever → it now watches its target (`MutationObserver` + `isConnected` / `checkVisibility`) and also dismisses on a cleared `data-tip`, on scroll, and on window blur |
+| overlay/dialog (5.1.1) | Removed the dead, unreferenced `DialogActions.ts` (still carrying the retired `closeConfirm` name); renamed `DialogCloseConfirm.ts` → `BeforeClose.ts` to match the type it exports |
 | InputOptionsSelect README | align with the implementation (implement `hideOptions / disabledOptions` or drop the docs) |
 
 ### A3 Types and data objects

package/docs/NAMING_CN.md

@@ -284,6 +284,8 @@ interface Action<T = any> {
 | `ContextMenuItem.ts` | `ActionCallback` → `ContextMenuAction`；字段 `text`/`action` → `label`/`handler` |
 | ImageFilesField | 从 Props 删除 `text` |
 | AttachmentEditor、ImageEditor | 类型图标 `icon_google_image`、`icon_google_picture` 在图标字体里不存在（图片 / PDF 类型一直没有图标） → `icon_google_insert_photo`、`icon_google_picture_as_pdf` |
+| Tooltip（5.1.1） | 目标元素在 tooltip 显示期间被移除 / 隐藏时浏览器不再派发 `mouseleave`，tooltip 会永久停留 → 改为跟踪目标元素（`MutationObserver` + `isConnected` / `checkVisibility`），并在 `data-tip` 清空、滚动、窗口失焦时收起 |
+| overlay/dialog（5.1.1） | 删除无人引用的死文件 `DialogActions.ts`（仍带退役名 `closeConfirm`）；`DialogCloseConfirm.ts` 更名为 `BeforeClose.ts`，与其中的类型名一致 |
 | InputOptionsSelect README | 与实现对齐（实现 `hideOptions / disabledOptions` 或删文档） |
 
 ### A3　类型与数据对象

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",

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

@@ -1,16 +0,0 @@
-import type { ButtonActions } from "../../types";
-import type { ButtonAction } from "../../types";
-export default interface DialogActions {
-    /**
-     * 操作类
-     */
-    list: ButtonActions;
-    /**
-     * 关闭窗口的action
-     */
-    close: ButtonAction;
-    /**
-     * 关闭问询
-     */
-    closeConfirm: () => Promise<boolean>;
-}

package/dist/overlay/dialog/DialogActions.js

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