@ticatec/topside-elements 1.0.6 → 1.1.0

package/dist/data_table/parts/FixedRow.svelte

@@ -4,6 +4,7 @@
     import DataCell from "./DataCell.svelte";
     import type DataColumn from "../lib/DataColumn";
     import type { IndicatorColumn } from "..";
+    import { onRowExpandRequest, type RowEventHandlers, type IsRowExpandable } from "../lib/RowExpansion";
 
     interface Props {
         selectable?: boolean;
@@ -19,6 +20,9 @@
         expandRow?: any;
         rowHeight?: number;
         indicatorColumn?: IndicatorColumn | null;
+        /** 该行是否允许展开（决定是否显示图标） */
+        isExpandable?: IsRowExpandable<TableRow>;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
     let {
@@ -35,8 +39,12 @@
         expandRow = null,
         rowHeight,
         indicatorColumn = null,
+        isExpandable = () => true,
+        rowEvents = null,
     }: Props = $props();
 
+    let showToggle = $derived(expandable && isExpandable(row));
+
     let style = $derived(rowHeight == null ? '' : `height: ${rowHeight}px`);
 
     const showInlineData = (e: MouseEvent) => {
@@ -59,7 +67,16 @@
     };
 </script>
 
-<div class="data-row" class:alternative style="width: 100%; {style}">
+<!-- 行级单击 / 双击展开是鼠标快捷方式；键盘用户通过指示列图标（可聚焦）操作 -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<div
+    class="data-row"
+    class:alternative
+    style="width: 100%; {style}"
+    onclick={(e) => rowEvents?.onRowClick(row, e)}
+    ondblclick={(e) => rowEvents?.onRowDblClick(row, e)}
+    use:onRowExpandRequest={(e) => rowEvents?.onExpandRequest(row, e)}
+>
     {#if indicatorColumn}
         <div class="data-cell indicator-cell" style="width: {indicatorColumn.width}px">
             {#if selectable}
@@ -70,7 +87,7 @@
                     <span>{rowNo}</span>
                 </div>
             {/if}
-            {#if expandable}
+            {#if showToggle}
                 <div class="expand-icon" style="flex: 0 0 auto">
                     <i
                         class={row == expandRow ? 'icon_google_folder' : 'icon_google_folder_open'}

package/dist/data_table/parts/FixedRow.svelte.d.ts

@@ -2,6 +2,7 @@ import type TableRow from "./TableRow";
 import type { OnRowExpand } from "../UniDataTable";
 import type DataColumn from "../lib/DataColumn";
 import type { IndicatorColumn } from "..";
+import { type RowEventHandlers, type IsRowExpandable } from "../lib/RowExpansion";
 interface Props {
     selectable?: boolean;
     rowNo: number;
@@ -16,6 +17,9 @@ interface Props {
     expandRow?: any;
     rowHeight?: number;
     indicatorColumn?: IndicatorColumn | null;
+    /** 该行是否允许展开（决定是否显示图标） */
+    isExpandable?: IsRowExpandable<TableRow>;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const FixedRow: import("svelte").Component<Props, {}, "">;
 type FixedRow = ReturnType<typeof FixedRow>;

package/docs/components/README.md

@@ -100,7 +100,7 @@
 
 | 组件 | 导入路径 | 示例 | 属性数 |
 | --- | --- | --- | ---: |
-| [DataTable](./data-table/README.md) | `@ticatec/topside-elements/DataTable` | [示例](./data-table/example.svelte) | 17 |
+| [DataTable](./data-table/README.md) | `@ticatec/topside-elements/DataTable` | [示例](./data-table/example.svelte) | 18 |
 
 ## 数据展示
 

package/docs/components/data-table/README.md

@@ -38,6 +38,7 @@ import DataTable from '@ticatec/topside-elements/DataTable';
 | `overscan` | 否 | `number` | 否 | `8` | 否 | 虚拟化时可视区上下额外渲染的行数。 |
 | `summaryLabel` | 否 | `string` | 否 | `undefined` | 否 | 合计行的标签，默认取 i18n（uniface.dataTable.summaryLabel，"合计" / "Total"）；传空串则不显示标签 |
 | `summaryValues` | 否 | `Record<string, any> \| null` | 否 | `null` | 否 | 外部提供的合计值，按列 field 取值，优先于列的 summary 在当前 list 上的计算。 分页场景下用它显示服务端算好的全量合计（数字串会按数字格式化）。 |
+| `rowExpansion` | 否 | `RowExpansion<T> \| null` | 否 | `null` | 否 | 行展开配置：展开区组件、是否显示指示列图标（默认显示）、整行单击 / 双击触发等。 不配置图标时可以用组件方法 expandRow / collapseRow / toggleRowExpand， 或在行内（自定义单元格、操作列、展开区）派发 ROW_EXPAND_EVENT 事件来控制。 同一时间只展开一行。 |
 
 > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
 
@@ -81,6 +82,18 @@ import DataTable from '@ticatec/topside-elements/DataTable';
 - 默认值：`$bindable(80)`
 - 推荐写法：`bind:inlineRowHeight`
 
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `expandRow()` | `(data: T) => Promise<void>` | 展开指定行（按行数据对象匹配）；行不存在或不允许展开时不做任何事 |
+| `collapseRow()` | `(data?: T) => void` | 收起指定行；不传参数则收起当前展开的行 |
+| `toggleRowExpand()` | `(data: T) => Promise<void>` | 切换指定行的展开状态 |
+| `isRowExpanded()` | `(data: T) => boolean` | 某行当前是否展开 |
+| `getExpandedRow()` | `() => T \| null` | 当前展开行的数据，没有则为 null |
+
 ## 相关类型定义
 
 以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
@@ -218,7 +231,8 @@ export default interface IndicatorColumn {
     selectable?: boolean;
 
     /**
-     *
+     * @deprecated 请改用 DataTable 的 `rowExpansion` 属性（`{ build, showToggle, trigger, ... }`）。
+     * 保留兼容：等价于 rowExpansion = { build: buildInlineComponent }。
      */
     buildInlineComponent?: (data:any) => Promise<any>;
 
@@ -237,6 +251,26 @@ export default interface IndicatorColumn {
 export type GetRowFontStyle<T = any> = (data: T) => RowFontStyle;
 ```
 
+### `RowExpansion`
+
+```ts
+export default interface RowExpansion<T = any> {
+    /** 展开区组件生成器 */
+    build: BuildInlineComponent<T>;
+    /**
+     * 是否在指示列显示展开 / 收起图标，默认 true。
+     * 需要同时配置 indicatorColumn；设为 false 时只靠 trigger / 方法 / 事件触发。
+     */
+    showToggle?: boolean;
+    /** 整行触发方式（单击 / 双击），默认不设置 */
+    trigger?: RowExpandTrigger;
+    /** 判定某行是否允许展开，默认所有行都可以 */
+    isExpandable?: IsRowExpandable<T>;
+    /** 展开状态变化回调：展开时为该行数据，收起时为 null */
+    onExpandChange?: (data: T | null) => void;
+}
+```
+
 ### `Column`
 
 ```ts
@@ -337,6 +371,24 @@ export interface RowFontStyle {
 }
 ```
 
+### `BuildInlineComponent`
+
+```ts
+export type BuildInlineComponent<T = any> = (data: T) => Promise<Component<any>> | Component<any>;
+```
+
+### `RowExpandTrigger`
+
+```ts
+export type RowExpandTrigger = 'click' | 'dblclick';
+```
+
+### `IsRowExpandable`
+
+```ts
+export type IsRowExpandable<T = any> = (data: T) => boolean;
+```
+
 ### `HrefLink`
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/topside-elements",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",