@ticatec/topside-elements 1.0.1 → 1.0.3

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

@@ -192,9 +192,9 @@ export default interface DataColumn {
     hint?: CellHint;
 
     /**
-     * 渲染器
+     * 自定义单元格渲染器（可为 Svelte 组件或 `{ component, props }` 配置对象）
      */
-    render?: any;
+    render?: ColumnRender;
 
     /**
      *
@@ -215,6 +215,19 @@ export default interface DataColumn {
      * 获取表格的样式
      */
     cellStyle?: GetCellStyle;
+
+    /**
+     * 合计行里本列的聚合方式：sum / avg / count / min / max / 自定义函数；
+     * 'label' 表示在本列显示合计标签（没有指示列时用）。
+     * 只要有一列设置了（或 table 的 summaryValues 覆盖了某列），表格底部就会出现合计行。
+     */
+    summary?: SummaryKind | SummaryFn | 'label';
+
+    /**
+     * 合计值的格式化。不设时：count 显示整数（千分位）；其它先用 formatter，再退回数字自动格式化
+     * （千分位，小数位取本列数据最大小数位，avg 至少 2 位）
+     */
+    summaryFormatter?: (value: any, rows: Array<any>) => string;
 }
 ```
 
@@ -236,6 +249,14 @@ export type HrefBuilder = (item: any) => Array<HrefLink> | HrefLink | string;
 export type CellHint = (value: any) => string;
 ```
 
+### `ColumnRender`
+
+```ts
+export type ColumnRender<Props extends Record<string, any> = Record<string, any>> =
+    | Component<any>
+    | ColumnRenderObject<Props>;
+```
+
 ### `CompareFn`
 
 ```ts
@@ -248,6 +269,18 @@ export type CompareFn = (o1: any, o2: any) => number;
 export type GetCellStyle = (data: any) => string;
 ```
 
+### `SummaryKind`
+
+```ts
+export type SummaryKind = 'sum' | 'avg' | 'count' | 'min' | 'max';
+```
+
+### `SummaryFn`
+
+```ts
+export type SummaryFn = (values: Array<any>, rows: Array<any>) => any;
+```
+
 ### `HrefLink`
 
 ```ts
@@ -263,6 +296,23 @@ export default interface HrefLink {
 }
 ```
 
+### `ColumnRenderObject`
+
+```ts
+export interface ColumnRenderObject<Props extends Record<string, any> = Record<string, any>> {
+    /**
+     * 自定义 Svelte 单元格组件。
+     * 组件会接收 `props` 中传入的属性，并自动接收当前行的数据 `data`。
+     */
+    component: Component<any>;
+
+    /**
+     * 传递给自定义组件的额外属性
+     */
+    props?: Props;
+}
+```
+
 ### `OnHrefClick`
 
 ```ts

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

@@ -36,6 +36,8 @@ import DataTable from '@ticatec/topside-elements/DataTable';
 | `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
 | `virtual` | 否 | `boolean` | 否 | `false` | 否 | 行虚拟化(窗口化渲染):仅渲染可视区域附近的行,大数据集(数千行以上) 建议开启。要求所有行高度一致(即统一的 rowHeight),因此默认关闭。 |
 | `overscan` | 否 | `number` | 否 | `8` | 否 | 虚拟化时可视区上下额外渲染的行数。 |
+| `summaryLabel` | 否 | `string` | 否 | `undefined` | 否 | 合计行的标签，默认取 i18n（uniface.dataTable.summaryLabel，"合计" / "Total"）；传空串则不显示标签 |
+| `summaryValues` | 否 | `Record<string, any> \| null` | 否 | `null` | 否 | 外部提供的合计值，按列 field 取值，优先于列的 summary 在当前 list 上的计算。 分页场景下用它显示服务端算好的全量合计（数字串会按数字格式化）。 |
 
 > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
 
@@ -143,9 +145,9 @@ export default interface DataColumn {
     hint?: CellHint;
 
     /**
-     * 渲染器
+     * 自定义单元格渲染器（可为 Svelte 组件或 `{ component, props }` 配置对象）
      */
-    render?: any;
+    render?: ColumnRender;
 
     /**
      *
@@ -166,6 +168,19 @@ export default interface DataColumn {
      * 获取表格的样式
      */
     cellStyle?: GetCellStyle;
+
+    /**
+     * 合计行里本列的聚合方式：sum / avg / count / min / max / 自定义函数；
+     * 'label' 表示在本列显示合计标签（没有指示列时用）。
+     * 只要有一列设置了（或 table 的 summaryValues 覆盖了某列），表格底部就会出现合计行。
+     */
+    summary?: SummaryKind | SummaryFn | 'label';
+
+    /**
+     * 合计值的格式化。不设时：count 显示整数（千分位）；其它先用 formatter，再退回数字自动格式化
+     * （千分位，小数位取本列数据最大小数位，avg 至少 2 位）
+     */
+    summaryFormatter?: (value: any, rows: Array<any>) => string;
 }
 ```
 
@@ -265,6 +280,14 @@ export type HrefBuilder = (item: any) => Array<HrefLink> | HrefLink | string;
 export type CellHint = (value: any) => string;
 ```
 
+### `ColumnRender`
+
+```ts
+export type ColumnRender<Props extends Record<string, any> = Record<string, any>> =
+    | Component<any>
+    | ColumnRenderObject<Props>;
+```
+
 ### `CompareFn`
 
 ```ts
@@ -277,6 +300,18 @@ export type CompareFn = (o1: any, o2: any) => number;
 export type GetCellStyle = (data: any) => string;
 ```
 
+### `SummaryKind`
+
+```ts
+export type SummaryKind = 'sum' | 'avg' | 'count' | 'min' | 'max';
+```
+
+### `SummaryFn`
+
+```ts
+export type SummaryFn = (values: Array<any>, rows: Array<any>) => any;
+```
+
 ### `GetRowActions`
 
 ```ts
@@ -317,6 +352,23 @@ export default interface HrefLink {
 }
 ```
 
+### `ColumnRenderObject`
+
+```ts
+export interface ColumnRenderObject<Props extends Record<string, any> = Record<string, any>> {
+    /**
+     * 自定义 Svelte 单元格组件。
+     * 组件会接收 `props` 中传入的属性，并自动接收当前行的数据 `data`。
+     */
+    component: Component<any>;
+
+    /**
+     * 传递给自定义组件的额外属性
+     */
+    props?: Props;
+}
+```
+
 ### `RowAction`
 
 ```ts
@@ -348,12 +400,6 @@ export type OnHrefClick = () => void;
 export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
 ```
 
-### `ActionHandler`
-
-```ts
-export type ActionHandler<T = any> = (data: T) => void | Promise<void>;
-```
-
 ## 示例
 
 完整示例见 [example.svelte](./example.svelte)。

package/docs/components/split/README.md

@@ -21,11 +21,16 @@ import Split from '@ticatec/topside-elements/Split';
 
 | 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
 | --- | --- | --- | --- | --- | --- | --- |
-| `direction` | 否 | `"horizontal" \| "vertical"` | 否 | `"vertical"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `width` | 否 | `number` | 否 | `2` | 否 | 宽度配置，数值单位为像素。 |
-| `bindingPanel` | 否 | `HTMLElement` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `reverse` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `onResizeEnd` | 否 | `(size: number) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `direction` | 否 | `"horizontal" \| "vertical"` | 否 | `"vertical"` | 否 | 分隔线朝向：vertical 竖线（左右分栏），horizontal 横线（上下分栏） |
+| `width` | 否 | `number` | 否 | `1` | 否 | 可见线条粗细（px），占布局，默认 1 |
+| `bindingPanel` | 否 | `HTMLElement` | 否 | `undefined` | 否 | 被拖动调整尺寸的面板；不传则为固定分隔线 |
+| `reverse` | 否 | `boolean` | 否 | `false` | 否 | 绑定面板在分隔线右侧 / 下方时设为 true |
+| `color` | 否 | `string` | 否 | `undefined` | 否 | 线条底色，默认取 --topside-dividing-line-color |
+| `gripColor` | 否 | `string` | 否 | `undefined` | 否 | 悬停 / 拖动时中间把手的颜色，默认取 --topside-divider-grip-color |
+| `gripSize` | 否 | `number` | 否 | `3` | 否 | 把手粗细（px），默认 3 |
+| `gripLength` | 否 | `number` | 否 | `32` | 否 | 把手长度（px），默认 32；传 0 表示整条加粗 |
+| `hitSize` | 否 | `number` | 否 | `8` | 否 | 鼠标感应区厚度（px），不占布局，默认 8 |
+| `onResizeEnd` | 否 | `(size: number) => void` | 否 | `undefined` | 否 | 拖动结束时回调，参数为绑定面板最终宽 / 高（px） |
 
 > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
 

package/package.json

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