@ticatec/uniface-element 5.0.1 → 5.0.2

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,20 +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:active {
+    .card-action-img-btn:active {
         position: relative;
         top: 1px;
     }
 
-    .card-action-img.disabled {
+    .card-action-img-btn.disabled {
         cursor: not-allowed;
+    }
+
+    .card-action-img-btn.disabled .card-action-img {
         filter: grayscale(100%);
     }
 
+    .card-action-img {
+        width: var(--action-image-size, var(--uniface-action-image-size));
+        height: var(--action-image-size, var(--uniface-action-image-size));
+    }
+
 </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,
@@ -83,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);
@@ -102,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 => {
@@ -115,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;
@@ -133,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;
+            }
         }
     }
 
@@ -148,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) {
@@ -192,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 = () => {
@@ -232,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>
@@ -279,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 {
@@ -291,7 +361,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        background-color: #FFFFFF10;
+        background-color: var(--uniface-color-overlay-mask-surface);
     }
 
     .box-header {
@@ -350,4 +420,9 @@
     .listbox-content.selectable .listview-item.selected {
         background-color: var(--uniface-list-box-selected-surface);
     }
+
+    .listbox-content .listview-item:focus-visible {
+        outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+        outline-offset: -2px;
+    }
 </style>

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/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>