@next-bricks/form 1.21.11 → 1.21.13

package/docs/eo-upload-file.md

@@ -1,19 +1,107 @@
-上传文件
+---
+tagName: eo-upload-file
+displayName: WrappedEoUploadFile
+description: 上传文件
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# eo-upload-file
+
+> 上传文件
+
+## Props
+
+| 属性               | 类型                                  | 必填 | 默认值                                               | 说明                                    |
+| ------------------ | ------------------------------------- | ---- | ---------------------------------------------------- | --------------------------------------- |
+| label              | `string \| undefined`                 | 否   | -                                                    | 字段说明                                |
+| name               | `string \| undefined`                 | 否   | -                                                    | 字段名称                                |
+| required           | `boolean \| undefined`                | 否   | -                                                    | 是否必填                                |
+| message            | `Record<string, string> \| undefined` | 否   | -                                                    | 校验文本信息                            |
+| value              | `FileData[] \| undefined`             | 否   | -                                                    | 值                                      |
+| multiple           | `boolean \| undefined`                | 否   | -                                                    | 是否支持多选                            |
+| accept             | `string \| undefined`                 | 否   | -                                                    | 接受上传的文件类型，多个之间用 `,` 连接 |
+| maxCount           | `number \| undefined`                 | 否   | -                                                    | 最大上传数量                            |
+| limitSize          | `number \| undefined`                 | 否   | -                                                    | 上传大小限制(单位为 MB)                 |
+| buttonText         | `string \| undefined`                 | 否   | -                                                    | 上传按钮文本                            |
+| buttonType         | `ButtonProps["type"] \| undefined`    | 否   | -                                                    | 上传按钮类型                            |
+| buttonIcon         | `GeneralIconProps`                    | 是   | `{ lib: "antd", icon: "upload", theme: "outlined" }` | 上传按钮图标                            |
+| overMaxCountMode   | `"ignore" \| "replace"`               | 是   | `"replace"`                                          | 超出最大上传数量时文件的保留方式        |
+| uploadDraggable    | `boolean \| undefined`                | 否   | -                                                    | 是否可以拖拽上传                        |
+| draggableUploadTip | `string \| undefined`                 | 否   | -                                                    | 拖拽上传的提示信息                      |
+| autoUpload         | `boolean`                             | 是   | `false`                                              | 是否自动上传                            |
+| url                | `string \| undefined`                 | 否   | -                                                    | 自动上传的地址                          |
+| method             | `string`                              | 是   | `"POST"`                                             | 自动上传的方法                          |
+| uploadName         | `string`                              | 是   | `"file"`                                             | 自动上传的文件参数名                    |
+| themeVariant       | `"default" \| "elevo" \| undefined`   | 否   | -                                                    | 主题变体                                |
+
+## Events
+
+| 事件   | detail                                                                                                                                                                   | 说明         |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
+| change | `FileData[]` — { uid: 文件唯一标识, name: 文件名, file: 原始 File 对象, response: 上传响应内容, status: 上传状态（uploading \| done \| error）, errors: 错误信息列表 }[] | 值变化时触发 |
 
 ## Examples
 
 ### Basic
 
+展示上传文件的基本用法，包含按钮文本、类型和图标的自定义。
+
+```yaml preview
+brick: eo-upload-file
+properties:
+  buttonText: 选择文件
+  buttonType: primary
+  buttonIcon:
+    lib: antd
+    icon: paper-clip
+    theme: outlined
+  accept: .pdf,.docx,.xlsx
+  multiple: true
+  themeVariant: default
+  value: []
+events:
+  change:
+    - action: console.log
+      args:
+        - <% EVENT.detail %>
+```
+
+### Drag Upload
+
+展示拖拽上传功能，包含最大数量限制、文件大小限制和超出数量时的保留策略。
+
 ```yaml preview
 brick: eo-upload-file
 properties:
   style:
-    width: 300px
+    width: 360px
   uploadDraggable: true
-  maxCount: 2
+  draggableUploadTip: 支持上传最多 3 个文件，每个不超过 10 MB
+  maxCount: 3
+  limitSize: 10
+  overMaxCountMode: replace
   multiple: true
-  accept: image/*
-  draggableUploadTip: 支持上传2张图片
+  accept: image/*,.pdf
+events:
+  change:
+    - action: console.log
+      args:
+        - <% EVENT.detail %>
+```
+
+### Auto Upload
+
+展示自动上传功能，文件选择后立即上传到指定服务端地址。
+
+```yaml preview
+brick: eo-upload-file
+properties:
+  autoUpload: true
+  url: /api/upload
+  method: POST
+  uploadName: file
+  buttonText: 上传到服务器
 events:
   change:
     - action: console.log
@@ -23,6 +111,8 @@ events:
 
 ### With Form
 
+在表单中使用上传文件，展示字段名称、说明、必填校验及自定义校验文本。
+
 ```yaml preview
 - brick: eo-form
   events:
@@ -33,16 +123,18 @@ events:
   children:
     - brick: eo-upload-file
       properties:
-        label: 文件
-        name: file
+        label: 附件
+        name: attachment
         required: true
+        message:
+          required: 请上传至少一个文件
         style:
-          width: 300px
+          width: 360px
         uploadDraggable: true
+        draggableUploadTip: 支持上传图片
         maxCount: 2
         multiple: true
         accept: image/*
-        draggableUploadTip: 支持上传图片
       events:
         change:
           - action: console.log

package/docs/eo-upload-file.react.md

@@ -0,0 +1,126 @@
+---
+tagName: eo-upload-file
+displayName: WrappedEoUploadFile
+description: 上传文件
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# WrappedEoUploadFile
+
+> 上传文件
+
+## 导入
+
+```tsx
+import { WrappedEoUploadFile } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性               | 类型                                  | 必填 | 默认值                                               | 说明                                    |
+| ------------------ | ------------------------------------- | ---- | ---------------------------------------------------- | --------------------------------------- |
+| label              | `string \| undefined`                 | 否   | -                                                    | 字段说明                                |
+| name               | `string \| undefined`                 | 否   | -                                                    | 字段名称                                |
+| required           | `boolean \| undefined`                | 否   | -                                                    | 是否必填                                |
+| message            | `Record<string, string> \| undefined` | 否   | -                                                    | 校验文本信息                            |
+| value              | `FileData[] \| undefined`             | 否   | -                                                    | 值                                      |
+| multiple           | `boolean \| undefined`                | 否   | -                                                    | 是否支持多选                            |
+| accept             | `string \| undefined`                 | 否   | -                                                    | 接受上传的文件类型，多个之间用 `,` 连接 |
+| maxCount           | `number \| undefined`                 | 否   | -                                                    | 最大上传数量                            |
+| limitSize          | `number \| undefined`                 | 否   | -                                                    | 上传大小限制(单位为 MB)                 |
+| buttonText         | `string \| undefined`                 | 否   | -                                                    | 上传按钮文本                            |
+| buttonType         | `ButtonProps["type"] \| undefined`    | 否   | -                                                    | 上传按钮类型                            |
+| buttonIcon         | `GeneralIconProps`                    | 是   | `{ lib: "antd", icon: "upload", theme: "outlined" }` | 上传按钮图标                            |
+| overMaxCountMode   | `"ignore" \| "replace"`               | 是   | `"replace"`                                          | 超出最大上传数量时文件的保留方式        |
+| uploadDraggable    | `boolean \| undefined`                | 否   | -                                                    | 是否可以拖拽上传                        |
+| draggableUploadTip | `string \| undefined`                 | 否   | -                                                    | 拖拽上传的提示信息                      |
+| autoUpload         | `boolean`                             | 是   | `false`                                              | 是否自动上传                            |
+| url                | `string \| undefined`                 | 否   | -                                                    | 自动上传的地址                          |
+| method             | `string`                              | 是   | `"POST"`                                             | 自动上传的方法                          |
+| uploadName         | `string`                              | 是   | `"file"`                                             | 自动上传的文件参数名                    |
+| themeVariant       | `"default" \| "elevo" \| undefined`   | 否   | -                                                    | 主题变体                                |
+
+## Events
+
+| 事件     | detail                                                                                                                                                                   | 说明         |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
+| onChange | `FileData[]` — { uid: 文件唯一标识, name: 文件名, file: 原始 File 对象, response: 上传响应内容, status: 上传状态（uploading \| done \| error）, errors: 错误信息列表 }[] | 值变化时触发 |
+
+## Examples
+
+### Basic
+
+展示上传文件的基本用法，包含按钮文本、类型和图标的自定义。
+
+```tsx
+<WrappedEoUploadFile
+  buttonText="选择文件"
+  buttonType="primary"
+  buttonIcon={{ lib: "antd", icon: "paper-clip", theme: "outlined" }}
+  accept=".pdf,.docx,.xlsx"
+  multiple={true}
+  themeVariant="default"
+  value={[]}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Drag Upload
+
+展示拖拽上传功能，包含最大数量限制、文件大小限制和超出数量时的保留策略。
+
+```tsx
+<WrappedEoUploadFile
+  style={{ width: "360px" }}
+  uploadDraggable={true}
+  draggableUploadTip="支持上传最多 3 个文件，每个不超过 10 MB"
+  maxCount={3}
+  limitSize={10}
+  overMaxCountMode="replace"
+  multiple={true}
+  accept="image/*,.pdf"
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Auto Upload
+
+展示自动上传功能，文件选择后立即上传到指定服务端地址。
+
+```tsx
+<WrappedEoUploadFile
+  autoUpload={true}
+  url="/api/upload"
+  method="POST"
+  uploadName="file"
+  buttonText="上传到服务器"
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### With Form
+
+在表单中使用上传文件，展示字段名称、说明、必填校验及自定义校验文本。
+
+```tsx
+<WrappedEoForm
+  onValidateSuccess={(e) => console.log(e.detail)}
+  onValuesChange={(e) => console.log(e.detail)}
+>
+  <WrappedEoUploadFile
+    label="附件"
+    name="attachment"
+    required={true}
+    message={{ required: "请上传至少一个文件" }}
+    style={{ width: "360px" }}
+    uploadDraggable={true}
+    draggableUploadTip="支持上传图片"
+    maxCount={2}
+    multiple={true}
+    accept="image/*"
+    onChange={(e) => console.log(e.detail)}
+  />
+  <WrappedEoSubmitButtons />
+</WrappedEoForm>
+```

package/docs/eo-upload-image.md

@@ -1,20 +1,79 @@
-上传图片构件
+---
+tagName: eo-upload-image
+displayName: WrappedEoUploadImage
+description: 上传图片构件
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# eo-upload-image
+
+> 上传图片构件
+
+## Props
+
+| 属性         | 类型                                  | 必填 | 默认值 | 说明                    |
+| ------------ | ------------------------------------- | ---- | ------ | ----------------------- |
+| name         | `string \| undefined`                 | 否   | -      | 字段名称                |
+| label        | `string \| undefined`                 | 否   | -      | 字段说明                |
+| value        | `ImageData[] \| undefined`            | 否   | -      | 值                      |
+| bucketName   | `string`                              | 是   | -      | 对象存储桶名字          |
+| maxCount     | `number \| undefined`                 | 否   | -      | 最大上传数量            |
+| multiple     | `boolean \| undefined`                | 否   | -      | 是否支持选定的多张图片  |
+| limitSize    | `number \| undefined`                 | 否   | -      | 上传大小限制(单位为 MB) |
+| required     | `boolean \| undefined`                | 否   | -      | 是否必填                |
+| message      | `Record<string, string> \| undefined` | 否   | -      | 校验文本信息            |
+| variant      | `"default" \| "avatar" \| undefined`  | 否   | -      | 变体                    |
+| themeVariant | `"default" \| "elevo" \| undefined`   | 否   | -      | 主题变体                |
+
+## Events
+
+| 事件   | detail                                                                                                                                                                                   | 说明         |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| change | `ImageData[]` — { uid: 文件唯一标识, name: 文件名, url: 图片地址, file: 原始 File 对象, response: 上传响应内容, status: 上传状态（uploading \| done \| error）, errors: 错误信息列表 }[] | 值变化时触发 |
 
 ## Examples
 
 ### Basic
 
+展示上传图片的基本用法，支持多选并限制最大上传数量。
+
+```yaml preview
+- brick: eo-upload-image
+  properties:
+    bucketName: my-bucket
+    multiple: true
+    maxCount: 5
+    themeVariant: default
+    value: []
+  events:
+    change:
+      - action: console.log
+        args:
+          - <% EVENT.detail %>
+```
+
+### Avatar
+
+使用头像变体上传单张图片，并限制文件大小。
+
 ```yaml preview
 - brick: eo-upload-image
+  properties:
+    bucketName: my-bucket
+    variant: avatar
+    limitSize: 2
   events:
     change:
-      action: console.log
-      args:
-        - "<% EVENT.detail %>"
+      - action: console.log
+        args:
+          - <% EVENT.detail %>
 ```
 
 ### With Form
 
+在表单中使用上传图片，展示字段名称、说明、必填校验及自定义校验文本。
+
 ```yaml preview
 - brick: eo-form
   events:
@@ -25,9 +84,14 @@
   children:
     - brick: eo-upload-image
       properties:
-        label: 文件
-        name: file
+        label: 图片
+        name: image
         required: true
+        message:
+          required: 请上传至少一张图片
+        bucketName: my-bucket
+        multiple: true
+        maxCount: 3
       events:
         change:
           - action: console.log

package/docs/eo-upload-image.react.md

@@ -0,0 +1,92 @@
+---
+tagName: eo-upload-image
+displayName: WrappedEoUploadImage
+description: 上传图片构件
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# WrappedEoUploadImage
+
+> 上传图片构件
+
+## 导入
+
+```tsx
+import { WrappedEoUploadImage } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性         | 类型                                  | 必填 | 默认值 | 说明                    |
+| ------------ | ------------------------------------- | ---- | ------ | ----------------------- |
+| name         | `string \| undefined`                 | 否   | -      | 字段名称                |
+| label        | `string \| undefined`                 | 否   | -      | 字段说明                |
+| value        | `ImageData[] \| undefined`            | 否   | -      | 值                      |
+| bucketName   | `string`                              | 是   | -      | 对象存储桶名字          |
+| maxCount     | `number \| undefined`                 | 否   | -      | 最大上传数量            |
+| multiple     | `boolean \| undefined`                | 否   | -      | 是否支持选定的多张图片  |
+| limitSize    | `number \| undefined`                 | 否   | -      | 上传大小限制(单位为 MB) |
+| required     | `boolean \| undefined`                | 否   | -      | 是否必填                |
+| message      | `Record<string, string> \| undefined` | 否   | -      | 校验文本信息            |
+| variant      | `"default" \| "avatar" \| undefined`  | 否   | -      | 变体                    |
+| themeVariant | `"default" \| "elevo" \| undefined`   | 否   | -      | 主题变体                |
+
+## Events
+
+| 事件     | detail                                                                                                                                                                                   | 说明         |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| onChange | `ImageData[]` — { uid: 文件唯一标识, name: 文件名, url: 图片地址, file: 原始 File 对象, response: 上传响应内容, status: 上传状态（uploading \| done \| error）, errors: 错误信息列表 }[] | 值变化时触发 |
+
+## Examples
+
+### Basic
+
+展示上传图片的基本用法，支持多选并限制最大上传数量。
+
+```tsx
+<WrappedEoUploadImage
+  bucketName="my-bucket"
+  multiple={true}
+  maxCount={5}
+  themeVariant="default"
+  value={[]}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Avatar
+
+使用头像变体上传单张图片，并限制文件大小。
+
+```tsx
+<WrappedEoUploadImage
+  bucketName="my-bucket"
+  variant="avatar"
+  limitSize={2}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### With Form
+
+在表单中使用上传图片，展示字段名称、说明、必填校验及自定义校验文本。
+
+```tsx
+<WrappedEoForm
+  onValidateSuccess={(e) => console.log(e.detail)}
+  onValuesChange={(e) => console.log(e.detail)}
+>
+  <WrappedEoUploadImage
+    label="图片"
+    name="image"
+    required={true}
+    message={{ required: "请上传至少一张图片" }}
+    bucketName="my-bucket"
+    multiple={true}
+    maxCount={3}
+    onChange={(e) => console.log(e.detail)}
+  />
+  <WrappedEoSubmitButtons />
+</WrappedEoForm>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/form",
-  "version": "1.21.11",
+  "version": "1.21.13",
   "homepage": "https://github.com/easyops-cn/next-advanced-bricks/tree/master/bricks/form",
   "repository": {
     "type": "git",
@@ -46,5 +46,5 @@
     "@next-bricks/icons": "*",
     "@next-bricks/illustrations": "*"
   },
-  "gitHead": "05072fd5cc9a9758927c7729df7bf49f853e079c"
+  "gitHead": "5b81f1a9d385dac35b2502ead1ab93168309cd2f"
 }