refactor: download, data-table exportCsv => downloadCsv

CHANGELOG.en-US.md

@@ -46,7 +46,7 @@
 - `n-tree-select` adds `ellipsis-tag-popover-props` prop.
 - `n-date-picker` adds `month-string-type` prop, closes [#4891](https://github.com/tusen-ai/naive-ui/issues/4891)
 - `n-avatar-group` adds `expand-on-hover` prop.
-- `n-data-table` adds `exportCsv` method, closes [#4260](https://github.com/tusen-ai/naive-ui/issues/4260)
+- `n-data-table` adds `downloadCsv` method, closes [#4260](https://github.com/tusen-ai/naive-ui/issues/4260)
 - `n-tabs` adds `tab-class`, `add-tab-style` and `add-tab-class` props.
 
 ## 2.36.0

CHANGELOG.zh-CN.md

@@ -47,7 +47,7 @@
 - `n-tree-select` 新增 `ellipsis-tag-popover-props` 属性
 - `n-date-picker` 新增 `month-string-type` 属性，关闭 [#4891](https://github.com/tusen-ai/naive-ui/issues/4891)
 - `n-avatar-group` 新增 `expand-on-hover` 属性
-- `n-data-table` 新增 `exportCsv` 方法，关闭 [#4260](https://github.com/tusen-ai/naive-ui/issues/4260)
+- `n-data-table` 新增 `downloadCsv` 方法，关闭 [#4260](https://github.com/tusen-ai/naive-ui/issues/4260)
 - `n-tabs` 新增 `tab-class`、`add-tab-style`、`add-tab-class` 属性
 - TODO: tree select 支持控制节点展开行为
 

src/_utils/dom/download.ts

@@ -0,0 +1,14 @@
+export const download = (
+  url: string | null,
+  name: string | undefined
+): void => {
+  if (!url) return
+  const a = document.createElement('a')
+  a.href = url
+  if (name !== undefined) {
+    a.download = name
+  }
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}

src/_utils/dom/index.ts

@@ -1 +1,2 @@
 export { isDocument } from './is-document'
+export { download } from './download'

src/data-table/demos/enUS/export-csv.demo.vue

@@ -5,7 +5,7 @@
 <template>
   <n-space vertical :size="12">
     <n-space>
-      <n-button @click="exportCsv">
+      <n-button @click="downloadCsv">
         Export Csv
       </n-button>
       <n-button @click="exportSorterAndFilterCsv">
@@ -96,11 +96,11 @@ export default defineComponent({
   setup () {
     const tableRef = ref<DataTableInst>()
 
-    const exportCsv = () =>
-      tableRef.value?.exportCsv({ fileName: 'data-table' })
+    const downloadCsv = () =>
+      tableRef.value?.downloadCsv({ fileName: 'data-table' })
 
     const exportSorterAndFilterCsv = () =>
-      tableRef.value?.exportCsv({
+      tableRef.value?.downloadCsv({
         fileName: 'sorter-filter',
         keepOriginalData: false
       })
@@ -108,7 +108,7 @@ export default defineComponent({
     return {
       data,
       tableRef,
-      exportCsv,
+      downloadCsv,
       exportSorterAndFilterCsv,
       columns,
       pagination: false as const

src/data-table/demos/enUS/index.demo-entry.md

@@ -208,7 +208,7 @@ These methods can help you control table in an uncontrolled manner. However, it'
 | --- | --- | --- | --- |
 | clearFilters | `() => void` | Clear all filter state. |  |
 | clearSorter | `() => void` | Clear all sort state. |  |
-| exportCsv | `(options?: { fileName?: string, keepOriginalData?: boolean }) => void` | Export CSV. | NEXT_VERSION |
+| downloadCsv | `(options?: { fileName?: string, keepOriginalData?: boolean }) => void` | Export CSV. | NEXT_VERSION |
 | filters | `(filters: DataTableFilterState \| null) => void` | Set the active filters of the table. |  |
 | page | `(page: number) => void` | Manually set the page. |  |
 | scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | Scroll content. | 2.30.4 |

src/data-table/demos/zhCN/export-csv.demo.vue

@@ -5,7 +5,7 @@
 <template>
   <n-space vertical :size="12">
     <n-space>
-      <n-button @click="exportCsv">
+      <n-button @click="downloadCsv">
         导出 Csv
       </n-button>
       <n-button @click="exportSorterAndFilterCsv">
@@ -96,11 +96,11 @@ export default defineComponent({
   setup () {
     const tableRef = ref<DataTableInst>()
 
-    const exportCsv = () =>
-      tableRef.value?.exportCsv({ fileName: 'data-table' })
+    const downloadCsv = () =>
+      tableRef.value?.downloadCsv({ fileName: 'data-table' })
 
     const exportSorterAndFilterCsv = () =>
-      tableRef.value?.exportCsv({
+      tableRef.value?.downloadCsv({
         fileName: 'sorter-filter',
         keepOriginalData: false
       })
@@ -108,7 +108,7 @@ export default defineComponent({
     return {
       data,
       tableRef,
-      exportCsv,
+      downloadCsv,
       exportSorterAndFilterCsv,
       columns,
       pagination: false as const

src/data-table/demos/zhCN/index.demo-entry.md

@@ -219,7 +219,7 @@ type DataTableCreateSummary = (pageData: RowData[]) =>
 | --- | --- | --- | --- |
 | clearFilters | `() => void` | 清空所有的 filter 状态 |  |
 | clearSorter | `() => void` | 清空所有的 sort 状态 |  |
-| exportCsv | `(options?: { fileName?: string, keepOriginalData?: boolean }) => void` | 导出 CSV | NEXT_VERSION |
+| downloadCsv | `(options?: { fileName?: string, keepOriginalData?: boolean }) => void` | 导出 CSV | NEXT_VERSION |
 | filters | `(filters: DataTableFilterState \| null) => void` | 设定表格当前的过滤器 |  |
 | page | `(page: number) => void` | 手动设置 page |  |
 | scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | 滚动内容 | 2.30.4 |

src/data-table/src/DataTable.tsx

@@ -19,7 +19,7 @@ import {
 } from '../../_mixins'
 import { NBaseLoading } from '../../_internal'
 import { NPagination } from '../../pagination'
-import { createKey, resolveSlot, warnOnce } from '../../_utils'
+import { createKey, download, resolveSlot, warnOnce } from '../../_utils'
 import { dataTableLight } from '../styles'
 import MainTable from './MainTable'
 import { useCheck } from './use-check'
@@ -108,19 +108,17 @@ export default defineComponent({
     const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } =
       useGroupHeader(props, getResizableWidth)
 
-    const exportCsv = (options?: CsvOptionsType): void => {
-      const { fileName = 'DataTable.csv', keepOriginalData = false } =
-        options || {}
+    const downloadCsv = (options?: CsvOptionsType): void => {
+      const { fileName = 'data.csv', keepOriginalData = false } = options || {}
       const data = keepOriginalData ? props.data : rawPaginatedDataRef.value
       const csvData = generateCsv(props.columns, data)
       const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8' })
-      const filename = fileName.endsWith('.csv') ? fileName : `${fileName}.csv`
-      const link = document.createElement('a')
-      link.download = filename
-      link.href = URL.createObjectURL(blob)
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
+      const downloadUrl = URL.createObjectURL(blob)
+      download(
+        downloadUrl,
+        fileName.endsWith('.csv') ? fileName : `${fileName}.csv`
+      )
+      URL.revokeObjectURL(downloadUrl)
     }
 
     const {
@@ -295,7 +293,7 @@ export default defineComponent({
       page,
       sort,
       clearFilter,
-      exportCsv,
+      downloadCsv,
       scrollTo: (arg0: any, arg1?: any) => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         mainTableInstRef.value?.scrollTo(arg0, arg1)

src/data-table/src/interface.ts

@@ -515,7 +515,7 @@ export interface DataTableInst {
   page: (page: number) => void
   sort: (columnKey: ColumnKey, order: SortOrder) => void
   scrollTo: ScrollTo
-  exportCsv: (options?: CsvOptionsType) => void
+  downloadCsv: (options?: CsvOptionsType) => void
   /** @deprecated it but just leave it here, it does no harm */
   clearFilter: () => void
 }

src/image/src/ImagePreview.tsx

@@ -22,7 +22,6 @@ import { LazyTeleport } from 'vueuc'
 import { on, off } from 'evtd'
 import { beforeNextFrameOnce } from 'seemly'
 import { kebabCase } from 'lodash-es'
-import { download } from '../../upload/src/utils'
 import {
   RotateClockwiseIcon,
   RotateCounterclockwiseIcon,
@@ -32,6 +31,7 @@ import {
 } from '../../_internal/icons'
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
 import { NBaseIcon } from '../../_internal'
+import { download } from '../../_utils'
 import { NTooltip } from '../../tooltip'
 import { imageLight } from '../styles'
 import { prevIcon, nextIcon, closeIcon, downloadIcon } from './icons'
@@ -145,14 +145,10 @@ export default defineComponent({
       } = opts
       const deltaHorizontal = mouseDownClientX - mouseUpClientX
       const deltaVertical = mouseDownClientY - mouseUpClientY
-      const moveVerticalDirection:
-      | 'verticalTop'
-      | 'verticalBottom' = `vertical${deltaVertical > 0 ? 'Top' : 'Bottom'}`
-      const moveHorizontalDirection:
-      | 'horizontalLeft'
-      | 'horizontalRight' = `horizontal${
-        deltaHorizontal > 0 ? 'Left' : 'Right'
-      }`
+      const moveVerticalDirection: 'verticalTop' | 'verticalBottom' =
+        `vertical${deltaVertical > 0 ? 'Top' : 'Bottom'}`
+      const moveHorizontalDirection: 'horizontalLeft' | 'horizontalRight' =
+        `horizontal${deltaHorizontal > 0 ? 'Left' : 'Right'}`
 
       return {
         moveVerticalDirection,

src/theme-editor/src/ThemeEditor.tsx

@@ -27,7 +27,7 @@ import { NDivider } from '../../divider'
 import { NButton } from '../../button'
 import { NColorPicker } from '../../color-picker'
 import { NEmpty } from '../../empty'
-import { lockHtmlScrollRightCompensationRef } from '../../_utils'
+import { download, lockHtmlScrollRightCompensationRef } from '../../_utils'
 import { NIcon } from '../../icon'
 import { MaximizeIcon } from './MaximizeIcon'
 import { MinimizeIcon } from './MinimizeIcon'
@@ -168,12 +168,7 @@ export default defineComponent({
       const url = URL.createObjectURL(
         new Blob([JSON.stringify(overridesRef.value, undefined, 2)])
       )
-      const a = document.createElement('a')
-      a.href = url
-      a.download = 'naive-ui-theme-overrides.json'
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
+      download(url, 'naive-ui-theme-overrides.json')
       URL.revokeObjectURL(url)
     }
     watch(overridesRef, (value) => {

src/upload/src/utils.ts

@@ -164,18 +164,3 @@ export function matchType (
     return false
   })
 }
-
-export const download = (
-  url: string | null,
-  name: string | undefined
-): void => {
-  if (!url) return
-  const a = document.createElement('a')
-  a.href = url
-  if (name !== undefined) {
-    a.download = name
-  }
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-}