@ticatec/topside-elements 1.2.1 → 1.2.3

package/dist/data_display/tree_view/README.md

@@ -41,6 +41,8 @@ import {HierarchyTree} from "@ticatec/topside-elements/TreeNodes";
 | `lazyLoader` | `TreeLazyLoader \| null` | `null` | Interface for loading child nodes on demand |
 | `activeNode` | `any` | `null` | The currently selected node (supports `bind:activeNode` two-way binding) |
 | `defaultExpandDepth` | `number` | `0` | Initial expand depth (0 = fully collapsed, 1 = expand root nodes, and so on) |
+| `expandOnClick` | `boolean` | `true` | Whether clicking a directory row toggles its expanded/collapsed state. Defaults to `true` |
+| `showChevron` | `boolean` | `true` | Whether to display the leading expand/collapse chevron icon. Defaults to `true`. When `expandOnClick` is `false`, this is forced to `true` (cannot be hidden) so users always have a way to open the branch |
 | `isVisible` | `NodeVisibleFun` | - | Predicate that filters which nodes are visible |
 | `onchange` | `OnNodeSelectionChange` | - | Callback fired when the selection changes; return `false` to cancel the selection |
 | `onfocus` | `(event: FocusEvent) => void` | - | Callback fired when the tree container gains focus |

package/dist/data_display/tree_view/README_CN.md

@@ -41,6 +41,8 @@ import {HierarchyTree} from "@ticatec/topside-elements/TreeNodes";
 | `lazyLoader` | `TreeLazyLoader \| null` | `null` | 异步懒加载子节点的接口 |
 | `activeNode` | `any` | `null` | 当前选中的节点（支持 `bind:activeNode` 双向绑定） |
 | `defaultExpandDepth` | `number` | `0` | 初始展开深度（0 = 全折叠，1 = 展开根节点，依此类推） |
+| `expandOnClick` | `boolean` | `true` | 是否允许点击目录行时自动切换展开/折叠。默认 `true` |
+| `showChevron` | `boolean` | `true` | 是否显示最前面用于展开/折叠的 chevron 图标。默认 `true`。若 `expandOnClick` 为 `false` 则强制为 `true`（不能隐藏，保证用户拥有打开入口） |
 | `isVisible` | `NodeVisibleFun` | - | 控制节点可见性的过滤函数 |
 | `onchange` | `OnNodeSelectionChange` | - | 节点选择变化时的回调函数（返回 `false` 可取消本次选择） |
 | `onfocus` | `(event: FocusEvent) => void` | - | 树容器获得焦点时的回调 |

package/dist/data_display/tree_view/TreeNodeView.svelte

@@ -17,7 +17,9 @@
         expandable: boolean;
         expanded: boolean;
         loading?: boolean;
-        ontoggle: () => void;
+        expandOnClick?: boolean;
+        showChevron?: boolean;
+        ontoggle: () => void | Promise<void>;
         onselect: (node: IHierarchyData<any>) => Promise<void>;
         oncontextmenu?: OnContextMenu;
     }
@@ -32,6 +34,8 @@
         expandable,
         expanded,
         loading = false,
+        expandOnClick = true,
+        showChevron = true,
         ontoggle,
         onselect,
         oncontextmenu
@@ -65,6 +69,9 @@
 
     const handleRowClick = async () => {
         await onselect(node);
+        if (expandOnClick && expandable) {
+            await ontoggle();
+        }
     }
 
     const handleRowKeyDown = async (e: KeyboardEvent) => {
@@ -92,23 +99,29 @@
          oncontextmenu={handleContextMenu} role="treeitem" tabindex="0" aria-selected={isSelected}
          aria-expanded={expandable ? expanded : undefined}>
 
-        <div class="item-chevron">
-            {#if expandable}
-                {#if loading}
-                    <img alt="loading" class="chevron-img" src={iconLoading}/>
-                {:else if chevronIcon}
-                    <span role="button" tabindex="0" aria-label={expanded ? 'Collapse' : 'Expand'} onclick={handleIconClick} onkeydown={handleIconKeyDown} class="chevron-btn">
-                        {@render chevronIcon({ expanded, loading })}
-                    </span>
+        {#if showChevron}
+            <div class="item-chevron">
+                {#if expandable}
+                    {#if loading}
+                        <img alt="loading" class="chevron-img" src={iconLoading}/>
+                    {:else if chevronIcon}
+                        <span role="button" tabindex="0" aria-label={expanded ? 'Collapse' : 'Expand'} onclick={handleIconClick} onkeydown={handleIconKeyDown} class="chevron-btn">
+                            {@render chevronIcon({ expanded, loading })}
+                        </span>
+                    {:else}
+                        <span role="button" tabindex="0" aria-label={expanded ? 'Collapse' : 'Expand'} onclick={handleIconClick} onkeydown={handleIconKeyDown} class="chevron-btn default-arrow">
+                            {expanded ? '▾' : '▸'}
+                        </span>
+                    {/if}
                 {:else}
-                    <span role="button" tabindex="0" aria-label={expanded ? 'Collapse' : 'Expand'} onclick={handleIconClick} onkeydown={handleIconKeyDown} class="chevron-btn default-arrow">
-                        {expanded ? '▾' : '▸'}
-                    </span>
+                    <span class="chevron-spacer"></span>
                 {/if}
-            {:else}
-                <span class="chevron-spacer"></span>
-            {/if}
-        </div>
+            </div>
+        {:else if loading}
+            <div class="item-chevron">
+                <img alt="loading" class="chevron-img" src={iconLoading}/>
+            </div>
+        {/if}
 
         {#if nodeIcon}
             <div class="node-type-icon">

package/dist/data_display/tree_view/TreeNodeView.svelte.d.ts

@@ -13,7 +13,9 @@ interface Props {
     expandable: boolean;
     expanded: boolean;
     loading?: boolean;
-    ontoggle: () => void;
+    expandOnClick?: boolean;
+    showChevron?: boolean;
+    ontoggle: () => void | Promise<void>;
     onselect: (node: IHierarchyData<any>) => Promise<void>;
     oncontextmenu?: OnContextMenu;
 }

package/dist/data_display/tree_view/TreeView.svelte

@@ -48,6 +48,10 @@
         title?: string;
         /** 初始展开多少层（0 = 全部折叠，1 = 展开根节点，依此类推）。默认 0。 */
         defaultExpandDepth?: number;
+        /** 点击目录时是否自动切换展开/折叠。默认 true。 */
+        expandOnClick?: boolean;
+        /** 是否显示最前面用于展开/折叠的 chevron 图标。默认 true；若 expandOnClick 为 false 则不能隐藏（强制为 true）。 */
+        showChevron?: boolean;
     }
 
     let {
@@ -67,9 +71,15 @@
         onblur,
         oncontextmenu,
         title = undefined,
-        defaultExpandDepth = 0
+        defaultExpandDepth = 0,
+        expandOnClick = true,
+        showChevron = true
     }: Props = $props();
 
+    // 只有当 expandOnClick 为 true 时，才允许隐藏 chevron。
+    // 如果 expandOnClick 为 false（即点击目录不自动打开），根据规则强制不能隐藏（保持用于打开）。
+    let effectiveShowChevron = $derived(!expandOnClick ? true : showChevron);
+
     // 展开 / 已加载 / 加载中的 key 集合。SvelteSet 让 .add/.delete 触发响应式更新。
     let expanded = new SvelteSet<string | number>();
     let loaded = new SvelteSet<string | number>();
@@ -167,6 +177,8 @@
                     {chevronIcon}
                     {activeNode}
                     expandable={isBranch(node)}
+                    {expandOnClick}
+                    showChevron={effectiveShowChevron}
                     {oncontextmenu}
                     onselect={selectNode}
                     expanded={expanded.has(tree.getKey(node.data))}

package/dist/data_display/tree_view/TreeView.svelte.d.ts

@@ -39,6 +39,10 @@ interface Props {
     title?: string;
     /** 初始展开多少层（0 = 全部折叠，1 = 展开根节点，依此类推）。默认 0。 */
     defaultExpandDepth?: number;
+    /** 点击目录时是否自动切换展开/折叠。默认 true。 */
+    expandOnClick?: boolean;
+    /** 是否显示最前面用于展开/折叠的 chevron 图标。默认 true；若 expandOnClick 为 false 则不能隐藏（强制为 true）。 */
+    showChevron?: boolean;
 }
 declare const TreeView: import("svelte").Component<Props, {}, "activeNode">;
 type TreeView = ReturnType<typeof TreeView>;

package/dist/general/button/IconButton.svelte

@@ -3,6 +3,7 @@
     import type { Snippet } from 'svelte';
 
     type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+    export type IconButtonVariant = 'circle' | 'round';
 
     interface Props {
         type?: ButtonType;
@@ -18,6 +19,18 @@
         children?: Snippet;
         tabindex?: number;
         outer?: boolean;
+        /** 形状变体：'circle' (默认正圆) | 'round' (圆角矩形) */
+        variant?: IconButtonVariant;
+        /** 形状别名，支持与 variant 相同的取值 */
+        shape?: IconButtonVariant;
+        /** 是否为圆角（round corner 便捷布尔属性） */
+        round?: boolean;
+        /** 是否无边框 */
+        borderless?: boolean;
+        /** 是否有边框（默认为 true，设为 false 时等同于 borderless） */
+        border?: boolean;
+        /** 是否有边框（border 别名） */
+        bordered?: boolean;
     }
 
     let {
@@ -32,9 +45,18 @@
         theme,
         children,
         tabindex = -1,
-        outer = true
+        outer = true,
+        variant = 'circle',
+        shape,
+        round = false,
+        borderless = false,
+        border = true,
+        bordered = true
     }: Props = $props();
 
+    const isRound = $derived(round || shape === 'round' || variant === 'round');
+    const shapeClass = $derived(isRound ? 'round' : 'circle');
+    const isBorderless = $derived(borderless || !border || !bordered);
 
     const handleClick = (e: MouseEvent) => {
         if (!disabled) {
@@ -48,7 +70,7 @@
 
 </script>
 
-<button type={htmlType} class="topside-button icon-button {size} {type} {theme}" class:outer class:no-outer={!outer} {style} class:disabled {disabled}
+<button type={htmlType} class="topside-button icon-button {size} {type} {shapeClass} {theme}" class:outer class:no-outer={!outer} class:borderless={isBorderless} {style} class:disabled {disabled}
     tabindex={disabled ? -1 : tabindex} data-tip={disabled ? null : tooltip} onclick={handleClick}>
     {#if children}
         {@render children()}

package/dist/general/button/IconButton.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Size } from "../../types";
 import type { Snippet } from 'svelte';
 type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+export type IconButtonVariant = 'circle' | 'round';
 interface Props {
     type?: ButtonType;
     htmlType?: 'button' | 'submit' | 'reset';
@@ -15,6 +16,18 @@ interface Props {
     children?: Snippet;
     tabindex?: number;
     outer?: boolean;
+    /** 形状变体：'circle' (默认正圆) | 'round' (圆角矩形) */
+    variant?: IconButtonVariant;
+    /** 形状别名，支持与 variant 相同的取值 */
+    shape?: IconButtonVariant;
+    /** 是否为圆角（round corner 便捷布尔属性） */
+    round?: boolean;
+    /** 是否无边框 */
+    borderless?: boolean;
+    /** 是否有边框（默认为 true，设为 false 时等同于 borderless） */
+    border?: boolean;
+    /** 是否有边框（border 别名） */
+    bordered?: boolean;
 }
 declare const IconButton: import("svelte").Component<Props, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/general/button/IconButton_README.md

@@ -37,7 +37,12 @@ const handleClick = (event) => {
 |------|------|---------|-------------|
 | `type` | `'default' \| 'primary' \| 'secondary' \| 'third' \| 'forth'` | `'default'` | Button type/style |
 | `disabled` | `boolean` | `false` | Whether the button is disabled |
-| `size` | `'big' \| 'medium' \| 'small'` | `'medium'` | Button size |
+| `size` | `'large' \| 'medium' \| 'small'` | `'medium'` | Button size |
+| `variant` | `'circle' \| 'round'` | `'circle'` | Button shape variant: `'circle'` for circular, `'round'` for round corner (rounded square) |
+| `shape` | `'circle' \| 'round'` | `'circle'` | Shape alias, supports the same values as `variant` |
+| `round` | `boolean` | `false` | Shorthand boolean for rounded corner (equivalent to `variant="round"`) |
+| `borderless` | `boolean` | `false` | Whether the button is borderless |
+| `border` | `boolean` | `true` | Whether the button has a border (setting `false` is equivalent to `borderless`) |
 | `style` | `string` | `''` | Custom CSS styles |
 | `icon` | `string` | `''` | Icon class name (e.g., FontAwesome classes) |
 | `theme` | `string` | - | Theme variant |
@@ -45,7 +50,27 @@ const handleClick = (event) => {
 | `onclick` | `(event: MouseEvent) => void` | - | Click event handler |
 | `children` | `Snippet` | - | Custom icon content snippet |
 | `tabindex` | `number` | `-1` | Tab index (defaults to -1 so button does not take Tab focus) |
-| `outer` | `boolean` | `true` | Whether to show outer frame/ring when focused or active (defaults to true; set to false to remove focus/active outer frame) |
+| `outer` | `boolean` | `true` | Whether to show outer frame/ring when focused or active (defaults to true; set to false to remove focus/active outer frame and border) |
+
+## Shape and Border
+
+By default, IconButton renders as a circle (`circle`) with a subtle border. You can set it to a rounded corner square via `variant="round"` or `round={true}`, and remove the border with `borderless={true}` or `border={false}`.
+
+```svelte
+<!-- Default circular with border -->
+<IconButton icon="icon_google_add" type="primary" />
+
+<!-- Round corner -->
+<IconButton icon="icon_google_add" type="primary" variant="round" />
+<!-- Or using the round shorthand boolean -->
+<IconButton icon="icon_google_add" type="primary" round />
+
+<!-- Borderless circle -->
+<IconButton icon="icon_google_favorite" type="primary" borderless={true} />
+
+<!-- Borderless round corner -->
+<IconButton icon="icon_google_favorite" type="primary" variant="round" borderless={true} />
+```
 
 ## Button Types
 

package/dist/general/button/IconButton_README_CN.md

@@ -37,7 +37,12 @@ const handleClick = (event) => {
 |------|------|---------|-------------|
 | `type` | `'default' \| 'primary' \| 'secondary' \| 'third' \| 'forth'` | `'default'` | 按钮类型/样式 |
 | `disabled` | `boolean` | `false` | 是否禁用按钮 |
-| `size` | `'big' \| 'medium' \| 'small'` | `'medium'` | 按钮尺寸 |
+| `size` | `'large' \| 'medium' \| 'small'` | `'medium'` | 按钮尺寸 |
+| `variant` | `'circle' \| 'round'` | `'circle'` | 按钮形状变体：`'circle'` 为正圆，`'round'` 为圆角矩形 |
+| `shape` | `'circle' \| 'round'` | `'circle'` | 形状别名，支持与 `variant` 相同的取值 |
+| `round` | `boolean` | `false` | 是否为圆角矩形（等同于 `variant="round"`） |
+| `borderless` | `boolean` | `false` | 是否无边框 |
+| `border` | `boolean` | `true` | 是否有边框（设为 `false` 时等同于 `borderless`） |
 | `style` | `string` | `''` | 自定义CSS样式 |
 | `icon` | `string` | `''` | 图标类名（如FontAwesome类） |
 | `theme` | `string` | - | 主题变体 |
@@ -45,7 +50,27 @@ const handleClick = (event) => {
 | `onclick` | `(event: MouseEvent) => void` | - | 点击事件处理器 |
 | `children` | `Snippet` | - | 自定义图标内容片段 |
 | `tabindex` | `number` | `-1` | Tab 键导航顺序（默认为 -1，取消 Tab 键停留） |
-| `outer` | `boolean` | `true` | focused / active 状态时是否带外框（默认为 true，设为 false 时去除聚焦/激活外框） |
+| `outer` | `boolean` | `true` | focused / active 状态时是否带外框（默认为 true，设为 false 时去除聚焦/激活外框与边框） |
+
+## 形状与边框
+
+IconButton 默认呈现为正圆（`circle`）且带有细边框。你可以通过 `variant="round"` 或 `round={true}` 将其设为圆角矩形（round corner），并通过 `borderless={true}` 或 `border={false}` 设置为无边框。
+
+```svelte
+<!-- 默认正圆带边框 -->
+<IconButton icon="icon_google_add" type="primary" />
+
+<!-- 圆角矩形 (round corner) -->
+<IconButton icon="icon_google_add" type="primary" variant="round" />
+<!-- 或使用便捷布尔属性 -->
+<IconButton icon="icon_google_add" type="primary" round />
+
+<!-- 无边框正圆 -->
+<IconButton icon="icon_google_favorite" type="primary" borderless={true} />
+
+<!-- 无边框圆角矩形 -->
+<IconButton icon="icon_google_favorite" type="primary" variant="round" borderless={true} />
+```
 
 ## 按钮类型
 

package/dist/general/button/index.d.ts

@@ -1,8 +1,8 @@
 import Button from "./Button.svelte";
-import IconButton from "./IconButton.svelte";
+import IconButton, { type IconButtonVariant } from "./IconButton.svelte";
 import TextButton from "./TextButton.svelte";
 import type { ButtonType } from "../../types";
 export default Button;
 export { IconButton };
 export { TextButton };
-export type { ButtonType };
+export type { ButtonType, IconButtonVariant };

package/dist/general/button/index.js

@@ -1,5 +1,5 @@
 import Button from "./Button.svelte";
-import IconButton from "./IconButton.svelte";
+import IconButton, {} from "./IconButton.svelte";
 import TextButton from "./TextButton.svelte";
 export default Button;
 export { IconButton };

package/dist/overlay/dialog/DialogManager.svelte.d.ts

@@ -1,4 +1,4 @@
-import { ModalResult, type OnClose } from './IDialog';
+import { ModalResult, type OnClose, type DialogOptions } from './IDialog';
 export interface DialogEntry {
     id: string;
     component: any;
@@ -14,6 +14,8 @@ export declare function _isBoardMounted(): boolean;
 export declare function _markBoardMounted(): void;
 declare class DialogManager {
     stack: DialogEntry[];
+    /** 首次打开前配置挂载容器；不调用时默认挂载到 document.body。 */
+    init({ target }?: DialogOptions): void;
     show(component: any, params?: Record<string, any>): Promise<ModalResult>;
     /**
      * 内部使用：由 Dialog / CommonDialog 调用，触发对应 entry 的 Promise resolve 并出栈。

package/dist/overlay/dialog/DialogManager.svelte.js

@@ -1,7 +1,10 @@
 import DialogBoard from './DialogBoard.svelte';
+import { mount } from 'svelte';
 import { ModalResult } from './IDialog';
 import { mountToBody } from '../common/mountSingleton';
 let boardMounted = false;
+let showCalled = false;
+let mountTarget = null;
 /**
  * 内部使用：DialogBoard 在组件初始化时检查并标记，确保全局只有一个 board 实际渲染 stack。
  * 防止"用户在 app 根放了 <DialogBoard/> + manager 自动 mount"导致的重复渲染。
@@ -20,11 +23,24 @@ function ensureMounted() {
     // _markBoardMounted() on init, since a board the consumer placed manually
     // in their app root also needs to mark it mounted, not just this
     // auto-mount path.
-    mountToBody(DialogBoard);
+    if (mountTarget) {
+        mount(DialogBoard, { target: mountTarget });
+    }
+    else {
+        mountToBody(DialogBoard);
+    }
 }
 class DialogManager {
     stack = $state([]);
+    /** 首次打开前配置挂载容器；不调用时默认挂载到 document.body。 */
+    init({ target = null } = {}) {
+        if (showCalled || boardMounted) {
+            throw new Error('Dialog target is locked. Call init() before the first show() and before mounting DialogBoard.');
+        }
+        mountTarget = target;
+    }
     show(component, params = {}) {
+        showCalled = true;
         ensureMounted();
         const id = Math.floor((Date.now() + Math.random()) * 100).toString(36);
         // onclose 为规范名；onClose 为 5.x 兼容别名（NAMING R1）
@@ -49,6 +65,7 @@ class DialogManager {
 const dialogManager = new DialogManager();
 if (typeof window !== 'undefined') {
     window.Dialog = {
+        init: options => dialogManager.init(options),
         show: (component, params) => dialogManager.show(component, params),
         showModal: (component, params) => {
             void dialogManager.show(component, params);

package/dist/overlay/dialog/IDialog.d.ts

@@ -1,7 +1,13 @@
 import { ModalResult } from "../message-box/IMessageBox";
 export { ModalResult };
 export type OnClose = (result: ModalResult) => void;
+export interface DialogOptions {
+    /** 自动挂载的容器；省略或为 null 时使用 document.body。首次打开前配置。 */
+    target?: HTMLElement | null;
+}
 export default interface IDialog {
+    /** 配置自动挂载容器，必须在首次 show() 和 DialogBoard 挂载前调用。 */
+    init: (options?: DialogOptions) => void;
     /**
      * 打开一个对话框，返回 Promise<ModalResult>。
      * 调用者可 await 获取用户的关闭结果（MR_OK / MR_CANCEL / MR_CLOSE）。

package/dist/overlay/dialog/README.md

@@ -36,6 +36,31 @@ import Dialog, { dialogManager, CommonDialog, ModalResult } from "@ticatec/topsi
 
 > **Legacy compatibility**: if you previously placed `<DialogBoard/>` in your app root, you can leave it or remove it. When multiple boards coexist, only the first one to mount actually renders the stack — dialogs are never duplicated.
 
+### Custom mount container
+
+The default mount target is `document.body`. To render dialogs inside a specific div, call `init` after the element exists and before opening the first dialog:
+
+```svelte
+<script lang="ts">
+  import {onMount} from 'svelte';
+  import {dialogManager} from '@ticatec/topside-elements/Dialog';
+
+  let dialogHost: HTMLDivElement;
+
+  onMount(() => {
+    dialogManager.init({target: dialogHost});
+  });
+</script>
+
+<div bind:this={dialogHost}></div>
+```
+
+All subsequent `dialogManager.show(...)` / `window.Dialog.show(...)` calls render inside this container. `window.Dialog.init({target: element})` is also supported. Calling `init()` or `init({target: null})` selects the default body target.
+
+`init` only configures the target; mounting still happens on the first `show`. Keep the container mounted while using the dialog system. Calling `init` after the first `show` call or after DialogBoard has mounted throws an error, even if mounting failed or all dialogs have closed. A manually placed `<DialogBoard/>` uses its actual location, so omit this configuration in that mode. Directly rendered `<Dialog>` components are unaffected.
+
+This changes DOM placement only: dialogs retain `position: fixed` and are not automatically constrained to the container bounds.
+
 ## Two usage modes
 
 ### Mode 1: Imperative (recommended)

package/dist/overlay/dialog/README_CN.md

@@ -36,6 +36,31 @@ import Dialog, { dialogManager, CommonDialog, ModalResult } from "@ticatec/topsi
 
 > **旧项目兼容**：如果你之前在 app 根放了 `<DialogBoard/>`，可以保留也可以删除。多个 board 共存时只有第一个真正渲染 stack，不会重复显示对话框。
 
+### 指定挂载容器
+
+默认自动挂载到 `document.body`。如果需要让弹窗成为某个 div 的子节点，在该元素已创建、且首次打开弹窗之前调用 `init`：
+
+```svelte
+<script lang="ts">
+  import {onMount} from 'svelte';
+  import {dialogManager} from '@ticatec/topside-elements/Dialog';
+
+  let dialogHost: HTMLDivElement;
+
+  onMount(() => {
+    dialogManager.init({target: dialogHost});
+  });
+</script>
+
+<div bind:this={dialogHost}></div>
+```
+
+之后所有 `dialogManager.show(...)` / `window.Dialog.show(...)` 打开的弹窗都渲染在这个容器内。也可以通过 `window.Dialog.init({target: element})` 配置；`init()` 或 `init({target: null})` 使用默认 body。
+
+`init` 只配置容器，仍在首次 `show` 时挂载。容器应在弹窗系统使用期间保持挂载。首次调用 `show` 或 DialogBoard 挂载后，再调用 `init` 会抛出错误，即使挂载未成功或所有弹窗已关闭也不能重新配置。手动放置 `<DialogBoard/>` 时以其实际位置为准，应省略此配置；直接渲染 `<Dialog>` 不受此配置影响。
+
+此配置只改变 DOM 挂载位置；弹窗仍使用 `position: fixed`，不会自动限制在容器边界内。
+
 ## 两种使用模式
 
 ### 模式一：命令式（推荐）

package/dist/overlay/dialog/index.d.ts

@@ -1,7 +1,7 @@
 import Dialog from "./Dialog.svelte";
 import dialogManager from "./DialogManager.svelte";
 import type IDialog from "./IDialog";
-import { ModalResult, type OnClose } from "./IDialog";
+import { ModalResult, type OnClose, type DialogOptions } from "./IDialog";
 import type { BeforeClose } from "./BeforeClose";
 import CommonDialog from "./CommonDialog.svelte";
 import DialogBoard from "./DialogBoard.svelte";
@@ -11,4 +11,4 @@ declare global {
     }
 }
 export default Dialog;
-export { dialogManager, ModalResult, type OnClose, type IDialog, type BeforeClose, CommonDialog, DialogBoard };
+export { dialogManager, ModalResult, type OnClose, type DialogOptions, type IDialog, type BeforeClose, CommonDialog, DialogBoard };

package/dist/topside-elements.css

@@ -943,6 +943,24 @@
 .topside-button.icon-button.small i {
   font-size: 16px;
 }
+.topside-button.icon-button.circle {
+  border-radius: 50%;
+}
+.topside-button.icon-button.round, .topside-button.icon-button.round-corner {
+  border-radius: var(--topside-button-radius, var(--radius-md, 4px));
+}
+.topside-button.icon-button.borderless {
+  border-color: transparent !important;
+}
+.topside-button.icon-button.borderless.disabled {
+  border-color: transparent !important;
+}
+.topside-button.icon-button.no-outer {
+  border-color: transparent !important;
+}
+.topside-button.icon-button.no-outer.disabled {
+  border-color: transparent !important;
+}
 .topside-button.icon-button.no-outer:focus, .topside-button.icon-button.no-outer:focus-visible, .topside-button.icon-button.no-outer:active {
   outline: none !important;
   box-shadow: none !important;

package/docs/components/README.md

@@ -109,8 +109,8 @@
 | [Accordion](./accordion/README.md) | `@ticatec/topside-elements/Accordion` | [示例](./accordion/example.svelte) | 5 |
 | [Card](./card/README.md) | `@ticatec/topside-elements/Card` | [示例](./card/example.svelte) | 11 |
 | [ConciseDataTable](./concise-data-table/README.md) | `@ticatec/topside-elements/ConciseDataTable` | [示例](./concise-data-table/example.svelte) | 10 |
-| [ListBox](./list-box/README.md) | `@ticatec/topside-elements/ListBox` | [示例](./list-box/example.svelte) | 20 |
-| [TreeView](./tree-view/README.md) | `@ticatec/topside-elements/TreeView` | [示例](./tree-view/example.svelte) | 17 |
+| [ListBox](./list-box/README.md) | `@ticatec/topside-elements/ListBox` | [示例](./list-box/example.svelte) | 22 |
+| [TreeView](./tree-view/README.md) | `@ticatec/topside-elements/TreeView` | [示例](./tree-view/example.svelte) | 19 |
 
 ## 通用
 
@@ -118,7 +118,7 @@
 | --- | --- | --- | ---: |
 | [Button](./button/README.md) | `@ticatec/topside-elements/Button` | [示例](./button/example.svelte) | 14 |
 | [Icon](./icon/README.md) | `@ticatec/topside-elements/Icon` | [示例](./icon/example.svelte) | 8 |
-| [IconButton](./icon-button/README.md) | `@ticatec/topside-elements/IconButton` | [示例](./icon-button/example.svelte) | 12 |
+| [IconButton](./icon-button/README.md) | `@ticatec/topside-elements/IconButton` | [示例](./icon-button/example.svelte) | 18 |
 | [Separator](./separator/README.md) | `@ticatec/topside-elements/Separator` | [示例](./separator/example.svelte) | 2 |
 | [Split](./split/README.md) | `@ticatec/topside-elements/Split` | [示例](./split/example.svelte) | 10 |
 | [Tag](./tag/README.md) | `@ticatec/topside-elements/Tag` | [示例](./tag/example.svelte) | 10 |

package/docs/components/icon-button/README.md

@@ -33,6 +33,12 @@ import IconButton from '@ticatec/topside-elements/IconButton';
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
 | `tabindex` | 否 | `number` | 否 | `-1` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `outer` | 否 | `boolean` | 否 | `true` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `variant` | 是 | `IconButtonVariant` | 否 | `'circle'` | 否 | 形状变体：'circle' (默认正圆) \| 'round' (圆角矩形) |
+| `shape` | 否 | `IconButtonVariant` | 否 | `undefined` | 否 | 形状别名，支持与 variant 相同的取值 |
+| `round` | 否 | `boolean` | 否 | `false` | 否 | 是否为圆角（round corner 便捷布尔属性） |
+| `borderless` | 否 | `boolean` | 否 | `false` | 否 | 是否无边框 |
+| `border` | 否 | `boolean` | 否 | `true` | 否 | 是否有边框（默认为 true，设为 false 时等同于 borderless） |
+| `bordered` | 否 | `boolean` | 否 | `true` | 否 | 是否有边框（border 别名） |
 
 > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
 
@@ -62,6 +68,14 @@ Svelte Snippet 子内容，用于自定义组件主体。
 - 默认值：`undefined`
 - 示例写法：`children={children}`
 
+### `variant`
+
+形状变体：'circle' (默认正圆) | 'round' (圆角矩形)
+
+- 类型：`IconButtonVariant`
+- 默认值：`'circle'`
+- 示例写法：`variant="circle"`
+
 ## 相关类型定义
 
 以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
@@ -88,8 +102,10 @@ export type Size = 'small' | 'medium' | 'large';
 
 <IconButton
   onclick={async (...args: any[]) => { console.log('onclick', ...args); return true; }}
+  variant="circle"
   disabled={false}
   size="small"
+  round={true}
 >
   <div>在这里放置子内容</div>
 </IconButton>

package/docs/components/icon-button/example.svelte

@@ -4,8 +4,10 @@
 
 <IconButton
   onclick={async (...args: any[]) => { console.log('onclick', ...args); return true; }}
+  variant="circle"
   disabled={false}
   size="small"
+  round={true}
 >
   <div>在这里放置子内容</div>
 </IconButton>

package/docs/components/tree-view/README.md

@@ -38,6 +38,8 @@ import TreeView from '@ticatec/topside-elements/TreeView';
 | `oncontextmenu` | 否 | `OnContextMenu` | 否 | `undefined` | 否 | 节点右键菜单回调 (event, node) |
 | `title` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `defaultExpandDepth` | 否 | `number` | 否 | `0` | 否 | 初始展开多少层（0 = 全部折叠，1 = 展开根节点，依此类推）。默认 0。 |
+| `expandOnClick` | 是 | `boolean` | 否 | `true` | 否 | 点击目录行时是否自动切换展开/折叠。默认 true。 |
+| `showChevron` | 否 | `boolean` | 否 | `true` | 否 | 是否显示最前面用于展开/折叠的 chevron 图标。默认 true；若 expandOnClick 为 false 则强制为 true（不能隐藏，保证可打开）。 |
 
 > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
 

package/package.json

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