@ticatec/uniface-element 5.0.0 → 5.0.2

package/dist/base-calendar/MonthPickupPanel.svelte

@@ -2,31 +2,39 @@
     interface Props {
         value: number;
         months: Array<string>;
-        onClick?: (event: MouseEvent) => void;
+        onclick?: (event: MouseEvent) => void;
     }
 
     let {
         value = $bindable<number>(),
         months,
-        onClick
+        onclick
     }: Props = $props();
 
     const handleMonthClick = (m: number) => (e: MouseEvent) => {
         if (m !== value) {
             value = m;
-            onClick?.(e);
+            onclick?.(e);
         } else {
             e.stopPropagation();
             e.preventDefault();
         }
     };
+
+    const handleKeyActivate = (m: number) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleMonthClick(m)(e as unknown as MouseEvent);
+        }
+    };
 </script>
-<div class="uniface-month-pickup-panel" onclick={onClick} aria-hidden="true">
+<div class="uniface-month-pickup-panel" onclick={onclick} role="presentation">
     <div>
         <div style="display: grid; grid-template-columns: auto auto auto; overflow: hidden; width: 100%">
             {#each months as month, idx}
-                <div class="month-block" class:selected={idx === value} aria-hidden="true"
-                     onclick={handleMonthClick(idx)}>
+                <div class="month-block" class:selected={idx === value}
+                     role="button" tabindex="0" aria-current={idx === value ? 'date' : undefined}
+                     onclick={handleMonthClick(idx)} onkeydown={handleKeyActivate(idx)}>
                     <span>{month}</span>
                 </div>
             {/each}
@@ -85,4 +93,9 @@
     .month-block.selected:hover {
         background-color: unset;
     }
+
+    .month-block:focus-visible {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
 </style>

package/dist/base-calendar/MonthPickupPanel.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     value: number;
     months: Array<string>;
-    onClick?: (event: MouseEvent) => void;
+    onclick?: (event: MouseEvent) => void;
 }
 declare const MonthPickupPanel: import("svelte").Component<Props, {}, "value">;
 type MonthPickupPanel = ReturnType<typeof MonthPickupPanel>;

package/dist/base-calendar/MonthlyCalendar.svelte

@@ -94,6 +94,13 @@
             onselect?.(dayjs(new Date(year, month, ad.d)));
         }
     };
+
+    const handleDayKeyDown = (ad: CalendarDay) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleDayClick(ad)();
+        }
+    };
 </script>
 <div class="monthly-calendar" class:border>
     {#each Array(7) as _, idx}
@@ -103,14 +110,18 @@
     {/each}
     {#each days as day, idx}
         <div class="cell calendar-day"
-             aria-hidden="true"
+             role="button" tabindex={day.disabled ? -1 : 0}
+             aria-disabled={day.disabled}
+             aria-current={day.isToday ? 'date' : undefined}
+             aria-pressed={selected.year === day.y && selected.month === day.m && selected.date === day.d}
+             aria-label="{day.y}-{day.m + 1}-{day.d}"
              style="width: {cellWidth}px; height: {cellHeight}px;"
              class:weekend={isWeekend(idx)}
              class:today={day.isToday}
              class:selected={selected.year === day.y && selected.month === day.m && selected.date === day.d}
              class:lastRow={idx > 34}
              class:disabled={day.disabled}
-             onclick={handleDayClick(day)}>
+             onclick={handleDayClick(day)} onkeydown={handleDayKeyDown(day)}>
             <span>{day.d}</span>
             {#if dailyContent}
                 <div>
@@ -200,4 +211,9 @@
     .disabled > span:first-child:hover {
         background-color: unset;
     }
+
+    .calendar-day:focus-visible > span:first-child {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
 </style>

package/dist/base-calendar/YearPickupPanel.svelte

@@ -3,14 +3,14 @@
         year: number;
         maxYear?: number | null;
         minYear?: number | null;
-        onClick?: (event: MouseEvent) => void;
+        onclick?: (event: MouseEvent) => void;
     }
 
     let {
         year = $bindable<number>(),
         maxYear = null,
         minYear = null,
-        onClick
+        onclick
     }: Props = $props();
 
     let offset = $state(6);
@@ -34,18 +34,28 @@
         e.stopPropagation();
         e.preventDefault();
     };
+
+    const handleKeyActivate = (handler: (e: any) => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler(e);
+        }
+    };
 </script>
-<div class="uniface-year-pickup-panel" aria-hidden="true" onclick={onClick}>
+<div class="uniface-year-pickup-panel" onclick={onclick} role="presentation">
     <div>
         <div>
             <div style="text-align: center">
                 <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
-                    <i class="icon_google_keyboard_arrow_up" aria-hidden="true" onclick={showYears(-years)}></i>
+                    <i class="icon_google_keyboard_arrow_up" role="button" tabindex="0" aria-label="Previous years"
+                       onclick={showYears(-years)} onkeydown={handleKeyActivate(showYears(-years))}></i>
                 </div>
             </div>
             <div style="display: grid; grid-template-columns: auto auto auto auto; width: 100%; overflow: hidden">
                 {#each Array(years) as _, i}
-                    <div class="year-block" onclick={handleYearClick(i)} aria-hidden="true"
+                    <div class="year-block" onclick={handleYearClick(i)} onkeydown={handleKeyActivate(handleYearClick(i))}
+                         role="button" tabindex="0" aria-disabled={isDisabled(year - offset + i)}
+                         aria-current={year === year - offset + i ? 'date' : undefined}
                          class:disabled={isDisabled(year - offset + i)}
                          class:selected={year === year - offset + i}>
                         <span>{year - offset + i}</span>
@@ -54,7 +64,8 @@
             </div>
             <div style="text-align: center">
                 <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
-                    <i class="icon_google_keyboard_arrow_down" aria-hidden="true" onclick={showYears(years)}></i>
+                    <i class="icon_google_keyboard_arrow_down" role="button" tabindex="0" aria-label="Next years"
+                       onclick={showYears(years)} onkeydown={handleKeyActivate(showYears(years))}></i>
                 </div>
             </div>
         </div>
@@ -122,4 +133,11 @@
     .year-block.disabled:hover {
         font-weight: unset;
     }
+
+    .year-block:focus-visible,
+    .icon_google_keyboard_arrow_up:focus-visible,
+    .icon_google_keyboard_arrow_down:focus-visible {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
 </style>

package/dist/base-calendar/YearPickupPanel.svelte.d.ts

@@ -2,7 +2,7 @@ interface Props {
     year: number;
     maxYear?: number | null;
     minYear?: number | null;
-    onClick?: (event: MouseEvent) => void;
+    onclick?: (event: MouseEvent) => void;
 }
 declare const YearPickupPanel: import("svelte").Component<Props, {}, "year">;
 type YearPickupPanel = ReturnType<typeof YearPickupPanel>;

package/dist/composite/pagination_panel/PaginationPanel.svelte

@@ -38,6 +38,8 @@
     let pagesOptions = $derived(
         (rowsSet ?? [25, 50, 100]).map(v => ({code: v, text: `${v}`}))
     );
+    // Rendered via {@html} below: generateInfo is a trusted, caller-supplied
+    // renderer (not user input) — same opt-in-HTML boundary as DataColumn#renderHTML.
     let totalText = $derived(
         generateInfo
             ? generateInfo(total, pageCount, pageNo, rowCount)

package/dist/composite/transfer/Transfer.svelte

@@ -38,6 +38,15 @@
 
     let sourceSelectedList: Array<any> = $state([]);
     let targetSelectedList: Array<any> = $state([]);
+    let transferContainer = $state<HTMLDivElement>();
+
+    const handleFocusIn = (event: FocusEvent) => {
+        if (!transferContainer?.contains(event.relatedTarget as Node | null)) onfocus?.(event);
+    };
+
+    const handleFocusOut = (event: FocusEvent) => {
+        if (!transferContainer?.contains(event.relatedTarget as Node | null)) onblur?.(event);
+    };
 
     const moveToTarget = async () => {
         if (sourceSelectedList.length > 0 && await onchange?.(sourceSelectedList, "right")) {
@@ -56,7 +65,7 @@
     }
 </script>
 
-<div class="uniface-transfer-container" {onfocus} {onblur} tabindex="0">
+<div bind:this={transferContainer} class="uniface-transfer-container" onfocusin={handleFocusIn} onfocusout={handleFocusOut}>
     <ListBox class="list-container" title={sourceTitle} {filter} style="{style}; grid-column: 1/2" list={sourceList} selectMode="multiple"
              bind:selectedList={sourceSelectedList} {itemRender}>
         {#snippet footer()}
@@ -96,10 +105,7 @@
   grid-auto-columns: 1fr 60px 1fr;
   column-gap: 16px;
 }
-.uniface-transfer-container .header-container {
-  margin: 10px auto 10px 10px;
-}
-.uniface-transfer-container .list-container {
+.uniface-transfer-container :global(.list-container) {
   height: 100%;
   flex: 1 1 auto;
   overflow: hidden;
@@ -113,4 +119,4 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-}</style>
+}</style>

package/dist/data_display/accordion/Accordion.svelte

@@ -72,7 +72,4 @@
         overflow-y: auto;
     }
 
-    .uniface-accordion-panel.compact {
-        /* Compact mode handled by passing prop to AccordionItemView */
-    }
-</style>
+</style>

package/dist/data_display/card/CommonCardActionBar.svelte

@@ -26,6 +26,13 @@
             clickEnable = true;
         }
     };
+
+    const handleActionKeyDown = (action: CardAction) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleActionClick(action)(e as unknown as MouseEvent);
+        }
+    };
 </script>
 
 <div class="card-action-bar">
@@ -34,18 +41,21 @@
             <i class="action-icon {action.icon}"
                class:disabled={action.disabled}
                data-tip={action.disabled ? undefined : action.tooltip}
-               aria-hidden="true"
+               role="button" tabindex={action.disabled ? -1 : 0}
+               aria-disabled={action.disabled}
+               aria-label={action.tooltip}
                onclick={handleActionClick(action)}
+               onkeydown={handleActionKeyDown(action)}
             ></i>
         {:else if action.img}
-            <img class="card-action-img"
-                 class:disabled={action.disabled}
-                 alt=""
-                 src={action.img}
-                 data-tip={action.disabled ? undefined : action.tooltip}
-                 aria-hidden="true"
-                 onclick={handleActionClick(action)}
-            />
+            <button type="button" class="card-action-img-btn"
+                    class:disabled={action.disabled}
+                    disabled={action.disabled}
+                    data-tip={action.disabled ? undefined : action.tooltip}
+                    aria-label={action.tooltip}
+                    onclick={handleActionClick(action)}>
+                <img class="card-action-img" alt="" src={action.img}/>
+            </button>
         {/if}
 
     {/each}
@@ -89,46 +99,30 @@
     }
 
 
-    .card-action-img {
-        width: var(--action-image-size, var(--uniface-action-image-size));
-        height: var(--action-image-size, var(--uniface-action-image-size));
+    .card-action-img-btn {
+        background: none;
+        border: none;
+        padding: 0;
         cursor: pointer;
+        display: inline-flex;
     }
 
-    .card-action-img:hover {
-    }
-
-    .card-action-img:active {
+    .card-action-img-btn:active {
         position: relative;
         top: 1px;
     }
 
-    .card-action-img.disabled {
+    .card-action-img-btn.disabled {
         cursor: not-allowed;
-        filter: grayscale(100%);
     }
 
-    .action-item.disabled .action-icon:hover {
-        color: var(--disabled-button-text-color, var(--uniface-disabled-button-text-color, #B3BCCA));
-    }
-
-    .action-item.disabled .action-icon:active {
-        position: relative;
-        top: 0;
-    }
-
-    .action-item.disabled .card-action-img {
+    .card-action-img-btn.disabled .card-action-img {
         filter: grayscale(100%);
-        cursor: default;
     }
 
-    .action-item.disabled .card-action-img:hover {
-        width: var(--action-image-size, var(--uniface-action-image-size, 15px));
-        height: var(--action-image-size, var(--uniface-action-image-size, 15px));
+    .card-action-img {
+        width: var(--action-image-size, var(--uniface-action-image-size));
+        height: var(--action-image-size, var(--uniface-action-image-size));
     }
 
-    .action-item.disabled .card-action-img:active {
-        position: relative;
-        top: 0;
-    }
-</style>
+</style>

package/dist/data_display/concise_data_table/Column.d.ts

@@ -5,5 +5,11 @@ export default interface Column {
     align?: "left" | "center" | "right";
     weight?: number;
     formatter?: (value: any) => string;
+    renderHTML?: boolean;
+    /**
+     * @deprecated Use renderHTML instead; "escapeHTML" reads as "this escapes HTML"
+     * when it actually means the opposite — true renders raw, trusted HTML. Still
+     * honored as a fallback for existing callers.
+     */
     escapeHTML?: boolean;
 }

package/dist/data_display/concise_data_table/ConciseListTable.svelte

@@ -215,7 +215,8 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  color: var(--uniface-concise-table-bg, unset);
+  background-color: var(--uniface-concise-table-color-surface);
+  color: var(--uniface-concise-table-color);
 }
 :global .uniface-concise-datatable .table-container {
   display: flex;
@@ -237,7 +238,7 @@
   padding: 2px 4px;
 }
 :global .uniface-concise-datatable .table-header {
-  background-color: #f5f5f5;
+  background-color: var(--uniface-concise-table-header-surface);
   padding: 0;
   flex-shrink: 0;
   z-index: 10;
@@ -265,7 +266,7 @@
   color: var(--uniface-concise-table-row-alter-color, #374151);
 }
 :global .uniface-concise-datatable .table-body-container .table-row:hover {
-  background-color: #f9f9f9;
+  background-color: var(--uniface-concise-table-row-hover-bg);
 }
 :global .uniface-concise-datatable .table-body-container.auto-scroll {
   overflow-y: hidden;

package/dist/data_display/concise_data_table/DataCell.svelte

@@ -14,9 +14,9 @@
     }: Props = $props();
 
     let text = $derived(column.formatter ? column.formatter(data[column.field]) : (data[column.field] ?? ''));
-    // Safe by default: HTML rendering is opt-in only (escapeHTML: true), matching the
-    // semantics of the data_table component's DataColumn#escapeHTML flag.
-    let renderAsHtml = $derived(column.escapeHTML === true);
+    // Safe by default: HTML rendering is opt-in only (renderHTML: true), matching the
+    // semantics of the data_table component's DataColumn#renderHTML flag.
+    let renderAsHtml = $derived((column.renderHTML ?? column.escapeHTML) === true);
 </script>
 
 <div class="data-cell col_{idx}" role="cell">

package/dist/data_display/list_box/ListBox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {tick} from "svelte";
+    import {tick, onDestroy, untrack} from "svelte";
     import SearchBox from "../../form/search_box"
     import type {FunFilter} from "../../types";
     import type {ListLazyLoader} from "../../types";
@@ -22,6 +22,10 @@
         selectedList?: Array<any>;
         class?: string;
         item$props?: any;
+        onchange?: OnSelectChange;
+        /**
+         * @deprecated 请使用 onchange；仍受支持以兼容旧调用。
+         */
         onSelectChange?: OnSelectChange;
         onItemDblClick?: OnItemDblClick;
         onItemClick?: OnItemClick;
@@ -45,6 +49,7 @@
         selectedList = $bindable([]),
         class: className,
         item$props,
+        onchange,
         onSelectChange,
         onItemDblClick,
         onItemClick,
@@ -56,9 +61,11 @@
         loadMoreIndicator
     }: Props = $props();
 
-    let localSelectedItem = $state(selectedItem ?? null);
+    // External values are synchronized by the effects below. Neutral initial values
+    // avoid implying that these props are intentionally captured only once.
+    let localSelectedItem = $state<any>(null);
     let localSelectedList = $state(selectedList ?? []);
-    let localFilterText = $state(filterText ?? '');
+    let localFilterText = $state('');
 
     let hasMore = $state(false);
     let isBusy = $state(false);
@@ -66,7 +73,7 @@
     let filteredList = $state<Array<any>>([]);
 
     let scrollElement: HTMLElement;
-    let searchBox: any;
+    let searchBox = $state<any>();
 
     // Sync external props to local state
     $effect(() => {
@@ -81,12 +88,19 @@
         localFilterText = filterText ?? '';
     });
 
+    // onchange is the canonical name; onSelectChange is kept as a deprecated
+    // alias and fired alongside it for backward compatibility.
+    const notifySelectChange = (item: any) => {
+        onchange?.(item);
+        onSelectChange?.(item);
+    };
+
     const handleItemClick = (item: any) => (e: MouseEvent) => {
         if (readonly == false) {
             if (selectMode == 'single') {
                 if (localSelectedItem != item) {
                     localSelectedItem = item;
-                    onSelectChange?.(item);
+                    notifySelectChange(item);
                 }
             } else {
                 onItemClick?.(item);
@@ -100,6 +114,13 @@
         }
     }
 
+    const handleItemKeyDown = (item: any) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleItemClick(item)(e as unknown as MouseEvent);
+        }
+    }
+
     const doFilter = () => {
         const newList: Array<any> = [];
         list?.forEach(item => {
@@ -113,14 +134,23 @@
         filteredList = newList;
         if (selectMode == 'single') {
             localSelectedItem = null;
-            onSelectChange?.(null);
+            notifySelectChange(null);
         }
     }
 
+    // Guards against out-of-order responses: only the most recently issued
+    // request is allowed to write its result into component state.
+    let lazyLoadSeq = 0;
+    let destroyed = false;
+
     const lazyLoad = async (clean: boolean = true) => {
+        const seq = ++lazyLoadSeq;
         isBusy = true;
         try {
             let result = await lazyLoader?.(localFilterText, pageNo);
+            if (destroyed || seq !== lazyLoadSeq) {
+                return;
+            }
             if (result) {
                 if (clean) {
                     list = result.list;
@@ -131,8 +161,17 @@
                 filteredList = list ?? [];
                 hasMore = result.hasMore;
             }
+        } catch (e) {
+            if (!clean) {
+                // Failed page-2+ fetch: undo the optimistic pageNo increment so a
+                // retry (e.g. re-triggered by scroll) re-requests the same page.
+                pageNo--;
+            }
+            throw e;
         } finally {
-            isBusy = false;
+            if (!destroyed && seq === lazyLoadSeq) {
+                isBusy = false;
+            }
         }
     }
 
@@ -146,12 +185,26 @@
             interval = null;
             pageNo = 1;
             scrollElement.scrollTop = 0;
-            await lazyLoad();
-            await tick();
-            searchBox.focus();
+            try {
+                await lazyLoad();
+            } catch (e) {
+                console.error('ListBox: failed to reload items', e);
+            }
+            if (!destroyed) {
+                await tick();
+                searchBox?.focus();
+            }
         }
     }
 
+    onDestroy(() => {
+        destroyed = true;
+        if (interval != null) {
+            clearInterval(interval);
+            interval = null;
+        }
+    });
+
     const handleCriteriaChange = () => {
         if (lazyLoader != null) {
             if (interval == null) {
@@ -190,15 +243,27 @@
         }
     }
 
+    // untrack: lazyLoad() reads pageNo/isBusy/localFilterText synchronously
+    // before its first await. Without untrack, those reads register as
+    // dependencies of *this* effect, so a later change to pageNo (e.g. from
+    // fetchMore) would re-run this effect and fire a second, unrelated
+    // "initial load" — this must only re-run when the lazyLoader prop itself
+    // changes.
     $effect(() => {
         if (lazyLoader != null) {
-            lazyLoad();
+            untrack(() => {
+                lazyLoad().catch((e) => console.error('ListBox: failed to load items', e));
+            });
         }
     });
 
     const fetchMore = async () => {
         pageNo++;
-        await lazyLoad(false);
+        try {
+            await lazyLoad(false);
+        } catch (e) {
+            console.error('ListBox: failed to load more items', e);
+        }
     }
 
     const handleScroll = () => {
@@ -230,20 +295,25 @@
                        onchange={handleCriteriaChange}/>
         </div>
     {/if}
-    <div class="listbox-content" class:selectable={selectMode==='single'} bind:this={scrollElement} onscroll={handleScroll}>
+    <div class="listbox-content" class:selectable={selectMode==='single'} bind:this={scrollElement} onscroll={handleScroll}
+         role="listbox" aria-multiselectable={selectMode === 'multiple' ? true : undefined}>
         {#if filteredList && ItemRender}
             {#each filteredList as item}
                 {#if selectMode === "multiple"}
-                    <div class="listview-item" style="display: flex; flex-direction: row; align-items: center; gap: 8px">
+                    <div class="listview-item" style="display: flex; flex-direction: row; align-items: center; gap: 8px"
+                         role="option" aria-selected={localSelectedList.indexOf(item) > -1}>
                         <CheckBox style="flex: 0 0 auto; margin-left: 8px" {readonly} value={localSelectedList.indexOf(item) > -1}
                                   onchange={handleSelectionChanged(item)}/>
-                        <div style="flex: 1 1 auto; cursor: pointer" aria-hidden="true" onclick={handleSelectionChanged(item)}>
+                        <div style="flex: 1 1 auto; cursor: pointer" role="button" tabindex="0"
+                             onclick={handleSelectionChanged(item)}
+                             onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleSelectionChanged(item)(); } }}>
                             <ItemRender {readonly} {item} {...item$props}/>
                         </div>
                     </div>
                 {:else }
-                    <div class="listview-item" class:selected={item===localSelectedItem} aria-hidden="true"
-                         ondblclick={handleItemDblClick(item)} onclick={handleItemClick(item)}>
+                    <div class="listview-item" class:selected={item===localSelectedItem}
+                         role="option" aria-selected={item===localSelectedItem} tabindex="0"
+                         ondblclick={handleItemDblClick(item)} onclick={handleItemClick(item)} onkeydown={handleItemKeyDown(item)}>
                         <ItemRender {item} {readonly} selected={item===localSelectedItem}
                                     {...item$props}/>
                     </div>
@@ -277,6 +347,8 @@
         box-sizing: border-box;
         user-select: none;
         border: 1px solid var(--uniface-list-box-border-color);
+        background-color: var(--uniface-list-box-color-surface);
+        color: var(--uniface-list-box-color);
     }
 
     .uniface-listbox.round {
@@ -289,7 +361,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        background-color: #FFFFFF10;
+        background-color: var(--uniface-color-overlay-mask-surface);
     }
 
     .box-header {
@@ -337,10 +409,6 @@
         border-bottom: 1px solid var(--uniface-listbox-separator-color);
     }
 
-    .listbox-content .listview-item.no-border {
-        border-bottom: unset;
-    }
-
     .listbox-content.selectable .listview-item {
         cursor: pointer;
     }
@@ -352,4 +420,9 @@
     .listbox-content.selectable .listview-item.selected {
         background-color: var(--uniface-list-box-selected-surface);
     }
-</style>
+
+    .listbox-content .listview-item:focus-visible {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: -2px;
+    }
+</style>