feat(upload): add abstract prop, separate upload-file-list and upload-trigger components

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Breaking Changes
 
 - `n-layout-sider`'s `arrow-circle` trigger is changed into new style.
+- `n-upload` add `abstract` prop, add `n-upload-trigger` 和 `n-upload-file-list` component, closes [#1102](https://github.com/TuSimple/naive-ui/issues/1102).
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Breaking Changes
 
 - `n-layout-sider` 的 `arrow-circle` 类型触发按钮采用了新样式
+- `n-upload` 新增 `abstract` 属性，新增 `n-upload-trigger` 和 `n-upload-file-list` 组件，关闭 [#1102](https://github.com/TuSimple/naive-ui/issues/1102)
 
 ### Feats
 

src/upload/demos/enUS/abstract.demo.md

@@ -0,0 +1,45 @@
+# No Wrapper DOM
+
+`n-upload` 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 #="{handleClick}">
+        <n-button @click="handleClick">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 }
+  }
+})
+```

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. |
@@ -80,3 +82,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: { handleClick: () => void, handleDragOver: (e: DragEvent) => void, handleDragEnter: (e: DragEvent) => void, handleDragLeave: (e: DragEvent) => void, handleDrop: (e: DragEvent) => void})` | `handleClick` is the click upload function, `handleDrop` is the drag and drop upload function, `handleDragEnter`, `handleDragOver` and `handleDragLeave` are the drag and drop event functions. |

src/upload/demos/zhCN/abstract.demo.md

@@ -0,0 +1,45 @@
+# 不需要包裹 DOM
+
+`n-upload` 设置 `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 #="{handleClick}">
+        <n-button @click="handleClick">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 }
+  }
+})
+```

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` | 自定义文件缩略图 |
@@ -79,3 +81,9 @@ image-card-style
 | 名称    | 参数 | 说明                                          |
 | ------- | ---- | --------------------------------------------- |
 | default | `()` | 上传拖动器的内容，使用可参考[拖拽上传](#drag) |
+
+### UploadTrigger Slots
+
+| 名称 | 参数 | 说明 |
+| --- | --- | --- |
+| default | `(options: { handleClick: () => void, handleDragOver: (e: DragEvent) => void, handleDragEnter: (e: DragEvent) => void, handleDragLeave: (e: DragEvent) => void, handleDrop: (e: DragEvent) => void})` | `handleClick` 为点击上传函数，`handleDrop` 为拖拽上传函数，`handleDragEnter`、`handleDragOver` 和 `handleDragLeave` 为拖拽事件函数 |

src/upload/index.ts

@@ -1,5 +1,7 @@
 export { default as NUpload } from './src/Upload'
 export { default as NUploadDragger } from './src/UploadDragger'
+export { default as NUploadTrigger } from './src/UploadTrigger'
+export { default as NUploadFileList } from './src/UploadFileList'
 export type { UploadProps } from './src/Upload'
 export type { uploadDraggerKey } from './src/UploadDragger'
 export type { UploadInst, FileInfo as UploadFileInfo } from './src/interface'