@ticatec/uniface-element 5.0.5 → 5.1.0

package/dist/composite/transfer/Transfer.svelte

@@ -2,8 +2,8 @@
     import ListBox from "../../data_display/list_box";
     import IconButton from "../../general/button/IconButton.svelte";
 
-    import type {FunFilter} from "../../data_display/list_box";
-    import type {TransferData} from "../../types";
+    import type {FilterFn} from "../../data_display/list_box";
+    import type {BeforeTransfer, OnTransfer} from "../../types";
     import i18n, {i18nUtils} from "@ticatec/i18n";
 
 
@@ -14,8 +14,15 @@
         targetList?: Array<any>;
         targetTitle?: string;
         itemRender?: any;
-        filter?: FunFilter | null;
-        onchange?: TransferData;
+        filter?: FilterFn | null;
+        /**
+         * 移动前的否决钩子：返回 false 阻止移动。
+         */
+        beforeTransfer?: BeforeTransfer;
+        /**
+         * 移动完成后的通知。
+         */
+        onchange?: OnTransfer;
         onfocus?: (event: FocusEvent) => void;
         onblur?: (event: FocusEvent) => void;
         footer$style?: string;
@@ -29,6 +36,7 @@
         targetTitle,
         itemRender = null,
         filter = null,
+        beforeTransfer,
         onchange,
         onfocus,
         onblur,
@@ -47,26 +55,33 @@
         if (!transferContainer?.contains(event.relatedTarget as Node | null)) onblur?.(event);
     };
 
+    const allowMove = async (list: Array<any>, direction: "left" | "right"): Promise<boolean> =>
+        beforeTransfer == null || (await beforeTransfer(list, direction)) !== false;
+
     const moveToTarget = async () => {
-        if (sourceSelectedList.length > 0 && await onchange?.(sourceSelectedList, "right")) {
-            targetList = [...targetList, ...sourceSelectedList];
-            sourceList = sourceList.filter(item => sourceSelectedList.indexOf(item) === -1);
+        if (sourceSelectedList.length > 0 && await allowMove(sourceSelectedList, "right")) {
+            const moved = sourceSelectedList;
+            targetList = [...targetList, ...moved];
+            sourceList = sourceList.filter(item => moved.indexOf(item) === -1);
             sourceSelectedList = [];
+            onchange?.(moved, "right");
         }
     }
 
     const moveToSource = async () => {
-        if (targetSelectedList.length > 0 && await onchange?.(targetSelectedList, "left")) {
-            sourceList = [...sourceList, ...targetSelectedList];
-            targetList = targetList.filter(item => targetSelectedList.indexOf(item) === -1);
+        if (targetSelectedList.length > 0 && await allowMove(targetSelectedList, "left")) {
+            const moved = targetSelectedList;
+            sourceList = [...sourceList, ...moved];
+            targetList = targetList.filter(item => moved.indexOf(item) === -1);
             targetSelectedList = [];
+            onchange?.(moved, "left");
         }
     }
 </script>
 
-<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}>
+<div bind:this={transferContainer} class="uniface-transfer-container" {style} onfocusin={handleFocusIn} onfocusout={handleFocusOut}>
+    <ListBox class="list-container" title={sourceTitle} {filter} style="grid-column: 1/2" list={sourceList} selectMode="multiple"
+             bind:selectedItems={sourceSelectedList} {itemRender}>
         {#snippet footer()}
             <div style={footer$style}>
                 <span>{i18nUtils.formatText(i18n.getText('uniface.transfer.selectIndicator'), {
@@ -84,8 +99,8 @@
             <i class="icon_google_navigate_next"></i>
         </IconButton>
     </div>
-    <ListBox class="list-container" title={targetTitle} style="{style}; grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
-             bind:selectedList={targetSelectedList} {itemRender}>
+    <ListBox class="list-container" title={targetTitle} style="grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
+             bind:selectedItems={targetSelectedList} {itemRender}>
         {#snippet footer()}
             <div style={footer$style}>
                 <span>{i18nUtils.formatText(i18n.getText('uniface.transfer.selectIndicator'), {

package/dist/composite/transfer/Transfer.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { FunFilter } from "../../data_display/list_box";
-import type { TransferData } from "../../types";
+import type { FilterFn } from "../../data_display/list_box";
+import type { BeforeTransfer, OnTransfer } from "../../types";
 interface Props {
     style?: string;
     sourceList?: Array<any>;
@@ -7,8 +7,15 @@ interface Props {
     targetList?: Array<any>;
     targetTitle?: string;
     itemRender?: any;
-    filter?: FunFilter | null;
-    onchange?: TransferData;
+    filter?: FilterFn | null;
+    /**
+     * 移动前的否决钩子：返回 false 阻止移动。
+     */
+    beforeTransfer?: BeforeTransfer;
+    /**
+     * 移动完成后的通知。
+     */
+    onchange?: OnTransfer;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     footer$style?: string;

package/dist/composite/transfer/index.d.ts

@@ -1,4 +1,4 @@
 import Transfer from "./Transfer.svelte";
-import type { TransferData } from "../../types";
+import type { BeforeTransfer, OnTransfer } from "../../types";
 export default Transfer;
-export type { TransferData };
+export type { BeforeTransfer, OnTransfer };

package/dist/data_display/accordion/Accordion.svelte

@@ -6,7 +6,8 @@
     interface Props {
         style?: string;
         compact?: boolean;
-        accordions?: AccordionItem[];
+        /** 折叠项列表 */
+        items?: AccordionItem[];
         exclusive?: boolean;
         theme?: string;
     }
@@ -14,18 +15,18 @@
     let {
         style = '',
         compact = false,
-        accordions = [],
+        items = [],
         exclusive = false,
-        theme = 'theme-light'
+        theme
     }: Props = $props();
 
     let openSet = $state(new Set<AccordionItem>());
     let activeItem = $state<AccordionItem | null>(null);
 
     onMount(() => {
-        if (exclusive && activeItem == null && accordions.length > 0) {
-            activeItem = accordions[0];
-            openSet.add(accordions[0]);
+        if (exclusive && activeItem == null && items.length > 0) {
+            activeItem = items[0];
+            openSet.add(items[0]);
         }
     });
 
@@ -47,11 +48,11 @@
     };
 </script>
 
-<div class="uniface-accordion-panel {theme}" class:compact {style}>
-    {#each accordions as accordion}
+<div class="uniface-accordion-panel" class:compact {style} data-theme={theme}>
+    {#each items as accordion}
         <AccordionItemView
             title={accordion.title}
-            isOpen={openSet.has(accordion)}
+            expanded={openSet.has(accordion)}
             {exclusive}
             {compact}
             onclick={handleAccordionClick(accordion)}

package/dist/data_display/accordion/Accordion.svelte.d.ts

@@ -2,7 +2,8 @@ import type AccordionItem from './AccordionItem';
 interface Props {
     style?: string;
     compact?: boolean;
-    accordions?: AccordionItem[];
+    /** 折叠项列表 */
+    items?: AccordionItem[];
     exclusive?: boolean;
     theme?: string;
 }

package/dist/data_display/accordion/AccordionItemView.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         title: string;
-        isOpen?: boolean;
+        expanded?: boolean;
         onclick?: (event: MouseEvent) => void;
         header?: Snippet;
         exclusive?: boolean;
@@ -13,7 +13,7 @@
 
     let {
         title = '',
-        isOpen = false,
+        expanded = false,
         onclick = undefined,
         header = undefined,
         exclusive = false,
@@ -43,7 +43,7 @@
         class:compact
         role="button"
         tabindex="0"
-        aria-expanded={isOpen}
+        aria-expanded={expanded}
         onclick={handleClick}
         onkeydown={handleKeyDown}
     >
@@ -55,16 +55,16 @@
             </div>
             <div class="icon">
                 {#if exclusive}
-                    {#if isOpen}
+                    {#if expanded}
                         <i class="icon_google_folder_open"></i>
                     {/if}
                 {:else}
-                    <i class={isOpen ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}></i>
+                    <i class={expanded ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}></i>
                 {/if}
             </div>
         {/if}
     </div>
-    {#if isOpen && children}
+    {#if expanded && children}
         <div class="content" class:compact>
             {@render children()}
         </div>

package/dist/data_display/accordion/AccordionItemView.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     title: string;
-    isOpen?: boolean;
+    expanded?: boolean;
     onclick?: (event: MouseEvent) => void;
     header?: Snippet;
     exclusive?: boolean;

package/dist/data_display/accordion/README.md

@@ -1,5 +1,7 @@
 # Accordion
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `accordions` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A vertically stacked set of expandable panels. Each panel has a clickable header and a collapsible content area.
 
 > Svelte 5 component. Content is passed as **Snippets** (not JSX, not Svelte 4 slots).
@@ -23,7 +25,7 @@ npm install @ticatec/uniface-element
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `accordions` | `AccordionItem[]` | `[]` | Items to render |
+| `items` | `AccordionItem[]` | `[]` | Items to render |
 | `exclusive` | `boolean` | `false` | When `true`, only one panel open at a time. The first item auto-opens on mount. Icon switches to folder/folder-open style |
 | `compact` | `boolean` | `false` | Reduces header and content padding |
 | `style` | `string` | `''` | Inline CSS on the root container |
@@ -61,7 +63,7 @@ interface AccordionItem {
   <div>Content for section 2</div>
 {/snippet}
 
-<Accordion accordions={items} />
+<Accordion items={items} />
 ```
 
 > The snippet must be defined at the **top level of the module script** (or passed via a variable) — not inlined inside the array literal. Inline arrow functions returning JSX like `() => <div>...</div>` are not valid Svelte.
@@ -69,7 +71,7 @@ interface AccordionItem {
 ### Exclusive mode — single open panel
 
 ```svelte
-<Accordion accordions={items} exclusive />
+<Accordion items={items} exclusive />
 ```
 
 In `exclusive` mode:
@@ -80,7 +82,7 @@ In `exclusive` mode:
 ### Compact
 
 ```svelte
-<Accordion accordions={items} compact style="max-width: 600px; margin: 0 auto;" />
+<Accordion items={items} compact style="max-width: 600px; margin: 0 auto;" />
 ```
 
 ## Styling

package/dist/data_display/accordion/README_CN.md

@@ -1,5 +1,7 @@
 # Accordion 手风琴
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `accordions` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 一组垂直堆叠、可展开/折叠的面板。每个面板有可点击的标题和可折叠的内容区。
 
 > Svelte 5 组件。内容通过 **Snippet** 传入（不是 JSX，也不是 Svelte 4 slot）。
@@ -23,7 +25,7 @@ npm install @ticatec/uniface-element
 
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|--------|------|
-| `accordions` | `AccordionItem[]` | `[]` | 要渲染的项 |
+| `items` | `AccordionItem[]` | `[]` | 要渲染的项 |
 | `exclusive` | `boolean` | `false` | 为 `true` 时同一时刻只能展开一个面板，第一项在挂载时自动展开，图标改为 文件夹/打开文件夹 样式 |
 | `compact` | `boolean` | `false` | 缩小标题和内容的内边距 |
 | `style` | `string` | `''` | 根容器的内联 CSS |
@@ -61,7 +63,7 @@ interface AccordionItem {
   <div>第二部分的内容</div>
 {/snippet}
 
-<Accordion accordions={items} />
+<Accordion items={items} />
 ```
 
 > snippet 必须定义在 **模块顶层**（或通过变量传入），不能在数组字面量里直接写 `() => <div>...</div>` —— 那不是合法的 Svelte 语法。
@@ -69,7 +71,7 @@ interface AccordionItem {
 ### exclusive 模式 —— 只展开一个
 
 ```svelte
-<Accordion accordions={items} exclusive />
+<Accordion items={items} exclusive />
 ```
 
 `exclusive` 模式下：
@@ -80,7 +82,7 @@ interface AccordionItem {
 ### 紧凑
 
 ```svelte
-<Accordion accordions={items} compact style="max-width: 600px; margin: 0 auto;" />
+<Accordion items={items} compact style="max-width: 600px; margin: 0 auto;" />
 ```
 
 ## 样式定制

package/dist/data_display/card/Card.svelte

@@ -11,14 +11,16 @@
         actions?: Array<CardAction>;
         variant?: 'plain' | '3d';
         data?: any;
-        headerBar?: Snippet;
+        header?: Snippet;
         children?: Snippet;
         theme?: string;
         /** 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */
-        actionsAlign?: CardActionsAlign;
+        /** 动作栏对齐方式 */
+        actions$align?: CardActionsAlign;
         /** 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' */
         actionsGap?: string;
-        contentStyle?: string;
+        /** 内容区内联样式 */
+        content$style?: string;
     }
 
     let {
@@ -27,12 +29,12 @@
         actions = [],
         variant = 'plain',
         data = null,
-        headerBar,
+        header,
         children,
-        theme = "",
-        actionsAlign = 'distribute',
+        theme,
+        actions$align = 'distribute',
         actionsGap,
-        contentStyle = ''
+        content$style = '',
     }: Props = $props();
 </script>
 
@@ -42,18 +44,18 @@
             <div class="card-header">
                 <CardHeader {title}/>
             </div>
-        {:else if headerBar}
+        {:else if header}
             <div class="card-header">
-                {@render headerBar()}
+                {@render header()}
             </div>
         {/if}
-        <div class="card-content" style={contentStyle}>
+        <div class="card-content" style={content$style}>
             {#if children}
                 {@render children()}
             {/if}
         </div>
         {#if actions && actions.length > 0}
-            <CommonCardActionBar {actions} {data} align={actionsAlign} gap={actionsGap}/>
+            <CommonCardActionBar {actions} {data} align={actions$align} gap={actionsGap}/>
         {/if}
     </div>
 </div>

package/dist/data_display/card/Card.svelte.d.ts

@@ -7,14 +7,16 @@ interface Props {
     actions?: Array<CardAction>;
     variant?: 'plain' | '3d';
     data?: any;
-    headerBar?: Snippet;
+    header?: Snippet;
     children?: Snippet;
     theme?: string;
     /** 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */
-    actionsAlign?: CardActionsAlign;
+    /** 动作栏对齐方式 */
+    actions$align?: CardActionsAlign;
     /** 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' */
     actionsGap?: string;
-    contentStyle?: string;
+    /** 内容区内联样式 */
+    content$style?: string;
 }
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/data_display/card/CardAction.d.ts

@@ -1,5 +1,10 @@
-export type ActionCallback = (data: any) => void;
+import type { ActionHandler } from "../../types";
+export type { ActionHandler };
 export default interface CardAction {
+    /**
+     * 显示文字（图标动作可省略，用 tooltip 说明）
+     */
+    label?: string;
     /**
      * 使用icon字体
      */
@@ -19,7 +24,7 @@ export default interface CardAction {
     /**
      *
      */
-    callback: ActionCallback;
+    handler: ActionHandler;
 }
 /**
  * 操作栏图标的排布方式：

package/dist/data_display/card/CommonCardActionBar.svelte

@@ -18,7 +18,7 @@
         actions,
         color = null,
         data,
-        theme = "",
+        theme,
         align = 'distribute',
         gap
     }: Props = $props();
@@ -30,7 +30,7 @@
     const handleActionClick = (action: CardAction) => async (e: MouseEvent) => {
         if (clickEnable && !action.disabled) {
             clickEnable = false;
-            action.callback?.(data);
+            action.handler?.(data);
             await utils.sleep(0.5);
             clickEnable = true;
         }

package/dist/data_display/card/README.md

@@ -1,8 +1,10 @@
 # Card
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `actionsAlign`, `contentStyle` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A content container with optional title bar (or custom header snippet), body, and an action bar at the bottom.
 
-> Svelte 5 component. Custom header is passed as the `headerBar` snippet; body content is the default children.
+> Svelte 5 component. Custom header is passed as the `header` snippet; body content is the default children.
 
 ## Installation
 
@@ -23,15 +25,15 @@ npm install @ticatec/uniface-element
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `title` | `string` | `''` | Plain-text title rendered by `CardHeader`. Single-line, truncated with an ellipsis (native tooltip shows the full text) when it overflows. If empty and `headerBar` is provided, the custom snippet is used instead |
-| `headerBar` | `Snippet` | `undefined` | Custom header content (takes over when `title` is empty) |
+| `title` | `string` | `''` | Plain-text title rendered by `CardHeader`. Single-line, truncated with an ellipsis (native tooltip shows the full text) when it overflows. If empty and `header` is provided, the custom snippet is used instead |
+| `header` | `Snippet` | `undefined` | Custom header content (takes over when `title` is empty) |
 | `actions` | `CardAction[]` | `[]` | Action bar items rendered at the bottom. Empty array → no footer |
 | `data` | `any` | `null` | Passed as the argument to each action's `callback(data)` |
-| `actionsAlign` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | How action icons are laid out — see below |
+| `actions$align` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | How action icons are laid out — see below |
 | `actionsGap` | `string` | `undefined` | Fixed spacing between icons for `'center'`/`'left'`/`'right'` (e.g. `'16px'`); falls back to `--uniface-spacing-actionbar` |
 | `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` adds a box-shadow to lift the card |
 | `style` | `string` | `''` | Inline CSS on the root |
-| `contentStyle` | `string` | `''` | Inline CSS on the body wrapper (`.card-content`) |
+| `content$style` | `string` | `''` | Inline CSS on the body wrapper (`.card-content`) |
 | `theme` | `string` | `''` | Theme value, exposed as `data-theme` on the root for scoped CSS |
 | `children` | `Snippet` | `undefined` | Card body |
 
@@ -62,11 +64,11 @@ interface CardAction {
 ### Custom header snippet
 
 ```svelte
-<Card {headerBar}>
+<Card {header}>
   <p>Body</p>
 </Card>
 
-{#snippet headerBar()}
+{#snippet header()}
   <header style="display:flex; align-items:center; gap:8px;">
     <i class="icon_google_star"></i>
     <strong>Custom title</strong>
@@ -97,13 +99,13 @@ interface CardAction {
 
 ### Action bar layout
 
-With few actions, `justify-content: space-between` (the old, fixed behavior) pushes them to opposite edges — two icons end up one at the far left, one at the far right. `actionsAlign` controls this:
+With few actions, `justify-content: space-between` (the old, fixed behavior) pushes them to opposite edges — two icons end up one at the far left, one at the far right. `actions$align` controls this:
 
 - `'distribute'` (default) — the row is split into as many equal-width slots as there are actions, each icon centered in its own slot. Equivalent to `justify-content: space-around`; icons never get pushed all the way to the edges regardless of count.
 - `'center'` / `'left'` / `'right'` — icons keep a fixed gap (`actionsGap`, default `--uniface-spacing-actionbar`) and the whole group is aligned as a block within the footer.
 
 ```svelte
-<Card title="Item Details" {actions} data={cardData} actionsAlign="center" actionsGap="24px">
+<Card title="Item Details" {actions} data={cardData} actions$align="center" actionsGap="24px">
   ...
 </Card>
 ```

package/dist/data_display/card/README_CN.md

@@ -1,8 +1,10 @@
 # Card 卡片
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `actionsAlign`, `contentStyle` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 内容容器，可选标题栏（或自定义 header snippet）、内容体，以及底部操作栏。
 
-> Svelte 5 组件。自定义标题通过 `headerBar` snippet 传入；内容体就是默认的 children。
+> Svelte 5 组件。自定义标题通过 `header` snippet 传入；内容体就是默认的 children。
 
 ## 安装
 
@@ -23,15 +25,15 @@ npm install @ticatec/uniface-element
 
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|--------|------|
-| `title` | `string` | `''` | 纯文本标题，由 `CardHeader` 渲染。默认单行显示，超出宽度会用省略号截断（原生 tooltip 显示完整文字）。为空且传了 `headerBar` 时改用自定义 snippet |
-| `headerBar` | `Snippet` | `undefined` | 自定义标题内容（`title` 为空时生效） |
+| `title` | `string` | `''` | 纯文本标题，由 `CardHeader` 渲染。默认单行显示，超出宽度会用省略号截断（原生 tooltip 显示完整文字）。为空且传了 `header` 时改用自定义 snippet |
+| `header` | `Snippet` | `undefined` | 自定义标题内容（`title` 为空时生效） |
 | `actions` | `CardAction[]` | `[]` | 底部操作栏。空数组 → 不渲染底栏 |
 | `data` | `any` | `null` | 作为参数传给每个 action 的 `callback(data)` |
-| `actionsAlign` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | 操作图标的排布方式，见下文 |
+| `actions$align` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | 操作图标的排布方式，见下文 |
 | `actionsGap` | `string` | `undefined` | `'center'`/`'left'`/`'right'` 模式下图标之间的固定间距（比如 `'16px'`），不设则回退到 `--uniface-spacing-actionbar` |
 | `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` 加盒阴影让卡片浮起来 |
 | `style` | `string` | `''` | 根节点的内联 CSS |
-| `contentStyle` | `string` | `''` | 内容区域包裹层（`.card-content`）的内联 CSS |
+| `content$style` | `string` | `''` | 内容区域包裹层（`.card-content`）的内联 CSS |
 | `theme` | `string` | `''` | 主题值，作为 `data-theme` 写到根节点上方便做作用域 CSS |
 | `children` | `Snippet` | `undefined` | 卡片内容体 |
 
@@ -62,11 +64,11 @@ interface CardAction {
 ### 自定义 header snippet
 
 ```svelte
-<Card {headerBar}>
+<Card {header}>
   <p>内容</p>
 </Card>
 
-{#snippet headerBar()}
+{#snippet header()}
   <header style="display:flex; align-items:center; gap:8px;">
     <i class="icon_google_star"></i>
     <strong>自定义标题</strong>
@@ -97,13 +99,13 @@ interface CardAction {
 
 ### 操作栏排布方式
 
-当图标数量比较少时，`justify-content: space-between`（旧的固定行为）会把它们推到两端 —— 两个图标就变成一个在最左，一个在最右。`actionsAlign` 用来控制这个行为：
+当图标数量比较少时，`justify-content: space-between`（旧的固定行为）会把它们推到两端 —— 两个图标就变成一个在最左，一个在最右。`actions$align` 用来控制这个行为：
 
 - `'distribute'`（默认）—— 把整行按图标数量平分成若干等宽格子，每个图标在自己的格子里居中。等价于 `justify-content: space-around`；不管图标数量多少，都不会被拉到两端。
 - `'center'` / `'left'` / `'right'` —— 图标之间保持固定间距（`actionsGap`，默认回退到 `--uniface-spacing-actionbar`），整组图标作为一个整体在底栏里居中 / 左对齐 / 右对齐。
 
 ```svelte
-<Card title="项目详情" {actions} data={cardData} actionsAlign="center" actionsGap="24px">
+<Card title="项目详情" {actions} data={cardData} actions$align="center" actionsGap="24px">
   ...
 </Card>
 ```

package/dist/data_display/card/index.d.ts

@@ -1,4 +1,5 @@
 import Card from "./Card.svelte";
 import type CardAction from "./CardAction";
+import type { ActionHandler, CardActionsAlign } from "./CardAction";
 export default Card;
-export type { CardAction };
+export type { CardAction, ActionHandler, CardActionsAlign };

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

@@ -6,10 +6,4 @@ export default interface Column {
     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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import {onMount, tick} from 'svelte';
     import DataRow from "./DataRow.svelte";
-    import {type RowClickHandler, type TableOptions} from "./TableOptions";
+    import {type OnRowClick, type TableOptions} from "./TableOptions";
     import utils from "./utils";
     import type Column from "./Column";
 
@@ -10,7 +10,8 @@
         columns: Array<Column>;
         autoScroll?: boolean;
         scrollInterval?: number;
-        rowClickHandler?: RowClickHandler | null;
+        /** 行点击回调 */
+        onRowClick?: OnRowClick | null;
         options?: TableOptions;
         style?: string;
         class?: string;
@@ -23,7 +24,7 @@
         columns,
         autoScroll = false,
         scrollInterval = 2000,
-        rowClickHandler = null,
+        onRowClick = null,
         options = {},
         style = '',
         class: className = '',
@@ -122,7 +123,7 @@
     });
 
     const handleRowClick = (row: any) => () => {
-        rowClickHandler?.(row);
+        onRowClick?.(row);
     }
 
     const handleTableFocus = (event: FocusEvent) => {
@@ -133,7 +134,7 @@
         onblur?.(event);
     }
 
-    export function setFocus() {
+    export function focus() {
         const firstRow = tableContainer?.querySelector('.table-body .table-row');
         if (firstRow) {
             setTimeout(() => {