@ticatec/uniface-element 5.0.1 → 5.0.2

package/docs/components/README.md

@@ -0,0 +1,133 @@
+# Uniface Element 组件文档
+
+本目录依据 `package.json exports` 和组件源码自动生成，共收录 **71** 个公开组件。每个组件都包含独立属性文档和可复制的 Svelte 示例。
+
+- 重新生成：`pnpm run docs:components`
+- 属性来源：组件内 `Props` 接口及 `$props()` 默认值
+- 文档不复用历史 README，避免旧 API 污染
+
+## 表单
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [AttachmentFiles](./attachment-files/README.md) | `@ticatec/uniface-element/AttachmentFiles` | [示例](./attachment-files/example.svelte) | 20 |
+| [CascadeOptionsSelect](./cascade-options-select/README.md) | `@ticatec/uniface-element/CascadeOptionsSelect` | [示例](./cascade-options-select/example.svelte) | 27 |
+| [Checkbox](./checkbox/README.md) | `@ticatec/uniface-element/Checkbox` | [示例](./checkbox/example.svelte) | 11 |
+| [ColorPicker](./color-picker/README.md) | `@ticatec/uniface-element/ColorPicker` | [示例](./color-picker/example.svelte) | 13 |
+| [DatePicker](./date-picker/README.md) | `@ticatec/uniface-element/DatePicker` | [示例](./date-picker/example.svelte) | 19 |
+| [DateRange](./date-range/README.md) | `@ticatec/uniface-element/DateRange` | [示例](./date-range/example.svelte) | 14 |
+| [DateTimePicker](./date-time-picker/README.md) | `@ticatec/uniface-element/DateTimePicker` | [示例](./date-time-picker/example.svelte) | 17 |
+| [GroupCheckBox](./group-check-box/README.md) | `@ticatec/uniface-element/GroupCheckBox` | [示例](./group-check-box/example.svelte) | 20 |
+| [GroupRadioBox](./group-radio-box/README.md) | `@ticatec/uniface-element/GroupRadioBox` | [示例](./group-radio-box/example.svelte) | 17 |
+| [ImageFiles](./image-files/README.md) | `@ticatec/uniface-element/ImageFiles` | [示例](./image-files/example.svelte) | 9 |
+| [InputOptionsSelect](./input-options-select/README.md) | `@ticatec/uniface-element/InputOptionsSelect` | [示例](./input-options-select/example.svelte) | 23 |
+| [LookupEditor](./lookup-editor/README.md) | `@ticatec/uniface-element/LookupEditor` | [示例](./lookup-editor/example.svelte) | 17 |
+| [MemoEditor](./memo-editor/README.md) | `@ticatec/uniface-element/MemoEditor` | [示例](./memo-editor/example.svelte) | 24 |
+| [NumberEditor](./number-editor/README.md) | `@ticatec/uniface-element/NumberEditor` | [示例](./number-editor/example.svelte) | 25 |
+| [NumberRange](./number-range/README.md) | `@ticatec/uniface-element/NumberRange` | [示例](./number-range/example.svelte) | 14 |
+| [OptionsMultiSelect](./options-multi-select/README.md) | `@ticatec/uniface-element/OptionsMultiSelect` | [示例](./options-multi-select/example.svelte) | 27 |
+| [OptionsSelect](./options-select/README.md) | `@ticatec/uniface-element/OptionsSelect` | [示例](./options-select/example.svelte) | 25 |
+| [PromptsTextEditor](./prompts-text-editor/README.md) | `@ticatec/uniface-element/PromptsTextEditor` | [示例](./prompts-text-editor/example.svelte) | 18 |
+| [RadioButton](./radio-button/README.md) | `@ticatec/uniface-element/RadioButton` | [示例](./radio-button/example.svelte) | 10 |
+| [SearchBox](./search-box/README.md) | `@ticatec/uniface-element/SearchBox` | [示例](./search-box/example.svelte) | 17 |
+| [Switch](./switch/README.md) | `@ticatec/uniface-element/Switch` | [示例](./switch/example.svelte) | 5 |
+| [TextEditor](./text-editor/README.md) | `@ticatec/uniface-element/TextEditor` | [示例](./text-editor/example.svelte) | 22 |
+| [TimeEditor](./time-editor/README.md) | `@ticatec/uniface-element/TimeEditor` | [示例](./time-editor/example.svelte) | 19 |
+| [UnitNumberEditor](./unit-number-editor/README.md) | `@ticatec/uniface-element/UnitNumberEditor` | [示例](./unit-number-editor/example.svelte) | 18 |
+
+## 布局
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [ActionBar](./action-bar/README.md) | `@ticatec/uniface-element/ActionBar` | [示例](./action-bar/example.svelte) | 4 |
+| [AppTopBar](./app-top-bar/README.md) | `@ticatec/uniface-element/AppTopBar` | [示例](./app-top-bar/example.svelte) | 6 |
+| [Box](./box/README.md) | `@ticatec/uniface-element/Box` | [示例](./box/example.svelte) | 8 |
+| [CriteriaField](./criteria-field/README.md) | `@ticatec/uniface-element/CriteriaField` | [示例](./criteria-field/example.svelte) | 7 |
+| [FlexForm](./flex-form/README.md) | `@ticatec/uniface-element/FlexForm` | [示例](./flex-form/example.svelte) | 3 |
+| [FlexRowForm](./flex-row-form/README.md) | `@ticatec/uniface-element/FlexRowForm` | [示例](./flex-row-form/example.svelte) | 4 |
+| [FormField](./form-field/README.md) | `@ticatec/uniface-element/FormField` | [示例](./form-field/example.svelte) | 11 |
+| [GridForm](./grid-form/README.md) | `@ticatec/uniface-element/GridForm` | [示例](./grid-form/example.svelte) | 5 |
+| [Page](./page/README.md) | `@ticatec/uniface-element/Page` | [示例](./page/example.svelte) | 12 |
+
+## 导航
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [Breadcrumbs](./breadcrumbs/README.md) | `@ticatec/uniface-element/Breadcrumbs` | [示例](./breadcrumbs/example.svelte) | 6 |
+| [Navigator](./navigator/README.md) | `@ticatec/uniface-element/Navigator` | [示例](./navigator/example.svelte) | 6 |
+| [NavigatorMenu](./navigator-menu/README.md) | `@ticatec/uniface-element/NavigatorMenu` | [示例](./navigator-menu/example.svelte) | 6 |
+| [Pagination](./pagination/README.md) | `@ticatec/uniface-element/Pagination` | [示例](./pagination/example.svelte) | 7 |
+| [ProgressStepBar](./progress-step-bar/README.md) | `@ticatec/uniface-element/ProgressStepBar` | [示例](./progress-step-bar/example.svelte) | 4 |
+| [Tabs](./tabs/README.md) | `@ticatec/uniface-element/Tabs` | [示例](./tabs/example.svelte) | 14 |
+
+## 反馈
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [ProgressBar](./progress-bar/README.md) | `@ticatec/uniface-element/ProgressBar` | [示例](./progress-bar/example.svelte) | 6 |
+
+## 浮层与弹窗
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [CommonDialog](./common-dialog/README.md) | `@ticatec/uniface-element/CommonDialog` | [示例](./common-dialog/example.svelte) | 10 |
+| [Dialog](./dialog/README.md) | `@ticatec/uniface-element/Dialog` | [示例](./dialog/example.svelte) | 12 |
+| [DialogBoard](./dialog-board/README.md) | `@ticatec/uniface-element/DialogBoard` | [示例](./dialog-board/example.svelte) | 0 |
+| [Drawer](./drawer/README.md) | `@ticatec/uniface-element/Drawer` | [示例](./drawer/example.svelte) | 5 |
+| [FullScreenOverlay](./full-screen-overlay/README.md) | `@ticatec/uniface-element/FullScreenOverlay` | [示例](./full-screen-overlay/example.svelte) | 2 |
+| [PopupHint](./popup-hint/README.md) | `@ticatec/uniface-element/PopupHint` | [示例](./popup-hint/example.svelte) | 2 |
+| [Tooltip](./tooltip/README.md) | `@ticatec/uniface-element/Tooltip` | [示例](./tooltip/example.svelte) | 2 |
+
+## 复合组件
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [PaginationPanel](./pagination-panel/README.md) | `@ticatec/uniface-element/PaginationPanel` | [示例](./pagination-panel/example.svelte) | 13 |
+| [Transfer](./transfer/README.md) | `@ticatec/uniface-element/Transfer` | [示例](./transfer/example.svelte) | 11 |
+
+## 命令式服务
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [ContextMenu](./context-menu/README.md) | `@ticatec/uniface-element/ContextMenu` | [示例](./context-menu/example.svelte) | 8 |
+| [Indicator](./indicator/README.md) | `@ticatec/uniface-element/Indicator` | [示例](./indicator/example.svelte) | 4 |
+| [MessageBox](./message-box/README.md) | `@ticatec/uniface-element/MessageBox` | [示例](./message-box/example.svelte) | 9 |
+| [Toast](./toast/README.md) | `@ticatec/uniface-element/Toast` | [示例](./toast/example.svelte) | 8 |
+
+## 数据表格
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [DataTable](./data-table/README.md) | `@ticatec/uniface-element/DataTable` | [示例](./data-table/example.svelte) | 13 |
+
+## 数据展示
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [Accordion](./accordion/README.md) | `@ticatec/uniface-element/Accordion` | [示例](./accordion/example.svelte) | 5 |
+| [Card](./card/README.md) | `@ticatec/uniface-element/Card` | [示例](./card/example.svelte) | 8 |
+| [ConciseDataTable](./concise-data-table/README.md) | `@ticatec/uniface-element/ConciseDataTable` | [示例](./concise-data-table/example.svelte) | 10 |
+| [ListBox](./list-box/README.md) | `@ticatec/uniface-element/ListBox` | [示例](./list-box/example.svelte) | 21 |
+| [TreeView](./tree-view/README.md) | `@ticatec/uniface-element/TreeView` | [示例](./tree-view/example.svelte) | 16 |
+
+## 通用
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [Button](./button/README.md) | `@ticatec/uniface-element/Button` | [示例](./button/example.svelte) | 14 |
+| [Icon](./icon/README.md) | `@ticatec/uniface-element/Icon` | [示例](./icon/example.svelte) | 7 |
+| [IconButton](./icon-button/README.md) | `@ticatec/uniface-element/IconButton` | [示例](./icon-button/example.svelte) | 10 |
+| [Separator](./separator/README.md) | `@ticatec/uniface-element/Separator` | [示例](./separator/example.svelte) | 2 |
+| [Split](./split/README.md) | `@ticatec/uniface-element/Split` | [示例](./split/example.svelte) | 5 |
+| [Tag](./tag/README.md) | `@ticatec/uniface-element/Tag` | [示例](./tag/example.svelte) | 10 |
+| [TextButton](./text-button/README.md) | `@ticatec/uniface-element/TextButton` | [示例](./text-button/example.svelte) | 10 |
+
+## 应用布局
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [ClassicLayout](./classic-layout/README.md) | `@ticatec/uniface-element/app-layout/ClassicLayout` | [示例](./classic-layout/example.svelte) | 15 |
+| [ColumnsLayout](./columns-layout/README.md) | `@ticatec/uniface-element/app-layout/ColumnsLayout` | [示例](./columns-layout/example.svelte) | 13 |
+| [HeaderLayout](./header-layout/README.md) | `@ticatec/uniface-element/app-layout/HeaderLayout` | [示例](./header-layout/example.svelte) | 8 |
+| [RowsLayout](./rows-layout/README.md) | `@ticatec/uniface-element/app-layout/RowsLayout` | [示例](./rows-layout/example.svelte) | 13 |
+| [SidebarLayout](./sidebar-layout/README.md) | `@ticatec/uniface-element/app-layout/SidebarLayout` | [示例](./sidebar-layout/example.svelte) | 8 |

package/docs/components/accordion/README.md

@@ -0,0 +1,60 @@
+# Accordion
+
+数据展示组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+可折叠的内容分组容器，用较小空间组织层级信息。
+
+## 适用场景
+
+- FAQ、设置分组和详情折叠区
+- 需要按标题展开或收起大段内容
+
+## 导入
+
+```ts
+import Accordion from '@ticatec/uniface-element/Accordion';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 启用紧凑尺寸，减少组件高度和内边距。 |
+| `accordions` | 否 | `AccordionItem[]` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `exclusive` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `theme` | 否 | `string` | 否 | `'theme-light'` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `AccordionItem`
+
+```ts
+export default interface AccordionItem {
+    title: string;
+    content: Snippet;
+}
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Accordion from '@ticatec/uniface-element/Accordion';
+</script>
+
+<Accordion
+  compact={true}
+/>
+```
+
+## 源码
+
+- `src/lib/data_display/accordion/Accordion.svelte`

package/docs/components/accordion/example.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Accordion from '@ticatec/uniface-element/Accordion';
+</script>
+
+<Accordion
+  compact={true}
+/>

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

@@ -0,0 +1,114 @@
+# ActionBar
+
+布局组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+集中排列页面或区域操作按钮的工具栏。
+
+## 适用场景
+
+- 表单保存、取消和删除操作区
+- 列表页批量操作与页面级命令
+
+## 导入
+
+```ts
+import ActionBar from '@ticatec/uniface-element/ActionBar';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `buttons` | 否 | `ButtonActions` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的内联样式。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `ButtonActions`
+
+```ts
+export type ButtonActions = Array<ButtonAction | null>;
+```
+
+### `ButtonAction`
+
+```ts
+export interface ButtonAction {
+    /**
+     * 按钮的文字
+     */
+    label: string;
+
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+
+    /**
+     * 帮助信息
+     */
+    tooltip?: string;
+
+    /**
+     * 前缀图标
+     */
+    icon?: string;
+
+    /**
+     * 按钮的类型
+     */
+    type?: ButtonType;
+
+    /**
+     * click处理函数
+     */
+    handler?: MouseClickHandler;
+}
+```
+
+### `ButtonType`
+
+```ts
+export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+```
+
+### `MouseClickHandler`
+
+```ts
+export type MouseClickHandler = (event: MouseEvent) => void;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+</script>
+
+<ActionBar>
+  <div>在这里放置子内容</div>
+</ActionBar>
+```
+
+## 源码
+
+- `src/lib/layouts/action_bar/ActionBar.svelte`

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+</script>
+
+<ActionBar>
+  <div>在这里放置子内容</div>
+</ActionBar>

package/docs/components/app-top-bar/README.md

@@ -0,0 +1,60 @@
+# AppTopBar
+
+布局组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+应用顶部导航和操作区域。
+
+## 适用场景
+
+- 后台系统顶栏、品牌区和用户菜单
+- 放置全局搜索、通知与快捷操作
+
+## 导入
+
+```ts
+import AppTopBar from '@ticatec/uniface-element/AppTopBar';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `title` | 否 | `string` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `home` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+| `right` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import AppTopBar from '@ticatec/uniface-element/AppTopBar';
+</script>
+
+<AppTopBar
+  title="示例标题"
+>
+  <div>在这里放置子内容</div>
+</AppTopBar>
+```
+
+## 源码
+
+- `src/lib/layouts/app_top_bar/AppTopBar.svelte`

package/docs/components/app-top-bar/example.svelte

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