@ticatec/topside-elements 1.2.2 → 1.2.3

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/topside-elements",
-  "version": "1.2.2",
+  "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",