@ticatec/uniface-element 5.0.1 → 5.0.2

package/docs/components/number-range/README.md

@@ -0,0 +1,116 @@
+# NumberRange
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+编辑最小值与最大值的数字范围控件。
+
+## 适用场景
+
+- 价格、数量和评分区间筛选
+- 需要同时表达数值上下界
+
+## 导入
+
+```ts
+import NumberRange from '@ticatec/uniface-element/NumberRange';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 视觉样式变体，可选值：`""`(默认)、`plain`、`outlined`、`filled`；具体含义见组件说明。 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 启用紧凑尺寸，减少组件高度和内边距。 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 只读状态。保留内容展示，但阻止用户修改。 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `class` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的 CSS class。 |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `min` | 否 | `number` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `max` | 否 | `number` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `fromValue` | 是 | `number` | 否 | `$bindable<number \| undefined>()` | 是 | 范围起始值，推荐使用 `bind:fromValue`；变化时会与 `toValue` 一起校验先后关系。 |
+| `toValue` | 是 | `number` | 否 | `$bindable<number \| undefined>()` | 是 | 范围结束值，推荐使用 `bind:toValue`；变化时会与 `fromValue` 一起校验先后关系。 |
+| `allowNegative` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `variant`
+
+视觉样式变体，可选值：`""`(默认)、`plain`、`outlined`、`filled`；具体含义见组件说明。
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `disabled`
+
+禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+只读状态。保留内容展示，但阻止用户修改。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `fromValue`
+
+范围起始值，推荐使用 `bind:fromValue`；变化时会与 `toValue` 一起校验先后关系。
+
+- 类型：`number`
+- 默认值：`$bindable<number | undefined>()`
+- 推荐写法：`bind:fromValue`
+
+### `toValue`
+
+范围结束值，推荐使用 `bind:toValue`；变化时会与 `fromValue` 一起校验先后关系。
+
+- 类型：`number`
+- 默认值：`$bindable<number | undefined>()`
+- 推荐写法：`bind:toValue`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import NumberRange from '@ticatec/uniface-element/NumberRange';
+  let fromValue = $state<any>();
+  let toValue = $state<any>();
+</script>
+
+<NumberRange
+  bind:fromValue
+  bind:toValue
+  variant="plain"
+  compact={true}
+  disabled={false}
+  readonly={false}
+/>
+<p>当前状态：{JSON.stringify({fromValue, toValue})}</p>
+```
+
+## 源码
+
+- `src/lib/form/number_range/NumberRange.svelte`

package/docs/components/number-range/example.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import NumberRange from '@ticatec/uniface-element/NumberRange';
+  let fromValue = $state<any>();
+  let toValue = $state<any>();
+</script>
+
+<NumberRange
+  bind:fromValue
+  bind:toValue
+  variant="plain"
+  compact={true}
+  disabled={false}
+  readonly={false}
+/>
+<p>当前状态：{JSON.stringify({fromValue, toValue})}</p>

package/docs/components/options-multi-select/README.md

@@ -0,0 +1,161 @@
+# OptionsMultiSelect
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+从候选项中选择多个值的下拉控件。
+
+## 适用场景
+
+- 标签、角色和多部门选择
+- 候选项较多且需要紧凑展示已选项
+
+## 导入
+
+```ts
+import OptionsMultiSelect from '@ticatec/uniface-element/OptionsMultiSelect';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称，用于切换组件外观主题 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息，鼠标悬浮在字段上时显示 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息，用于在字段下方展示校验错误提示 |
+| `disabled` | 是 | `boolean` | 否 | `undefined` | 否 | 是否禁用该字段，禁用后字段不可编辑且不响应交互 |
+| `readonly` | 是 | `boolean` | 否 | `undefined` | 否 | 是否只读，只读状态下字段不可编辑但可聚焦和复制 |
+| `compact` | 否 | `boolean` | 否 | `undefined` | 否 | 是否启用紧凑模式，紧凑模式下字段内部间距更小 |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
+| `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本，字段值为空时在输入区域内展示 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式，会应用到字段根容器上 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
+| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
+| `mandatory` | 否 | `boolean` | 否 | `false` | 否 | 是否为必填字段，必填时字段值不能为空 |
+| `onkeydown` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onkeyup` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onkeypress` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `menu$height` | 否 | `number` | 否 | `0` | 否 | 高度配置，数值单位为像素。 |
+| `value` | 是 | `string` | 否 | `$bindable()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `delimiter` | 否 | `string` | 否 | `';'` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `options` | 是 | `Array<any>` | 是 | `—` | 否 | 可选项数据源；通常配合 `keyField` 与 `textField` 指定值字段和显示字段。 |
+| `keyField` | 否 | `string` | 否 | `"code"` | 否 | 数据项中作为唯一值或选中值的字段名。 |
+| `textField` | 否 | `string` | 否 | `"text"` | 否 | 数据项中用于界面显示的文本字段名。 |
+| `emptyText` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `disableOptions` | 否 | `Array<string>` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `hideOptions` | 否 | `Array<string>` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `tagColor` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `tagVariant` | 否 | `'borderless' \| 'border' \| 'round'` | 否 | `'border'` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `disabled`
+
+是否禁用该字段，禁用后字段不可编辑且不响应交互
+
+- 类型：`boolean`
+- 默认值：`undefined`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+是否只读，只读状态下字段不可编辑但可聚焦和复制
+
+- 类型：`boolean`
+- 默认值：`undefined`
+- 示例写法：`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`
+
+### `options`
+
+可选项数据源；通常配合 `keyField` 与 `textField` 指定值字段和显示字段。
+
+- 类型：`Array<any>`
+- 默认值：`—`
+- 示例写法：`options={[
+    {code: 'dev', text: '研发部'},
+    {code: 'product', text: '产品部'}
+  ]}`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import OptionsMultiSelect from '@ticatec/uniface-element/OptionsMultiSelect';
+  let value = $state<any>('dev;product');
+</script>
+
+<OptionsMultiSelect
+  options={[
+    {code: 'dev', text: '研发部'},
+    {code: 'product', text: '产品部'}
+  ]}
+  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="请输入或选择"
+  keyField="code"
+  textField="text"
+  disabled={false}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/options_multi_select/OptionsMultiSelect.svelte`

package/docs/components/options-multi-select/example.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import OptionsMultiSelect from '@ticatec/uniface-element/OptionsMultiSelect';
+  let value = $state<any>('dev;product');
+</script>
+
+<OptionsMultiSelect
+  options={[
+    {code: 'dev', text: '研发部'},
+    {code: 'product', text: '产品部'}
+  ]}
+  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="请输入或选择"
+  keyField="code"
+  textField="text"
+  disabled={false}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

package/docs/components/options-select/README.md

@@ -0,0 +1,160 @@
+# OptionsSelect
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+从结构化候选项中选择单个值的下拉控件。
+
+## 适用场景
+
+- 状态、类型和关联对象选择
+- 需要字段映射、禁用项或搜索过滤
+
+## 导入
+
+```ts
+import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `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` | 否 | 字段值发生变化时触发的回调 |
+| `mandatory` | 否 | `boolean` | 否 | `false` | 否 | 是否为必填字段，必填时字段值不能为空 |
+| `emptyText` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `value` | 是 | `any` | 是 | `$bindable()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `options` | 是 | `Array<Option>` | 是 | `—` | 否 | 可选项数据源；通常配合 `keyField` 与 `textField` 指定值字段和显示字段。 |
+| `keyField` | 否 | `string` | 否 | `"code"` | 否 | 数据项中作为唯一值或选中值的字段名。 |
+| `textField` | 否 | `string` | 否 | `"text"` | 否 | 数据项中用于界面显示的文本字段名。 |
+| `menu$height` | 否 | `number` | 否 | `0` | 否 | 高度配置，数值单位为像素。 |
+| `disableOptions` | 否 | `Array<string>` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `hideOptions` | 否 | `Array<string>` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `itemRender` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `filterPlaceholder` | 否 | `string` | 否 | `i18nRes.common.filterPlaceholder.toString()` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `filterFunction` | 否 | `(option: Option, keyword: string) => boolean` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `noResultsText` | 否 | `string` | 否 | `i18nRes.common.noResultsText.toString()` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 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`，外部修改会同步到组件。
+
+- 类型：`any`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:value`
+
+### `options`
+
+可选项数据源；通常配合 `keyField` 与 `textField` 指定值字段和显示字段。
+
+- 类型：`Array<Option>`
+- 默认值：`—`
+- 示例写法：`options={[
+    {code: 'dev', text: '研发部'},
+    {code: 'product', text: '产品部'}
+  ]}`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
+  let value = $state<any>('dev');
+</script>
+
+<OptionsSelect
+  bind:value
+  options={[
+    {code: 'dev', text: '研发部'},
+    {code: 'product', text: '产品部'}
+  ]}
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  keyField="code"
+  textField="text"
+  disabled={false}
+  readonly={false}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/options_select/OptionsSelect.svelte`

package/docs/components/options-select/example.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
+  let value = $state<any>('dev');
+</script>
+
+<OptionsSelect
+  bind:value
+  options={[
+    {code: 'dev', text: '研发部'},
+    {code: 'product', text: '产品部'}
+  ]}
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  keyField="code"
+  textField="text"
+  disabled={false}
+  readonly={false}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

package/docs/components/page/README.md

@@ -0,0 +1,77 @@
+# Page
+
+布局组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+提供标题、操作区和主体的标准页面容器。
+
+## 适用场景
+
+- 后台列表页、详情页和编辑页
+- 统一页面级间距、标题和操作布局
+
+## 导入
+
+```ts
+import Page from '@ticatec/uniface-element/Page';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `title` | 否 | `string` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `comment` | 否 | `string` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `content$style` | 否 | `string` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `round` | 否 | `boolean` | 否 | `true` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `shadow` | 否 | `boolean` | 否 | `true` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `goBack` | 否 | `PageAction` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `reload` | 否 | `PageAction` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `pageHeader` | 否 | `Snippet<[string, string?, PageAction?, PageAction?]>` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `headerExt` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `PageAction`
+
+```ts
+export type PageAction = () => any;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Page from '@ticatec/uniface-element/Page';
+</script>
+
+<Page
+  title="示例标题"
+  round={true}
+>
+  <div>在这里放置子内容</div>
+</Page>
+```
+
+## 源码
+
+- `src/lib/layouts/page/Page.svelte`

package/docs/components/page/example.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Page from '@ticatec/uniface-element/Page';
+</script>
+
+<Page
+  title="示例标题"
+  round={true}
+>
+  <div>在这里放置子内容</div>
+</Page>

package/docs/components/pagination/README.md

@@ -0,0 +1,88 @@
+# Pagination
+
+导航组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+仅负责页码切换的分页导航。
+
+## 适用场景
+
+- 服务端列表和客户端分页结果
+- 已知总页数并需要用户跳转页码
+
+## 导入
+
+```ts
+import Pagination from '@ticatec/uniface-element/Pagination';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `pageCount` | 是 | `number` | 是 | `0` | 否 | 总页数；为 0 时表示没有可分页数据。 |
+| `pageNo` | 是 | `number` | 否 | `1` | 否 | 当前页码，通常从 1 开始。 |
+| `type` | 否 | `'plain' \| 'round' \| 'circle'` | 否 | `"round"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `big` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `onchange` | 是 | `OnPageChange` | 否 | `undefined` | 否 | 用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `pageCount`
+
+总页数；为 0 时表示没有可分页数据。
+
+- 类型：`number`
+- 默认值：`0`
+- 示例写法：`pageCount={10}`
+
+### `pageNo`
+
+当前页码，通常从 1 开始。
+
+- 类型：`number`
+- 默认值：`1`
+- 示例写法：`pageNo={1}`
+
+### `onchange`
+
+用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。
+
+- 类型：`OnPageChange`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `OnPageChange`
+
+```ts
+export type OnPageChange = (pageNo: number) => void;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Pagination from '@ticatec/uniface-element/Pagination';
+</script>
+
+<Pagination
+  pageCount={10}
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  big={true}
+  pageNo={1}
+/>
+```
+
+## 源码
+
+- `src/lib/navigation/pagination/Pagination.svelte`

package/docs/components/pagination/example.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Pagination from '@ticatec/uniface-element/Pagination';
+</script>
+
+<Pagination
+  pageCount={10}
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  big={true}
+  pageNo={1}
+/>