@ticatec/uniface-element 5.0.0 → 5.0.2

package/docs/components/pagination-panel/README.md

@@ -0,0 +1,120 @@
+# PaginationPanel
+
+复合组件组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+组合页码、每页行数和总数信息的分页面板。
+
+## 适用场景
+
+- 数据表格底部分页控制
+- 需要同时修改页码和 page size
+
+## 导入
+
+```ts
+import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `pageCount` | 是 | `number` | 否 | `0` | 否 | 总页数；为 0 时表示没有可分页数据。 |
+| `pageNo` | 是 | `number` | 否 | `1` | 否 | 当前页码，通常从 1 开始。 |
+| `type` | 否 | `'plain' \| 'round' \| 'circle'` | 否 | `'round'` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `page$style` | 否 | `string` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `big` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `rowsSet` | 否 | `Array<number>` | 否 | `[25, 50, 100]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `total` | 否 | `number` | 否 | `0` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `generateInfo` | 否 | `GenerateTotalInfo` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `rowCount` | 是 | `number` | 否 | `$bindable(25)` | 是 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `rowCountLabel` | 否 | `string` | 否 | `'Rows/Page'` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `align` | 否 | `'left' \| 'right' \| ''` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `onPageSizeChange` | 否 | `OnPageSizeChange` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onchange` | 是 | `OnPageChange` | 否 | `undefined` | 否 | 用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `pageCount`
+
+总页数；为 0 时表示没有可分页数据。
+
+- 类型：`number`
+- 默认值：`0`
+- 示例写法：`pageCount={10}`
+
+### `pageNo`
+
+当前页码，通常从 1 开始。
+
+- 类型：`number`
+- 默认值：`1`
+- 示例写法：`pageNo={1}`
+
+### `rowCount`
+
+可选配置，具体取值范围和数据结构见类型列。
+
+- 类型：`number`
+- 默认值：`$bindable(25)`
+- 推荐写法：`bind:rowCount`
+
+### `onchange`
+
+用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。
+
+- 类型：`OnPageChange`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `GenerateTotalInfo`
+
+```ts
+export type GenerateTotalInfo = (total: number, pages?: number, pageNo?: number, rows?: number) => string;
+```
+
+### `OnPageSizeChange`
+
+```ts
+export type OnPageSizeChange = (size: number) => void;
+```
+
+### `OnPageChange`
+
+```ts
+export type OnPageChange = (pageNo: number) => void;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+  let rowCount = $state<any>(25);
+</script>
+
+<PaginationPanel
+  bind:rowCount
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onPageSizeChange={async (...args: any[]) => { console.log('onPageSizeChange', ...args); return true; }}
+  big={true}
+  pageCount={10}
+  pageNo={1}
+  rowsSet={[10, 25, 50]}
+  total={238}
+/>
+<p>当前状态：{JSON.stringify({rowCount})}</p>
+```
+
+## 源码
+
+- `src/lib/composite/pagination_panel/PaginationPanel.svelte`

package/docs/components/pagination-panel/example.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+  let rowCount = $state<any>(25);
+</script>
+
+<PaginationPanel
+  bind:rowCount
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onPageSizeChange={async (...args: any[]) => { console.log('onPageSizeChange', ...args); return true; }}
+  big={true}
+  pageCount={10}
+  pageNo={1}
+  rowsSet={[10, 25, 50]}
+  total={238}
+/>
+<p>当前状态：{JSON.stringify({rowCount})}</p>

package/docs/components/popup-hint/README.md

@@ -0,0 +1,44 @@
+# PopupHint
+
+浮层与弹窗组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+自动读取 data-tip/data-tooltip 的全局提示组件。
+
+## 适用场景
+
+- 按钮、字段和图标的悬停说明
+- 需要 Markdown 格式的轻量帮助提示
+
+## 导入
+
+```ts
+import PopupHint from '@ticatec/uniface-element/PopupHint';
+```
+
+别名入口：`@ticatec/uniface-element/Tooltip`
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `delay` | 否 | `number` | 否 | `200` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `offset` | 否 | `number` | 否 | `6` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import PopupHint from '@ticatec/uniface-element/PopupHint';
+</script>
+
+<PopupHint/>
+```
+
+## 源码
+
+- `src/lib/overlay/tooltip/Tooltip.svelte`

package/docs/components/popup-hint/example.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import PopupHint from '@ticatec/uniface-element/PopupHint';
+</script>
+
+<PopupHint/>

package/docs/components/progress-bar/README.md

@@ -0,0 +1,64 @@
+# ProgressBar
+
+反馈组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+展示任务完成比例和状态的进度条。
+
+## 适用场景
+
+- 上传、导入和批处理进度
+- 需要可视化百分比或成功失败状态
+
+## 导入
+
+```ts
+import ProgressBar from '@ticatec/uniface-element/ProgressBar';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `progress` | 否 | `number` | 否 | `0` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `size` | 否 | `number` | 否 | `100` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `type` | 否 | `ProgressBarType` | 否 | `"circular"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `height` | 否 | `number` | 否 | `5` | 否 | 高度配置，数值单位为像素。 |
+| `showText` | 否 | `boolean` | 否 | `true` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `status` | 否 | `ProgressStatus` | 否 | `ProgressStatus.progressing` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `ProgressStatus`
+
+```ts
+export enum ProgressStatus {
+    progressing='progressing',
+    successful='successful',
+    failure='failure',
+    canceled='canceled'
+}
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import ProgressBar from '@ticatec/uniface-element/ProgressBar';
+</script>
+
+<ProgressBar
+  height={48}
+  progress={65}
+/>
+```
+
+## 源码
+
+- `src/lib/feedback/progress-bar/ProgressBar.svelte`

package/docs/components/progress-bar/example.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import ProgressBar from '@ticatec/uniface-element/ProgressBar';
+</script>
+
+<ProgressBar
+  height={48}
+  progress={65}
+/>

package/docs/components/progress-step-bar/README.md

@@ -0,0 +1,93 @@
+# ProgressStepBar
+
+导航组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+以连续步骤块展示流程进度。
+
+## 适用场景
+
+- 注册、审批和订单处理流程
+- 需要突出当前步骤及前后阶段
+
+## 导入
+
+```ts
+import ProgressStepBar from '@ticatec/uniface-element/ProgressStepBar';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `steps` | 是 | `Array<ProgressStep>` | 是 | `—` | 否 | 流程步骤数据集合；每一步通常包含标题和当前状态（待处理/进行中/已完成）。 |
+| `direction` | 否 | `'vertical' \| 'horizontal'` | 否 | `'horizontal'` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的内联样式。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `steps`
+
+流程步骤数据集合；每一步通常包含标题和当前状态（待处理/进行中/已完成）。
+
+- 类型：`Array<ProgressStep>`
+- 默认值：`—`
+- 示例写法：`steps={[]}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `ProgressStep`
+
+```ts
+export default interface ProgressStep {
+
+    /**
+     *
+     */
+    topic: string;
+
+    /**
+     *
+     */
+    comment?: string;
+
+    /**
+     *
+     */
+    status: ProgressStepStatus;
+
+}
+```
+
+### `ProgressStepStatus`
+
+```ts
+export enum ProgressStepStatus {
+    Pending = 'pending',
+    Processing = 'processing',
+    Completed = 'completed'
+}
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import ProgressStepBar from '@ticatec/uniface-element/ProgressStepBar';
+</script>
+
+<ProgressStepBar
+  steps={[]}
+/>
+```
+
+## 源码
+
+- `src/lib/navigation/progress_step_bar/ProgressStepBar.svelte`

package/docs/components/progress-step-bar/example.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import ProgressStepBar from '@ticatec/uniface-element/ProgressStepBar';
+</script>
+
+<ProgressStepBar
+  steps={[]}
+/>

package/docs/components/prompts-text-editor/README.md

@@ -0,0 +1,146 @@
+# PromptsTextEditor
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+支持提示项或结构化文本输入的编辑器。
+
+## 适用场景
+
+- AI Prompt、模板片段和快捷文本
+- 需要组合预设提示与自由输入
+
+## 导入
+
+```ts
+import PromptsTextEditor from '@ticatec/uniface-element/PromptsTextEditor';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称，用于切换组件外观主题 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息，鼠标悬浮在字段上时显示 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息，用于在字段下方展示校验错误提示 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 是否禁用该字段，禁用后字段不可编辑且不响应交互 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 是否只读，只读状态下字段不可编辑但可聚焦和复制 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 是否启用紧凑模式，紧凑模式下字段内部间距更小 |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
+| `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本，字段值为空时在输入区域内展示 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式，会应用到字段根容器上 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
+| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
+| `value` | 是 | `string` | 否 | `$bindable()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `prefix` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `suffix` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `words` | 是 | `Array<string>` | 是 | `—` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `menu$height` | 否 | `number` | 否 | `0` | 否 | 高度配置，数值单位为像素。 |
+| `input\$*` | 否 | `any` | 否 | `透传` | 否 | 匹配此前缀的属性会透传给内部元素。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `disabled`
+
+是否禁用该字段，禁用后字段不可编辑且不响应交互
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+是否只读，只读状态下字段不可编辑但可聚焦和复制
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `variant`
+
+编辑器外观样式变体
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `placeholder`
+
+占位提示文本，字段值为空时在输入区域内展示
+
+- 类型：`string`
+- 默认值：`undefined`
+- 示例写法：`placeholder="请输入或选择"`
+
+### `onchange`
+
+字段值发生变化时触发的回调
+
+- 类型：`(value?: any) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`string`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:value`
+
+### `words`
+
+可选配置，具体取值范围和数据结构见类型列。
+
+- 类型：`Array<string>`
+- 默认值：`—`
+- 示例写法：`words={[]}`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import PromptsTextEditor from '@ticatec/uniface-element/PromptsTextEditor';
+  let value = $state<any>("示例值");
+</script>
+
+<PromptsTextEditor
+  words={[]}
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/prompts_text_editor/PromptsTextEditor.svelte`

package/docs/components/prompts-text-editor/example.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import PromptsTextEditor from '@ticatec/uniface-element/PromptsTextEditor';
+  let value = $state<any>("示例值");
+</script>
+
+<PromptsTextEditor
+  words={[]}
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

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

@@ -0,0 +1,121 @@
+# RadioButton
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+单个单选按钮，通常与同名选项组成互斥组。
+
+## 适用场景
+
+- 少量状态或方案选择
+- 需要原生单选语义和键盘操作
+
+## 导入
+
+```ts
+import RadioButton from '@ticatec/uniface-element/RadioButton';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `value` | 是 | `any` | 是 | `—` | 否 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `label` | 是 | `string` | 是 | `—` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `group` | 是 | `any` | 是 | `$bindable()` | 是 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 只读状态。保留内容展示，但阻止用户修改。 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 启用紧凑尺寸，减少组件高度和内边距。 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的内联样式。 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 组件获得焦点时调用。 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 组件失去焦点时调用。 |
+| `onchange` | 是 | `(value: any) => void` | 否 | `undefined` | 否 | 用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`any`
+- 默认值：`—`
+- 示例写法：参见下方完整示例中的类型化实现。
+
+### `label`
+
+可选配置，具体取值范围和数据结构见类型列。
+
+- 类型：`string`
+- 默认值：`—`
+- 示例写法：`label="示例标签"`
+
+### `group`
+
+可选配置，具体取值范围和数据结构见类型列。
+
+- 类型：`any`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:group`
+
+### `disabled`
+
+禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+只读状态。保留内容展示，但阻止用户修改。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `onchange`
+
+用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。
+
+- 类型：`(value: any) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import RadioButton from '@ticatec/uniface-element/RadioButton';
+  // 请替换为符合组件类型的业务数据。
+  const exampleValue = undefined as any;
+  let group = $state<any>();
+</script>
+
+<RadioButton
+  value={exampleValue}
+  label="示例标签"
+  bind:group
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({group})}</p>
+```
+
+## 源码
+
+- `src/lib/form/radio_button/RadioButton.svelte`

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import RadioButton from '@ticatec/uniface-element/RadioButton';
+  // 请替换为符合组件类型的业务数据。
+  const exampleValue = undefined as any;
+  let group = $state<any>();
+</script>
+
+<RadioButton
+  value={exampleValue}
+  label="示例标签"
+  bind:group
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({group})}</p>