@ticatec/uniface-element 5.0.0 → 5.0.2

package/dist/data_display/list_box/ListBox.svelte.d.ts

@@ -15,6 +15,10 @@ interface Props {
     selectedList?: Array<any>;
     class?: string;
     item$props?: any;
+    onchange?: OnSelectChange;
+    /**
+     * @deprecated 请使用 onchange；仍受支持以兼容旧调用。
+     */
     onSelectChange?: OnSelectChange;
     onItemDblClick?: OnItemDblClick;
     onItemClick?: OnItemClick;

package/dist/data_display/tree_view/TreeNodeView.svelte

@@ -68,25 +68,41 @@
         await onNodeSelectionChange(node);
     }
 
+    const handleRowKeyDown = async (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            await handleRowClick();
+        }
+    }
+
+    const handleIconKeyDown = async (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            await onToggle();
+        }
+    }
+
     const handleContextMenu = (event: MouseEvent) => {
         onContextMenu?.(event, node);
     }
 </script>
 
 <div class="tree-node" class:expanded style="padding-left: {node.level * 16}px">
-    <div class="node-item" class:selected={isSelected} onclick={handleRowClick} aria-hidden="true"
-         oncontextmenu={handleContextMenu}>
+    <div class="node-item" class:selected={isSelected} onclick={handleRowClick} onkeydown={handleRowKeyDown}
+         oncontextmenu={handleContextMenu} role="treeitem" tabindex="0" aria-selected={isSelected}
+         aria-expanded={isBranch ? expanded : undefined}>
 
         <div class="item-chevron">
             {#if isBranch}
                 {#if loading}
                     <img alt="loading" class="chevron-img" src={iconLoading}/>
                 {:else if chevronIcon}
-                    <span aria-hidden="true" onclick={handleIconClick} class="chevron-btn">
+                    <span role="button" tabindex="0" aria-label={expanded ? 'Collapse' : 'Expand'} onclick={handleIconClick} onkeydown={handleIconKeyDown} class="chevron-btn">
                         {@render chevronIcon({ expanded, loading })}
                     </span>
                 {:else}
-                    <span aria-hidden="true" onclick={handleIconClick} class="chevron-btn default-arrow">
+                    <span role="button" tabindex="0" aria-label={expanded ? 'Collapse' : 'Expand'} onclick={handleIconClick} onkeydown={handleIconKeyDown} class="chevron-btn default-arrow">
                         {expanded ? '▾' : '▸'}
                     </span>
                 {/if}
@@ -202,6 +218,11 @@
                 color: var(--uniface-treeview-item-selected-color, #0061FF);
                 font-weight: 600;
             }
+
+            &:focus-visible {
+                outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+                outline-offset: -2px;
+            }
         }
     }
 </style>

package/dist/data_table/DataTable.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T = any">
     import ContentPanel from "./parts/ContentPanel.svelte";
     import type DataColumn from "./lib/DataColumn";
     import type ActionsColumn from "./lib/ActionsColumn";
@@ -14,17 +14,17 @@
 
     interface Props {
         columns: Array<DataColumn>;
-        actionsColumn?: ActionsColumn | null;
+        actionsColumn?: ActionsColumn<T> | null;
         indicatorColumn?: IndicatorColumn | null;
         rowHeight?: number;
         headerHeight?: number;
-        list: Array<any>;
-        selectedRows?: Array<any>;
+        list: Array<T>;
+        selectedRows?: Array<T>;
         inlineRowHeight?: number;
         rowBorder?: boolean;
         colBorder?: boolean;
         emptyIndicator?: string;
-        getRowFontStyle?: GetRowFontStyle;
+        getRowFontStyle?: GetRowFontStyle<T>;
         style?: string;
     }
 

package/dist/data_table/DataTable.svelte.d.ts

@@ -2,21 +2,41 @@ import type DataColumn from "./lib/DataColumn";
 import type ActionsColumn from "./lib/ActionsColumn";
 import type IndicatorColumn from "./lib/IndicatorColumn";
 import type { GetRowFontStyle } from "../types";
-interface Props {
-    columns: Array<DataColumn>;
-    actionsColumn?: ActionsColumn | null;
-    indicatorColumn?: IndicatorColumn | null;
-    rowHeight?: number;
-    headerHeight?: number;
-    list: Array<any>;
-    selectedRows?: Array<any>;
-    inlineRowHeight?: number;
-    rowBorder?: boolean;
-    colBorder?: boolean;
-    emptyIndicator?: string;
-    getRowFontStyle?: GetRowFontStyle;
-    style?: string;
+declare function $$render<T = any>(): {
+    props: {
+        columns: Array<DataColumn>;
+        actionsColumn?: ActionsColumn<T> | null;
+        indicatorColumn?: IndicatorColumn | null;
+        rowHeight?: number;
+        headerHeight?: number;
+        list: Array<T>;
+        selectedRows?: Array<T>;
+        inlineRowHeight?: number;
+        rowBorder?: boolean;
+        colBorder?: boolean;
+        emptyIndicator?: string;
+        getRowFontStyle?: GetRowFontStyle<T>;
+        style?: string;
+    };
+    exports: {};
+    bindings: "inlineRowHeight" | "selectedRows";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = any> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "inlineRowHeight" | "selectedRows";
+    exports(): {};
 }
-declare const DataTable: import("svelte").Component<Props, {}, "inlineRowHeight" | "selectedRows">;
-type DataTable = ReturnType<typeof DataTable>;
+interface $$IsomorphicComponent {
+    new <T = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = any>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T = any> = InstanceType<typeof DataTable<T>>;
 export default DataTable;

package/dist/data_table/lib/ActionsColumn.d.ts

@@ -1,5 +1,5 @@
 import type { GetRowActions } from "./RowAction";
-export default interface ActionsColumn {
+export default interface ActionsColumn<T = any> {
     /**
      * 宽度
      */
@@ -7,7 +7,7 @@ export default interface ActionsColumn {
     /**
      *
      */
-    getActions: GetRowActions;
+    getActions: GetRowActions<T>;
     /**
      * 对齐方式，默认靠左对齐
      */

package/dist/data_table/lib/DataColumn.d.ts

@@ -33,7 +33,13 @@ export default interface DataColumn {
      */
     formatter?: FormatCell;
     /**
-     * 是否忽略html的转义符
+     * 是否将单元格内容作为可信 HTML 渲染（{@html}），而非纯文本转义。
+     * 仅当 field/formatter 输出为可信标记时才应设为 true。
+     */
+    renderHTML?: boolean;
+    /**
+     * @deprecated 请使用 renderHTML；名称容易被误读为"转义 HTML"，
+     * 实际含义相反——设为 true 会把内容作为可信 HTML 渲染。仍受支持以兼容旧调用。
      */
     escapeHTML?: boolean;
     /**

package/dist/data_table/lib/RowAction.d.ts

@@ -1,11 +1,11 @@
 /**
- *
+ * @template T Row data type. Defaults to `any` so existing untyped usage keeps compiling.
  */
-export type ActionFunction = (item: any) => void;
+export type ActionFunction<T = any> = (item: T) => void;
 /**
  *
  */
-export default interface RowAction {
+export default interface RowAction<T = any> {
     /**
      *
      */
@@ -21,9 +21,9 @@ export default interface RowAction {
     /**
      *
      */
-    callback: ActionFunction;
+    callback: ActionFunction<T>;
 }
 /**
  *
  */
-export type GetRowActions = (item: any) => Array<RowAction>;
+export type GetRowActions<T = any> = (item: T) => Array<RowAction<T>>;

package/dist/data_table/lib/clickOutSide.js

@@ -1,10 +1,11 @@
 export function clickOutside(node) {
     const handleClick = (event) => {
-        // @ts-ignore
-        if (node && !node.contains(event.target) && !event.defaultPrevented) {
-            node.dispatchEvent(
-            // @ts-ignore
-            new CustomEvent('outerClick', node));
+        const target = event.target;
+        if (target instanceof Node && !node.contains(target) && !event.defaultPrevented) {
+            node.dispatchEvent(new CustomEvent('outerClick', {
+                bubbles: true,
+                detail: { originalEvent: event }
+            }));
         }
     };
     document.addEventListener('click', handleClick, true);

package/dist/data_table/parts/FixedHeaderPanel.svelte

@@ -60,7 +60,6 @@
     let startWidth = $state(0);
 
     const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
-        console.log("handleResizeMouseDown", col, event);
         if (col.resizable) {
             resizeCol = col;
             startX = event.clientX;
@@ -89,6 +88,13 @@
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
     }
+
+    const handleHeaderKeyDown = (column: DataColumn) => (e: KeyboardEvent) => {
+        if (column.compareFunction != null && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleCellClick?.(column);
+        }
+    };
 </script>
 
 <div class="header-row" style="height: {headerHeight}px">
@@ -110,10 +116,18 @@
     {/if}
     {#each columns as column, index (index)}
         <div class="fz_col-{index} data-cell" class:sortable={column.compareFunction != null} style="text-align: center">
+            <!-- role/tabindex are only ever both set together (sortable columns);
+                 svelte-check can't verify that pairing statically across the ternary. -->
+            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
             <div
                 class:sortable={column.compareFunction != null}
                 onclick={() => handleCellClick?.(column)}
-                aria-hidden="true"
+                onkeydown={handleHeaderKeyDown(column)}
+                role={column.compareFunction != null ? 'button' : undefined}
+                tabindex={column.compareFunction != null ? 0 : undefined}
+                aria-sort={column.field === orderColumn?.field
+                    ? (orderDirection === OrderDirection.Ascending ? 'ascending' : 'descending')
+                    : undefined}
                 class="vertical-center"
             >
                 <span>{column.text}</span>
@@ -129,7 +143,8 @@
             <div
                 class="header-cell-divider"
                 class:resizer={column.resizable}
-                aria-hidden="true"
+                role={column.resizable ? 'separator' : undefined}
+                aria-orientation={column.resizable ? 'vertical' : undefined}
                 onmousedown={handleResizeMouseDown(column)}
             ></div>
         </div>

package/dist/data_table/parts/FixedRow.svelte

@@ -45,6 +45,14 @@
         e.stopPropagation();
     };
 
+    const handleExpandKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleRowExpand?.(row);
+        }
+    };
+
     const handleSelectChange = (e: Event) => {
         const checked = (e.target as HTMLInputElement).checked;
         handleRowSelectChange?.(rowIndex, checked);
@@ -66,8 +74,9 @@
                 <div class="expand-icon" style="flex: 0 0 auto">
                     <i
                         class={row == expandRow ? 'icon_google_folder' : 'icon_google_folder_open'}
-                        aria-hidden="true"
+                        role="button" tabindex="0" aria-label={row == expandRow ? 'Collapse row' : 'Expand row'}
                         onclick={showInlineData}
+                        onkeydown={handleExpandKeyDown}
                     ></i>
                 </div>
             {/if}

package/dist/data_table/parts/HrefCell.svelte

@@ -20,7 +20,7 @@
         {#if typeof item == 'string'}
             <span>{item}</span>
         {:else}
-            <button class="link-style" onclick={(e) => { e.preventDefault(); item.action(); }}>{item.text}</button>
+            <button type="button" class="link-style" onclick={(e) => { e.preventDefault(); item.action(); }}>{item.text}</button>
         {/if}
     {/each}
 </div>

package/dist/data_table/parts/TableHeaderPanel.svelte

@@ -60,16 +60,31 @@
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
     }
+
+    const handleHeaderKeyDown = (col: DataColumn) => (e: KeyboardEvent) => {
+        if (col.compareFunction != null && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleCellClick?.(col);
+        }
+    };
 </script>
 
 <div class="header-row" style="height: {headerHeight}px">
     <div style="left: {-scrollLeft}px; width: {width}px">
         {#each dataCols ?? [] as col, index (index)}
             <div class="col-{index} data-cell" class:sortable={col.compareFunction != null} class:whitespace={hasWhitespace}>
+                <!-- role/tabindex are only ever both set together (sortable columns);
+                     svelte-check can't verify that pairing statically across the ternary. -->
+                <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
                 <div
                     class:sortable={col.compareFunction != null}
                     onclick={() => handleCellClick?.(col)}
-                    aria-hidden="true"
+                    onkeydown={handleHeaderKeyDown(col)}
+                    role={col.compareFunction != null ? 'button' : undefined}
+                    tabindex={col.compareFunction != null ? 0 : undefined}
+                    aria-sort={col.field === orderColumn?.field
+                        ? (orderDirection === OrderDirection.Ascending ? 'ascending' : 'descending')
+                        : undefined}
                     class="vertical-center"
                 >
                     <span>{col.text}</span>
@@ -85,7 +100,8 @@
                 <div
                     class="header-cell-divider"
                     class:resizer={col.resizable}
-                    aria-hidden="true"
+                    role={col.resizable ? 'separator' : undefined}
+                    aria-orientation={col.resizable ? 'vertical' : undefined}
                     onmousedown={handleResizeMouseDown(col)}
                 ></div>
             </div>

package/dist/data_table/parts/TextCell.svelte

@@ -17,10 +17,10 @@
         return value ?? '';
     });
 
-    let escapeHTML = $derived(column.escapeHTML == true);
+    let renderAsHtml = $derived((column.renderHTML ?? column.escapeHTML) == true);
 </script>
 
-{#if escapeHTML == true}
+{#if renderAsHtml == true}
     {@html text}
 {:else}
     <span>{text}</span>

package/dist/form/attachment_files/AttachmentEditor.svelte

@@ -48,6 +48,7 @@
     let showUpload = $state(false);
 
     const handleFocus = (event: FocusEvent) => {
+        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
         if (!hasFocus) {
             hasFocus = true;
             onfocus?.(event);
@@ -55,6 +56,7 @@
     };
 
     const handleBlur = (event: FocusEvent) => {
+        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
         if (hasFocus && !showUpload) {
             hasFocus = false;
             onblur?.(event);
@@ -101,7 +103,9 @@
     });
 
     export function focus() {
-        containerElement?.focus();
+        containerElement
+            ?.querySelector<HTMLElement>('button, a[href], input:not([tabindex="-1"])')
+            ?.focus();
     }
 
     const canUpload = $derived(!disabled && !readonly && (onUpload != null || uploadFile != null));
@@ -111,21 +115,19 @@
     <div
         bind:this={containerElement}
         class="uniface-attachment-editor"
-        tabindex={disabled || readonly ? -1 : 0}
-        onfocus={handleFocus}
-        onblur={handleBlur}
+        onfocusin={handleFocus}
+        onfocusout={handleBlur}
     >
-        <input tabindex="-1" style="position: relative; left: -1px; width: 1px;"/>
         <div class="files-field">
             {#each files as file (file)}
                 <FileRender {file} {readonly} onRemove={removeFile}/>
             {/each}
+            {#if canUpload}
+                <button type="button" class="editor-action-icon" aria-label="Upload file" onclick={triggerUpload}>
+                    <i class="icon_google_file_upload" aria-hidden="true"></i>
+                </button>
+            {/if}
         </div>
-        {#if canUpload}
-            <div class="editor-action-icon" onclick={triggerUpload}>
-                <i class="icon_google_file_upload" aria-hidden="true"></i>
-            </div>
-        {/if}
     </div>
 </FormEditor>
 
@@ -144,31 +146,34 @@
 <style>
     .uniface-attachment-editor {
         display: flex;
-        flex-direction: row;
-        align-items: center;
         width: 100%;
         outline: none;
     }
 
     .files-field {
-        flex: 1 1 auto;
         display: flex;
         flex-direction: column;
         gap: 4px;
+        width: 100%;
         min-width: 0;
+        height: 96px;
+        overflow-y: auto;
+        box-sizing: border-box;
     }
 
     .editor-action-icon {
         flex: 0 0 auto;
         cursor: pointer;
         padding: 4px;
-        margin-right: 8px;
         border-radius: 4px;
         display: flex;
         align-items: center;
+        border: 0;
+        background: transparent;
+        color: inherit;
     }
 
     .editor-action-icon:hover {
         background-color: rgba(0, 0, 0, 0.05);
     }
-</style>
+</style>

package/dist/form/attachment_files/FileRender.svelte

@@ -44,7 +44,7 @@
         {/if}
     </div>
     {#if !readonly}
-        <button class="remove-btn" onclick={removeFile} aria-label="remove file">
+        <button type="button" class="remove-btn" onclick={removeFile} aria-label="remove file">
             <i class="icon_google_delete" aria-hidden="true"></i>
         </button>
     {/if}

package/dist/form/attachment_files/FileUploadBar.svelte

@@ -12,7 +12,10 @@
         removeFile: (file: any) => void;
     } = $props();
 
-    let status: ProgressStatus = $state(file?.status ?? ProgressStatus.progressing);
+    // The upload object owns subsequent status updates. This value is only the
+    // initial snapshot before the effect installs its update callback.
+    const getInitialStatus = () => file?.status ?? ProgressStatus.progressing;
+    let status: ProgressStatus = $state(getInitialStatus());
     let progress: number = $state(0);
 
     let cancelLabel: string = i18nRes.common.btnCancel.toString();
@@ -60,4 +63,4 @@
             <TextButton size="small" label={removeLabel} onclick={removeUploadFile}/>
         {/if}
     </div>
-</div>
+</div>

package/dist/form/attachment_files/FileUploadPanel.svelte

@@ -29,10 +29,10 @@
     let btnPickup = i18nRes.upload.btnPickup.toString();
 
     let files: Array<UploadFile> = $state([]);
-    let dropZone: any;
     let fileInput: any;
     let interval: any;
     let busy: boolean = $state(false);
+    let dragActive = $state(false);
     let canClose: boolean = $state(false);
 
     $effect(() => {
@@ -60,18 +60,18 @@
     const handleDragOver = (e: DragEvent) => {
         e.preventDefault();
         busy = true;
-        dropZone.classList.add("highlight");
+        dragActive = true;
     }
 
     const handleDragLeave = (e: DragEvent) => {
         e.preventDefault();
         busy = false;
-        dropZone.classList.remove("highlight");
+        dragActive = false;
     }
 
     const handleDrop = (e: DragEvent) => {
         e.preventDefault();
-        dropZone.classList.remove("highlight");
+        dragActive = false;
         handleFiles(e.dataTransfer?.files);
     }
 
@@ -117,8 +117,12 @@
     });
 </script>
 <ModalPopover {canClose} {theme} bind:visible>
-    <div class="uniface-file-upload-panel" bind:this={dropZone} ondragover={handleDragOver} ondragleave={handleDragLeave}
-         ondrop={handleDrop} onclick={handleMouseClick} aria-hidden="true">
+    <!-- onclick only stops propagation to the modal's outside-click handler; the
+         real controls (Button, file input) inside carry their own semantics. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div class="uniface-file-upload-panel" class:highlight={dragActive} ondragover={handleDragOver} ondragleave={handleDragLeave}
+         ondrop={handleDrop} onclick={handleMouseClick} role="group" aria-label={btnPickup}>
         <div class="file-upload-contents">
             <div style="position: absolute; top: 0; width: 0; overflow: hidden">
                 <input bind:this={fileInput} type="file" {accept} multiple={maxFiles > 1} onchange={handleFilePickup}/>
@@ -154,70 +158,4 @@
 }
 .uniface-file-upload-panel.highlight {
   background-color: var(--uniface-upload-panel-highlight-bg, #b3d8ff);
-}
-
-.uniface-attachment-display > div {
-  width: 100%;
-  box-sizing: border-box;
-  line-height: 1.1em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.uniface-attachment-field {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-}
-.uniface-attachment-field .uniface-common-editor {
-  height: 120px;
-}
-.uniface-attachment-field > div {
-  display: flex;
-  flex-direction: row;
-  justify-items: center;
-}
-.uniface-attachment-field .files-field {
-  flex: 1 1 auto;
-  height: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  flex-direction: row;
-  justify-items: flex-start;
-  overflow-x: auto;
-}
-.uniface-attachment-field .files-field .file-icon {
-  position: relative;
-}
-.uniface-attachment-field .files-field .file-icon img {
-  width: 64px;
-  height: 64px;
-}
-.uniface-attachment-field .files-field .file-icon .action-icon {
-  position: absolute;
-  display: none;
-  left: 50%;
-  transform: translateX(-50%);
-  cursor: pointer;
-}
-.uniface-attachment-field .files-field .file-icon .action-icon i:active {
-  position: relative;
-  top: 1px;
-}
-.uniface-attachment-field .files-field .file-icon:hover .action-icon {
-  display: inline-block;
-}
-.uniface-attachment-field .action-dropdown {
-  box-sizing: border-box;
-  margin-top: 4px;
-  margin-right: 4px;
-  line-height: 22px;
-  margin-left: 8px;
-  color: var(--uniface-dropdown-color, #e1e1e1);
-  align-self: flex-start;
-  cursor: pointer;
-}
-.uniface-attachment-field .filled .action-dropdown {
-  color: var(--uniface-secondary-dropdown-color, #b9b9b9);
-}</style>
+}</style>

package/dist/form/cascade_options_select/CascadeOptionSelect.svelte

@@ -65,7 +65,14 @@
         }, 50);
     };
 
-    const mh = $derived(` width: 400px; height: ${menu$height}px`);
+    // Previously a flat "width: 400px" regardless of how many cascade levels
+    // (columns) were actually open — with box$style unset (columns had no
+    // default width of their own before this fix) or with 3+ levels open,
+    // that either squeezed columns illegibly narrow or clipped/scrolled
+    // content that didn't need to. Let the popover grow to fit however many
+    // columns are currently shown, capped so a very deep hierarchy still
+    // scrolls instead of overflowing the viewport.
+    const mh = $derived(`width: max-content; max-width: min(90vw, 700px); height: ${menu$height}px`);
     const textValue = $derived(
         selectedItems.length > 0
             ? selectedItems[selectedItems.length - 1][textField]
@@ -129,7 +136,8 @@
     bind:isOpen
     {theme} {value} {mandatory}
     clear={cleanData}
-    {onfocus} {onblur}>
+    {onfocus} {onblur}
+    autoFit={false}>
     {#snippet popupLayer()}
         <div class="cascade-options-popover" style={mh}>
             <div style="height: 100%; position: relative">