@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/layout/flex/README_CN.md

@@ -1,148 +0,0 @@
-# FlexBlock 弹性布局组件
-
-一个灵活的 flexbox 布局组件，支持水平/垂直方向、调整大小和增长/收缩选项。
-
-## 安装
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-## 导入
-
-```typescript
-import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-```
-
-## 基本用法
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock>
-  <div>项目 1</div>
-  <div>项目 2</div>
-  <div>项目 3</div>
-</FlexBlock>
-```
-
-## 属性
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|---------|------|
-| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Flex 方向 |
-| `flex` | `boolean` | `false` | 根据方向应用 flex 样式 |
-| `fixed` | `boolean` | `false` | 启用固定定位 |
-| `grow` | `boolean` | `false` | 启用 flex-grow |
-| `shrink` | `boolean` | `false` | 启用 flex-shrink |
-| `autoFit` | `boolean` | `false` | 启用自动适应内容 |
-| `style` | `string` | `''` | 容器的自定义 CSS 样式 |
-| `class` | `string` | `''` | 自定义 CSS 类名 |
-
-## 插槽
-
-| 插槽 | 说明 |
-|------|------|
-| `default` | 主要内容区域 |
-
-## 事件
-
-无自定义事件。
-
-## 示例
-
-### 水平布局
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" style="gap: 16px;">
-  <div>项目 1</div>
-  <div>项目 2</div>
-  <div>项目 3</div>
-</FlexBlock>
-```
-
-### 垂直布局
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="vertical" style="gap: 16px;">
-  <div>头部</div>
-  <div>主要内容</div>
-  <div>页脚</div>
-</FlexBlock>
-```
-
-### 弹性增长和收缩
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" flex grow shrink>
-  <div style="flex: 1;">弹性项目</div>
-  <div style="width: 200px;">固定项目</div>
-</FlexBlock>
-```
-
-### 自动适应布局
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock autoFit>
-  {#each items as item}
-    <div>{item}</div>
-  {/each}
-</FlexBlock>
-```
-
-### 卡片网格
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" autoFit style="gap: 16px;">
-  {#each cards as card}
-    <div style="border: 1px solid #ddd; padding: 16px; border-radius: 8px;">
-      <h3>{card.title}</h3>
-      <p>{card.description}</p>
-    </div>
-  {/each}
-</FlexBlock>
-```
-
-### 固定定位
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock fixed direction="vertical" style="position: fixed; top: 0; left: 0; right: 0; height: 100vh;">
-  <div style="height: 60px;">头部</div>
-  <div style="flex: 1; overflow: auto;">主要内容</div>
-  <div style="height: 40px;">页脚</div>
-</FlexBlock>
-```
-
-## 最佳实践
-
-1. **使用 direction 属性** - 根据布局需求选择水平或垂直方向
-2. **结合 flex 使用** - 使用 `flex` 属性实现响应式布局，适应容器大小
-3. **使用 autoFit** - 动态内容启用自动适应换行
-4. **使用 grow/shrink** - 控制项目在 flex 容器中的扩展或收缩
-5. **固定定位** - 使用 `fixed` 实现不随内容滚动的粘性布局

package/dist/layout/flex/index.d.ts

@@ -1,2 +0,0 @@
-import FlexBlock from "./FlexBlock.svelte";
-export default FlexBlock;

package/dist/layout/flex/index.js

@@ -1,2 +0,0 @@
-import FlexBlock from "./FlexBlock.svelte";
-export default FlexBlock;

package/dist/layout/index.js

@@ -1 +0,0 @@
-"use strict";

package/docs/components/attachment-files/README.md

@@ -1,332 +0,0 @@
-# AttachmentFiles
-
-表单组件。本文档由源码自动生成，类型以当前版本为准。
-
-## 简介
-
-管理普通附件选择、上传、展示与删除的文件字段。
-
-## 适用场景
-
-- 合同、工单和审批附件
-- 需要限制文件数量、大小或类型的上传
-
-## 导入
-
-```ts
-import AttachmentFiles from '@ticatec/uniface-element/AttachmentFiles';
-```
-
-## 属性
-
-| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
-| --- | --- | --- | --- | --- | --- | --- |
-| `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` | 否 | `''` | 否 | 自定义内联样式，会应用到字段根容器上 |
-| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
-| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
-| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
-| `files` | 是 | `AttachmentFile[]` | 否 | `$bindable<AttachmentFile[]>([])` | 是 | 当前文件列表；增删文件后会更新绑定值。 |
-| `uploadFile` | 否 | `FileUpload` | 否 | `undefined` | 否 | 实际执行上传的函数；接收文件、进度回调与完成回调，需返回 `{cancel}` 以支持取消上传。 |
-| `onUpload` | 否 | `() => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
-| `onFileUploaded` | 否 | `(file: UploadFile) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
-| `accept` | 否 | `string` | 否 | `"*/*"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `maxSize` | 否 | `number` | 否 | `1024 * 1024 * 10` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `maxFiles` | 否 | `number` | 否 | `10` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `removeFileConfirm` | 否 | `(file: AttachmentFile) => Promise<boolean>` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-
-> 组件的“可绑定”表示源码使用了 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; }}`
-
-### `files`
-
-当前文件列表；增删文件后会更新绑定值。
-
-- 类型：`AttachmentFile[]`
-- 默认值：`$bindable<AttachmentFile[]>([])`
-- 推荐写法：`bind:files`
-
-## 组件实例方法
-
-通过 `bind:this` 获取组件实例后调用。
-
-| 方法 | 类型 | 说明 |
-| --- | --- | --- |
-| `focus()` | `() => void` | 组件实例方法。 |
-
-## 相关类型定义
-
-以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
-
-### `EditorVariant`
-
-```ts
-export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
-```
-
-### `AttachmentFile`
-
-```ts
-export default interface AttachmentFile {
-
-    /**
-     * 附件名
-     */
-    name: string;
-
-    /**
-     * 文件类型
-     */
-    type: FileType;
-
-    /**
-     * oss保存的文件路径
-     */
-    uri: string;
-}
-```
-
-### `FileUpload`
-
-```ts
-export type FileUpload = (file: File, progressUpdate: ProgressUpdate, onUploaded: OnUploaded, errorHandler: ErrorHandler) => UploadProgress;
-```
-
-### `UploadFile`
-
-```ts
-export default class UploadFile {
-
-    /**
-     * 待上传的文件
-     */
-    readonly file: File;
-
-    /**
-     * 上传后的文件地址
-     */
-    private _url: string | null = null;
-
-    /**
-     * 上传的缩率图
-     * @private
-     */
-    private _thumbnail: string | null | undefined = null;
-    /**
-     * 状态
-     */
-    private _status: ProgressStatus = ProgressStatus.progressing;
-    /**
-     * 已经上传的字节数
-     */
-    private _uploadedBytes: number = 0;
-    /**
-     * 上传的实例
-     */
-    private loader?: UploadProgress;
-
-    private readonly onCompleted: OnCompleted;
-
-    private readonly uploadFile: FileUpload;
-
-    private updateStatus: UpdateStatus = null as unknown as UpdateStatus;
-
-    constructor(file: File, uploadFile: FileUpload, onCompleted: OnCompleted) {
-        this.file = file;
-        this.uploadFile = uploadFile;
-        this.onCompleted = onCompleted;
-        this.loader = this.startUploading();
-    }
-
-    private startUploading() {
-        return  this.uploadFile(this.file, (bytes: number) => {
-            this._uploadedBytes = bytes;
-            this.updateStatus?.();
-        }, (url: string, thumbnail?: string) => {
-            this._url = url;
-            this._thumbnail = thumbnail;
-            this._status = ProgressStatus.successful;
-            this.onCompleted(this.file, url);
-            this.updateStatus?.();
-        }, (e: Error) => {
-            this._status = ProgressStatus.failure;
-            this.updateStatus?.();
-        });
-    }
-
-    restart() {
-        this._status = ProgressStatus.progressing;
-        this.loader = this.startUploading();
-        this.updateStatus?.();
-    }
-
-    get url(): string | null {
-        return this._url;
-    }
-
-    get thumbnail() : string | undefined | null {
-        return this._thumbnail;
-    }
-
-    get status(): ProgressStatus {
-        return this._status;
-    }
-
-    get progress(): number {
-        return Math.round(this._uploadedBytes * 100 / this.file.size);
-    }
-
-    async cancel(): Promise<boolean> {
-        let result = this.loader != null ? await this.loader.cancel() : true;
-        if (result) {
-            this._status = ProgressStatus.canceled;
-            this.updateStatus?.();
-        }
-        return result;
-    }
-
-    setUpdateStatus(value: UpdateStatus) {
-        this.updateStatus = value;
-    }
-}
-```
-
-### `FileType`
-
-```ts
-export enum FileType {
-    IMAGE = 'img',
-    PDF = 'pdf',
-    DOC = 'doc',
-    XLS = 'xml',
-    PPT = 'ppt',
-    AUDIO = 'wav',
-    VIDEO = 'mov',
-    OTHER = 'dat'
-}
-```
-
-### `ProgressUpdate`
-
-```ts
-export type ProgressUpdate = (uploadBytes: number) => void;
-```
-
-### `OnUploaded`
-
-```ts
-export type OnUploaded = (url: string, thumbnail?: string) => void;
-```
-
-### `ErrorHandler`
-
-```ts
-export type ErrorHandler = (e: Error) => void;
-```
-
-### `UploadProgress`
-
-```ts
-export interface UploadProgress {
-
-    cancel:()=>Promise<boolean>;
-
-}
-```
-
-### `ProgressStatus`
-
-```ts
-export enum ProgressStatus {
-    progressing='progressing',
-    successful='successful',
-    failure='failure',
-    canceled='canceled'
-}
-```
-
-### `OnCompleted`
-
-```ts
-export type OnCompleted = (file: File, url: string, thumbnail?: string) => void;
-```
-
-### `UpdateStatus`
-
-```ts
-export type UpdateStatus = () => void;
-```
-
-## 示例
-
-完整示例见 [example.svelte](./example.svelte)。
-```svelte
-<script lang="ts">
-  import AttachmentFiles from '@ticatec/uniface-element/AttachmentFiles';
-  let files = $state<any>([]);
-</script>
-
-<AttachmentFiles
-  bind:files
-  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({files})}</p>
-```
-
-## 源码
-
-- `src/lib/form/attachment_files/AttachmentEditor.svelte`

package/docs/components/image-files/README.md

@@ -1,174 +0,0 @@
-# ImageFiles
-
-表单组件。本文档由源码自动生成，类型以当前版本为准。
-
-## 简介
-
-管理图片上传、缩略图、预览和删除的图片字段。
-
-## 适用场景
-
-- 头像、商品图和现场照片
-- 需要图片预览及多图上传管理
-
-## 导入
-
-```ts
-import ImageFiles from '@ticatec/uniface-element/ImageFiles';
-```
-
-## 属性
-
-| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
-| --- | --- | --- | --- | --- | --- | --- |
-| `variant` | 是 | `EditorVariant` | 否 | `getEditorVariant()` | 否 | 视觉样式变体，可选值：`""`(默认)、`plain`、`outlined`、`filled`；具体含义见组件说明。 |
-| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。 |
-| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 只读状态。保留内容展示，但阻止用户修改。 |
-| `files` | 是 | `ImageFile[]` | 是 | `$bindable([] as ImageFile[])` | 是 | 当前文件列表；增删文件后会更新绑定值。 |
-| `style` | 否 | `string` | 否 | `""` | 否 | 附加到组件根元素的内联样式。 |
-| `removeFileConfirm` | 否 | `RemoveConfirm` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `uploadFile` | 是 | `FileUpload` | 是 | `—` | 否 | 实际执行上传的函数；接收文件、进度回调与完成回调，需返回 `{cancel}` 以支持取消上传。 |
-| `maxFiles` | 否 | `number` | 否 | `1` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `text` | 否 | `string \| null` | 否 | `null as string \| null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-
-> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
-
-## 重要属性说明
-
-### `variant`
-
-视觉样式变体，可选值：`""`(默认)、`plain`、`outlined`、`filled`；具体含义见组件说明。
-
-- 类型：`EditorVariant`
-- 默认值：`getEditorVariant()`
-- 示例写法：`variant="plain"`
-
-### `disabled`
-
-禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。
-
-- 类型：`boolean`
-- 默认值：`false`
-- 示例写法：`disabled={false}`
-
-### `readonly`
-
-只读状态。保留内容展示，但阻止用户修改。
-
-- 类型：`boolean`
-- 默认值：`false`
-- 示例写法：`readonly={false}`
-
-### `files`
-
-当前文件列表；增删文件后会更新绑定值。
-
-- 类型：`ImageFile[]`
-- 默认值：`$bindable([] as ImageFile[])`
-- 推荐写法：`bind:files`
-
-### `uploadFile`
-
-实际执行上传的函数；接收文件、进度回调与完成回调，需返回 `{cancel}` 以支持取消上传。
-
-- 类型：`FileUpload`
-- 默认值：`—`
-- 示例写法：参见下方完整示例中的类型化实现。
-
-## 相关类型定义
-
-以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
-
-### `EditorVariant`
-
-```ts
-export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
-```
-
-### `ImageFile`
-
-```ts
-export default interface ImageFile {
-
-    /**
-     * 附件名
-     */
-    name: string;
-
-    /**
-     * oss保存的文件路径
-     */
-    uri: string;
-
-    thumbnail?: string | undefined | null;
-}
-```
-
-### `RemoveConfirm`
-
-```ts
-export type RemoveConfirm = (file: ImageFile) => Promise<boolean>;
-```
-
-### `FileUpload`
-
-```ts
-export type FileUpload = (file: File, progressUpdate: ProgressUpdate, onUploaded: OnUploaded, errorHandler: ErrorHandler) => UploadProgress;
-```
-
-### `ProgressUpdate`
-
-```ts
-export type ProgressUpdate = (uploadBytes: number) => void;
-```
-
-### `OnUploaded`
-
-```ts
-export type OnUploaded = (url: string, thumbnail?: string) => void;
-```
-
-### `ErrorHandler`
-
-```ts
-export type ErrorHandler = (e: Error) => void;
-```
-
-### `UploadProgress`
-
-```ts
-export interface UploadProgress {
-
-    cancel:()=>Promise<boolean>;
-
-}
-```
-
-## 示例
-
-完整示例见 [example.svelte](./example.svelte)。
-```svelte
-<script lang="ts">
-  import ImageFiles, {type FileUpload, type ImageFile} from '@ticatec/uniface-element/ImageFiles';
-
-  let files = $state<ImageFile[]>([]);
-  const uploadFile: FileUpload = (file, progress, uploaded) => {
-    progress(file.size);
-    uploaded(URL.createObjectURL(file));
-    return {cancel: async () => true};
-  };
-</script>
-
-<ImageFiles
-  bind:files
-  {uploadFile}
-  maxFiles={5}
-  variant="outlined"
-  removeFileConfirm={async (file) => confirm(`确定删除 ${file.name}？`)}
-/>
-<p>已上传 {files.length} 张图片</p>
-```
-
-## 源码
-
-- `src/lib/form/image-files/ImageFilesField.svelte`