@ticatec/uniface-element 5.0.5 → 5.1.1

package/dist/form/image-files/README_CN.md

@@ -1,468 +0,0 @@
-# ImageFilesField
-
-图片上传和管理组件。用户可以拖放或点击浏览选择图片。上传的图片以网格形式显示，包含缩略图、全尺寸预览和操作按钮（删除、预览）。支持多张图片、保留原始宽高比和删除前确认。
-
-> 可以理解为表单的照片画廊管理器。上传、预览和管理图片，具有统一的 UI。
-
-## 特性
-
-- **图片上传** —— 支持拖放和点击浏览。
-- **图片预览** —— 点击图片可查看全尺寸。
-- **缩略图生成** —— 自动为上传的图片生成缩略图。
-- **图片网格显示** —— 以响应式网格显示上传的图片。
-- **删除确认** —— 可选的 `removeFileConfirm` 回调，用于删除前确认。
-- **多张图片** —— 支持一次性上传多张图片。
-- **宽高比保留** —— 图片保持原始宽高比。
-- **禁用 / 只读** 模式。
-- **紧凑模式** —— 适用于密集 UI。
-
-## 安装
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-## 引入
-
-```typescript
-import ImageFilesField from "@ticatec/uniface-element/ImageFilesField";
-import type { ImageFile, RemoveConfirm, FileUpload } from "@ticatec/uniface-element/ImageFilesField";
-```
-
-## 基础用法
-
-```svelte
-<script lang="ts">
-  import ImageFilesField from "@ticatec/uniface-element/ImageFilesField";
-  import type { ImageFile, FileUpload } from "@ticatec/uniface-element/ImageFilesField";
-
-  let images = $state<ImageFile[]>([]);
-
-  // 模拟上传函数
-  const uploadImage: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    // 模拟上传进度
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      progressUpdate(Math.floor(file.size * (progress / 100)));
-
-      if (progress >= 100) {
-        clearInterval(interval);
-        // 模拟上传成功
-        const fakeUrl = `/uploads/${file.name}`;
-        const fakeThumbnail = `/thumbnails/${file.name}`;
-        onUploaded(fakeUrl, fakeThumbnail);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-</script>
-
-<ImageFilesField
-  bind:images={images}
-  uploadFile={uploadImage}
-  maxImages={5}
-/>
-```
-
-## 属性（Props）
-
-`ImageFilesField` 继承自 `CommonFieldProps`，因此自动获得 `variant`、`compact`、`disabled`、`readonly`、`style`、`error`、`tooltip`、`theme`、`placeholder`。
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `images` | `Array<ImageFile>`（可绑定） | `[]` | 上传图片的数组。每个图片有 `name`、`uri` 和 `thumbnail` 属性。 |
-| `uploadFile` | `FileUpload` | — | **必需。** 处理图片上传的函数。接收 `(file, progressUpdate, onUploaded, errorHandler)`，返回带有 `cancel()` 方法的 `UploadProgress` 对象。 |
-| `maxImages` | `number` | `10` | 允许的最大图片数量。 |
-| `removeFileConfirm` | `RemoveConfirm` | — | 删除确认的可选回调。接收要删除的图片，返回 Promise<boolean>。 |
-| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉风格。 |
-| `compact` | `boolean` | `false` | 紧凑布局。 |
-| `disabled` | `boolean` | `false` | 完全禁用 —— 无上传或删除操作。 |
-| `readonly` | `boolean` | `false` | 只读 —— 无上传或删除操作，但图片可见。 |
-| `style` | `string` | — | 编辑器根节点的内联 CSS。 |
-| `error` | `string` | — | 校验错误文本，触发编辑器的 error 状态。 |
-| `tooltip` | `string` | — | 编辑器的 hover tooltip。 |
-| `theme` | `string` | — | 渲染为编辑器根的 `data-theme`，用于作用域样式覆盖。 |
-| `onchange` | `(images: Array<ImageFile>) => void` | — | 图片数组变化时触发（上传或删除）。接收更新后的图片数组。 |
-| `onfocus` | `(event: FocusEvent) => void` | — | 编辑器获焦。 |
-| `onblur` | `(event: FocusEvent) => void` | — | 编辑器失焦。 |
-
-## 事件
-
-| 事件 | 签名 | 说明 |
-|------|------|------|
-| `onchange` | `(images: Array<ImageFile>) => void` | 图片数组变化时触发（上传或删除）。接收更新后的图片数组。 |
-| `onfocus` | `(event: FocusEvent) => void` | 编辑器获焦。 |
-| `onblur` | `(event: FocusEvent) => void` | 编辑器失焦。 |
-
-## 方法
-
-| 方法 | 签名 | 说明 |
-|------|------|------|
-| `focus()` | `() => void` | 让编辑器获取焦点。 |
-
-```svelte
-<script lang="ts">
-  import ImageFilesField from "@ticatec/uniface-element/ImageFilesField";
-
-  let editorRef;
-
-  function focusEditor() {
-    editorRef.focus();
-  }
-</script>
-
-<ImageFilesField bind:this={editorRef} bind:images={images} uploadFile={uploadImage} />
-<button onclick={focusEditor}>聚焦</button>
-```
-
-## `FileUpload` — 上传函数
-
-`uploadFile` 回调是必需的。它接收：
-
-| 参数 | 类型 | 说明 |
-|------|------|------|
-| `file` | `File` | 要上传的文件。 |
-| `progressUpdate` | `(bytesUploaded: number) => void` | 调用此函数报告上传进度。 |
-| `onUploaded` | `(url: string, thumbnail: string) => void` | 上传完成时调用。传入全尺寸 URL 和缩略图 URL。 |
-| `errorHandler` | `(error: Error) => void` | 上传失败时调用。传入 Error 对象。 |
-
-必须返回一个 `UploadProgress` 对象：
-
-```typescript
-interface UploadProgress {
-  cancel: () => Promise<boolean>;
-}
-```
-
-`cancel()` 方法允许用户取消正在进行的上传。
-
-```svelte
-<script lang="ts">
-  import ImageFilesField from "@ticatec/uniface-element/ImageFilesField";
-  import type { FileUpload } from "@ticatec/uniface-element/ImageFilesField";
-
-  let images = $state([]);
-
-  const uploadImage: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    // 模拟带进度的上传
-    let bytesUploaded = 0;
-    const totalBytes = file.size;
-    const interval = setInterval(() => {
-      bytesUploaded += 1024; // 每次 1KB
-      if (bytesUploaded >= totalBytes) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`, `/thumbnails/${file.name}`);
-      } else {
-        progressUpdate(bytesUploaded);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true; // 上传已取消
-      }
-    };
-  };
-</script>
-
-<ImageFilesField bind:images={images} uploadFile={uploadImage} />
-```
-
-## `ImageFile` — 图片对象
-
-`images` 数组中的每个图片都是一个 `ImageFile` 对象：
-
-```typescript
-interface ImageFile {
-  name: string;    // 图片名
-  uri: string;     // 全尺寸图片 URL（上传后）
-  thumbnail: string; // 缩略图 URL（上传后）
-}
-```
-
-## 示例
-
-### 带确认的图片上传
-
-```svelte
-<script lang="ts">
-  import ImageFilesField from "@ticatec/uniface-element/ImageFilesField";
-  import type { ImageFile, FileUpload, RemoveConfirm } from "@ticatec/uniface-element/ImageFilesField";
-
-  let images = $state<ImageFile[]>([]);
-
-  const uploadImage: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    let bytesUploaded = 0;
-    const totalBytes = file.size;
-    const interval = setInterval(() => {
-      bytesUploaded += 1024;
-      if (bytesUploaded >= totalBytes) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`, `/thumbnails/${file.name}`);
-      } else {
-        progressUpdate(bytesUploaded);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-
-  const removeImageConfirm: RemoveConfirm = async (image) => {
-    return confirm(`确定要删除 ${image.name} 吗？`);
-  };
-</script>
-
-<ImageFilesField
-  bind:images={images}
-  uploadFile={uploadImage}
-  removeFileConfirm={removeImageConfirm}
-  maxImages={5}
-/>
-```
-
-### 多张图片画廊
-
-```svelte
-<script lang="ts">
-  import ImageFilesField from "@ticatec/uniface-element/ImageFilesField";
-  import type { ImageFile, FileUpload } from "@ticatec/uniface-element/ImageFilesField";
-
-  let images = $state<ImageFile[]>([]);
-
-  const uploadImage: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      progressUpdate(Math.floor(file.size * (progress / 100)));
-
-      if (progress >= 100) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`, `/thumbnails/${file.name}`);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-</script>
-
-<div class="image-gallery">
-  <h3>上传图片</h3>
-  <ImageFilesField
-    bind:images={images}
-    uploadFile={uploadImage}
-    maxImages={10}
-  />
-  <div class="image-grid">
-    {#each images as image}
-      <div class="image-item">
-        <img src={image.thumbnail} alt={image.name} />
-        <div class="image-info">
-          <p>{image.name}</p>
-          <a href={image.uri} download>下载</a>
-        </div>
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  .image-gallery {
-    max-width: 800px;
-    margin: 20px;
-  }
-  .image-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 16px;
-    margin-top: 16px;
-  }
-  .image-item {
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-  .image-item img {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-  }
-  .image-info {
-    padding: 12px;
-  }
-  .image-info p {
-    margin: 0 0 8px 0;
-    font-size: 14px;
-  }
-  .image-info a {
-    color: #3b82f6;
-    text-decoration: none;
-  }
-  .image-info a:hover {
-    text-decoration: underline;
-  }
-</style>
-```
-
-### 禁用和只读模式
-
-```svelte
-<script lang="ts">
-  import ImageFilesField from "@ticatec/uniface-element/ImageFilesField";
-  import type { ImageFile, FileUpload } from "@ticatec/uniface-element/ImageFilesField";
-
-  let disabledImages: ImageFile[] = [
-    { name: "disabled-image.jpg", uri: "/uploads/disabled-image.jpg", thumbnail: "/thumbnails/disabled-image.jpg" }
-  ];
-  let readonlyImages: ImageFile[] = [
-    { name: "readonly-image.png", uri: "/uploads/readonly-image.png", thumbnail: "/thumbnails/readonly-image.png" }
-  ];
-  let normalImages: ImageFile[] = [];
-
-  const uploadImage: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      progressUpdate(Math.floor(file.size * (progress / 100)));
-
-      if (progress >= 100) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`, `/thumbnails/${file.name}`);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-</script>
-
-<div style="display: flex; flex-direction: column; gap: 16px;">
-  <ImageFilesField
-    bind:images={disabledImages}
-    uploadFile={uploadImage}
-    disabled
-  />
-  <ImageFilesField
-    bind:images={readonlyImages}
-    uploadFile={uploadImage}
-    readonly
-  />
-  <ImageFilesField
-    bind:images={normalImages}
-    uploadFile={uploadImage}
-  />
-</div>
-```
-
-### 紧凑模式
-
-```svelte
-<script lang="ts">
-  import ImageFilesField from "@ticatec/uniface-element/ImageFilesField";
-  import type { ImageFile, FileUpload } from "@ticatec/uniface-element/ImageFilesField";
-
-  let images = $state<ImageFile[]>([]);
-
-  const uploadImage: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      progressUpdate(Math.floor(file.size * (progress / 100)));
-
-      if (progress >= 100) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`, `/thumbnails/${file.name}`);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-</script>
-
-<table>
-  <thead>
-    <tr>
-      <th>名称</th>
-      <th>图片</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>行 1</td>
-      <td>
-        <ImageFilesField
-          bind:images={images}
-          uploadFile={uploadImage}
-          compact
-        />
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## 行为说明
-
-### 上传流程
-
-1. 用户点击上传图标或拖放图片。
-2. `FileUploadPanel` 打开，显示文件选择器。
-3. 选择图片时，调用 `uploadFile`，传入文件和处理进度回调。
-4. `uploadFile` 调用 `progressUpdate(bytesUploaded)` 报告进度。
-5. 上传完成时，`uploadFile` 调用 `onUploaded(url, thumbnail)` 传入全尺寸 URL 和缩略图 URL。
-6. 图片添加到 `images` 数组，并在网格中显示。
-
-### 删除流程
-
-1. 用户点击图片上的删除图标。
-2. 如果提供了 `removeFileConfirm`，则调用回调并传入图片。
-3. 如果回调返回 `true`，则从 `images` 数组中删除图片。
-4. `onchange` 事件触发，传入更新后的图片数组。
-
-### 预览流程
-
-1. 用户点击网格中的图片。
-2. `ImagePreview` 组件打开，显示全尺寸图片。
-3. 用户可以点击关闭按钮或点击外部关闭预览。
-
-### 只读 / 禁用渲染
-
-两种模式都隐藏上传图标和删除图标。图片显示但无法修改。
-
-## 无障碍
-
-- 上传图标有 `aria-hidden="true"`（装饰性）。
-- 图片名作为 alt 文本显示。
-- 完整的 ARIA 需要外层 `<label>` 或使用 `aria-label`。
-
-## 相关组件
-
-- [AttachmentFilesField](../attachment-files/README_CN.md) —— 通用文件上传组件。
-- [TextEditor](../text_editor/README_CN.md) —— 多行文本区域。
-- [NumberEditor](../number_editor/README_CN.md) —— 数值输入。

package/dist/form/image-files/index.d.ts

@@ -1,10 +0,0 @@
-import ImageFilesField from "./ImageFilesField.svelte";
-import type ImageFile from "./ImageFile";
-import type { RemoveConfirm } from "./ImageFile";
-import type { FileUpload } from "../attachment_files/FileUpload";
-import type UploadFile from "../attachment_files/UploadFile";
-export default ImageFilesField;
-export type { ImageFile };
-export type { RemoveConfirm };
-export type { FileUpload };
-export type { UploadFile };

package/dist/form/image-files/index.js

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

package/dist/overlay/dialog/DialogActions.d.ts

@@ -1,16 +0,0 @@
-import type { ButtonActions } from "../../types";
-import type { ButtonAction } from "../../layouts/action_bar/ButtonAction";
-export default interface DialogActions {
-    /**
-     * 操作类
-     */
-    list: ButtonActions;
-    /**
-     * 关闭窗口的action
-     */
-    close: ButtonAction;
-    /**
-     * 关闭问询
-     */
-    closeConfirm: () => Promise<boolean>;
-}

package/dist/overlay/dialog/DialogActions.js

@@ -1 +0,0 @@
-import { ModalResult } from "../message-box";

package/dist/overlay/dialog/DialogCloseConfirm.d.ts

@@ -1 +0,0 @@
-export type DialogCloseConfirm = () => Promise<boolean>;

package/dist/overlay/dialog/DialogCloseConfirm.js

@@ -1 +0,0 @@
-import { ModalResult } from "../message-box";