feat(upload): on-preview prop adds detail.event parameter, closes #6036]

CHANGELOG.en-US.md

@@ -14,7 +14,8 @@
 
 - `n-data-table` adds `filter-icon-popover-props` prop, closes [#6111](https://github.com/tusen-ai/naive-ui/issues/6111)
 - `n-input-number` adds `round` prop, closes [#6097](https://github.com/tusen-ai/naive-ui/issues/6097).
-- `n-color-picker` add `on-clear` props
+- `n-color-picker` add `on-clear` props.
+- `n-upload`'s `on-preview` prop adds `detail.event` parameter, closes [#6036](https://github.com/tusen-ai/naive-ui/issues/6036).
 
 ## 2.38.2
 

CHANGELOG.zh-CN.md

@@ -15,6 +15,7 @@
 - `n-data-table` 新增 `filter-icon-popover-props` 属性，关闭 [#6111](https://github.com/tusen-ai/naive-ui/issues/6111)
 - `n-input-number` 新增 `round` 属性，关闭 [#6097](https://github.com/tusen-ai/naive-ui/issues/6097)
 - `n-color-picker` 新增 `on-clear` 属性
+- `n-upload` 的 `on-preview` 属性新增 `detail.event` 参数，关闭 [#6036](https://github.com/tusen-ai/naive-ui/issues/6036)
 
 ## 2.38.2
 

src/upload/demos/enUS/index.demo-entry.md

@@ -66,7 +66,7 @@ download.vue
 | on-finish | `(options: { file: UploadFileInfo, event?: Event }) => UploadFileInfo \| undefined` | `({ file }) => file` | Upload finished callback. You can intercept and even modify the uploaded `UploadFileInfo`. Note: file will be null in next event-loop |  |
 | on-before-upload | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo> }) => (Promise<boolean \| void> \| boolean \| void)` | `true` | Upload ready to start callback. Returning `false`, a promise resolved with `false`, or a rejected promise will cancel the upload. |  |
 | on-download | `(file: FileInfo) => void` | `undefined` | Callback for clicking download buttons. Returning `false`, `Promise resolve false`, `Promise rejected` will cancel the download. |  |
-| on-preview | `(file: FileInfo) => void` | `undefined` | Callback for clicking file links or preview buttons. |  |
+| on-preview | `(file: FileInfo, detail: { event: MouseEvent }) => void` | `undefined` | Callback for clicking file links or preview buttons. You can use `preventDefault` to prevent default anchor link open behavior. | `detail.event` NEXT_VERSION |
 | on-remove | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo>, index: number }) => Promise<boolean> \| boolean \| any` | `() => true` | File removed callback. Returning `false`, a promise resolved with `false`, or a rejected promise will cancel this removal. | `index` 2.38.2 |
 | on-update:file-list | `(fileList: UploadFileInfo[]) => void` | `undefined` | Callback function triggered on file-list changes. |  |
 

src/upload/demos/zhCN/index.demo-entry.md

@@ -67,7 +67,7 @@ debug.vue
 | on-finish | `(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo \| undefined` | `({ file }) => file` | 文件上传结束的回调，可以修改传入的 UploadFileInfo 或者返回一个新的 UploadFileInfo。注意：file 将会下一次事件循环中被置为 null |  |
 | on-before-upload | `(options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => (Promise<boolean \| void> \| boolean \| void)` | `undefined` | 文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传 |  |
 | on-download | `(file: FileInfo) => void` | `undefined` | 点击文件下载按钮的回调函数，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次下载 |  |
-| on-preview | `(file: FileInfo) => void` | `undefined` | 点击文件链接或预览按钮的回调函数 |  |
+| on-preview | `(file: FileInfo, detail: { event: MouseEvent }) => void` | `undefined` | 点击文件链接或预览按钮的回调函数，你可以通过 `preventDefault` 来取消默认的链接打开行为 | `detail.event` NEXT_VERSION |
 | on-remove | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo>, index: number }) => Promise<boolean> \| boolean \| any` | `() => true` | 文件删除回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次删除 | `index` 2.38.2 |
 | on-update:file-list | `(fileList: UploadFileInfo[]) => void` | `undefined` | 当 file-list 改变时触发的回调函数 |  |
 

src/upload/src/UploadFile.tsx

@@ -182,8 +182,9 @@ export default defineComponent({
       } = NUpload
 
       if (onPreview) {
-        e.preventDefault()
-        onPreview(props.file)
+        onPreview(props.file, {
+          event: e
+        })
       } else if (props.listType === 'image-card') {
         const { value } = imageRef
         if (!value) return

src/upload/src/interface.ts

@@ -99,7 +99,12 @@ export type OnBeforeUpload = (data: {
 
 export type ListType = 'text' | 'image' | 'image-card'
 
-export type OnPreview = (file: UploadSettledFileInfo) => void
+export type OnPreview = (
+  file: UploadSettledFileInfo,
+  detail: {
+    event: MouseEvent
+  }
+) => void
 
 export type CreateThumbnailUrl = (
   file: File | null,