@ticatec/uniface-element 5.0.4 → 5.1.0

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/layout/flex/FlexBlock.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-
-    export let fixed: boolean = false;
-    export let style: string = '';
-    export {className as class };
-    export let direction: 'horizontal' | 'vertical' = 'horizontal';
-    export let flex: boolean = false;
-    export let autoFit: boolean = false;
-    export let grow: boolean = false;
-    export let shrink: boolean = false;
-
-    let className:string = '';
-
-</script>
-<div class:flex class="flex-block {className} {flex ? direction : ''}" class:fixed class:grow class:shrink class:auto_fit={autoFit} {style}>
-    <slot/>
-</div>

package/dist/layout/flex/FlexBlock.svelte.d.ts

@@ -1,38 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FlexBlock: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    fixed?: boolean;
-    style?: string;
-    class?: string;
-    direction?: "horizontal" | "vertical";
-    flex?: boolean;
-    autoFit?: boolean;
-    grow?: boolean;
-    shrink?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    class: string;
-}, string>;
-type FlexBlock = InstanceType<typeof FlexBlock>;
-export default FlexBlock;

package/dist/layout/flex/README.md

@@ -1,148 +0,0 @@
-# FlexBlock
-
-A flexible flexbox layout component with support for horizontal/vertical directions, resizing, and growth/shrink options.
-
-## Installation
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-## Import
-
-```typescript
-import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-```
-
-## Basic Usage
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock>
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</FlexBlock>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Flex direction |
-| `flex` | `boolean` | `false` | Apply flex styling based on direction |
-| `fixed` | `boolean` | `false` | Enable fixed positioning |
-| `grow` | `boolean` | `false` | Enable flex-grow |
-| `shrink` | `boolean` | `false` | Enable flex-shrink |
-| `autoFit` | `boolean` | `false` | Enable auto-fit to content |
-| `style` | `string` | `''` | Custom CSS styles for the container |
-| `class` | `string` | `''` | Custom CSS class name |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Main content area |
-
-## Events
-
-No custom events.
-
-## Examples
-
-### Horizontal Layout
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" style="gap: 16px;">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</FlexBlock>
-```
-
-### Vertical Layout
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="vertical" style="gap: 16px;">
-  <div>Header</div>
-  <div>Main Content</div>
-  <div>Footer</div>
-</FlexBlock>
-```
-
-### Flex Grow and Shrink
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock direction="horizontal" flex grow shrink>
-  <div style="flex: 1;">Flexible Item</div>
-  <div style="width: 200px;">Fixed Item</div>
-</FlexBlock>
-```
-
-### Auto-Fit Layout
-
-```svelte
-<script>
-  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
-</script>
-
-<FlexBlock autoFit>
-  {#each items as item}
-    <div>{item}</div>
-  {/each}
-</FlexBlock>
-```
-
-### Card Grid
-
-```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>
-```
-
-### Fixed Positioning
-
-```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;">Header</div>
-  <div style="flex: 1; overflow: auto;">Main Content</div>
-  <div style="height: 40px;">Footer</div>
-</FlexBlock>
-```
-
-## Best Practices
-
-1. **Use direction prop** - Choose horizontal or vertical based on your layout needs
-2. **Combine with flex** - Use `flex` prop for responsive layouts that adapt to container size
-3. **Use autoFit** - Enable auto-fit for dynamic content that should wrap
-4. **Use grow/shrink** - Control how items expand or contract within the flex container
-5. **Fixed positioning** - Use `fixed` for sticky layouts that don't scroll with content