@ticatec/topside-elements 1.0.6 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 1.2.0
+
+### 新增
+- **应用布局分割线**：SidebarLayout / HeaderLayout / ClassicLayout / ColumnsLayout / RowsLayout 新增 `divider`（默认 `true`），面板之间显示分割线；与 `*Resize`（能否拖动）相互独立——不可拖动时为固定线，可拖动但 `divider=false` 时线条为 0px、悬停 / 拖动时仅显示把手。SidebarLayout / HeaderLayout / ClassicLayout 新增 `headerDivider`，ClassicLayout 新增 `bottomDivider`（默认 `false`）。
+
+### 行为变化
+- 布局默认会显示面板之间的 1px 分割线（此前只有开启 `*Resize` 时才有）。自己用 border 画过分割线的页面会出现双线，去掉 border 或设 `divider={false}`。
+
+### 修复
+- ClassicLayout：`sidebarResize` 为真但没有 `sidebar` snippet 时不再渲染多余的分割线。
+
+## 1.1.0
+
+### 新增
+- **DataTable 行展开重做（`rowExpansion` 属性）**：展开区组件、触发方式与控制方式分离。`showToggle`（默认 true）控制指示列的展开图标；`trigger: 'click' | 'dblclick'` 整行单击 / 双击切换（点到按钮、链接、输入框不触发）；`isExpandable` 限制可展开行；`onExpandChange` 回调。
+- **组件方法**：`expandRow(data)` / `collapseRow(data?)` / `toggleRowExpand(data)` / `isRowExpanded(data)` / `getExpandedRow()`，操作列按钮、外部按钮都可以借此控制展开。
+- **行内事件请求**：自定义 `render` 单元格 / `ActionCell` / 展开区内部在任意元素上调用 `requestRowExpand(el)` / `requestRowCollapse(el)` / `requestRowToggle(el)`（或自行派发 `ROW_EXPAND_EVENT`），由 DataTable 定位所在行处理，不需要拿到表格实例。
+- **展开区上下文**：展开区组件除 `data` 外还收到 `context: RowExpandContext`——`collapse()` 关闭本行、`actions` 为本行行动作（来自 `actionsColumn.getActions`）、`invoke(label)` 按标签执行行动作，可在展开区里直接做“编辑明细”等操作。
+- 异步 `build` 期间切换到别的行时，过期的结果不再覆盖当前展开行。
+
+### 变更
+- `indicatorColumn.buildInlineComponent` 标记为 `@deprecated`，保留兼容（等价于 `rowExpansion = { build }`）。
+
+### 测试与文档
+- `topside-test-suite`：新增 `tests/elements/data_table/DataTable.expand.test.ts`（17 个用例）；`/test/data/data-table/expand` 演示页扩充为图标 / 双击 + 展开区行动作 / 自定义单元格 + 组件方法三个示例。
+- `data_table/README(_CN).md` 新增「行展开」章节与 `RowExpansion` / `RowExpandContext` 类型说明。
+
 ## 1.0.6
 
 ### 变更

package/dist/app_layout/ClassicLayout.svelte

@@ -13,6 +13,12 @@
         rightBarResize?: boolean;
         rightBarMaxWidth?: string | null;
         rightBarMinWidth?: string | null;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
+        /** 头部与内容之间显示横向分割线，默认 false */
+        headerDivider?: boolean;
+        /** 内容与底部状态栏之间显示横向分割线，默认 false */
+        bottomDivider?: boolean;
         header?: Snippet;
         sidebar?: Snippet;
         children?: Snippet;
@@ -31,6 +37,9 @@
         rightBarResize = false,
         rightBarMaxWidth = null,
         rightBarMinWidth = null,
+        divider = true,
+        headerDivider = false,
+        bottomDivider = false,
         header,
         sidebar,
         children,
@@ -51,17 +60,18 @@
         <div class="header-area" style="height: {headerHeight}">
             {@render header()}
         </div>
+        {#if headerDivider}
+            <Split direction="horizontal"/>
+        {/if}
     {/if}
     <div class="middle-area">
         {#if sidebar}
             <div bind:this={sidebarPanel} class="sidebar" style="width: {sidebarWidth}; {maxWidth} {minWidth}">
-                {#if sidebar}
-                    {@render sidebar()}
-                {/if}
+                {@render sidebar()}
             </div>
-        {/if}
-        {#if sidebarResize}
-            <Split direction="vertical" bindingPanel={sidebarPanel}/>
+            {#if sidebarResize || divider}
+                <Split direction="vertical" bindingPanel={sidebarResize ? sidebarPanel : undefined} width={divider ? undefined : 0}/>
+            {/if}
         {/if}
         <div class="content-area">
             {#if children}
@@ -69,17 +79,18 @@
             {/if}
         </div>
         {#if rightSidebar}
-            {#if rightBarResize}
-                <Split direction="vertical" bindingPanel={rightBarPanel} reverse/>
+            {#if rightBarResize || divider}
+                <Split direction="vertical" bindingPanel={rightBarResize ? rightBarPanel : undefined} width={divider ? undefined : 0} reverse/>
             {/if}
             <div bind:this={rightBarPanel} class="right-sidebar" style="width: {rightBarWidth}; {rightMinWidth} {rightMaxWidth}">
-                {#if rightSidebar}
-                    {@render rightSidebar()}
-                {/if}
+                {@render rightSidebar()}
             </div>
         {/if}
     </div>
     {#if bottom}
+        {#if bottomDivider}
+            <Split direction="horizontal"/>
+        {/if}
         <div class="bottom-area" style="height: {statusHeight}">
             {@render bottom()}
         </div>

package/dist/app_layout/ClassicLayout.svelte.d.ts

@@ -10,6 +10,12 @@ interface Props {
     rightBarResize?: boolean;
     rightBarMaxWidth?: string | null;
     rightBarMinWidth?: string | null;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
+    /** 头部与内容之间显示横向分割线，默认 false */
+    headerDivider?: boolean;
+    /** 内容与底部状态栏之间显示横向分割线，默认 false */
+    bottomDivider?: boolean;
     header?: Snippet;
     sidebar?: Snippet;
     children?: Snippet;

package/dist/app_layout/ColumnsLayout.svelte

@@ -17,6 +17,8 @@
         rightMaxWidth?: string | null;
         leftResize?: boolean;
         rightResize?: boolean;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
         left?: Snippet;
         children?: Snippet;
         right?: Snippet;
@@ -33,6 +35,7 @@
         rightMaxWidth = null,
         leftResize = false,
         rightResize = false,
+        divider = true,
         left,
         children,
         right
@@ -57,8 +60,8 @@
             {@render left()}
         {/if}
     </div>
-    {#if leftResize}
-        <Split bindingPanel={leftPanel}/>
+    {#if leftResize || divider}
+        <Split bindingPanel={leftResize ? leftPanel : undefined} width={divider ? undefined : 0}/>
     {/if}
     <div class="center-panel">
         {#if children}
@@ -66,8 +69,8 @@
         {/if}
     </div>
     {#if right}
-        {#if rightResize}
-            <Split bindingPanel={rightPanel} reverse/>
+        {#if rightResize || divider}
+            <Split bindingPanel={rightResize ? rightPanel : undefined} width={divider ? undefined : 0} reverse/>
         {/if}
         <div bind:this={rightPanel} class="right-panel" style={rightStyle}>
             {@render right()}

package/dist/app_layout/ColumnsLayout.svelte.d.ts

@@ -14,6 +14,8 @@ interface Props {
     rightMaxWidth?: string | null;
     leftResize?: boolean;
     rightResize?: boolean;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
     left?: Snippet;
     children?: Snippet;
     right?: Snippet;

package/dist/app_layout/HeaderLayout.svelte

@@ -8,6 +8,10 @@
         sidebarResize?: boolean;
         sidebarMaxWidth?: string | null;
         sidebarMinWidth?: string | null;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
+        /** 头部与内容之间显示横向分割线，默认 false */
+        headerDivider?: boolean;
         header?: Snippet;
         sidebar?: Snippet;
         children?: Snippet;
@@ -19,6 +23,8 @@
         sidebarResize = false,
         sidebarMaxWidth = null,
         sidebarMinWidth = null,
+        divider = true,
+        headerDivider = false,
         header,
         sidebar,
         children
@@ -34,6 +40,9 @@
         <div class="header-area" style="height: {headerHeight}">
             {@render header()}
         </div>
+        {#if headerDivider}
+            <Split direction="horizontal"/>
+        {/if}
     {/if}
     <div class="content-wrapper">
         {#if sidebar}
@@ -42,8 +51,8 @@
                     {@render sidebar()}
                 {/if}
             </div>
-            {#if sidebarResize}
-                <Split direction="vertical" bindingPanel={sidebarPanel}/>
+            {#if sidebarResize || divider}
+                <Split direction="vertical" bindingPanel={sidebarResize ? sidebarPanel : undefined} width={divider ? undefined : 0}/>
             {/if}
         {/if}
         <div class="main-content">

package/dist/app_layout/HeaderLayout.svelte.d.ts

@@ -5,6 +5,10 @@ interface Props {
     sidebarResize?: boolean;
     sidebarMaxWidth?: string | null;
     sidebarMinWidth?: string | null;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
+    /** 头部与内容之间显示横向分割线，默认 false */
+    headerDivider?: boolean;
     header?: Snippet;
     sidebar?: Snippet;
     children?: Snippet;

package/dist/app_layout/README.md

@@ -38,7 +38,7 @@ npm install @ticatec/topside-elements
 | **ColumnsLayout** | Left + center + right horizontal panels |
 | **RowsLayout** | Top + center + bottom vertical panels |
 
-All layouts accept `*Resize` props and constraints; panels without a corresponding snippet are not rendered.
+All layouts accept `*Resize` (draggable), `divider` (show line) and min/max constraints; panels without a corresponding snippet are not rendered.
 
 ---
 
@@ -51,6 +51,8 @@ Optional resizable sidebar on the left, plus a header area and content area stac
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `sidebarResize` | `boolean` | `false` | Enable sidebar resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
+| `headerDivider` | `boolean` | `false` | Show a horizontal line between header and content |
 | `headerHeight` | `string` | `'48px'` | Height of the header area |
 | `sidebarWidth` | `string` | `'300px'` | Initial width of the sidebar |
 | `sidebarMaxWidth` | `string \| null` | `null` | Maximum sidebar width (only when `sidebarResize`) |
@@ -99,6 +101,8 @@ Header on top, with a sidebar + content area below the header.
 | `headerHeight` | `string` | `'48px'` | Height of the header |
 | `sidebarWidth` | `string` | `'300px'` | Width of the sidebar |
 | `sidebarResize` | `boolean` | `false` | Enable sidebar resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
+| `headerDivider` | `boolean` | `false` | Show a horizontal line between header and content |
 | `sidebarMaxWidth` | `string \| null` | `null` | Maximum sidebar width (only when `sidebarResize`) |
 | `sidebarMinWidth` | `string \| null` | `null` | Minimum sidebar width (only when `sidebarResize`) |
 
@@ -145,6 +149,9 @@ Traditional desktop application layout: header, left sidebar, content area, opti
 | `sidebarMaxWidth` | `string \| null` | `null` | Maximum left sidebar width (only when `sidebarResize`) |
 | `sidebarMinWidth` | `string \| null` | `null` | Minimum left sidebar width (only when `sidebarResize`) |
 | `rightBarResize` | `boolean` | `false` | Enable right sidebar resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
+| `headerDivider` | `boolean` | `false` | Show a horizontal line between header and content |
+| `bottomDivider` | `boolean` | `false` | Show a horizontal line between content and status bar |
 | `rightBarMaxWidth` | `string \| null` | `null` | Maximum right sidebar width (only when `rightBarResize`) |
 | `rightBarMinWidth` | `string \| null` | `null` | Minimum right sidebar width (only when `rightBarResize`) |
 
@@ -207,6 +214,7 @@ Three-column horizontal layout: left + center + right. Center fills remaining sp
 | `rightMaxWidth` | `string \| null` | `null` | Right column max-width |
 | `leftResize` | `boolean` | `false` | Enable left column resizing |
 | `rightResize` | `boolean` | `false` | Enable right column resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
 
 ### Snippets
 
@@ -260,6 +268,7 @@ Three-row vertical layout: top + center + bottom. Center fills remaining space;
 | `bottomMaxHeight` | `string \| null` | `null` | Bottom row max-height |
 | `topResize` | `boolean` | `false` | Enable top row resizing |
 | `bottomResize` | `boolean` | `false` | Enable bottom row resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
 
 ### Snippets
 
@@ -295,6 +304,19 @@ Three-row vertical layout: top + center + bottom. Center fills remaining space;
 
 ---
 
+## Dividers
+
+Lines between panels are rendered by [Split](../general/split/README.md). `divider` and `*Resize` are independent switches:
+
+| `*Resize` | `divider` | Result |
+|---|---|---|
+| `false` | `true` (default) | Fixed 1px line, not draggable |
+| `true` | `true` | 1px line; a handle appears on hover; draggable |
+| `true` | `false` | No visible line (0px), still draggable near the edge; handle on hover / drag |
+| `false` | `false` | No divider |
+
+SidebarLayout / HeaderLayout / ClassicLayout also have `headerDivider` (line below the header), and ClassicLayout has `bottomDivider` (line above the status bar); both default to off, since headers and status bars usually have their own background or border. Line color comes from `--topside-dividing-line-color`.
+
 ## Resizable Panels
 
 When `*Resize` is enabled, a split handle is rendered between the panel and the center area:

package/dist/app_layout/README_CN.md

@@ -38,7 +38,7 @@ npm install @ticatec/topside-elements
 | **ColumnsLayout** | 左 + 中 + 右 三列水平布局 |
 | **RowsLayout** | 上 + 中 + 下 三行垂直布局 |
 
-所有布局都支持 `*Resize` 属性和 min/max 约束；未提供对应 snippet 的面板不会被渲染。
+所有布局都支持 `*Resize`（能否拖动）、`divider`（是否显示分割线）和 min/max 约束；未提供对应 snippet 的面板不会被渲染。
 
 ---
 
@@ -51,6 +51,8 @@ npm install @ticatec/topside-elements
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|---------|-------------|
 | `sidebarResize` | `boolean` | `false` | 启用侧边栏调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
+| `headerDivider` | `boolean` | `false` | 顶栏与内容之间显示横向分割线 |
 | `headerHeight` | `string` | `"48px"` | 标题区域高度 |
 | `sidebarWidth` | `string` | `"300px"` | 侧边栏初始宽度 |
 | `sidebarMaxWidth` | `string \| null` | `null` | 侧边栏最大宽度（仅当 `sidebarResize` 为真时生效） |
@@ -99,6 +101,8 @@ npm install @ticatec/topside-elements
 | `headerHeight` | `string` | `"48px"` | 标题栏高度 |
 | `sidebarWidth` | `string` | `"300px"` | 侧边栏宽度 |
 | `sidebarResize` | `boolean` | `false` | 启用侧边栏调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
+| `headerDivider` | `boolean` | `false` | 顶栏与内容之间显示横向分割线 |
 | `sidebarMaxWidth` | `string \| null` | `null` | 侧边栏最大宽度（仅当 `sidebarResize` 为真时生效） |
 | `sidebarMinWidth` | `string \| null` | `null` | 侧边栏最小宽度（仅当 `sidebarResize` 为真时生效） |
 
@@ -145,6 +149,9 @@ npm install @ticatec/topside-elements
 | `sidebarMaxWidth` | `string \| null` | `null` | 左侧边栏最大宽度（仅当 `sidebarResize` 为真时生效） |
 | `sidebarMinWidth` | `string \| null` | `null` | 左侧边栏最小宽度（仅当 `sidebarResize` 为真时生效） |
 | `rightBarResize` | `boolean` | `false` | 启用右侧边栏调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
+| `headerDivider` | `boolean` | `false` | 顶栏与内容之间显示横向分割线 |
+| `bottomDivider` | `boolean` | `false` | 内容与状态栏之间显示横向分割线 |
 | `rightBarMaxWidth` | `string \| null` | `null` | 右侧边栏最大宽度（仅当 `rightBarResize` 为真时生效） |
 | `rightBarMinWidth` | `string \| null` | `null` | 右侧边栏最小宽度（仅当 `rightBarResize` 为真时生效） |
 
@@ -207,6 +214,7 @@ npm install @ticatec/topside-elements
 | `rightMaxWidth` | `string \| null` | `null` | 右列最大宽度 |
 | `leftResize` | `boolean` | `false` | 启用左列调整大小 |
 | `rightResize` | `boolean` | `false` | 启用右列调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
 
 ### Snippets
 
@@ -260,6 +268,7 @@ npm install @ticatec/topside-elements
 | `bottomMaxHeight` | `string \| null` | `null` | 底部行最大高度 |
 | `topResize` | `boolean` | `false` | 启用顶部行调整大小 |
 | `bottomResize` | `boolean` | `false` | 启用底部行调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
 
 ### Snippets
 
@@ -295,6 +304,19 @@ npm install @ticatec/topside-elements
 
 ---
 
+## 分割线
+
+面板之间的分割线由 [Split](../general/split/README_CN.md) 渲染，`divider` 与 `*Resize` 是两个独立的开关：
+
+| `*Resize` | `divider` | 效果 |
+|---|---|---|
+| `false` | `true`（默认） | 固定的 1px 分割线，不可拖动 |
+| `true` | `true` | 1px 分割线，悬停时中间出现把手，可拖动 |
+| `true` | `false` | 不显示线（0px），靠近边界仍可拖动，悬停 / 拖动时出现把手 |
+| `false` | `false` | 无分割线 |
+
+SidebarLayout / HeaderLayout / ClassicLayout 另有 `headerDivider`（顶栏下方横线），ClassicLayout 还有 `bottomDivider`（状态栏上方横线），默认都关闭——顶栏和状态栏通常自带底色或边框。线条颜色由 `--topside-dividing-line-color` 控制。
+
 ## 可调整面板
 
 当 `*Resize` 启用时，面板与中央区域之间会渲染一个拖动手柄：

package/dist/app_layout/RowsLayout.svelte

@@ -17,6 +17,8 @@
         bottomMaxHeight?: string | null;
         topResize?: boolean;
         bottomResize?: boolean;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
         top?: Snippet;
         children?: Snippet;
         bottom?: Snippet;
@@ -33,6 +35,7 @@
         bottomMaxHeight = null,
         topResize = false,
         bottomResize = false,
+        divider = true,
         top,
         children,
         bottom
@@ -57,8 +60,8 @@
             {@render top()}
         {/if}
     </div>
-    {#if topResize}
-        <Split bindingPanel={topPanel} direction="horizontal"/>
+    {#if topResize || divider}
+        <Split bindingPanel={topResize ? topPanel : undefined} width={divider ? undefined : 0} direction="horizontal"/>
     {/if}
     <div class="center-panel">
         {#if children}
@@ -66,8 +69,8 @@
         {/if}
     </div>
     {#if bottom}
-        {#if bottomResize}
-            <Split bindingPanel={bottomPanel} reverse direction="horizontal"/>
+        {#if bottomResize || divider}
+            <Split bindingPanel={bottomResize ? bottomPanel : undefined} width={divider ? undefined : 0} reverse direction="horizontal"/>
         {/if}
         <div bind:this={bottomPanel} class="bottom-panel" style={bottomStyle}>
             {@render bottom()}

package/dist/app_layout/RowsLayout.svelte.d.ts

@@ -14,6 +14,8 @@ interface Props {
     bottomMaxHeight?: string | null;
     topResize?: boolean;
     bottomResize?: boolean;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
     top?: Snippet;
     children?: Snippet;
     bottom?: Snippet;

package/dist/app_layout/SidebarLayout.svelte

@@ -8,6 +8,10 @@
         sidebarWidth?: string;
         sidebarMaxWidth?: string | null;
         sidebarMinWidth?: string | null;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
+        /** 头部与内容之间显示横向分割线，默认 false */
+        headerDivider?: boolean;
         sidebar?: Snippet;
         header?: Snippet;
         children?: Snippet;
@@ -19,6 +23,8 @@
         sidebarWidth = '300px',
         sidebarMaxWidth = null,
         sidebarMinWidth = null,
+        divider = true,
+        headerDivider = false,
         sidebar,
         header,
         children
@@ -36,8 +42,8 @@
                 {@render sidebar()}
             {/if}
         </div>
-        {#if sidebarResize}
-            <Split direction="vertical" bindingPanel={sidebarPanel}/>
+        {#if sidebarResize || divider}
+            <Split direction="vertical" bindingPanel={sidebarResize ? sidebarPanel : undefined} width={divider ? undefined : 0}/>
         {/if}
     {/if}
     <div class="main-content">
@@ -45,6 +51,9 @@
             <div class="header-area" style="height: {headerHeight}">
                 {@render header()}
             </div>
+            {#if headerDivider}
+                <Split direction="horizontal"/>
+            {/if}
         {/if}
         <div class="content-area">
             {#if children}

package/dist/app_layout/SidebarLayout.svelte.d.ts

@@ -5,6 +5,10 @@ interface Props {
     sidebarWidth?: string;
     sidebarMaxWidth?: string | null;
     sidebarMinWidth?: string | null;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
+    /** 头部与内容之间显示横向分割线，默认 false */
+    headerDivider?: boolean;
     sidebar?: Snippet;
     header?: Snippet;
     children?: Snippet;