@ticatec/uniface-element 5.0.1 → 5.0.3

package/dist/general/button/Button.svelte

@@ -4,6 +4,7 @@
 
     interface Props {
         type?: ButtonType;
+        htmlType?: 'button' | 'submit' | 'reset';
         label?: string;
         variant?: 'plain' | 'round' | '';
         disabled?: boolean;
@@ -20,6 +21,7 @@
 
     let {
         type = 'default',
+        htmlType = 'button',
         label = '',
         variant = '',
         disabled = false,
@@ -47,6 +49,7 @@
 <!-- autofocus is an explicit opt-in component API; consumers decide when initial focus is appropriate. -->
 <!-- svelte-ignore a11y_autofocus -->
 <button
+    type={htmlType}
     {style}
     class="uniface-button common-button {variant} {size} {type} {theme}"
     class:disabled={disabled}

package/dist/general/button/Button.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { ButtonType } from '../../types';
 interface Props {
     type?: ButtonType;
+    htmlType?: 'button' | 'submit' | 'reset';
     label?: string;
     variant?: 'plain' | 'round' | '';
     disabled?: boolean;

package/dist/general/button/IconButton.svelte

@@ -6,6 +6,7 @@
 
     interface Props {
         type?: ButtonType;
+        htmlType?: 'button' | 'submit' | 'reset';
         disabled?: boolean;
         size?: ButtonSize;
         style?: string;
@@ -18,6 +19,7 @@
 
     let {
         type = 'default',
+        htmlType = 'button',
         disabled = false,
         size = 'medium',
         style,
@@ -40,7 +42,7 @@
 
 </script>
 
-<button class="uniface-button icon-button {size} {type} {theme}" {style} class:disabled {disabled}
+<button type={htmlType} class="uniface-button icon-button {size} {type} {theme}" {style} class:disabled {disabled}
     tabindex={disabled ? -1 : 0} data-tip={disabled ? null : tooltip} onclick={handleClick}>
     {#if children}
         {@render children()}

package/dist/general/button/IconButton.svelte.d.ts

@@ -3,6 +3,7 @@ type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
 type ButtonSize = 'big' | 'medium' | 'small';
 interface Props {
     type?: ButtonType;
+    htmlType?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     size?: ButtonSize;
     style?: string;

package/dist/general/button/TextButton.svelte

@@ -9,6 +9,7 @@
         size?: ButtonSize;
         label?: string;
         type?: ButtonType;
+        htmlType?: 'button' | 'submit' | 'reset';
         onclick?: (event: MouseEvent) => void;
         style?: string;
         theme?: string;
@@ -21,6 +22,7 @@
         size = 'medium',
         label = '',
         type = 'default',
+        htmlType = 'button',
         onclick = undefined,
         style = '',
         theme,
@@ -45,6 +47,7 @@
 </script>
 
 <button
+    type={htmlType}
     class="uniface-button text-button {size} {type} {theme}"
     {style}
     class:disabled

package/dist/general/button/TextButton.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     size?: ButtonSize;
     label?: string;
     type?: ButtonType;
+    htmlType?: 'button' | 'submit' | 'reset';
     onclick?: (event: MouseEvent) => void;
     style?: string;
     theme?: string;

package/dist/general/icon/Icon.svelte

@@ -32,17 +32,34 @@
             respClick = true;
         }
     }
+
+    const isInteractive = $derived(onclick != null);
+
+    function handleKeyDown(e: KeyboardEvent) {
+        if (isInteractive && !disabled && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleClickEvent(e as unknown as MouseEvent);
+        }
+    }
 </script>
 
+<!-- role/tabindex are only ever both set together when onclick is provided
+     (isInteractive); svelte-check can't verify that pairing statically. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
     class="uniface-icon {theme} {className}"
     class:clickable={onclick!=null && !disabled}
     class:disabled={disabled}
     onmousedown={(event: MouseEvent) => {event.preventDefault();}}
     {style}
-    aria-hidden="true"
+    role={isInteractive ? 'button' : undefined}
+    tabindex={isInteractive && !disabled ? 0 : undefined}
+    aria-disabled={isInteractive ? disabled : undefined}
+    aria-hidden={isInteractive ? undefined : true}
+    aria-label={isInteractive ? (tooltip || undefined) : undefined}
     data-tip={disabled ? null : tooltip || null}
     onclick={handleClickEvent}
+    onkeydown={handleKeyDown}
 >
     <i class={name}></i>
 </div>

package/dist/general/tag/Tag.svelte

@@ -34,13 +34,21 @@
         event.stopPropagation();
     }
 
+    const handleTagKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            ondelete?.(data?.id);
+        }
+    }
+
 </script>
 
 <div class="uniface-tag" {style} data-theme="{theme}">
     <div class="{size} {variant} {colorClass}" class:removable={removable}>
         <span>{text}</span>
         {#if removable}
-            <i class="icon_google_clear uniface-remove-icon" aria-hidden="true" onclick={handleTagClick}></i>
+            <i class="icon_google_clear uniface-remove-icon" role="button" tabindex="0" aria-label="Remove {text}"
+               onclick={handleTagClick} onkeydown={handleTagKeyDown}></i>
         {/if}
     </div>
 </div>

package/dist/navigation/nav_menu/NavigatorMenu.svelte

@@ -114,7 +114,7 @@
 {:else}
     <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)}>
+            <button type="button" class="scroll-button previous" aria-label="向左滚动菜单" disabled={!canScrollLeft} onclick={() => scrollMenu(-1)}>
                 <i aria-hidden="true"></i>
             </button>
         {/if}
@@ -139,7 +139,7 @@
             </div>
         </div>
         {#if hasOverflow}
-            <button class="scroll-button next" aria-label="向右滚动菜单" disabled={!canScrollRight} onclick={() => scrollMenu(1)}>
+            <button type="button" class="scroll-button next" aria-label="向右滚动菜单" disabled={!canScrollRight} onclick={() => scrollMenu(1)}>
                 <i aria-hidden="true"></i>
             </button>
         {/if}

package/dist/navigation/nav_menu/NavigatorMenuItem.svelte

@@ -60,12 +60,21 @@
             }
         }
     }
+
+    function handleMenuItemKeyDown(e: KeyboardEvent) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleMenuItemClick();
+        }
+    }
 </script>
 
 <li bind:this={liEl} class:expandable class:fold={!expand} class:cascade class:fly-left={flyLeft}>
     <span
         onclick={handleMenuItemClick}
-        aria-hidden="true"
+        onkeydown={handleMenuItemKeyDown}
+        role="button" tabindex="0"
+        aria-expanded={expandable ? expand : undefined}
     >
         <span class="label">{menuText}</span>
         {#if expandable}

package/dist/navigation/navigator/Navigator.svelte

@@ -26,16 +26,23 @@
         activeItem = item;
         itemClickHandler?.(item);
     };
+
+    const handleKeyDown = (item: any) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleClick(item);
+        }
+    };
 </script>
 
 <div class="uniface-navigator-panel" {style}>
-    <div class="navigator-content">
+    <div class="navigator-content" role="list">
         {#each items as item}
             <div class="uniface-navigator-item {retrieveStatus?.(item) ?? NavItemStatus.Completed}"
                  class:active={activeItem === item}
                  class:highlight={highlights.indexOf(item) > -1}
-                 aria-hidden="true"
-                 onclick={() => handleClick(item)}>
+                 role="button" tabindex="0" aria-current={activeItem === item ? 'step' : undefined}
+                 onclick={() => handleClick(item)} onkeydown={handleKeyDown(item)}>
                 <span>{item.text}</span>
             </div>
         {/each}
@@ -44,15 +51,7 @@
 
 <style>
     .uniface-navigator-panel {
-        --uniface-navigator-background-color: var(--uniface-application-bg);
-        --uniface-navigator-vertical-padding: 16px;
-        --uniface-navigator-completed-text-color: #374151;
-        --uniface-navigator-not-start-text-color: #6B7280;
-        --uniface-navigator-warning-dot-color: #C62828;
-        --uniface-navigator-hover-text-color: #298DFF;
-        --uniface-navigator-active-text-color: #0061FF;
         --uniface-navigator-active-text-weight: 600;
-        --uniface-navigator-highlight-text-color: #0061FF;
 
         position: relative;
         width: 100%;
@@ -76,7 +75,7 @@
         font-size: 12px;
         padding: 4px 8px 4px 24px;
         position: relative;
-        background: linear-gradient(to right, transparent 12px, lightgray 12px, lightgray 13px, transparent 13px);
+        background: linear-gradient(to right, transparent 12px, var(--uniface-navigator-connector-color) 12px, var(--uniface-navigator-connector-color) 13px, transparent 13px);
     }
 
     .uniface-navigator-item:first-child {
@@ -134,14 +133,15 @@
     .uniface-navigator-item.active::before {
         content: "";
         position: absolute;
-        left: 5px;
+        left: 8px;
         top: 50%;
         transform: translateY(-50%);
-        width: 15px;
-        height: 15px;
-        border: 4px solid var(--uniface-navigator-active-text-color);
+        box-sizing: border-box;
+        width: 10px;
+        height: 10px;
+        border: 3px solid var(--uniface-navigator-active-text-color);
         border-radius: 50%;
-        background-color: white;
+        background-color: var(--uniface-navigator-background-color, white);
     }
 
     .uniface-navigator-item.active:hover {

package/dist/navigation/page-stack/PageStack.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+    import {untrack} from 'svelte';
+    import type {Snippet} from 'svelte';
+    import type {TransitionConfig} from 'svelte/transition';
+    import {fly} from 'svelte/transition';
+    import {cubicOut} from 'svelte/easing';
+    import PageStackFrame from './PageStackFrame.svelte';
+    import {providePageStackContext} from './PageStackContext';
+
+    interface StackEntry {
+        id: string;
+        component: any;
+        props: Record<string, any>;
+        resolve: (value: any) => void;
+    }
+
+    type TransitionFn = (node: Element, params?: any) => TransitionConfig;
+
+    interface Props {
+        style?: string;
+        /** 每一帧 push/pop 的滑入滑出时长（ms）。仅在没有传 transitionParams 时生效；设为 0 关闭动画。 */
+        transitionDuration?: number;
+        /**
+         * 换成任意 svelte/transition 函数（fly/fade/scale/slide...）或自定义的过渡函数。
+         * 默认是从右侧滑入的 fly，效果同 transitionParams 未设置时的 {x:'100%', duration:transitionDuration, easing:cubicOut}。
+         */
+        transition?: TransitionFn;
+        /** 传给 transition 函数的参数；一旦提供，会完全替代基于 transitionDuration 生成的默认参数。 */
+        transitionParams?: Record<string, any>;
+        /** 根页面（初始内容，depth = 0） */
+        children?: Snippet;
+    }
+
+    let {
+        style = '',
+        transitionDuration = 260,
+        transition = fly,
+        transitionParams,
+        children
+    }: Props = $props();
+
+    let resolvedTransitionParams = $derived(
+        transitionParams ?? {x: '100%', duration: transitionDuration, easing: cubicOut}
+    );
+
+    let stack = $state<StackEntry[]>([]);
+
+    const generateId = (): string => `page_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+
+    function closeEntry(id: string, result?: any): void {
+        // untrack: push()/close()/reset() are meant to be callable from anywhere,
+        // including from inside a caller's own $effect (e.g. a page that
+        // auto-navigates further based on its props). Reading `stack` (to find/
+        // filter it) *and* writing it back in the same synchronous call would
+        // otherwise get attributed to whatever effect happens to be running at
+        // call time, and the write would then re-trigger that same effect —
+        // Svelte reports this as "effect reads and writes the same state" /
+        // effect_update_depth_exceeded. untrack() keeps this internal
+        // read+write from being picked up as a dependency of an unrelated,
+        // currently-running effect; existing subscribers of `stack` (the
+        // {#each} below) are unaffected — untrack only suppresses *new*
+        // spurious subscriptions created during this call.
+        let entry: StackEntry | undefined;
+        untrack(() => {
+            entry = stack.find(e => e.id === id);
+            if (!entry) return;
+            // 先移除再 resolve：resolve 可能同步触发调用方的后续逻辑（比如再次 push），
+            // 那时候这一帧必须已经不在栈里了。
+            stack = stack.filter(e => e.id !== id);
+        });
+        entry?.resolve(result);
+    }
+
+    /**
+     * push 一个组件进栈，覆盖显示在当前内容之上。返回的 Promise 在该页面调用
+     * getPageStack().close(result) 时以 result resolve；也可以用 PageStack 实例的
+     * pop(result) 从外部（比如 bottombar 的返回按钮）关闭当前栈顶。
+     */
+    export function push<R = any>(component: any, props: Record<string, any> = {}): Promise<R> {
+        return new Promise<R>(resolve => {
+            const id = generateId();
+            // see closeEntry() above for why this is wrapped in untrack()
+            untrack(() => {
+                stack = [...stack, {id, component, props, resolve: resolve as (v: any) => void}];
+            });
+        });
+    }
+
+    /** 关闭当前栈顶的一帧。栈为空时是 no-op。 */
+    export function pop(result?: any): void {
+        const top = stack[stack.length - 1];
+        if (top) closeEntry(top.id, result);
+    }
+
+    /** 清空整个栈，直接回到根页面。不逐帧过渡，适合"注销/切换上下文"这类场景。 */
+    export function reset(): void {
+        // see closeEntry() above for why this is wrapped in untrack()
+        let entries: StackEntry[] = [];
+        untrack(() => {
+            entries = stack;
+            stack = [];
+        });
+        entries.forEach(entry => entry.resolve(undefined));
+    }
+
+    // 根页面（children）本身也活在这个 context 里，depth = 0，close() 是 no-op——
+    // 根页面不是被 push 进来的，没有"关闭返回上一层"的语义，但它应该能拿到 push()
+    // 来发起第一层导航，不需要额外用 bind:this 去引用 PageStack 实例。
+    providePageStackContext({
+        close: () => {
+            if (typeof console !== 'undefined') {
+                console.warn('[PageStack] root page has no close() semantics — it was not pushed onto the stack');
+            }
+        },
+        push,
+        depth: 0
+    });
+</script>
+
+<div class="uniface-page-stack" {style}>
+    <div class="page-stack-root" inert={stack.length > 0}>
+        {@render children?.()}
+    </div>
+    {#each stack as entry, i (entry.id)}
+        <div class="page-stack-frame" style="z-index: {i + 1}" inert={i < stack.length - 1}
+             transition:transition={resolvedTransitionParams}>
+            <PageStackFrame
+                    id={entry.id}
+                    component={entry.component}
+                    props={entry.props}
+                    depth={i + 1}
+                    close={(result) => closeEntry(entry.id, result)}
+                    {push}
+            />
+        </div>
+    {/each}
+</div>
+
+<style>
+    .uniface-page-stack {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+
+    .page-stack-root {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    .page-stack-frame {
+        position: absolute;
+        inset: 0;
+        overflow: auto;
+        background-color: var(--uniface-page-stack-color-surface, var(--uniface-color-surface));
+    }
+</style>

package/dist/navigation/page-stack/PageStack.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { TransitionConfig } from 'svelte/transition';
+type TransitionFn = (node: Element, params?: any) => TransitionConfig;
+interface Props {
+    style?: string;
+    /** 每一帧 push/pop 的滑入滑出时长（ms）。仅在没有传 transitionParams 时生效；设为 0 关闭动画。 */
+    transitionDuration?: number;
+    /**
+     * 换成任意 svelte/transition 函数（fly/fade/scale/slide...）或自定义的过渡函数。
+     * 默认是从右侧滑入的 fly，效果同 transitionParams 未设置时的 {x:'100%', duration:transitionDuration, easing:cubicOut}。
+     */
+    transition?: TransitionFn;
+    /** 传给 transition 函数的参数；一旦提供，会完全替代基于 transitionDuration 生成的默认参数。 */
+    transitionParams?: Record<string, any>;
+    /** 根页面（初始内容，depth = 0） */
+    children?: Snippet;
+}
+declare const PageStack: import("svelte").Component<Props, {
+    push: <R = any>(component: any, props?: Record<string, any>) => Promise<R>;
+    pop: (result?: any) => void;
+    reset: () => void;
+}, "">;
+type PageStack = ReturnType<typeof PageStack>;
+export default PageStack;

package/dist/navigation/page-stack/PageStackContext.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 每一层被 push 进 PageStack 的页面组件，都可以通过 getPageStack() 拿到这个 API。
+ * 根页面（PageStack 的 children）同样能拿到（depth = 0），但它的 close() 是 no-op——
+ * 根页面不是被 push 进来的，没有"关闭并返回上一层"这个语义。
+ */
+export interface PageStackApi<T = any> {
+    /**
+     * 关闭当前页面。对应这一页 push() 时返回的 Promise 会以 result resolve。
+     * 根页面调用无效果（会在开发模式下打一条 warning）。
+     */
+    close: (result?: T) => void;
+    /**
+     * 在当前页面之上继续 push 一个新页面，和 PageStack 实例上的 push() 是同一个函数——
+     * 多级 drill-down 时不需要一路把最外层的 PageStack 引用传下去。
+     */
+    push: <R = any>(component: any, props?: Record<string, any>) => Promise<R>;
+    /** 当前页面在栈中的深度，根页面为 0，第一层 push 进来的页面为 1，以此类推。 */
+    depth: number;
+}
+export declare function providePageStackContext(api: PageStackApi): void;
+/**
+ * 在被 PageStack push 进来的页面组件（或它的任意后代）里调用，拿到 {close, push, depth}。
+ * 在 PageStack 之外调用返回 undefined。
+ */
+export declare function getPageStack<T = any>(): PageStackApi<T> | undefined;

package/dist/navigation/page-stack/PageStackContext.js

@@ -0,0 +1,12 @@
+import { getContext, setContext, hasContext } from 'svelte';
+const CONTEXT_KEY = 'uniface-page-stack';
+export function providePageStackContext(api) {
+    setContext(CONTEXT_KEY, api);
+}
+/**
+ * 在被 PageStack push 进来的页面组件（或它的任意后代）里调用，拿到 {close, push, depth}。
+ * 在 PageStack 之外调用返回 undefined。
+ */
+export function getPageStack() {
+    return hasContext(CONTEXT_KEY) ? getContext(CONTEXT_KEY) : undefined;
+}

package/dist/navigation/page-stack/PageStackFrame.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {providePageStackContext} from './PageStackContext';
+
+    interface Props {
+        id: string;
+        component: any;
+        props: Record<string, any>;
+        depth: number;
+        close: (result?: any) => void;
+        push: <R = any>(component: any, props?: Record<string, any>) => Promise<R>;
+    }
+
+    let {id, component: Comp, props, depth, close, push}: Props = $props();
+
+    // Context identity is fixed for the lifetime of this frame — mirrors
+    // DialogWrapper's getInitialDialogId pattern (overlay/dialog/DialogWrapper.svelte):
+    // later prop changes (e.g. depth staying the same but close/push identity
+    // churning on parent re-render) must not replace what this frame's
+    // descendants already captured via getPageStack().
+    const getInitialContext = () => ({close, push, depth});
+    providePageStackContext(getInitialContext());
+</script>
+
+<Comp {...props}/>

package/dist/navigation/page-stack/PageStackFrame.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    id: string;
+    component: any;
+    props: Record<string, any>;
+    depth: number;
+    close: (result?: any) => void;
+    push: <R = any>(component: any, props?: Record<string, any>) => Promise<R>;
+}
+declare const PageStackFrame: import("svelte").Component<Props, {}, "">;
+type PageStackFrame = ReturnType<typeof PageStackFrame>;
+export default PageStackFrame;