@ticatec/topside-elements 1.0.6 → 1.2.0

package/dist/data_table/index.d.ts

@@ -8,8 +8,13 @@ import type DataColumn from "./lib/DataColumn";
 import type { SummaryKind, SummaryFn, ColumnRender, ColumnRenderObject } from "./lib/DataColumn";
 import type { CellAction, GetCellAction, ActionCellProps } from "./lib/CellAction";
 import ActionCell from "./parts/ActionCell.svelte";
+import type RowExpansion from "./lib/RowExpansion";
+import type { RowExpandTrigger, RowExpandContext, RowExpandRequest, BuildInlineComponent, IsRowExpandable } from "./lib/RowExpansion";
+import { ROW_EXPAND_EVENT, requestRowExpand, requestRowCollapse, requestRowToggle } from "./lib/RowExpansion";
 export default DataTable;
 export { ActionCell };
+export { ROW_EXPAND_EVENT, requestRowExpand, requestRowCollapse, requestRowToggle };
+export type { RowExpansion, RowExpandTrigger, RowExpandContext, RowExpandRequest, BuildInlineComponent, IsRowExpandable };
 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/index.js

@@ -1,4 +1,6 @@
 import DataTable from "./DataTable.svelte";
 import ActionCell from "./parts/ActionCell.svelte";
+import { ROW_EXPAND_EVENT, requestRowExpand, requestRowCollapse, requestRowToggle } from "./lib/RowExpansion";
 export default DataTable;
 export { ActionCell };
+export { ROW_EXPAND_EVENT, requestRowExpand, requestRowCollapse, requestRowToggle };

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

@@ -8,7 +8,8 @@ export default interface IndicatorColumn {
      */
     selectable?: boolean;
     /**
-     *
+     * @deprecated 请改用 DataTable 的 `rowExpansion` 属性（`{ build, showToggle, trigger, ... }`）。
+     * 保留兼容：等价于 rowExpansion = { build: buildInlineComponent }。
      */
     buildInlineComponent?: (data: any) => Promise<any>;
     /**

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

@@ -0,0 +1,84 @@
+import type { Component } from "svelte";
+import type RowAction from "./RowAction";
+/**
+ * 行展开触发方式（作用在整行上）：
+ * - 'click'    单击行切换展开 / 收起
+ * - 'dblclick' 双击行切换展开 / 收起
+ * 不设置时只能通过指示列图标、组件方法（expandRow / collapseRow / toggleRowExpand）
+ * 或行内派发的 DOM 事件（requestRowExpand / requestRowCollapse）来控制。
+ */
+export type RowExpandTrigger = 'click' | 'dblclick';
+/**
+ * 构建展开区组件：返回一个 Svelte 组件（可异步，如先请求明细再决定组件）。
+ * 组件会收到 `data`（行数据）和 `context`（RowExpandContext）两个属性。
+ */
+export type BuildInlineComponent<T = any> = (data: T) => Promise<Component<any>> | Component<any>;
+/** 判定某行是否允许展开 */
+export type IsRowExpandable<T = any> = (data: T) => boolean;
+/**
+ * 传给展开区组件的上下文
+ */
+export interface RowExpandContext<T = any> {
+    /** 行数据 */
+    data: T;
+    /** 关闭当前展开行 */
+    collapse: () => void;
+    /** 本行的行动作（取自 actionsColumn.getActions(data)，没有 actionsColumn 时为空数组） */
+    actions: Array<RowAction<T>>;
+    /** 按 label 执行一个行动作；找不到时返回 false */
+    invoke: (label: string) => Promise<boolean>;
+}
+/**
+ * DataTable 行展开配置（`rowExpansion` 属性）
+ */
+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;
+}
+/**
+ * 行内元素（render cell / ActionCell / 操作列 / 展开区）请求切换展开状态时派发的 DOM 事件名。
+ * 事件冒泡到所在行，由 DataTable 定位行并处理；detail 见 RowExpandRequest。
+ */
+export declare const ROW_EXPAND_EVENT = "topside-row-expand";
+export interface RowExpandRequest {
+    /** true 展开、false 收起、undefined 切换 */
+    expanded?: boolean;
+}
+/**
+ * 在行内任意元素上调用：请求展开所在行。
+ * 典型用法：自定义单元格组件里 `onclick={(e) => requestRowExpand(e.currentTarget)}`
+ */
+export declare const requestRowExpand: (target: EventTarget | null | undefined) => boolean;
+/** 在行内任意元素（包括展开区内部）上调用：请求收起所在行 */
+export declare const requestRowCollapse: (target: EventTarget | null | undefined) => boolean;
+/** 在行内任意元素上调用：切换所在行的展开状态 */
+export declare const requestRowToggle: (target: EventTarget | null | undefined) => boolean;
+/** 事件是否发生在交互元素内部（按钮、链接、输入框……） */
+export declare const isInteractiveTarget: (e: Event) => boolean;
+/**
+ * 内部使用：DataTable 传给各行组件的事件处理器
+ * @internal
+ */
+export interface RowEventHandlers<R = any> {
+    onRowClick: (row: R, e: MouseEvent) => void;
+    onRowDblClick: (row: R, e: MouseEvent) => void;
+    onExpandRequest: (row: R, e: Event) => void;
+}
+/**
+ * 内部使用的 Svelte action：在行容器上监听 ROW_EXPAND_EVENT。
+ * @internal
+ */
+export declare const onRowExpandRequest: (node: HTMLElement, handler: (e: Event) => void) => {
+    destroy(): void;
+};

package/dist/data_table/lib/RowExpansion.js

@@ -0,0 +1,43 @@
+/**
+ * 行内元素（render cell / ActionCell / 操作列 / 展开区）请求切换展开状态时派发的 DOM 事件名。
+ * 事件冒泡到所在行，由 DataTable 定位行并处理；detail 见 RowExpandRequest。
+ */
+export const ROW_EXPAND_EVENT = 'topside-row-expand';
+const dispatch = (target, expanded) => {
+    if (!target)
+        return false;
+    return target.dispatchEvent(new CustomEvent(ROW_EXPAND_EVENT, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: { expanded }
+    }));
+};
+/**
+ * 在行内任意元素上调用：请求展开所在行。
+ * 典型用法：自定义单元格组件里 `onclick={(e) => requestRowExpand(e.currentTarget)}`
+ */
+export const requestRowExpand = (target) => dispatch(target, true);
+/** 在行内任意元素（包括展开区内部）上调用：请求收起所在行 */
+export const requestRowCollapse = (target) => dispatch(target, false);
+/** 在行内任意元素上调用：切换所在行的展开状态 */
+export const requestRowToggle = (target) => dispatch(target);
+/** 行级触发时忽略来自这些元素内部的点击（它们有自己的行为） */
+const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, label, [role="button"], [contenteditable="true"]';
+/** 事件是否发生在交互元素内部（按钮、链接、输入框……） */
+export const isInteractiveTarget = (e) => {
+    const el = e.target;
+    return !!el && typeof el.closest === 'function' && el.closest(INTERACTIVE_SELECTOR) != null;
+};
+/**
+ * 内部使用的 Svelte action：在行容器上监听 ROW_EXPAND_EVENT。
+ * @internal
+ */
+export const onRowExpandRequest = (node, handler) => {
+    node.addEventListener(ROW_EXPAND_EVENT, handler);
+    return {
+        destroy() {
+            node.removeEventListener(ROW_EXPAND_EVENT, handler);
+        }
+    };
+};

package/dist/data_table/parts/ActionsPanel.svelte

@@ -5,6 +5,7 @@
     import { onDestroy, onMount } from "svelte";
     import i18nRes from "../../i18nRes";
     import type { VirtualWindow } from "../lib/virtualWindow";
+    import type { RowEventHandlers } from "../lib/RowExpansion";
 
     interface Props {
         actionsColumn: ActionsColumn;
@@ -18,6 +19,7 @@
         vwindow?: VirtualWindow | null;
         /** 与数据区的合计行对齐（操作列这一格留空） */
         showSummary?: boolean;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
     let {
@@ -30,6 +32,7 @@
         headerHeight,
         vwindow = null,
         showSummary = false,
+        rowEvents = null,
     }: Props = $props();
 
     // Virtual scrolling: same shared window as the other panels.
@@ -89,6 +92,7 @@
                     width={actionsColumn.width}
                     align={actionsColumn.align}
                     actions={actionsColumn.getActions(row.data)}
+                    {rowEvents}
                 />
                 {#if row == expandRow}
                     <div class="inline-panel" style="height: {inlineRowHeight ?? 0}px"> </div>

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

@@ -1,6 +1,7 @@
 import type ActionsColumn from "../lib/ActionsColumn";
 import type TableRow from "./TableRow";
 import type { VirtualWindow } from "../lib/virtualWindow";
+import type { RowEventHandlers } from "../lib/RowExpansion";
 interface Props {
     actionsColumn: ActionsColumn;
     scrollTop?: number;
@@ -13,6 +14,7 @@ interface Props {
     vwindow?: VirtualWindow | null;
     /** 与数据区的合计行对齐（操作列这一格留空） */
     showSummary?: boolean;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const ActionsPanel: import("svelte").Component<Props, {}, "scrollTop">;
 type ActionsPanel = ReturnType<typeof ActionsPanel>;

package/dist/data_table/parts/ActionsRow.svelte

@@ -5,6 +5,7 @@
     import { onDestroy, onMount, tick } from "svelte";
     import utils from "../../overlay/common/utils";
     import PopupMenu from "./PopupMenu.svelte";
+    import { onRowExpandRequest, type RowEventHandlers } from "../lib/RowExpansion";
 
     interface Props {
         row: TableRow;
@@ -14,9 +15,10 @@
         width: number;
         rowHeight?: number;
         align?: 'left' | 'center';
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
-    let { row, actions, alternative, parentRect, width, rowHeight, align }: Props = $props();
+    let { row, actions, alternative, parentRect, width, rowHeight, align, rowEvents = null }: Props = $props();
 
     let actionList = $state<Array<RowAction>>([]);
     let popupList = $state<Array<RowAction>>([]);
@@ -82,10 +84,15 @@
     let style = $derived(rowHeight == null ? '' : `height: ${rowHeight}px`);
 </script>
 
+<!-- 行级单击 / 双击展开是鼠标快捷方式；键盘用户通过指示列图标（可聚焦）操作 -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 <div
     class="data-row"
     class:alternative
     style="position: relative; display: block; padding: 0 4px; width: {width}px; {style}"
+    onclick={(e) => rowEvents?.onRowClick(row, e)}
+    ondblclick={(e) => rowEvents?.onRowDblClick(row, e)}
+    use:onRowExpandRequest={(e) => rowEvents?.onExpandRequest(row, e)}
 >
     <div class="action-cell" bind:this={cell} style={align == 'center' ? 'margin: 0 auto' : ''}>
         {#each actionList as action (action)}

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

@@ -1,5 +1,6 @@
 import type RowAction from "../lib/RowAction";
 import type TableRow from "./TableRow";
+import { type RowEventHandlers } from "../lib/RowExpansion";
 interface Props {
     row: TableRow;
     actions: Array<RowAction>;
@@ -8,6 +9,7 @@ interface Props {
     width: number;
     rowHeight?: number;
     align?: 'left' | 'center';
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const ActionsRow: import("svelte").Component<Props, {}, "">;
 type ActionsRow = ReturnType<typeof ActionsRow>;

package/dist/data_table/parts/ContentPanel.svelte

@@ -8,6 +8,7 @@
     import { OrderDirection } from "../lib/OrderDirection";
     import type { GetRowFontStyle } from "../../types";
     import type { VirtualWindow } from "../lib/virtualWindow";
+    import { onRowExpandRequest, type RowEventHandlers, type RowExpandContext } from "../lib/RowExpansion";
 
     interface Props {
         columns: Array<DataColumn>;
@@ -35,6 +36,9 @@
         viewportHeight?: number;
         /** 合计行各列文字；null 不显示 */
         summary?: Array<string> | null;
+        /** 传给展开区组件的上下文（collapse / actions） */
+        expandContext?: RowExpandContext | null;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
     let {
@@ -60,6 +64,8 @@
         vwindow = null,
         viewportHeight = $bindable(0),
         summary = null,
+        expandContext = null,
+        rowEvents = null,
     }: Props = $props();
 
     let scrollLeft = $state(0);
@@ -172,6 +178,7 @@
                         {row}
                         {columns}
                         alternative={idx % 2 == 1}
+                        {rowEvents}
                     />
                     {#if row == expandRow && inlineComponent}
                         {@const InlineComp = inlineComponent}
@@ -179,9 +186,10 @@
                             class="expand-data-row"
                             bind:clientHeight={inlineRowHeight}
                             style="position: relative; box-sizing: content-box; width: 100%; height: auto"
+                            use:onRowExpandRequest={(e) => rowEvents?.onExpandRequest(row, e)}
                         >
                             <div class="inline-panel">
-                                <InlineComp data={row.data} />
+                                <InlineComp data={row.data} context={expandContext} />
                             </div>
                         </div>
                     {/if}

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

@@ -4,6 +4,7 @@ import UniDataTable, { type OnWidthChange } from "../UniDataTable";
 import { OrderDirection } from "../lib/OrderDirection";
 import type { GetRowFontStyle } from "../../types";
 import type { VirtualWindow } from "../lib/virtualWindow";
+import { type RowEventHandlers, type RowExpandContext } from "../lib/RowExpansion";
 interface Props {
     columns: Array<DataColumn>;
     rows: Array<TableRow>;
@@ -30,6 +31,9 @@ interface Props {
     viewportHeight?: number;
     /** 合计行各列文字；null 不显示 */
     summary?: Array<string> | null;
+    /** 传给展开区组件的上下文（collapse / actions） */
+    expandContext?: RowExpandContext | null;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const ContentPanel: import("svelte").Component<Props, {}, "scrollTop" | "viewportHeight" | "rows" | "inlineRowHeight" | "tabWidth">;
 type ContentPanel = ReturnType<typeof ContentPanel>;

package/dist/data_table/parts/DataRow.svelte

@@ -3,6 +3,7 @@
     import DataCell from "./DataCell.svelte";
     import type TableRow from "./TableRow";
     import type { RowFontStyle } from "../../types";
+    import { onRowExpandRequest, type RowEventHandlers } from "../lib/RowExpansion";
 
     interface Props {
         columns: Array<DataColumn>;
@@ -10,9 +11,10 @@
         alternative: boolean;
         rowHeight?: number;
         fontStyle?: RowFontStyle;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
-    let { columns, row, alternative, rowHeight, fontStyle }: Props = $props();
+    let { columns, row, alternative, rowHeight, fontStyle, rowEvents = null }: Props = $props();
 
     const getRowStyle = (rh: number | undefined, fs: RowFontStyle | undefined): string => {
         let rs = '';
@@ -34,7 +36,16 @@
     let style = $derived(getRowStyle(rowHeight, fontStyle));
 </script>
 
-<div class="data-row" {style} class:alternative aria-hidden="true">
+<!-- 行级单击 / 双击展开是鼠标快捷方式；键盘用户通过指示列图标（可聚焦）操作。本元素 aria-hidden，无需 a11y 忽略 -->
+<div
+    class="data-row"
+    {style}
+    class:alternative
+    aria-hidden="true"
+    onclick={(e) => rowEvents?.onRowClick(row, e)}
+    ondblclick={(e) => rowEvents?.onRowDblClick(row, e)}
+    use:onRowExpandRequest={(e) => rowEvents?.onExpandRequest(row, e)}
+>
     {#each columns as col, idx (idx)}
         <DataCell colIdx={idx} data={row.data} column={col} />
     {/each}

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

@@ -1,12 +1,14 @@
 import type DataColumn from "../lib/DataColumn";
 import type TableRow from "./TableRow";
 import type { RowFontStyle } from "../../types";
+import { type RowEventHandlers } from "../lib/RowExpansion";
 interface Props {
     columns: Array<DataColumn>;
     row: TableRow;
     alternative: boolean;
     rowHeight?: number;
     fontStyle?: RowFontStyle;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const DataRow: import("svelte").Component<Props, {}, "">;
 type DataRow = ReturnType<typeof DataRow>;

package/dist/data_table/parts/FixedColumnsPanel.svelte

@@ -12,6 +12,7 @@
     import { OrderDirection } from "../lib/OrderDirection";
     import type { VirtualWindow } from "../lib/virtualWindow";
     import type { TableSummary } from "../lib/summary";
+    import type { RowEventHandlers, IsRowExpandable } from "../lib/RowExpansion";
 
     interface Props {
         fixedCols?: Array<DataColumn>;
@@ -33,6 +34,10 @@
         vwindow?: VirtualWindow | null;
         /** 合计行；null 不显示 */
         summary?: TableSummary | null;
+        /** 是否在指示列显示展开 / 收起图标（由 DataTable 根据 rowExpansion 决定） */
+        expandable?: boolean;
+        isExpandable?: IsRowExpandable<TableRow>;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
     let {
@@ -47,12 +52,15 @@
         orderColumn,
         orderDirection,
         selectedRows = $bindable([]),
-        expandRow = $bindable(null),
+        expandRow = null,
         rowHeight,
         headerHeight,
         inlineRowHeight = 0,
         vwindow = null,
         summary = null,
+        expandable = false,
+        isExpandable = () => true,
+        rowEvents = null,
     }: Props = $props();
 
     // Virtual scrolling: same shared window as the other panels, so all three
@@ -63,7 +71,6 @@
     let selectionMode = $state<SelectionMode>(SelectionMode.None);
 
     let selectable = $derived(indicatorColumn?.selectable == true);
-    let expandable = $derived(indicatorColumn?.buildInlineComponent != null);
 
     // Track selected indices internally to avoid $state proxy identity issues
     let selectedIndices = $state<Set<number>>(new Set());
@@ -162,6 +169,8 @@
                     {expandRow}
                     {rowHeight}
                     {expandable}
+                    {isExpandable}
+                    {rowEvents}
                     {onRowExpand}
                     {onRowSelectChange}
                     {indicatorColumn}

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

@@ -5,6 +5,7 @@ import type DataColumn from "../lib/DataColumn";
 import { OrderDirection } from "../lib/OrderDirection";
 import type { VirtualWindow } from "../lib/virtualWindow";
 import type { TableSummary } from "../lib/summary";
+import type { RowEventHandlers, IsRowExpandable } from "../lib/RowExpansion";
 interface Props {
     fixedCols?: Array<DataColumn>;
     indicatorColumn?: IndicatorColumn | null;
@@ -25,7 +26,11 @@ interface Props {
     vwindow?: VirtualWindow | null;
     /** 合计行；null 不显示 */
     summary?: TableSummary | null;
+    /** 是否在指示列显示展开 / 收起图标（由 DataTable 根据 rowExpansion 决定） */
+    expandable?: boolean;
+    isExpandable?: IsRowExpandable<TableRow>;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
-declare const FixedColumnsPanel: import("svelte").Component<Props, {}, "scrollTop" | "expandRow" | "selectedRows">;
+declare const FixedColumnsPanel: import("svelte").Component<Props, {}, "scrollTop" | "selectedRows">;
 type FixedColumnsPanel = ReturnType<typeof FixedColumnsPanel>;
 export default FixedColumnsPanel;

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 |
 
 ## 数据展示
 
@@ -128,8 +128,8 @@
 
 | 组件 | 导入路径 | 示例 | 属性数 |
 | --- | --- | --- | ---: |
-| [ClassicLayout](./classic-layout/README.md) | `@ticatec/topside-elements/app-layout/ClassicLayout` | [示例](./classic-layout/example.svelte) | 15 |
-| [ColumnsLayout](./columns-layout/README.md) | `@ticatec/topside-elements/app-layout/ColumnsLayout` | [示例](./columns-layout/example.svelte) | 13 |
-| [HeaderLayout](./header-layout/README.md) | `@ticatec/topside-elements/app-layout/HeaderLayout` | [示例](./header-layout/example.svelte) | 8 |
-| [RowsLayout](./rows-layout/README.md) | `@ticatec/topside-elements/app-layout/RowsLayout` | [示例](./rows-layout/example.svelte) | 13 |
-| [SidebarLayout](./sidebar-layout/README.md) | `@ticatec/topside-elements/app-layout/SidebarLayout` | [示例](./sidebar-layout/example.svelte) | 8 |
+| [ClassicLayout](./classic-layout/README.md) | `@ticatec/topside-elements/app-layout/ClassicLayout` | [示例](./classic-layout/example.svelte) | 18 |
+| [ColumnsLayout](./columns-layout/README.md) | `@ticatec/topside-elements/app-layout/ColumnsLayout` | [示例](./columns-layout/example.svelte) | 14 |
+| [HeaderLayout](./header-layout/README.md) | `@ticatec/topside-elements/app-layout/HeaderLayout` | [示例](./header-layout/example.svelte) | 10 |
+| [RowsLayout](./rows-layout/README.md) | `@ticatec/topside-elements/app-layout/RowsLayout` | [示例](./rows-layout/example.svelte) | 14 |
+| [SidebarLayout](./sidebar-layout/README.md) | `@ticatec/topside-elements/app-layout/SidebarLayout` | [示例](./sidebar-layout/example.svelte) | 10 |

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

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

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

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