@ticatec/uniface-element 5.0.0 → 5.0.2

package/dist/form/options_select/OptionsSelect.svelte.d.ts

@@ -1,20 +1,42 @@
 import type CommonPickerProps from "../common_editor/CommonPickerProps";
-interface Props extends CommonPickerProps {
-    emptyText?: string;
-    value: any;
-    options: Array<any>;
-    keyField?: string;
-    textField?: string;
-    menu$height?: number;
-    disableOptions?: Array<string>;
-    hideOptions?: Array<string>;
-    itemRender?: any;
-    filterPlaceholder?: string;
-    filterFunction?: (option: any, keyword: string) => boolean;
-    noResultsText?: string;
+declare function $$render<Option extends Record<string, any> = any>(): {
+    props: CommonPickerProps & {
+        emptyText?: string;
+        value: any;
+        options: Array<Option>;
+        keyField?: string;
+        textField?: string;
+        menu$height?: number;
+        disableOptions?: Array<string>;
+        hideOptions?: Array<string>;
+        itemRender?: any;
+        filterPlaceholder?: string;
+        filterFunction?: (option: Option, keyword: string) => boolean;
+        noResultsText?: string;
+    };
+    exports: {
+        focus: () => void;
+    };
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Option extends Record<string, any> = any> {
+    props(): ReturnType<typeof $$render<Option>>['props'];
+    events(): ReturnType<typeof $$render<Option>>['events'];
+    slots(): ReturnType<typeof $$render<Option>>['slots'];
+    bindings(): "value";
+    exports(): {
+        focus: () => void;
+    };
 }
-declare const OptionsSelect: import("svelte").Component<Props, {
-    focus: () => void;
-}, "value">;
-type OptionsSelect = ReturnType<typeof OptionsSelect>;
+interface $$IsomorphicComponent {
+    new <Option extends Record<string, any> = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Option>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Option>['props']>, ReturnType<__sveltets_Render<Option>['events']>, ReturnType<__sveltets_Render<Option>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Option>['bindings']>;
+    } & ReturnType<__sveltets_Render<Option>['exports']>;
+    <Option extends Record<string, any> = any>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const OptionsSelect: $$IsomorphicComponent;
+type OptionsSelect<Option extends Record<string, any> = any> = InstanceType<typeof OptionsSelect<Option>>;
 export default OptionsSelect;

package/dist/form/prompts_text_editor/PromptsTextEditor.svelte

@@ -50,6 +50,13 @@
         e.preventDefault();
     };
 
+    const handleHintKeyDown = (item: string) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleHintClick(item)(e as unknown as MouseEvent);
+        }
+    };
+
 
 
     const clear = () => {
@@ -67,13 +74,14 @@
     <input bind:this={editor} bind:value {disabled} {readonly} {placeholder} {...eventHandlers}/>
 
     {#snippet popupLayer()}
-        <div class="options-popover" style={mh}>
+        <div class="options-popover" style={mh} role="listbox">
             {#each words as word}
                 <div
                         class="option-item"
                         style="padding-left: 12px; padding-right: 12px"
                         onclick={handleHintClick(word)}
-                        aria-hidden="true"
+                        onkeydown={handleHintKeyDown(word)}
+                        role="option" tabindex="0" aria-selected={word === value}
                 >
                     <span>{word}</span>
                 </div>

package/dist/form/radio_button/RadioButton.svelte

@@ -72,13 +72,6 @@
   text-overflow: ellipsis;
   color: var(--uniface-checkbox-text-color);
 }
-.uniface-radio-button label {
-  display: inline-block;
-  width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  cursor: pointer;
-}
 .uniface-radio-button > span {
   line-height: var(--uniface-checkbox-size);
   padding-left: var(--uniface-checkbox-label-padding-left);
@@ -107,6 +100,7 @@
   --disabled-inner: var(--uniface-checkbox-checkmark-color-disabled);
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   height: var(--uniface-checkbox-size);
   width: var(--uniface-checkbox-size);
   outline: none;
@@ -180,4 +174,4 @@
 .uniface-radio-button *::before,
 .uniface-radio-button *::after {
   box-sizing: inherit;
-}</style>
+}</style>

package/dist/form/switch/Switch.svelte

@@ -24,10 +24,10 @@
 </script>
 
 <div class="switch-box">
-    <label class="switch" class:readonly class:disabled aria-hidden="true" onclick={toggleSwitch}>
-        <input type="checkbox" bind:checked={value}>
-        <span class="slider"></span>
-        <span class="text">{value ? uncheckLabel : checkLabel}</span>
+    <label class="switch" class:readonly class:disabled>
+        <input type="checkbox" bind:checked={value} disabled={disabled} aria-readonly={readonly} onclick={toggleSwitch}>
+        <span class="slider" aria-hidden="true"></span>
+        <span class="text" aria-hidden="true">{value ? uncheckLabel : checkLabel}</span>
     </label>
 </div>
 

package/dist/form/text_editor/TextEditor.svelte

@@ -69,7 +69,7 @@
     }
 
     let input$ = $derived(prefixFilter(restProps, 'input$', excludeAttrs));
-    let eventHandlers = filterProps(restProps, keyboardAttrs);
+    let eventHandlers = $derived(filterProps(restProps, keyboardAttrs));
 
     const clear = () => {
         value = undefined;
@@ -83,4 +83,4 @@
               {error}>
     <input bind:this={editor} {...input$} {placeholder} {...eventHandlers}
            oninput={handleInput} onchange={handleChange} bind:value/>
-</CommonEditor>
+</CommonEditor>

package/dist/form/unit-number-editor/UnitNumberEditor.svelte

@@ -100,6 +100,13 @@
         e.preventDefault();
     };
 
+    const handleUnitKeyDown = (item: UnitOption) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleUnitClick(item)(e as unknown as MouseEvent);
+        }
+    };
+
     //
     // const handlePopupClose = () => {
     //     showPopup = false;
@@ -180,10 +187,11 @@
     />
 
     {#snippet popupLayer()}
-        <div class="options-popover" style={mh}>
+        <div class="options-popover" style={mh} role="listbox">
             {#each units as op}
                 <div class="option-item"
-                     onclick={handleUnitClick(op)} aria-hidden="true">
+                     onclick={handleUnitClick(op)} onkeydown={handleUnitKeyDown(op)}
+                     role="option" tabindex="0" aria-selected={op.code === unitCode}>
                     <span>{op.text ?? op.code}</span>
                 </div>
             {/each}

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,
@@ -44,7 +46,10 @@
 
 </script>
 
+<!-- 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/split/Split.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
+    import {onDestroy} from 'svelte';
 
     interface Props {
         direction?: "horizontal" | "vertical";
@@ -76,6 +76,22 @@
         }
     };
 
+    const resizeWithKeyboard = (event: KeyboardEvent) => {
+        if (fixed || !bindingPanel) return;
+        const decreaseKey = direction === 'horizontal' ? 'ArrowUp' : 'ArrowLeft';
+        const increaseKey = direction === 'horizontal' ? 'ArrowDown' : 'ArrowRight';
+        if (event.key !== decreaseKey && event.key !== increaseKey) return;
+
+        event.preventDefault();
+        const directionFactor = event.key === increaseKey ? 1 : -1;
+        const delta = directionFactor * (reverse ? -10 : 10);
+        const currentSize = direction === 'horizontal' ? bindingPanel.clientHeight : bindingPanel.clientWidth;
+        const newSize = Math.max(5, currentSize + delta);
+        if (direction === 'horizontal') bindingPanel.style.height = `${newSize}px`;
+        else bindingPanel.style.width = `${newSize}px`;
+        onResizeEnd?.(newSize);
+    };
+
     // 组件销毁时清理
     onDestroy(() => {
         if (isDragging) {
@@ -85,6 +101,9 @@
 
 </script>
 
+<!-- The separator is intentionally focusable because its arrow-key handler resizes the bound panel. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
     class="uniface-divider {direction}"
     class:fixed
@@ -92,9 +111,10 @@
     role="separator"
     aria-orientation={direction}
     aria-label="Resize handle"
-    tabindex="0"
+    tabindex={fixed ? -1 : 0}
     onmousedown={startDrag}
-/>
+    onkeydown={resizeWithKeyboard}
+></div>
 
 <style>
     .uniface-divider {
@@ -127,4 +147,4 @@
     .uniface-divider:active {
         transition: none;
     }
-</style>
+</style>

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/MenuItem.d.ts

@@ -1,7 +1,9 @@
-import type { IHierarchyData } from "../../lib";
 export default interface MenuItem {
     [key: string]: any;
 }
-export interface MenuNode extends IHierarchyData<MenuItem> {
+export interface MenuNode {
+    item: MenuItem;
+    children?: MenuNode[];
+    expand?: boolean;
 }
 export type OnMenuClick = (item: MenuItem) => void;

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 type="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 type="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>