@ticatec/uniface-element 5.0.0 → 5.0.1

package/dist/navigation/nav_menu/NavigatorMenu.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
+    import {onMount} from "svelte";
     import type MenuItem from "./MenuItem";
-    import type {OnMenuClick} from "./MenuItem";
-    import type {IHierarchyData} from "../../lib";
+    import type {MenuNode, OnMenuClick} from "./MenuItem";
     import NavigatorMenuItem from "./NavigatorMenuItem.svelte";
 
     type GetText<T> = (item: T) => string;
     type Variant = 'vertical' | 'horizontal';
 
     interface Props {
-        menuItems: Array<IHierarchyData<MenuItem>>;
+        menuItems: Array<MenuNode>;
         style?: string;
         textField: string | GetText<MenuItem>;
         onItemClick: OnMenuClick;
@@ -27,15 +27,46 @@
 
     // 横向模式：当前展开的 root 索引（同时只开一个 dropdown）
     let openRootIdx = $state<number | null>(null);
+    let scrollViewport = $state<HTMLDivElement>();
+    let scrollTrack = $state<HTMLDivElement>();
+    let horizontalMenu = $state<HTMLElement>();
+    let hasOverflow = $state(false);
+    let canScrollLeft = $state(false);
+    let canScrollRight = $state(false);
+    let dropdownLeft = $state(0);
 
-    const rootText = (root: IHierarchyData<MenuItem>): string => {
+    const rootText = (root: MenuNode): string => {
         return typeof textField === 'string'
-            ? root.data?.[textField] ?? ''
-            : textField(root.data);
+            ? root.item?.[textField] ?? ''
+            : textField(root.item);
+    };
+
+    const updateDropdownPosition = () => {
+        if (openRootIdx === null || !horizontalMenu || !scrollTrack) return;
+        const item = scrollTrack.children[openRootIdx] as HTMLElement | undefined;
+        if (!item) return;
+        dropdownLeft = item.getBoundingClientRect().left - horizontalMenu.getBoundingClientRect().left;
+    };
+
+    const updateScrollState = () => {
+        if (!scrollViewport) return;
+        const maxScrollLeft = scrollViewport.scrollWidth - scrollViewport.clientWidth;
+        hasOverflow = maxScrollLeft > 1;
+        canScrollLeft = scrollViewport.scrollLeft > 1;
+        canScrollRight = scrollViewport.scrollLeft < maxScrollLeft - 1;
+        updateDropdownPosition();
     };
 
     const handleRootClick = (idx: number) => {
         openRootIdx = openRootIdx === idx ? null : idx;
+        requestAnimationFrame(updateDropdownPosition);
+    };
+
+    const scrollMenu = (direction: -1 | 1) => {
+        scrollViewport?.scrollBy({
+            left: direction * Math.max(scrollViewport.clientWidth * 0.7, 160),
+            behavior: 'smooth'
+        });
     };
 
     // 横向模式下点叶子：触发 onItemClick + 关闭 dropdown
@@ -59,6 +90,15 @@
             }
         };
     };
+
+    onMount(() => {
+        if (!scrollViewport || !scrollTrack) return;
+        const resizeObserver = new ResizeObserver(updateScrollState);
+        resizeObserver.observe(scrollViewport);
+        resizeObserver.observe(scrollTrack);
+        updateScrollState();
+        return () => resizeObserver.disconnect();
+    });
 </script>
 
 {#if variant === 'vertical'}
@@ -72,36 +112,50 @@
         {/if}
     </div>
 {:else}
-    <nav class="uniface-navigator-menu horizontal" {style} data-theme={theme || undefined}>
-        {#each menuItems as root, idx (idx)}
-            <div
-                class="root-item"
-                class:open={openRootIdx === idx}
-                class:leaf={root.children.length === 0}
-                onclick={(e) => { e.stopPropagation(); handleRootClick(idx); }}
-                onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleRootClick(idx); }}
-                role="button"
-                tabindex="0"
-            >
-                <span class="label">{rootText(root)}</span>
-                {#if root.children.length > 0}
-                    <i class="caret" aria-hidden="true"></i>
-                {/if}
-                {#if openRootIdx === idx && root.children.length > 0}
+    <nav bind:this={horizontalMenu} class="uniface-navigator-menu horizontal" {style} data-theme={theme || undefined}>
+        {#if hasOverflow}
+            <button class="scroll-button previous" aria-label="向左滚动菜单" disabled={!canScrollLeft} onclick={() => scrollMenu(-1)}>
+                <i aria-hidden="true"></i>
+            </button>
+        {/if}
+        <div bind:this={scrollViewport} class="scroll-viewport" onscroll={updateScrollState}>
+            <div bind:this={scrollTrack} class="scroll-track">
+                {#each menuItems as root, idx (idx)}
                     <div
-                        class="dropdown-panel"
-                        use:outerClick={() => { openRootIdx = null; }}
-                        onclick={(e) => e.stopPropagation()}
+                        class="root-item"
+                        class:open={openRootIdx === idx}
+                        class:leaf={!root.children?.length}
+                        onclick={(e) => { e.stopPropagation(); handleRootClick(idx); }}
+                        onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleRootClick(idx); }}
+                        role="button"
+                        tabindex="0"
                     >
-                        <ul class="dropdown">
-                            {#each root.children as child}
-                                <NavigatorMenuItem menu={child} onMenuItemClick={handleLeafClickInDropdown} {textField} cascade={true}/>
-                            {/each}
-                        </ul>
+                        <span class="label">{rootText(root)}</span>
+                        {#if root.children?.length}
+                            <i class="caret" aria-hidden="true"></i>
+                        {/if}
                     </div>
-                {/if}
+                {/each}
             </div>
-        {/each}
+        </div>
+        {#if hasOverflow}
+            <button class="scroll-button next" aria-label="向右滚动菜单" disabled={!canScrollRight} onclick={() => scrollMenu(1)}>
+                <i aria-hidden="true"></i>
+            </button>
+        {/if}
+        {#if openRootIdx !== null && menuItems[openRootIdx]?.children?.length}
+            <div
+                class="dropdown-panel"
+                style:left="{dropdownLeft}px"
+                use:outerClick={() => { openRootIdx = null; }}
+            >
+                <ul class="dropdown">
+                    {#each menuItems[openRootIdx].children ?? [] as child}
+                        <NavigatorMenuItem menu={child} onMenuItemClick={handleLeafClickInDropdown} {textField} cascade={true}/>
+                    {/each}
+                </ul>
+            </div>
+        {/if}
     </nav>
 {/if}
 
@@ -143,6 +197,76 @@
         height: 48px;
     }
 
+    .scroll-viewport {
+        flex: 1 1 auto;
+        min-width: 0;
+        height: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        scroll-behavior: smooth;
+    }
+
+    .scroll-viewport::-webkit-scrollbar {
+        display: none;
+    }
+
+    .scroll-track {
+        display: flex;
+        align-items: center;
+        width: max-content;
+        min-width: 100%;
+        height: 100%;
+    }
+
+    .scroll-button {
+        flex: 0 0 32px;
+        width: 32px;
+        height: 100%;
+        padding: 0;
+        border: 0;
+        background: var(--uniface-nav-menu-bg);
+        color: inherit;
+        cursor: pointer;
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+        transition: opacity 0.15s ease, visibility 0.15s ease;
+    }
+
+    .uniface-navigator-menu.horizontal:hover .scroll-button,
+    .uniface-navigator-menu.horizontal:focus-within .scroll-button {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+
+    .scroll-button:hover:not(:disabled) {
+        background-color: var(--uniface-nav-menu-hover-bg);
+        color: var(--uniface-nav-menu-hover-color);
+    }
+
+    .scroll-button:disabled {
+        cursor: default;
+        opacity: 0.35;
+    }
+
+    .scroll-button i {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-top: 2px solid currentColor;
+        border-left: 2px solid currentColor;
+    }
+
+    .scroll-button.previous i {
+        transform: rotate(-45deg);
+    }
+
+    .scroll-button.next i {
+        transform: rotate(135deg);
+    }
+
     .uniface-navigator-menu.horizontal .root-item {
         position: relative;
         padding: 0 16px;
@@ -176,7 +300,6 @@
     .dropdown-panel {
         position: absolute;
         top: 100%;
-        left: 0;
         z-index: 1000;
     }
 
@@ -190,4 +313,4 @@
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         min-width: 180px;
     }
-</style>
+</style>

package/dist/navigation/nav_menu/NavigatorMenu.svelte.d.ts

@@ -1,10 +1,9 @@
 import type MenuItem from "./MenuItem";
-import type { OnMenuClick } from "./MenuItem";
-import type { IHierarchyData } from "../../lib";
+import type { MenuNode, OnMenuClick } from "./MenuItem";
 type GetText<T> = (item: T) => string;
 type Variant = 'vertical' | 'horizontal';
 interface Props {
-    menuItems: Array<IHierarchyData<MenuItem>>;
+    menuItems: Array<MenuNode>;
     style?: string;
     textField: string | GetText<MenuItem>;
     onItemClick: OnMenuClick;

package/dist/navigation/nav_menu/NavigatorMenuItem.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
     import {slide, fly} from "svelte/transition";
     import type MenuItem from "./MenuItem";
-    import type {OnMenuClick} from "./MenuItem";
-    import type {IHierarchyData} from "../../lib";
+    import type {MenuNode, OnMenuClick} from "./MenuItem";
+    import NavigatorMenuItem from "./NavigatorMenuItem.svelte";
 
     type GetText<T> = (item: T) => string;
 
     interface Props {
-        menu: IHierarchyData<MenuItem>;
+        menu: MenuNode;
         textField: string | GetText<MenuItem>;
         onMenuItemClick: OnMenuClick;
         defaultExpand?: boolean;
@@ -26,14 +26,17 @@
         cascade = false
     }: Props = $props();
 
-    let expand = $state(defaultExpand);
+    // defaultExpand seeds local interaction state once; subsequent prop changes must
+    // not overwrite a choice the user has already made.
+    const getInitialExpanded = () => defaultExpand;
+    let expand = $state(getInitialExpanded());
     let respond = $state(true);
     let liEl: HTMLElement;
     /** true = 子菜单飞到左边（右边空间不够时） */
     let flyLeft = $state(false);
 
-    let expandable = $derived(menu.children.length > 0);
-    let menuText = $derived(typeof textField == 'string' ? menu.data?.[textField] ?? 'Unknown item' : textField(menu.data));
+    let expandable = $derived(!!menu.children?.length);
+    let menuText = $derived(typeof textField == 'string' ? menu.item?.[textField] ?? 'Unknown item' : textField(menu.item));
 
     // 级联模式下，展开前先测一下右边够不够放子菜单
     const measureFlyout = () => {
@@ -53,7 +56,7 @@
                 }
                 expand = !expand;
             } else {
-                onMenuItemClick?.(menu.data);
+                onMenuItemClick?.(menu.item);
             }
         }
     }
@@ -74,14 +77,14 @@
     {#if expandable && expand}
         {#if cascade}
             <ul class="flyout" transition:fly={{duration: 200, x: flyLeft ? -20 : 20}}>
-                {#each menu.children as el}
-                    <svelte:self menu={el} {onMenuItemClick} {textField} {cascade}/>
+                {#each menu.children ?? [] as el}
+                    <NavigatorMenuItem menu={el} {onMenuItemClick} {textField} {cascade}/>
                 {/each}
             </ul>
         {:else}
             <ul class="inline" transition:slide={{duration: 200}}>
-                {#each menu.children as el}
-                    <svelte:self menu={el} {onMenuItemClick} {textField} {cascade}/>
+                {#each menu.children ?? [] as el}
+                    <NavigatorMenuItem menu={el} {onMenuItemClick} {textField} {cascade}/>
                 {/each}
             </ul>
         {/if}
@@ -168,4 +171,4 @@
         left: auto;
         right: 100%;
     }
-</style>
+</style>

package/dist/navigation/nav_menu/NavigatorMenuItem.svelte.d.ts

@@ -1,9 +1,9 @@
 import type MenuItem from "./MenuItem";
-import type { OnMenuClick } from "./MenuItem";
-import type { IHierarchyData } from "../../lib";
+import type { MenuNode, OnMenuClick } from "./MenuItem";
+import NavigatorMenuItem from "./NavigatorMenuItem.svelte";
 type GetText<T> = (item: T) => string;
 interface Props {
-    menu: IHierarchyData<MenuItem>;
+    menu: MenuNode;
     textField: string | GetText<MenuItem>;
     onMenuItemClick: OnMenuClick;
     defaultExpand?: boolean;

package/dist/navigation/progress_step_bar/ProgressStepBlock.svelte

@@ -157,10 +157,6 @@
         color: var(--uniface-progress-step-completed-color, #374151);
     }
 
-    .progress-step-block:last-child {
-        /* Keep the line for the last step */
-    }
-
     /* Vertical styles */
     .progress-step-block.vertical {
         margin-left: 0;
@@ -198,4 +194,4 @@
     .progress-step-block.vertical:last-child .step-indicator > div {
         background: transparent;
     }
-</style>
+</style>

package/dist/overlay/common/FloatingPanel.svelte

@@ -75,9 +75,3 @@
 >
     {@render children?.()}
 </div>
-
-<style>
-    .floating-panel {
-        /* 视觉样式由调用方在 children 上控制。这里只负责定位 + 挂载到 body。 */
-    }
-</style>

package/dist/overlay/common/Popover.svelte

@@ -110,8 +110,13 @@
             }, 50);
         }, 50);  // 延迟显示 portal
         window.addEventListener("resize", updatePosition);
-        document.addEventListener("scroll", updatePosition, {passive: false});
-        const interval = setInterval(checkPosition, 10); // 每 100ms 检测一次
+        // capture:true — scroll events don't bubble, so a listener on the bubble phase
+        // only ever sees window/document-level scroll. Capturing catches scroll on any
+        // nested scrollable ancestor (a table body, a dialog's scroll area, etc.) too,
+        // which is what keeps the popover pinned to its anchor while that container
+        // scrolls. Matches the pattern in FloatingPanel.svelte.
+        window.addEventListener("scroll", updatePosition, true);
+        const interval = setInterval(checkPosition, 10); // 每 10ms 检测一次
         const resizeObserver = new ResizeObserver(entries => {
             for (let entry of entries) {
                 updatePosition();
@@ -120,7 +125,7 @@
         resizeObserver.observe(contentPanel);
         return () => {
             window.removeEventListener("resize", updatePosition);
-            document.removeEventListener("scroll", updatePosition);
+            window.removeEventListener("scroll", updatePosition, true);
             resizeObserver.disconnect();
             clearInterval(interval);
         };

package/dist/overlay/common/uniface-utils.js

@@ -1,6 +1,5 @@
 export function clickOutside(node) {
     const handleClick = (event) => {
-        // @ts-ignore 因为 event.target 是 EventTarget，不能直接传给 contains
         if (node && !node.contains(event.target) && !event.defaultPrevented) {
             node.dispatchEvent(new CustomEvent('outerClick', {
                 bubbles: true, // 通常自定义事件要冒泡，方便捕获

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

@@ -78,6 +78,16 @@
                 break;
         }
     }
+
+    function activateItem(event: MouseEvent | KeyboardEvent, index: number) {
+        if (event instanceof KeyboardEvent && event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        event.stopPropagation();
+        const item = contextMenuSvelte.items[index];
+        if (item.disabled) return;
+        item.action?.();
+        contextMenuSvelte.hide();
+    }
 </script>
 
 {#if contextMenuSvelte.visible}
@@ -103,8 +113,10 @@
                         class:focused={focusedIndex === index}
                         style={item.style || ''}
                         role="menuitem"
+                        tabindex="-1"
                         aria-disabled={item.disabled}
-                        onclick={() => { if(!item.disabled && item.action) { item.action(); contextMenuSvelte.hide(); } }}
+                        onclick={(event) => activateItem(event, index)}
+                        onkeydown={(event) => activateItem(event, index)}
                         onmouseenter={() => { if(!item.disabled) focusedIndex = index; }}
                 >
                     {#if item.icon}
@@ -184,4 +196,4 @@
   height: 1px;
   background-color: var(--uniface-contextmenu-color-separator);
   margin: var(--uniface-contextmenu-separator-margin) 0;
-}</style>
+}</style>

package/dist/overlay/dialog/Dialog.svelte

@@ -128,11 +128,10 @@
     );
 </script>
 
-<svelte:window onkeydown={handleWindowKeyDown}/>
+<svelte:window onkeydown={handleWindowKeyDown} onmousemove={handleMouseMove} onmouseup={handleMouseUp}/>
 
 <div class="uniface-dialog" data-dialog-id={dialogId}
-     style="{startMove ? 'cursor: move' : ''}"
-     onmousemove={handleMouseMove} onmouseleave={handleMouseUp}>
+     style="{startMove ? 'cursor: move' : ''}">
     <div class="uniface-dialog-box"
          style="{dialog$style}; top: {top}px; left: {left}px; width: {width}; height: {height};">
         <div class="title-bar" onmousedown={handleMouseDown} onmouseup={handleMouseUp} aria-hidden="true">
@@ -230,4 +229,4 @@
   align-items: center;
   justify-content: flex-end;
   border-top: 1px solid var(--uniface-dialog-divider-color, #F0F0F0);
-}</style>
+}</style>

package/dist/overlay/dialog/DialogWrapper.svelte

@@ -3,7 +3,10 @@
 
     let {id, component: Comp, params}: {id: string, component: any, params: Record<string, any>} = $props();
 
-    setContext('dialogId', id);
+    // Context identity is fixed for the lifetime of this wrapper; later prop changes
+    // must not replace the dialog registration used by its descendants.
+    const getInitialDialogId = () => id;
+    setContext('dialogId', getInitialDialogId());
 </script>
 
-<Comp {...params}/>
+<Comp {...params}/>

package/dist/ticatec-uniface-web.css

@@ -412,6 +412,11 @@
   --uniface-progress-step-completed-color: #374151;
   --uniface-progress-step-completed-icon-bg: #0061FF1A;
   --uniface-progress-step-completed-icon-color: #0061FF;
+  /* TreeView Tokens */
+  --uniface-treeview-chevron-color: #6b7280;
+  --uniface-treeview-chevron-hover-color: #111827;
+  --uniface-treeview-item-bg: #EEF4FF;
+  --uniface-treeview-item-selected-color: #0061FF;
   --uniface-listbox-separator-color: #F0F0F0;
   --uniface-list-box-hover-surface: #FFFFE1;
   --uniface-list-box-selected-surface: #b1c8f6;
@@ -521,6 +526,11 @@
   --uniface-calendar-color-selected-surface: #2563eb;
   --uniface-calendar-color-selected: #ffffff;
   --uniface-calendar-color-day-surface-hover: rgba(255, 255, 255, 0.08);
+  /* TreeView Tokens */
+  --uniface-treeview-chevron-color: #9ca3af;
+  --uniface-treeview-chevron-hover-color: #e5e7eb;
+  --uniface-treeview-item-bg: rgba(255, 255, 255, 0.08);
+  --uniface-treeview-item-selected-color: #60a5fa;
   /* Menu Separator */
   --uniface-menu-separator-color: rgba(255, 255, 255, 0.08);
   /* Drawer Tokens */
@@ -991,11 +1001,6 @@
   background-color: var(--uniface-editor-color-filled-surface);
   transition: background-color 0.2s ease, border-color 0.2s ease;
 }
-.uniface-form-editor.plain {
-  background-color: transparent;
-  border-bottom-color: transparent;
-  border-radius: 0;
-}
 .uniface-form-editor {
   /* 1.2 状态感知拦截 (States) */
 }
@@ -1005,6 +1010,14 @@
 .uniface-form-editor:focus-within {
   border-color: var(--uniface-editor-color-active-border);
 }
+.uniface-form-editor.plain {
+  background-color: transparent;
+  border-bottom-color: transparent;
+  border-radius: 0;
+}
+.uniface-form-editor.plain.focus-within {
+  border-color: transparent;
+}
 .uniface-form-editor.disabled {
   color: var(--uniface-editor-color-disabled);
   cursor: not-allowed;
@@ -1201,7 +1214,14 @@
 }
 
 .uniface-popover-wrapper {
-  position: absolute;
+  /* Popover.svelte computes position.top/left from target.getBoundingClientRect(),
+     which is viewport-relative. `position: absolute` places this element relative to
+     the document instead, so it drifted away from its anchor by the page's (or any
+     ancestor's) scroll offset. `fixed` keeps the same coordinate frame as the values
+     driving top/left, and combined with the scroll listener in Popover.svelte the
+     overlay stays pinned to its anchor while scrolling. See also ContextMenuPanel.svelte
+     and FloatingPanel.svelte, which use the same fixed + viewport-relative-coords pattern. */
+  position: fixed;
   display: block;
   z-index: 100;
   opacity: 1;

package/dist/utils/prefixFilter.d.ts

@@ -1,5 +1,5 @@
-declare const prefixFilter: (attrs: any, prefix: string, excludes?: Array<string>) => any;
-declare const eventFilter: (attrs: any) => any;
-declare const filterProps: (attrs: any, keys: Array<any>) => any;
+declare const prefixFilter: (attrs: Record<string, unknown>, prefix: string, excludes?: Array<string>) => Record<string, unknown>;
+declare const eventFilter: (attrs: Record<string, unknown>) => Record<string, unknown>;
+declare const filterProps: (attrs: Record<string, unknown>, keys: Array<string>) => Record<string, unknown>;
 export default prefixFilter;
 export { eventFilter, filterProps };

package/dist/utils/prefixFilter.js

@@ -1,12 +1,11 @@
 import { keyboardAttrs } from "../form/common_editor/EditorEvents";
 const prefixFilter = (attrs, prefix, excludes = []) => {
-    let obj = {};
+    const obj = {};
     let len = prefix.length;
     for (let attr in attrs) {
         if (attr.startsWith(prefix) && attr.length > len) {
             let newAttr = attr.substring(len);
             if (excludes.indexOf(newAttr) < 0) {
-                // @ts-ignore
                 obj[newAttr] = attrs[attr];
             }
         }
@@ -14,17 +13,16 @@ const prefixFilter = (attrs, prefix, excludes = []) => {
     return obj;
 };
 const eventFilter = (attrs) => {
-    let obj = {};
+    const obj = {};
     for (let attr in attrs) {
         if (attr.startsWith('on') && attr.length > 2) {
-            // @ts-ignore
             obj[attr] = attrs[attr];
         }
     }
     return obj;
 };
 const filterProps = (attrs, keys) => {
-    let obj = {};
+    const obj = {};
     for (let attr in attrs) {
         if (keys.indexOf(attr) > -1) {
             obj[attr] = attrs[attr];

package/package.json

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