@ticatec/uniface-element 5.0.1 → 5.0.3

package/dist/overlay/common/scrollLock.js

@@ -0,0 +1,49 @@
+/**
+ * Shared, reference-counted body scroll-lock.
+ *
+ * Any number of overlays (Popover, Dialog, Drawer, ModalPopover,
+ * FullscreenOverlay, ...) can call lockBodyScroll()/unlockBodyScroll()
+ * independently, in any open/close order, without one overlay's close
+ * clobbering another still-open overlay's lock. Only the very first lock
+ * captures the pre-lock overflowY value, and only the transition back to
+ * zero open locks restores it — this is what makes stacking safe.
+ *
+ * Originally lived inline in Popover.svelte; generalized here so every
+ * modal-ish overlay in the library shares one lock instead of each
+ * reinventing (or omitting) its own save/restore.
+ */
+let lockCount = 0;
+let savedOverflowY = null;
+export function lockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0) {
+        savedOverflowY = window.getComputedStyle(document.body).overflowY;
+        document.body.style.overflowY = 'hidden';
+    }
+    lockCount++;
+}
+export function unlockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0 && savedOverflowY != null) {
+        document.body.style.overflowY = savedOverflowY;
+        savedOverflowY = null;
+    }
+}
+/**
+ * Convenience wrapper for the common "lock on mount, unlock on cleanup"
+ * pattern, idempotent against being released more than once (e.g. both a
+ * timer and an unmount cleanup racing to call it).
+ */
+export function acquireScrollLock() {
+    lockBodyScroll();
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        unlockBodyScroll();
+    };
+}

package/dist/overlay/context-menu/ContextMenu.svelte.js

@@ -1,24 +1,11 @@
 // src/lib/overlay/context-menu/ContextMenu.svelte.ts
-import { mount } from 'svelte';
 import ContextMenuPanel from "./ContextMenuPanel.svelte";
-let panelMounted = false;
+import { createSingletonMounter } from '../common/mountSingleton';
 /**
  * 懒挂载：第一次 show() 时把面板挂到 document.body，后续复用同一个实例。
  * 不需要用户在 app 根节点手动挂 <ContextMenu />。
  */
-function ensureMounted() {
-    if (panelMounted)
-        return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(ContextMenuPanel, { target: document.body });
-            panelMounted = true;
-        }
-        catch {
-            // Silent fallback
-        }
-    }
-}
+const ensureMounted = createSingletonMounter(ContextMenuPanel);
 class ContextMenuController {
     visible = $state(false);
     position = $state({ x: 0, y: 0 });

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

@@ -5,14 +5,22 @@
 
     let focusedIndex = $state(-1);
     let menuPanel = $state<HTMLDivElement | null>(null);
+    let previouslyFocused: HTMLElement | null = null;
 
     // 状态响应器：一旦菜单被激活，立即强制捕获焦点
     $effect(() => {
         if (contextMenuSvelte.visible) {
+            previouslyFocused = document.activeElement as HTMLElement | null;
             focusedIndex = -1; // 初始化键盘高亮位置
             tick().then(() => {
                 menuPanel?.focus();
             });
+        } else if (previouslyFocused) {
+            // Regression: closing the menu previously just dropped focus back
+            // to the document body instead of wherever the user was before
+            // opening it (right-clicking a table row, say).
+            previouslyFocused.focus();
+            previouslyFocused = null;
         }
     });
 
@@ -71,6 +79,10 @@
                 break;
             case 'Escape':
                 event.preventDefault();
+                // Stop this from also reaching the shared window-level Escape
+                // stack (escapeClose.ts) — otherwise a context menu opened on
+                // top of a Dialog/Popover would close both on one Escape press.
+                event.stopPropagation();
                 contextMenuSvelte.hide();
                 break;
             case 'Tab':
@@ -137,7 +149,7 @@
      so the menu drifted away from the cursor by the page's scroll offset. `fixed`
      keeps the same coordinate frame as the values driving left/top. */
   position: fixed;
-  z-index: 1000;
+  z-index: var(--uniface-z-context-menu, 1000);
   outline: none;
   border-radius: var(--uniface-radius);
   /* 1. 深度整合：基础环境与阴影规范 */

package/dist/overlay/dialog/Dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {getContext, hasContext} from "svelte";
+    import {getContext, hasContext, onMount} from "svelte";
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
     import ActionBar from "../../layouts/action_bar";
     import type {ButtonAction, ButtonActions} from "../../types";
@@ -7,6 +7,9 @@
     import {ModalResult, type OnClose} from "./IDialog";
     import i18nRes from "../../i18nRes";
     import type {Snippet} from "svelte";
+    import {acquireScrollLock} from "../common/scrollLock";
+    import {registerEscapeHandler} from "../common/escapeClose";
+    import {focusTrap} from "../common/focusTrap";
 
     interface Props {
         title: string;
@@ -42,16 +45,6 @@
         try { return hasContext('dialogId') ? getContext<string | undefined>('dialogId') : undefined; } catch { return undefined; }
     })();
 
-    // 自动聚焦第一个按钮（次轮 tick，确保子组件已挂载）
-    $effect(() => {
-        if (!dialogId) return;  // 直接渲染模式由调用方控制
-        setTimeout(() => {
-            const root = document.querySelector('.uniface-dialog[data-dialog-id="' + dialogId + '"]');
-            const firstButton = root?.querySelector('button');
-            firstButton?.focus();
-        }, 300);
-    });
-
     export const close = async (result: ModalResult) => {
         const isCancelLike = result === ModalResult.MR_CANCEL || result === ModalResult.MR_CLOSE;
         const confirm = closeConfirm && isCancelLike ? await closeConfirm() : true;
@@ -65,15 +58,22 @@
         }
     };
 
-    const handleWindowKeyDown = (e: KeyboardEvent) => {
-        if (e.code !== 'Escape') return;
-        // 如果有 picker popover 打开，先让 CommonPicker 的 ESC 处理（关闭 popover）。
-        // 此时 DOM 里的 popover 还没被 Svelte 移除（响应式更新在微任务里），能检测到。
-        const openPopover = document.querySelector('.uniface-popover-wrapper:not(.hidden)');
-        if (openPopover) return;
-        e.preventDefault();
-        void close(ModalResult.MR_CANCEL);
-    };
+    // Dialog is modal — the page behind it should not scroll (regression fix:
+    // this was previously entirely missing, unlike Popover). Escape now goes
+    // through the shared, stack-aware registry instead of a hand-rolled
+    // ".uniface-popover-wrapper:not(.hidden)" DOM query — a Popover opened
+    // from within this dialog (e.g. a picker dropdown) registers later and so
+    // is topmost, closing first, with no special-casing needed here.
+    onMount(() => {
+        const releaseScrollLock = acquireScrollLock();
+        const unregisterEscape = registerEscapeHandler(() => {
+            void close(ModalResult.MR_CANCEL);
+        });
+        return () => {
+            releaseScrollLock();
+            unregisterEscape();
+        };
+    });
 
     const closeAction = $derived<ButtonAction>({
         label: closeButton,
@@ -128,18 +128,23 @@
     );
 </script>
 
-<svelte:window onkeydown={handleWindowKeyDown} onmousemove={handleMouseMove} onmouseup={handleMouseUp}/>
+<svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp}/>
 
 <div class="uniface-dialog" data-dialog-id={dialogId}
      style="{startMove ? 'cursor: move' : ''}">
-    <div class="uniface-dialog-box"
+    <div class="uniface-dialog-box" use:focusTrap={{enabled: !!dialogId}}
          style="{dialog$style}; top: {top}px; left: {left}px; width: {width}; height: {height};">
-        <div class="title-bar" onmousedown={handleMouseDown} onmouseup={handleMouseUp} aria-hidden="true">
+        <!-- Drag handle for repositioning the dialog, not a semantic control; the
+             close action inside it is its own focusable <button>. -->
+        <!-- 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}
                 <div style="flex: 0 0 auto; padding-left: 12px">
-                    <i class="icon_google_clear dialog-action-button" aria-hidden="true"
-                       onclick={() => close(ModalResult.MR_CANCEL)}></i>
+                    <button type="button" class="dialog-action-button" aria-label="Close"
+                            onclick={() => close(ModalResult.MR_CANCEL)}>
+                        <i class="icon_google_clear" aria-hidden="true"></i>
+                    </button>
                 </div>
             {/if}
         </div>
@@ -152,8 +157,7 @@
     </div>
 </div>
 
-<style>@charset "UTF-8";
-:global(:root) {
+<style>:global(:root) {
   --uniface-dialog-border-color: #0000000D;
   --uniface-dialog-action-button-hover-background-color: #E2E8F0;
   --uniface-dialog-action-button-color: #6B7280;
@@ -169,8 +173,10 @@
   align-items: center;
   justify-content: center;
   background-color: var(--uniface-color-dialog-mask-surface, rgba(255, 255, 255, 0.1254901961));
-  /* z-index 必须低于 Popover 的 100，picker 下拉才能浮在 dialog 之上 */
-  z-index: 20;
+  /* Must stay below --uniface-z-popover so a picker dropdown opened inside
+     a dialog floats above the dialog itself. See uniface-root.scss for the
+     full stacking scale. */
+  z-index: var(--uniface-z-dialog, 20);
   user-select: none;
 }
 .uniface-dialog .uniface-dialog-box {
@@ -202,6 +208,13 @@
 .uniface-dialog .uniface-dialog-box .title-bar .dialog-action-button {
   cursor: pointer;
   color: var(--uniface-dialog-action-button-color, #B3BCCA);
+  background: none;
+  border: none;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
 }
 .uniface-dialog .uniface-dialog-box .title-bar .dialog-action-button:hover {
   background-color: var(--uniface-dialog-action-button-hover-background-color, #E2E8F0);
@@ -211,6 +224,10 @@
   position: relative;
   top: 1px;
 }
+.uniface-dialog .uniface-dialog-box .title-bar .dialog-action-button:focus-visible {
+  outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+  outline-offset: 1px;
+}
 .uniface-dialog .uniface-dialog-box .dialog-content {
   flex: 1 1 auto;
   overflow: auto;

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

@@ -1,6 +1,6 @@
-import { mount } from 'svelte';
 import DialogBoard from './DialogBoard.svelte';
 import { ModalResult } from './IDialog';
+import { mountToBody } from '../common/mountSingleton';
 let boardMounted = false;
 /**
  * 内部使用：DialogBoard 在组件初始化时检查并标记，确保全局只有一个 board 实际渲染 stack。
@@ -15,14 +15,12 @@ export function _markBoardMounted() {
 function ensureMounted() {
     if (boardMounted)
         return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(DialogBoard, { target: document.body });
-        }
-        catch {
-            // Silent fallback
-        }
-    }
+    // Note: unlike the other overlay controllers, this deliberately does not
+    // set boardMounted here — DialogBoard.svelte itself calls
+    // _markBoardMounted() on init, since a board the consumer placed manually
+    // in their app root also needs to mark it mounted, not just this
+    // auto-mount path.
+    mountToBody(DialogBoard);
 }
 class DialogManager {
     stack = $state([]);

package/dist/overlay/drawer/Drawer.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import {fly} from "svelte/transition";
     import type { Snippet } from "svelte";
+    import {acquireScrollLock} from "../common/scrollLock";
+    import {registerEscapeHandler} from "../common/escapeClose";
 
     interface Props {
         theme?: string;
@@ -26,6 +28,24 @@
         }
     });
 
+    // Drawer stays mounted and toggles `visible` repeatedly (unlike Popover/
+    // Dialog, which are conditionally rendered fresh each open), so the lock
+    // is acquired/released per visibility flip via this effect's cleanup,
+    // not once in onMount. Regression: this was previously entirely missing.
+    $effect(() => {
+        if (visible) {
+            return acquireScrollLock();
+        }
+    });
+
+    // Same per-visibility-flip lifecycle as the scroll lock above. Regression:
+    // previously had no Escape handling at all.
+    $effect(() => {
+        if (visible) {
+            return registerEscapeHandler(() => { visible = false; });
+        }
+    });
+
     let xPos = $derived(position == 'left' ? `${-width}` : '100%');
 
     const handleBackdropClick = () => {
@@ -37,9 +57,16 @@
     };
 </script>
 
-<div class="uniface-drawer" aria-hidden="true" data-theme={theme} style="display: {hidden ? 'none' : 'block'}" onclick={handleBackdropClick}>
+<!-- Backdrop click-to-close convenience only; aria-hidden must not be used
+     here since it would hide the real, arbitrary interactive content
+     rendered via `children` from assistive tech. -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="uniface-drawer" data-theme={theme} style="display: {hidden ? 'none' : 'block'}" onclick={handleBackdropClick}>
     {#if visible}
-        <div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }} aria-hidden="true"
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }}
              onoutroend={()=>{hidden = !visible}} onclick={handleDrawerClick}>
             <div>
             {#if children}
@@ -58,7 +85,7 @@
         left: 0;
         right: 0;
         background-color: transparent;
-        z-index: 99;
+        z-index: var(--uniface-z-drawer, 99);
     }
 
     .uniface-drawer > div {

package/dist/overlay/indicator/Indicator.svelte.js

@@ -1,23 +1,10 @@
-import { mount } from 'svelte';
 import IndicatorPanel from './IndicatorPanel.svelte';
-let panelMounted = false;
+import { createSingletonMounter } from '../common/mountSingleton';
 /**
  * 懒挂载：第一次 show() 时把面板挂到 document.body，后续复用同一个实例。
  * 不需要用户在 app 根节点手动挂 <IndicatorBoard />。
  */
-function ensureMounted() {
-    if (panelMounted)
-        return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(IndicatorPanel, { target: document.body });
-            panelMounted = true;
-        }
-        catch {
-            // Silent fallback
-        }
-    }
-}
+const ensureMounted = createSingletonMounter(IndicatorPanel);
 class IndicatorController {
     message = $state('');
     visible = $state(false);

package/dist/overlay/indicator/IndicatorPanel.svelte

@@ -20,7 +20,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  z-index: 100;
+  /* Was a bare 100, accidentally tied with Popover's z-index; centralized
+     scale bumps this to 110 so an Indicator shown while a Popover is
+     open reliably sits above it. */
+  z-index: var(--uniface-z-indicator, 110);
 }
 .uniface-indicator-board .indicator-content {
   margin: 0 auto;

package/dist/overlay/message-box/MessageBox.svelte.js

@@ -1,22 +1,9 @@
-import { mount } from 'svelte';
 import MessageBoxPanel from './MessageBoxPanel.svelte';
 import { ModalResult } from './IMessageBox';
 import { getAppTitle } from '../../unifaceContext';
 import i18nRes from '../../i18nRes';
-let panelMounted = false;
-function ensureMounted() {
-    if (panelMounted)
-        return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(MessageBoxPanel, { target: document.body });
-            panelMounted = true;
-        }
-        catch {
-            // Silent fallback in test environments where Svelte client mount is bypassed
-        }
-    }
-}
+import { createSingletonMounter } from '../common/mountSingleton';
+const ensureMounted = createSingletonMounter(MessageBoxPanel);
 class MessageBoxController {
     visible = $state(false);
     title = $state('');

package/dist/overlay/message-box/MessageBoxPanel.svelte

@@ -61,12 +61,17 @@
     <div style={startMove ? 'cursor: move' : ''} onmousemove={handleMouseMove} role="none" class="dialog-inner">
         <div class="uniface-message-box">
             <div style="top: {top}px; left: {left}px">
-                <div class="title-bar" aria-hidden="true" onmousedown={handleMouseDown} onmouseup={handleMouseUp}>
+                <!-- Drag handle for repositioning the dialog, not a semantic control; the
+                     close action inside it is its own focusable <button>. -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div class="title-bar" onmousedown={handleMouseDown} onmouseup={handleMouseUp}>
                     {#if !utils.isEmpty(messageBox.title)}
                         <span class="title-text">{messageBox.title}</span>
                     {/if}
                     <div>
-                        <i class="icon_google_clear dialog-action-button" aria-hidden="true" onclick={handleCloseClick}></i>
+                        <button type="button" class="dialog-action-button" aria-label="Close" onclick={handleCloseClick}>
+                            <i class="icon_google_clear" aria-hidden="true"></i>
+                        </button>
                     </div>
                 </div>
                 <div class="box-content">
@@ -102,7 +107,7 @@
   width: 100%;
   height: 100%;
   user-select: none;
-  z-index: 30;
+  z-index: var(--uniface-z-message-box, 30);
   opacity: 0;
   transition: opacity 0.3s ease, display 0.3s ease allow-discrete, overlay 0.3s ease allow-discrete;
 }
@@ -200,6 +205,13 @@
 .uniface-message-dialog .uniface-message-box .title-bar .dialog-action-button {
   cursor: pointer;
   color: var(--uniface-message-color-title-bar);
+  background: none;
+  border: none;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
 }
 .uniface-message-dialog .uniface-message-box .title-bar .dialog-action-button:hover {
   background-color: var(--uniface-dialog-action-button-color-hover-surface);
@@ -209,6 +221,10 @@
   position: relative;
   top: 1px;
 }
+.uniface-message-dialog .uniface-message-box .title-bar .dialog-action-button:focus-visible {
+  outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+  outline-offset: 1px;
+}
 .uniface-message-dialog .box-content {
   flex: 1 1 auto;
   overflow: auto;

package/dist/overlay/toast/Toast.svelte.js

@@ -1,23 +1,10 @@
-import { mount } from 'svelte';
 import ToastPanel from './ToastPanel.svelte';
-let panelMounted = false;
+import { createSingletonMounter } from '../common/mountSingleton';
 /**
  * 懒挂载：第一次 show() 时把面板挂到 document.body，后续复用同一个实例。
  * 不需要用户在 app 根节点手动挂 <ToastBoard />。
  */
-function ensureMounted() {
-    if (panelMounted)
-        return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(ToastPanel, { target: document.body });
-            panelMounted = true;
-        }
-        catch {
-            // Silent fallback in test environments
-        }
-    }
-}
+const ensureMounted = createSingletonMounter(ToastPanel);
 class ToastController {
     message = $state('');
     type = $state('info');

package/dist/overlay/toast/ToastPanel.svelte

@@ -35,7 +35,7 @@
   background-color: var(--uniface-color-overlay-mask-surface);
   display: block;
   text-align: center;
-  z-index: 40;
+  z-index: var(--uniface-z-toast, 40);
   color: var(--uniface-toast-color);
 }
 .uniface-toast-board .error {

package/dist/overlay/tooltip/Tooltip.svelte

@@ -129,7 +129,7 @@
 {#if state.visible}
     <div
             class="uniface-tooltip"
-            style="position: fixed; left: {state.x}px; top: {state.y}px; z-index: 9999; pointer-events: none; transform: {state.transform}; max-width: 50vw;"
+            style="position: fixed; left: {state.x}px; top: {state.y}px; z-index: var(--uniface-z-tooltip, 9999); pointer-events: none; transform: {state.transform}; max-width: 50vw;"
     >
         {@html state.html}
     </div>