docs(upload): add abstract props docs and CHANGELOG (tusen-ai#1102)

kev1nzh37 · Sep 17, 2021 · 1ab4530 · 1ab4530
1 parent 1233d8a
commit 1ab4530
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 0 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+### Feats
+
+- `n-upload` add `abstract` prop, add `n-upload-trigger` 和 `n-upload-file-list` component, closes [#1102](https://github.com/TuSimple/naive-ui/issues/1102).
+
 ### Fixes
 
 - Fix `n-select` focus input when closing tag with `filterable` , closes [#1170](https://github.com/TuSimple/naive-ui/issues/1170).

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+### Feats
+
+- `n-upload` 新增 `abstract` 属性，新增 `n-upload-trigger` 和 `n-upload-file-list` 组件，关闭 [#1102](https://github.com/TuSimple/naive-ui/issues/1102)
+
 ### Fixes
 
 - 修复 `n-select` `filterable` 下关闭标签 input 光标聚焦问题，关闭 [#1170](https://github.com/TuSimple/naive-ui/issues/1170)

diff --git a/src/upload/demos/enUS/abstract.demo.md b/src/upload/demos/enUS/abstract.demo.md
@@ -0,0 +1,45 @@
+# No Wrapper DOM
+
+`n-upload` and `n-upload-trigger` set `abstract`.
+
+`n-upload-trigger` and `n-upload-file-list` need to be called from within `n-upload`.
+
+```html
+<div>
+  <n-upload
+    abstract
+    :default-file-list="fileList"
+    action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  >
+    <n-button-group>
+      <n-button> Eat </n-button>
+      <n-button> Sleep </n-button>
+      <n-upload-trigger abstract #="{handleTriggerClick}">
+        <n-button @click="handleTriggerClick">Upload</n-button>
+      </n-upload-trigger>
+    </n-button-group>
+
+    <n-card style="margin-top: 12px;" title="File List">
+      <n-upload-file-list />
+    </n-card>
+  </n-upload>
+</div>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup () {
+    const fileListRef = ref([
+      {
+        id: 'b',
+        name: 'file.doc',
+        status: 'finished',
+        type: 'text/plain'
+      }
+    ])
+
+    return { fileList: fileListRef }
+  }
+})
+```
diff --git a/src/upload/demos/enUS/index.demo-entry.md b/src/upload/demos/enUS/index.demo-entry.md
@@ -14,6 +14,7 @@ default-files
 before-upload
 image-style
 image-card-style
+abstract
 ```
 
 ## API
@@ -22,6 +23,7 @@ image-card-style
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| abstract | `boolean` | `false` | Whether or not DOM wrapping does not exist. |
 | accept | `string` | `undefined` | The accept type of upload. See <n-a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">accept</n-a>. |
 | action | `string` | `undefined` | The URL to submit data to. |
 | create-thumbnail-url | `(file: File) => Promise<string>` | `undefined` | Customize file thumbnails. |
@@ -49,6 +51,12 @@ image-card-style
 | on-before-upload | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo> }) => (Promise<boolean \| void> \| boolean \| void)` | `true` | Callback before file is uploaded, return false or a Promise that resolve false or reject will cancel this upload. |
 | on-preview | `(file: FileInfo) => void` | `undefined` | Callback functions for clicking on file links or preview buttons. |
 
+### UploadTrigger Props
+
+| 名称 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| abstract | `boolean` | `false` | Whether there is no DOM wrapper, to be used together with the parent component `Upload.abstract`. |
+
 #### UploadFileInfo Type
 
 | Property | Type | Description |
@@ -80,3 +88,9 @@ image-card-style
 | Name | Parameters | Description |
 | --- | --- | --- |
 | default | `()` | The content of the upload dragger, use can refer to [Drag to Upload](#drag). |
+
+### UploadTrigger Slots
+
+| 名称 | 参数 | 说明 |
+| --- | --- | --- |
+| default | `(options: { handleTriggerClick: () => void, handleTriggerDragOver: (e: DragEvent) => void, handleTriggerDragEnter: (e: DragEvent) => void, handleTriggerDragLeave: (e: DragEvent) => void, handleTriggerDrop: (e: DragEvent) => void})` | `handleTriggerClick` is the click upload function, `handleTriggerDrop` is the drag and drop upload function, `handleTriggerDragEnter`, `handleTriggerDragOver` and `handleTriggerDragLeave` are the drag and drop event functions. |
diff --git a/src/upload/demos/zhCN/abstract.demo.md b/src/upload/demos/zhCN/abstract.demo.md
@@ -0,0 +1,45 @@
+# 不需要包裹 DOM
+
+`n-upload` 和 `n-upload-trigger` 设置 `abstract`。
+
+`n-upload-trigger`和 `n-upload-file-list` 需在 `n-upload` 内调用。
+
+```html
+<div>
+  <n-upload
+    abstract
+    :default-file-list="fileList"
+    action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  >
+    <n-button-group>
+      <n-button> Eat </n-button>
+      <n-button> Sleep </n-button>
+      <n-upload-trigger abstract #="{handleTriggerClick}">
+        <n-button @click="handleTriggerClick">Upload</n-button>
+      </n-upload-trigger>
+    </n-button-group>
+
+    <n-card style="margin-top: 12px;" title="File List">
+      <n-upload-file-list />
+    </n-card>
+  </n-upload>
+</div>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup () {
+    const fileListRef = ref([
+      {
+        id: 'b',
+        name: 'file.doc',
+        status: 'finished',
+        type: 'text/plain'
+      }
+    ])
+
+    return { fileList: fileListRef }
+  }
+})
+```
diff --git a/src/upload/demos/zhCN/index.demo-entry.md b/src/upload/demos/zhCN/index.demo-entry.md
@@ -14,6 +14,7 @@ default-files
 before-upload
 image-style
 image-card-style
+abstract
 ```
 
 ## API
@@ -22,6 +23,7 @@ image-card-style
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| abstract | `boolean` | `false` | 是否不存在 DOM 包裹 |
 | accept | `string` | `undefined` | 接受的文件类型，参考 <n-a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">accept</n-a> |
 | action | `string` | `undefined` | 请求提交的地址 |
 | create-thumbnail-url | `(file: File) => Promise<string>` | `undefined` | 自定义文件缩略图 |
@@ -48,6 +50,12 @@ image-card-style
 | on-before-upload | `(options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => (Promise<boolean \| void> \| boolean \| void)` | `undefined` | 文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传 |
 | on-preview | `(file: FileInfo) => void` | `undefined` | 点击文件链接或预览按钮的回调函数 |
 
+### UploadTrigger Props
+
+| 名称 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| abstract | `boolean` | `false` | 是否不存在 DOM 包裹，需与父级 `Upload.abstract` 同时使用 |
+
 #### UploadFileInfo Type
 
 | 属性 | 类型 | 说明 |
@@ -79,3 +87,9 @@ image-card-style
 | 名称    | 参数 | 说明                                          |
 | ------- | ---- | --------------------------------------------- |
 | default | `()` | 上传拖动器的内容，使用可参考[拖拽上传](#drag) |
+
+### UploadTrigger Slots
+
+| 名称 | 参数 | 说明 |
+| --- | --- | --- |
+| default | `(options: { handleTriggerClick: () => void, handleTriggerDragOver: (e: DragEvent) => void, handleTriggerDragEnter: (e: DragEvent) => void, handleTriggerDragLeave: (e: DragEvent) => void, handleTriggerDrop: (e: DragEvent) => void})` | `handleTriggerClick` 为点击上传函数，`handleTriggerDrop` 为拖拽上传函数，`handleTriggerDragEnter`、`handleTriggerDragOver` 和 `handleTriggerDragLeave` 为拖拽事件函数 |