@ticatec/topside-elements 1.0.6 → 1.2.0

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/docs/components/header-layout/README.md

@@ -26,6 +26,8 @@ import HeaderLayout from '@ticatec/topside-elements/app-layout/HeaderLayout';
 | `sidebarResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `sidebarMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
 | `sidebarMinWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `divider` | 否 | `boolean` | 否 | `true` | 否 | 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 |
+| `headerDivider` | 否 | `boolean` | 否 | `false` | 否 | 头部与内容之间显示横向分割线，默认 false |
 | `header` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `sidebar` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |

package/docs/components/rows-layout/README.md

@@ -31,6 +31,7 @@ import RowsLayout from '@ticatec/topside-elements/app-layout/RowsLayout';
 | `bottomMaxHeight` | 否 | `string \| null` | 否 | `null` | 否 | 下栏最大高度（CSS 长度） |
 | `topResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `bottomResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `divider` | 否 | `boolean` | 否 | `true` | 否 | 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 |
 | `top` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
 | `bottom` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |

package/docs/components/sidebar-layout/README.md

@@ -26,6 +26,8 @@ import SidebarLayout from '@ticatec/topside-elements/app-layout/SidebarLayout';
 | `sidebarWidth` | 否 | `string` | 否 | `'300px'` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
 | `sidebarMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
 | `sidebarMinWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `divider` | 否 | `boolean` | 否 | `true` | 否 | 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 |
+| `headerDivider` | 否 | `boolean` | 否 | `false` | 否 | 头部与内容之间显示横向分割线，默认 false |
 | `sidebar` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `header` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |

package/package.json

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