feat(comp:upload): add file upload component

fix IDuxFE#605

packages/components/config/src/defaultConfig.ts

@@ -56,6 +56,8 @@ import type {
   TooltipConfig,
   TreeConfig,
   TreeSelectConfig,
+  UploadConfig,
+  UploadListConfig,
 } from './types'
 
 import { numFormatter } from './numFormatter'
@@ -200,6 +202,25 @@ const treeSelect: TreeSelectConfig = {
   nodeKey: 'key',
 }
 
+const upload: UploadConfig = {
+  multiple: false,
+  dragable: false,
+  directory: false,
+  name: 'file',
+  withCredentials: false,
+  requestMethod: 'post',
+  strokeColor: '#20CC94',
+}
+
+const uploadList: UploadListConfig = {
+  listType: 'text',
+  icon: {
+    file: true,
+    remove: true,
+    retry: true,
+  },
+}
+
 // --------------------- Data Display ---------------------
 const avatar: AvatarConfig = {
   gap: 4,
@@ -409,6 +430,8 @@ export const defaultConfig: GlobalConfig = {
   timePicker,
   timeRangePicker,
   treeSelect,
+  upload,
+  uploadList,
   // Data Display
   avatar,
   badge,

packages/components/config/src/types.ts

@@ -21,14 +21,15 @@ import type { MessageType } from '@idux/components/message'
 import type { ModalType } from '@idux/components/modal'
 import type { NotificationPlacement, NotificationType } from '@idux/components/notification'
 import type { PaginationSize } from '@idux/components/pagination'
-import type { ProgressFormat, ProgressSize } from '@idux/components/progress'
+import type { ProgressFormat, ProgressGradient, ProgressSize } from '@idux/components/progress'
 import type { ResultStatus } from '@idux/components/result'
 import type { SpaceSize } from '@idux/components/space'
 import type { SpinSize, SpinTipAlignType } from '@idux/components/spin'
 import type { StepperSize } from '@idux/components/stepper'
 import type { TableColumnAlign, TableColumnSortOrder, TablePaginationPosition, TableSize } from '@idux/components/table'
 import type { TagShape } from '@idux/components/tag'
 import type { TextareaAutoRows, TextareaResize } from '@idux/components/textarea'
+import type { UploadIconType, UploadListType, UploadRequestMethod, UploadRequestOption } from '@idux/components/upload'
 import type { VNode } from 'vue'
 
 // Common
@@ -188,6 +189,22 @@ export interface TimePickerConfig {
 
 export type TimeRangePickerConfig = TimePickerConfig
 
+export interface UploadConfig {
+  multiple: boolean
+  dragable: boolean
+  directory: boolean
+  name: string
+  withCredentials: boolean
+  requestMethod: UploadRequestMethod
+  strokeColor: ProgressGradient | string
+  customRequest?: (option: UploadRequestOption) => { abort: () => void }
+}
+
+export interface UploadListConfig {
+  listType: UploadListType
+  icon: Partial<Record<UploadIconType, string | boolean | VNode>>
+}
+
 // Data Display
 export interface AvatarConfig {
   gap: number
@@ -433,6 +450,8 @@ export interface GlobalConfig {
   treeSelect: TreeSelectConfig
   timePicker: TimePickerConfig
   timeRangePicker: TimeRangePickerConfig
+  upload: UploadConfig
+  uploadList: UploadListConfig
   // Data Display
   avatar: AvatarConfig
   badge: BadgeConfig

packages/components/default.less

@@ -61,3 +61,4 @@
 @import './tree/style/themes/default.less';
 @import './tree-select/style/themes/default.less';
 @import './typography/style/themes/default.less';
+@import './upload/style/themes/default.less';

packages/components/i18n/src/locales/en-US.ts

@@ -89,6 +89,15 @@ const enUS: Locale = {
     separator: 'To',
     placeholder: ['Start time', 'End time'],
   },
+  upload: {
+    uploading: 'Uploading...',
+    error: 'Upload error',
+    cancel: 'Cancel Upload',
+    preview: 'Preview file',
+    remove: 'Remove file',
+    retry: 'Reupload',
+    download: 'Download file',
+  },
 }
 
 export default enUS

packages/components/i18n/src/locales/zh-CN.ts

@@ -89,6 +89,15 @@ const zhCN: Locale = {
     separator: '至',
     placeholder: ['起始时间', '结束时间'],
   },
+  upload: {
+    uploading: '正在上传...',
+    error: '上传失败',
+    cancel: '取消上传',
+    preview: '预览文件',
+    remove: '删除文件',
+    retry: '重新上传',
+    download: '下载文件',
+  },
 }
 
 export default zhCN

packages/components/i18n/src/types.ts

@@ -94,6 +94,16 @@ export interface TimeRangePickerLocale {
   placeholder: [string, string]
 }
 
+export interface UploadLocale {
+  uploading: string
+  error: string
+  cancel: string
+  preview: string
+  remove: string
+  retry: string
+  download: string
+}
+
 export interface Locale {
   type: LocaleType
   date: DateLocale
@@ -106,6 +116,7 @@ export interface Locale {
   table: TableLocale
   timePicker: TimePickerLocale
   timeRangePicker: TimeRangePickerLocale
+  upload: UploadLocale
 }
 
 export type LocaleKey = keyof Locale

packages/components/index.ts

@@ -62,6 +62,7 @@ import { IxTooltip } from '@idux/components/tooltip'
 import { IxTree } from '@idux/components/tree'
 import { IxTreeSelect } from '@idux/components/tree-select'
 import { IxTypography } from '@idux/components/typography'
+import { IxUpload, IxUploadList } from '@idux/components/upload'
 import { version } from '@idux/components/version'
 
 const components = [
@@ -150,6 +151,8 @@ const components = [
   IxTooltip,
   IxTree,
   IxTreeSelect,
+  IxUpload,
+  IxUploadList,
 ]
 
 const directives: Record<string, Directive> = {

packages/components/progress/index.ts

@@ -22,5 +22,6 @@ export type {
   ProgressType,
   ProgressGapPositionType,
   ProgressStatus,
+  ProgressGradient,
   ProgressStrokeLinecap,
 } from './src/types'

packages/components/style/variable/prefix.less

@@ -65,6 +65,7 @@
 @time-range-picker-prefix: ~'@{idux-prefix}-time-range-picker';
 @tree-select-prefix: ~'@{idux-prefix}-tree-select';
 @tree-select-option-prefix: ~'@{idux-prefix}-tree-select-option';
+@upload-prefix: ~'@{idux-prefix}-upload';
 
 // Feedback
 @alert-prefix: ~'@{idux-prefix}-alert';