@ticatec/topside-elements 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.3
+
+### 变更
+- **Split 分割线外观**：线条默认 1px（`width`，原 2px）；新增 `hitSize`（不占布局的感应区，默认 8px，靠近即可悬停 / 拖动）、`color`、`gripColor`、`gripSize`、`gripLength`；悬停 / 拖动 / 键盘聚焦时中间淡入深色稍粗的把手，取代原来整条加深。新令牌 `--topside-divider-grip-color`（亮 `#94A3B8` / 暗 `#8a8a8a`）。
+
+### 文档
+- 重新生成 `docs/components`（Split、DataTable / ConciseDataTable 合计行相关属性）。
+
 ## 1.0.0 — 首个公开版本
 
 ### 新增

package/dist/data_table/DataTable.svelte

@@ -13,6 +13,7 @@
     import type { GetRowFontStyle } from "../types";
     import { computeVirtualWindow } from "./lib/virtualWindow";
     import { buildTableSummary } from "./lib/summary";
+    import { isSameColumn } from "./lib/TableUtils";
     import i18nRes from "../i18nRes";
 
     interface Props {
@@ -170,7 +171,7 @@
 
     const onCellClick = (col: DataColumn) => {
         if (col.compareFunction != null) {
-            if (col.field === orderColumn?.field) {
+            if (isSameColumn(col, orderColumn)) {
                 orderDirection = orderDirection == OrderDirection.Ascending
                     ? OrderDirection.Descending
                     : OrderDirection.Ascending;
@@ -200,7 +201,7 @@
                 {onRowExpand}
                 bind:selectedRows
                 {orderDirection}
-                orderColumn={orderColumn as DataColumn}
+                {orderColumn}
                 {onCellClick}
                 {indicatorColumn}
                 bind:expandRow
@@ -220,7 +221,7 @@
         <ContentPanel
             columns={dataColumns}
             {orderDirection}
-            orderColumn={orderColumn as DataColumn}
+            {orderColumn}
             {onWidthChange}
             {onCellClick}
             {tabWidth}

package/dist/data_table/README.md

@@ -73,7 +73,7 @@ interface DataColumn {
   escapeHTML?: boolean;            // Whether to escape HTML in content
   href?: HrefBuilder;              // Link builder function
   hint?: CellHint;                 // Tooltip/hint function
-  render?: any;                    // Custom Svelte component renderer
+  render?: ColumnRender;           // Custom Svelte component renderer (component or { component, props })
   visible?: boolean;               // Column visibility
   resizable?: boolean;             // Whether column is resizable
   compareFunction?: CompareFunction;  // Sorting comparison function
@@ -82,6 +82,41 @@ interface DataColumn {
 }
 ```
 
+### ColumnRender
+
+```typescript
+type ColumnRender<Props extends Record<string, any> = Record<string, any>> =
+  | Component<any>
+  | ColumnRenderObject<Props>;
+
+interface ColumnRenderObject<Props extends Record<string, any> = Record<string, any>> {
+  component: Component<any>;       // Svelte 5 component
+  props?: Props;                   // Extra props passed to component (component also receives row `data`)
+}
+```
+
+### ActionCell and CellAction
+
+`ActionCell` is a built-in single button action cell component that can be placed in any column (unlike `actionsColumn`, which is docked at the end of the table):
+
+```typescript
+interface CellAction<T = any> {
+  label: string;                   // Button text
+  type?: ButtonType;               // Semantic style ('primary', 'secondary', etc.)
+  icon?: string;                   // Optional icon
+  tooltip?: string;                // Hover tooltip
+  disabled?: boolean;              // Disabled state
+  handler: (data: T) => void | Promise<void>; // Click handler
+}
+
+type GetCellAction<T = any> = (data: T) => CellAction<T> | undefined;
+
+interface ActionCellProps<T = any> {
+  data?: T;                        // Injected automatically by DataTable
+  getAction: GetCellAction<T>;     // Returns action definition; returning undefined hides the button
+}
+```
+
 ### ActionsColumn
 
 ```typescript
@@ -320,6 +355,129 @@ interface RowAction {
 <DataTable {columns} list={userData} rowHeight={50} />
 ```
 
+### Custom Cell Rendering with render (Custom Components & ActionCell)
+
+`DataColumn.render` supports two ways to render custom cell content:
+1. **Pass a Svelte component directly**: The component automatically receives the current row data `{ data }`.
+2. **Pass a `{ component, props }` configuration object**: The component receives all specified `props` along with `{ data }`.
+
+#### 1. Creating and Using Custom Components
+
+For example, a status badge component `StatusBadge.svelte`:
+
+```svelte
+<!-- StatusBadge.svelte -->
+<script lang="ts">
+  interface Props {
+    data: any;              // Row data injected automatically by DataTable
+    theme?: string;         // Custom prop passed from column definition
+  }
+
+  let { data, theme = "info" }: Props = $props();
+</script>
+
+<span class="status-badge {theme}">
+  {data.statusName ?? data.status}
+</span>
+```
+
+Using the custom component in column definitions:
+
+```svelte
+<script>
+  import DataTable from "@ticatec/topside-elements/data_table";
+  import UserAvatar from "./UserAvatar.svelte";
+  import StatusBadge from "./StatusBadge.svelte";
+
+  const columns = [
+    // Method 1: Component directly
+    {
+      title: "Avatar",
+      width: 70,
+      render: UserAvatar
+    },
+    // Method 2: Configuration object with extra props
+    {
+      title: "Status",
+      width: 120,
+      render: {
+        component: StatusBadge,
+        props: { theme: "success" }
+      }
+    }
+  ];
+</script>
+```
+
+#### 2. Using Built-in ActionCell for Action Columns
+
+`ActionCell` allows rendering single button actions in any column position with full dynamic control over label, style, and visibility based on row data:
+
+```svelte
+<script>
+  import DataTable, { ActionCell } from "@ticatec/topside-elements/data_table";
+
+  const columns = [
+    {
+      title: "Service Code",
+      field: "code",
+      width: 150
+    },
+    {
+      title: "Service Name",
+      field: "name",
+      width: 200
+    },
+    {
+      title: "Modules",
+      width: 100,
+      render: {
+        component: ActionCell,
+        props: {
+          getAction: (row) => ({
+            label: "Manage",
+            handler: (data) => openModules(data)
+          })
+        }
+      }
+    },
+    {
+      title: "Status Action",
+      width: 100,
+      render: {
+        component: ActionCell,
+        props: {
+          getAction: (row) => {
+            // Return undefined to hide the action button
+            if (row.locked) return undefined;
+            return {
+              label: row.enabled ? "Disable" : "Enable",
+              type: row.enabled ? "danger" : "primary",
+              handler: (data) => toggleService(data)
+            };
+          }
+        }
+      }
+    }
+  ];
+
+  const list = [
+    { code: "AUTH", name: "Auth Service", enabled: true, locked: false },
+    { code: "SYS", name: "Core Kernel", enabled: true, locked: true }
+  ];
+
+  function openModules(item) {
+    console.log("Manage modules:", item.code);
+  }
+
+  function toggleService(item) {
+    console.log("Toggle status:", item.code);
+  }
+</script>
+
+<DataTable {columns} {list} />
+```
+
 ### Table with Inline Row Expansion
 
 ```svelte

package/dist/data_table/README_CN.md

@@ -73,7 +73,7 @@ interface DataColumn {
   escapeHTML?: boolean;            // 是否转义 HTML 内容
   href?: HrefBuilder;              // 链接生成函数
   hint?: CellHint;                 // 工具提示/提示函数
-  render?: any;                    // 自定义 Svelte 组件渲染器
+  render?: ColumnRender;           // 自定义 Svelte 组件渲染器（可为组件或 { component, props } 配置对象）
   visible?: boolean;               // 列可见性
   resizable?: boolean;             // 列是否可调整大小
   compareFunction?: CompareFunction;  // 排序比较函数
@@ -82,6 +82,41 @@ interface DataColumn {
 }
 ```
 
+### ColumnRender
+
+```typescript
+type ColumnRender<Props extends Record<string, any> = Record<string, any>> =
+  | Component<any>
+  | ColumnRenderObject<Props>;
+
+interface ColumnRenderObject<Props extends Record<string, any> = Record<string, any>> {
+  component: Component<any>;       // Svelte 5 组件
+  props?: Props;                   // 传递给组件的额外属性（组件会自动接收当前行数据 `data`）
+}
+```
+
+### ActionCell 与 CellAction
+
+`ActionCell` 是预置的单元格操作按钮组件，可在任意列中使用（不受 `actionsColumn` 只能固定在最右侧的限制）：
+
+```typescript
+interface CellAction<T = any> {
+  label: string;                   // 按钮显示文本
+  type?: ButtonType;               // 语义样式（如 'primary' | 'secondary' 等）
+  icon?: string;                   // 前缀图标
+  tooltip?: string;                // 悬停提示
+  disabled?: boolean;              // 是否禁用
+  handler: (data: T) => void | Promise<void>; // 点击回调函数
+}
+
+type GetCellAction<T = any> = (data: T) => CellAction<T> | undefined;
+
+interface ActionCellProps<T = any> {
+  data?: T;                        // 自动由 DataTable 注入当前行数据
+  getAction: GetCellAction<T>;     // 返回该单元格操作，返回 undefined 则不显示按钮
+}
+```
+
 ### ActionsColumn
 
 ```typescript
@@ -320,6 +355,129 @@ interface RowAction {
 <DataTable {columns} list={userData} rowHeight={50} />
 ```
 
+### 使用 render 自定义单元格（自定义组件与 ActionCell）
+
+`DataColumn.render` 支持两种方式自定义单元格内容：
+1. **直接传入自定义 Svelte 组件**：组件将自动接收当前行的数据 `{ data }`。
+2. **传入 `{ component, props }` 配置对象**：组件接收 `props` 中的所有自定义属性，同时自动注入 `{ data }`。
+
+#### 1. 编写与使用自定义组件
+
+例如定义一个状态徽标组件 `StatusBadge.svelte`：
+
+```svelte
+<!-- StatusBadge.svelte -->
+<script lang="ts">
+  interface Props {
+    data: any;              // DataTable 自动注入的当前行数据
+    theme?: string;         // 通过 props 传入的自定义属性
+  }
+
+  let { data, theme = "info" }: Props = $props();
+</script>
+
+<span class="status-badge {theme}">
+  {data.statusName ?? data.status}
+</span>
+```
+
+在表格列中使用自定义组件：
+
+```svelte
+<script>
+  import DataTable from "@ticatec/topside-elements/data_table";
+  import UserAvatar from "./UserAvatar.svelte";
+  import StatusBadge from "./StatusBadge.svelte";
+
+  const columns = [
+    // 方式一：直接传入组件
+    {
+      title: "头像",
+      width: 70,
+      render: UserAvatar
+    },
+    // 方式二：传入配置对象（可附带额外 props）
+    {
+      title: "状态",
+      width: 120,
+      render: {
+        component: StatusBadge,
+        props: { theme: "success" }
+      }
+    }
+  ];
+</script>
+```
+
+#### 2. 使用内置 ActionCell 渲染操作列
+
+`ActionCell` 是预置的操作按钮组件，可在任意列中渲染单按钮操作，支持基于行数据动态设置按钮文本、类型，或通过返回 `undefined` 条件隐藏按钮：
+
+```svelte
+<script>
+  import DataTable, { ActionCell } from "@ticatec/topside-elements/data_table";
+
+  const columns = [
+    {
+      title: "服务编码",
+      field: "code",
+      width: 150
+    },
+    {
+      title: "服务名称",
+      field: "name",
+      width: 200
+    },
+    {
+      title: "模块管理",
+      width: 100,
+      render: {
+        component: ActionCell,
+        props: {
+          getAction: (row) => ({
+            label: "管理",
+            handler: (data) => openModules(data)
+          })
+        }
+      }
+    },
+    {
+      title: "状态操作",
+      width: 100,
+      render: {
+        component: ActionCell,
+        props: {
+          getAction: (row) => {
+            // 返回 undefined 时不渲染按钮
+            if (row.locked) return undefined;
+            return {
+              label: row.enabled ? "禁用" : "启用",
+              type: row.enabled ? "danger" : "primary",
+              handler: (data) => toggleStatus(data)
+            };
+          }
+        }
+      }
+    }
+  ];
+
+  const list = [
+    { code: "AUTH", name: "认证服务", enabled: true, locked: false },
+    { code: "SYS", name: "系统内核", enabled: true, locked: true }
+  ];
+
+  function openModules(item) {
+    console.log("管理服务模块:", item.code);
+  }
+
+  function toggleStatus(item) {
+    console.log("切换服务状态:", item.code);
+  }
+</script>
+
+<DataTable {columns} {list} />
+```
+
 ### 带有内联行扩展的表格
 
 ```svelte

package/dist/data_table/index.d.ts

@@ -5,11 +5,11 @@ import type IndicatorColumn from "./lib/IndicatorColumn";
 import type RowAction from "./lib/RowAction";
 import type { GetRowActions, ActionHandler } from "./lib/RowAction";
 import type DataColumn from "./lib/DataColumn";
-import type { SummaryKind, SummaryFn } from "./lib/DataColumn";
-import type { CellAction } from "./lib/CellAction";
+import type { SummaryKind, SummaryFn, ColumnRender, ColumnRenderObject } from "./lib/DataColumn";
+import type { CellAction, GetCellAction, ActionCellProps } from "./lib/CellAction";
 import ActionCell from "./parts/ActionCell.svelte";
 export default DataTable;
 export { ActionCell };
-export type { ActionsColumn, IndicatorColumn, FormatCellFn, CellHint, DataColumn };
-export type { RowAction, GetRowActions, ActionHandler, CellAction };
+export type { ActionsColumn, IndicatorColumn, FormatCellFn, CellHint, DataColumn, ColumnRender, ColumnRenderObject };
+export type { RowAction, GetRowActions, ActionHandler, CellAction, GetCellAction, ActionCellProps };
 export type { SummaryKind, SummaryFn };

package/dist/data_table/lib/CellAction.d.ts

@@ -7,3 +7,10 @@ export type CellAction<T = any> = RowAction<T>;
  * 获取单元格动作；返回 undefined 表示该单元格没有动作
  */
 export type GetCellAction<T = any> = (data: T) => CellAction<T> | undefined;
+/**
+ * ActionCell 组件的属性类型
+ */
+export interface ActionCellProps<T = any> {
+    data?: T;
+    getAction: GetCellAction<T>;
+}

package/dist/data_table/lib/DataColumn.d.ts

@@ -2,10 +2,29 @@ import type { CellHint, FormatCellFn } from "./FormatCellFn";
 import type { HrefBuilder } from "./HrefLink";
 import type { CompareFn } from "./CompareFn";
 import type { GetCellStyle } from "../../types";
+import type { Component } from "svelte";
 /** 内置聚合方式；'label' 表示该列在合计行里显示合计标签（"合计"） */
 export type SummaryKind = 'sum' | 'avg' | 'count' | 'min' | 'max';
 /** 自定义聚合：values 为本列各行的字段值，rows 为当前全部行数据 */
 export type SummaryFn = (values: Array<any>, rows: Array<any>) => any;
+/**
+ * 自定义单元格渲染器对象配置
+ */
+export interface ColumnRenderObject<Props extends Record<string, any> = Record<string, any>> {
+    /**
+     * 自定义 Svelte 单元格组件。
+     * 组件会接收 `props` 中传入的属性，并自动接收当前行的数据 `data`。
+     */
+    component: Component<any>;
+    /**
+     * 传递给自定义组件的额外属性
+     */
+    props?: Props;
+}
+/**
+ * 自定义单元格渲染器：支持直接传入 Svelte 组件，或传入包含 { component, props } 的配置对象
+ */
+export type ColumnRender<Props extends Record<string, any> = Record<string, any>> = Component<any> | ColumnRenderObject<Props>;
 export default interface DataColumn {
     /**
      * 列头文字（与 ConciseListTable 的 Column.title 统一）
@@ -50,9 +69,9 @@ export default interface DataColumn {
      */
     hint?: CellHint;
     /**
-     * 渲染器
+     * 自定义单元格渲染器（可为 Svelte 组件或 `{ component, props }` 配置对象）
      */
-    render?: any;
+    render?: ColumnRender;
     /**
      *
      */

package/dist/data_table/lib/TableUtils.d.ts

@@ -1,4 +1,13 @@
+import type DataColumn from "./DataColumn";
+/**
+ * 根据字段名获取对于的值，支持"."嵌套获取
+ * @param data
+ * @param field
+ */
+export declare const extractFieldValue: (data: any, field?: string) => any;
+export declare const isSameColumn: (a?: DataColumn | null, b?: DataColumn | null) => boolean;
 declare const _default: {
     extractFieldValue: (data: any, field?: string) => any;
+    isSameColumn: (a?: DataColumn | null, b?: DataColumn | null) => boolean;
 };
 export default _default;

package/dist/data_table/lib/TableUtils.js

@@ -3,7 +3,7 @@
  * @param data
  * @param field
  */
-const extractFieldValue = (data, field) => {
+export const extractFieldValue = (data, field) => {
     let v = data;
     if (field != null) {
         let attrs = field.split(".");
@@ -13,6 +13,14 @@ const extractFieldValue = (data, field) => {
     }
     return v;
 };
+export const isSameColumn = (a, b) => {
+    if (!a || !b)
+        return false;
+    if (a === b)
+        return true;
+    return a.field != null && b.field != null && a.field === b.field;
+};
 export default {
-    extractFieldValue
+    extractFieldValue,
+    isSameColumn
 };

package/dist/data_table/parts/ActionCell.svelte

@@ -17,7 +17,7 @@
 </script>
 
 {#if action}
-    <div style="width: 100; overflow: hidden;">
+    <div style="width: 100%; overflow: hidden;">
         <TextButton type={action.type ?? 'primary'} outer={false} label={action.label} onclick={handleClick} />
     </div>
 {/if}

package/dist/data_table/parts/ContentPanel.svelte

@@ -12,7 +12,7 @@
     interface Props {
         columns: Array<DataColumn>;
         rows: Array<TableRow>;
-        orderColumn: DataColumn;
+        orderColumn?: DataColumn | null;
         orderDirection: OrderDirection;
         getRowFontStyle?: GetRowFontStyle;
         emptyText?: string | null;

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

@@ -7,7 +7,7 @@ import type { VirtualWindow } from "../lib/virtualWindow";
 interface Props {
     columns: Array<DataColumn>;
     rows: Array<TableRow>;
-    orderColumn: DataColumn;
+    orderColumn?: DataColumn | null;
     orderDirection: OrderDirection;
     getRowFontStyle?: GetRowFontStyle;
     emptyText?: string | null;

package/dist/data_table/parts/DataCell.svelte

@@ -22,8 +22,15 @@
 <div class="data-cell {colClass}" {style} bind:this={cell}>
     <div class="vertical-center">
         {#if column.render}
-            {@const Render = column.render.component}
-            <Render {...column.render.props} {data} />
+            {@const Render = typeof column.render === 'object' && column.render !== null && 'component' in column.render
+                ? column.render.component
+                : column.render}
+            {@const renderProps = typeof column.render === 'object' && column.render !== null && 'props' in column.render
+                ? column.render.props
+                : undefined}
+            {#if Render}
+                <Render {...renderProps} {data} />
+            {/if}
         {:else if column.href}
             <HrefCell {data} href={column.href} />
         {:else}

package/dist/data_table/parts/FixedColumnsPanel.svelte

@@ -22,7 +22,7 @@
         onWidthChange?: OnWidthChange;
         onRowExpand?: OnRowExpand;
         onCellClick?: (col: DataColumn) => any;
-        orderColumn?: DataColumn;
+        orderColumn?: DataColumn | null;
         orderDirection?: OrderDirection;
         selectedRows?: Array<any>;
         expandRow?: TableRow | null;

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

@@ -14,7 +14,7 @@ interface Props {
     onWidthChange?: OnWidthChange;
     onRowExpand?: OnRowExpand;
     onCellClick?: (col: DataColumn) => any;
-    orderColumn?: DataColumn;
+    orderColumn?: DataColumn | null;
     orderDirection?: OrderDirection;
     selectedRows?: Array<any>;
     expandRow?: TableRow | null;

package/dist/data_table/parts/FixedHeaderPanel.svelte

@@ -3,6 +3,7 @@
     import type { IndicatorColumn } from "..";
     import { type OnSelectAll, SelectionMode, type OnWidthChange } from "../UniDataTable";
     import { OrderDirection } from "../lib/OrderDirection";
+    import { isSameColumn } from "../lib/TableUtils";
     import i18nRes from "../../i18nRes";
 
     interface Props {
@@ -12,7 +13,7 @@
         rowHeight?: number;
         headerHeight?: number;
         onCellClick?: (col: DataColumn) => any;
-        orderColumn?: DataColumn;
+        orderColumn?: DataColumn | null;
         orderDirection?: OrderDirection;
         selectionMode?: SelectionMode;
         onToggleSelectAll?: OnSelectAll;
@@ -124,13 +125,13 @@
                 onkeydown={handleHeaderKeyDown(column)}
                 role={column.compareFunction != null ? 'button' : undefined}
                 tabindex={column.compareFunction != null ? 0 : undefined}
-                aria-sort={column.field === orderColumn?.field
+                aria-sort={isSameColumn(column, orderColumn)
                     ? (orderDirection === OrderDirection.Ascending ? 'ascending' : 'descending')
                     : undefined}
                 class="vertical-center"
             >
                 <span>{column.title}</span>
-                {#if column.field === orderColumn?.field}
+                {#if isSameColumn(column, orderColumn)}
                     <i
                         style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
                         class={orderDirection === OrderDirection.Ascending

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

@@ -9,7 +9,7 @@ interface Props {
     rowHeight?: number;
     headerHeight?: number;
     onCellClick?: (col: DataColumn) => any;
-    orderColumn?: DataColumn;
+    orderColumn?: DataColumn | null;
     orderDirection?: OrderDirection;
     selectionMode?: SelectionMode;
     onToggleSelectAll?: OnSelectAll;

package/dist/data_table/parts/TableHeaderPanel.svelte

@@ -2,6 +2,7 @@
     import { OrderDirection } from "../lib/OrderDirection";
     import { type OnWidthChange } from "../UniDataTable";
     import type DataColumn from "../lib/DataColumn";
+    import { isSameColumn } from "../lib/TableUtils";
 
     interface Props {
         scrollLeft?: number;
@@ -10,7 +11,7 @@
         width?: number;
         whitespace?: boolean;
         onCellClick?: (col: DataColumn) => any;
-        orderColumn?: DataColumn;
+        orderColumn?: DataColumn | null;
         orderDirection?: OrderDirection;
         headerHeight?: number;
     }
@@ -82,13 +83,13 @@
                     onkeydown={handleHeaderKeyDown(col)}
                     role={col.compareFunction != null ? 'button' : undefined}
                     tabindex={col.compareFunction != null ? 0 : undefined}
-                    aria-sort={col.field === orderColumn?.field
+                    aria-sort={isSameColumn(col, orderColumn)
                         ? (orderDirection === OrderDirection.Ascending ? 'ascending' : 'descending')
                         : undefined}
                     class="vertical-center"
                 >
                     <span>{col.title}</span>
-                    {#if col.field === orderColumn?.field}
+                    {#if isSameColumn(col, orderColumn)}
                         <i
                             style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
                             class={orderDirection === OrderDirection.Ascending

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

@@ -8,7 +8,7 @@ interface Props {
     width?: number;
     whitespace?: boolean;
     onCellClick?: (col: DataColumn) => any;
-    orderColumn?: DataColumn;
+    orderColumn?: DataColumn | null;
     orderDirection?: OrderDirection;
     headerHeight?: number;
 }