vxe-pc-ui 3.3.0 → 3.3.1

package/packages/language/ko-KR.ts

@@ -308,6 +308,7 @@ export default {
       fileTypeHint: '支持 {0} 文件类型',
       fileSizeHint: '单个文件大小不超过{0}',
       fileCountHint: '最多可上传{0}个文件',
+      uploadTypeErr: '文件类型不匹配！',
       overCountErr: '最多只能选择{0}个文件！',
       overCountExtraErr: '已超出最大数量{0}个，超出的{1}个文件将被忽略！',
       overSizeErr: '文件大小最大不能超过{0}！',

package/packages/language/pt-BR.ts

@@ -308,6 +308,7 @@ export default {
       fileTypeHint: 'Support {0} file types',
       fileSizeHint: 'Single file size does not exceed {0}',
       fileCountHint: 'Up to {0} file can be uploaded',
+      uploadTypeErr: '文件类型不匹配！',
       overCountErr: 'You can only choose {0} file!',
       overCountExtraErr: 'It has exceeded the maximum number {0}, and more than {0} file will be ignored!超出最大数量 1 个，超出的 1 个文件将被忽略！',
       overSizeErr: 'The size of the file is not more than {0}}!',

package/packages/language/ru-RU.ts

@@ -308,6 +308,7 @@ export default {
       fileTypeHint: 'Поддерживаемые типы файлов: {0}',
       fileSizeHint: 'Размер одного файла не превышает {0}',
       fileCountHint: 'Можно загрузить до {0} файлов.',
+      uploadTypeErr: '文件类型不匹配！',
       overCountErr: 'Можно выбрать только {0} файлов!',
       overCountExtraErr: 'Превышено максимальное количество файлов ({0}). Лишние файлы ({1}) будут проигнорированы!',
       overSizeErr: 'Максимальный размер файла не может превышать {0}!',

package/packages/language/uk-UA.ts

@@ -308,6 +308,7 @@ export default {
       fileTypeHint: '支持 {0} 文件类型',
       fileSizeHint: '单个文件大小不超过{0}',
       fileCountHint: '最多可上传{0}个文件',
+      uploadTypeErr: '文件类型不匹配！',
       overCountErr: '最多只能选择{0}个文件！',
       overCountExtraErr: '已超出最大数量{0}个，超出的{1}个文件将被忽略！',
       overSizeErr: '文件大小最大不能超过{0}！',

package/packages/language/vi-VN.ts

@@ -308,6 +308,7 @@ export default {
       fileTypeHint: '支持 {0} 文件类型',
       fileSizeHint: '单个文件大小不超过{0}',
       fileCountHint: '最多可上传{0}个文件',
+      uploadTypeErr: '文件类型不匹配！',
       overCountErr: '最多只能选择{0}个文件！',
       overCountExtraErr: '已超出最大数量{0}个，超出的{1}个文件将被忽略！',
       overSizeErr: '文件大小最大不能超过{0}！',

package/packages/language/zh-CHT.ts

@@ -308,6 +308,7 @@ export default {
       fileTypeHint: '支援 {0} 文件類型',
       fileSizeHint: '單一檔案大小不超過{0}',
       fileCountHint: '最多可上傳{0}個文件',
+      uploadTypeErr: '文件类型不匹配！',
       overCountErr: '最多只能選擇{0}個檔案！',
       overCountExtraErr: '已超出最大數量{0}個，超出的{1}個檔案將被忽略！',
       overSizeErr: '檔案大小最大不能超過{0}！',

package/packages/language/zh-CN.ts

@@ -308,6 +308,7 @@ export default {
       fileTypeHint: '支持 {0} 文件类型',
       fileSizeHint: '单个文件大小不超过{0}',
       fileCountHint: '最多可上传{0}个文件',
+      uploadTypeErr: '文件类型不匹配！',
       overCountErr: '最多只能选择{0}个文件！',
       overCountExtraErr: '已超出最大数量{0}个，超出的{1}个文件将被忽略！',
       overSizeErr: '文件大小最大不能超过{0}！',

package/packages/ui/index.ts

@@ -326,6 +326,7 @@ setConfig({
     showRemoveButton: true,
     showButtonIcon: true,
     showPreview: true,
+    dragToUpload: true,
     imageStyle: {}
   },
   watermark: {

package/packages/upload/src/upload.ts

@@ -1,19 +1,30 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { VxeUI, getConfig, getI18n, getIcon, globalMixins, createEvent, renderEmptyElement } from '../../ui'
+import { VxeUI, getConfig, getI18n, getIcon, globalMixins, createEvent, globalEvents, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../..//ui/src/vn'
 import { errLog } from '../../ui/src/log'
-import { toCssUnit } from '../../ui/src/dom'
+import { getEventTargetNode, toCssUnit } from '../../ui/src/dom'
 import { readLocalFile } from './util'
 import VxeButtonComponent from '../../button/src/button'
 
 import type { VxeUploadDefines, VxeUploadPropTypes, UploadReactData, UploadInternalData, VxeUploadEmits, VxeComponentSizeType, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, ValueOf } from '../../../types'
 
-const getUniqueKey = () => {
+function getUniqueKey () {
   return XEUtils.uniqueId()
 }
 
+function handleTransferFiles (items: DataTransferItemList) {
+  const files: File[] = []
+  XEUtils.arrayEach(items, item => {
+    const file = item.getAsFile()
+    if (file) {
+      files.push(file)
+    }
+  })
+  return files
+}
+
 export default defineVxeComponent({
   name: 'VxeUpload',
   model: {
@@ -54,6 +65,14 @@ export default defineVxeComponent({
       type: Array as PropType<VxeUploadPropTypes.FileTypes>,
       default: () => XEUtils.clone(getConfig().upload.fileTypes, true)
     },
+    dragToUpload: {
+      type: Boolean as PropType<VxeUploadPropTypes.DragToUpload>,
+      default: () => XEUtils.clone(getConfig().upload.dragToUpload, true)
+    },
+    pasteToUpload: {
+      type: Boolean as PropType<VxeUploadPropTypes.PasteToUpload>,
+      default: () => XEUtils.clone(getConfig().upload.pasteToUpload, true)
+    },
     keyField: String as PropType<VxeUploadPropTypes.KeyField>,
     singleMode: Boolean as PropType<VxeUploadPropTypes.SingleMode>,
     urlMode: Boolean as PropType<VxeUploadPropTypes.UrlMode>,
@@ -159,6 +178,7 @@ export default defineVxeComponent({
     const reactData: UploadReactData = {
       isDrag: false,
       showMorePopup: false,
+      isActivated: false,
       fileList: [],
       fileCacheMaps: {}
     }
@@ -863,6 +883,37 @@ export default defineVxeComponent({
         }
       }
     },
+    uploadTransferFileEvent (evnt: Event, files: File[]) {
+      const $xeUpload = this
+      const props = $xeUpload
+      const internalData = $xeUpload.internalData
+
+      const { imageTypes } = props
+      const { imagePreviewTypes } = internalData
+      const isImage = $xeUpload.computeIsImage
+      if (isImage) {
+        const pasteImgTypes = imagePreviewTypes.concat(imageTypes && imageTypes.length ? imageTypes : [])
+        files = files.filter(file => {
+          const fileType = `${file.type.split('/')[1] || ''}`.toLowerCase()
+          if (pasteImgTypes.some(type => `${type}`.toLowerCase() === fileType)) {
+            return true
+          }
+          return false
+        })
+      }
+      // 如果全部不满足条件
+      if (!files.length) {
+        if (VxeUI.modal) {
+          VxeUI.modal.notification({
+            title: getI18n('vxe.modal.errTitle'),
+            status: 'error',
+            content: getI18n('vxe.upload.uploadTypeErr')
+          })
+        }
+        return
+      }
+      $xeUpload.uploadFile(files, evnt)
+    },
     handleDropEvent  (evnt: DragEvent) {
       const $xeUpload = this
       const reactData = $xeUpload.reactData
@@ -871,15 +922,11 @@ export default defineVxeComponent({
       if (dataTransfer) {
         const { items } = dataTransfer
         if (items && items.length) {
-          const files: File[] = []
-          Array.from(items).forEach(item => {
-            const file = item.getAsFile()
-            if (file) {
-              files.push(file)
-            }
-          })
-          $xeUpload.uploadFile(files, evnt)
           evnt.preventDefault()
+          const files = handleTransferFiles(items)
+          if (files.length) {
+            $xeUpload.uploadTransferFileEvent(evnt, files)
+          }
         }
       }
       reactData.isDrag = false
@@ -903,11 +950,18 @@ export default defineVxeComponent({
           maskClosable: true,
           slots: {
             default (params, h) {
-              const { showErrorStatus } = props
+              const { showErrorStatus, dragToUpload } = props
               const { isDrag } = reactData
               const isDisabled = $xeUpload.computeIsDisabled
               const { fileList } = reactData
 
+              const ons: Record<string, any> = {}
+              if (dragToUpload) {
+                ons.dragover = $xeUpload.handleDragoverEvent
+                ons.dragleave = $xeUpload.handleDragleaveEvent
+                ons.drop = $xeUpload.handleDropEvent
+              }
+
               return h('div', {
                 class: ['vxe-upload--more-popup', {
                   'is--readonly': formReadonly,
@@ -915,11 +969,7 @@ export default defineVxeComponent({
                   'show--error': showErrorStatus,
                   'is--drag': isDrag
                 }],
-                on: {
-                  dragover: $xeUpload.handleDragoverEvent,
-                  dragleave: $xeUpload.handleDragleaveEvent,
-                  drop: $xeUpload.handleDropEvent
-                }
+                on: ons
               }, [
                 isImage
                   ? h('div', {
@@ -950,6 +1000,45 @@ export default defineVxeComponent({
         })
       }
     },
+    handleGlobalPasteEvent (evnt: ClipboardEvent) {
+      const $xeUpload = this
+      const props = $xeUpload
+      const reactData = $xeUpload.reactData
+
+      const { pasteToUpload } = props
+      const { isActivated } = reactData
+      if (!isActivated || !pasteToUpload) {
+        return
+      }
+      const clipboardData: DataTransfer = evnt.clipboardData || (evnt as any).originalEvent.clipboardData
+      if (!clipboardData) {
+        return
+      }
+      const { items } = clipboardData
+      if (!items) {
+        return
+      }
+      const files = handleTransferFiles(items)
+      if (files.length) {
+        evnt.preventDefault()
+        $xeUpload.uploadTransferFileEvent(evnt, files)
+      }
+    },
+    handleGlobalMousedownEvent (evnt: MouseEvent) {
+      const $xeUpload = this
+      const reactData = $xeUpload.reactData
+
+      const el = $xeUpload.$refs.refElem
+      const isActivated = getEventTargetNode(evnt, el).flag
+      reactData.isActivated = isActivated
+    },
+    handleGlobalBlurEvent () {
+      const $xeUpload = this
+      const reactData = $xeUpload.reactData
+
+      reactData.isActivated = false
+    },
+
     //
     // Render
     //
@@ -1396,26 +1485,32 @@ export default defineVxeComponent({
       const props = $xeUpload
       const reactData = $xeUpload.reactData
 
-      const { showErrorStatus } = props
-      const { isDrag, showMorePopup } = reactData
+      const { showErrorStatus, dragToUpload, pasteToUpload } = props
+      const { isDrag, showMorePopup, isActivated } = reactData
       const vSize = $xeUpload.computeSize
       const isDisabled = $xeUpload.computeIsDisabled
       const formReadonly = $xeUpload.computeFormReadonly
       const isImage = $xeUpload.computeIsImage
+
+      const ons: Record<string, any> = {}
+      if (dragToUpload) {
+        ons.dragover = $xeUpload.handleDragoverEvent
+        ons.dragleave = $xeUpload.handleDragleaveEvent
+        ons.drop = $xeUpload.handleDropEvent
+      }
+
       return h('div', {
         ref: 'refElem',
         class: ['vxe-upload', {
           [`size--${vSize}`]: vSize,
+          'is--active': isActivated,
           'is--readonly': formReadonly,
           'is--disabled': isDisabled,
+          'is--paste': pasteToUpload,
           'show--error': showErrorStatus,
           'is--drag': isDrag
         }],
-        on: {
-          dragover: $xeUpload.handleDragoverEvent,
-          dragleave: $xeUpload.handleDragleaveEvent,
-          drop: $xeUpload.handleDropEvent
-        }
+        on: ons
       }, [
         isImage ? $xeUpload.renderImageMode(h) : $xeUpload.renderAllMode(h),
         isDrag && !showMorePopup
@@ -1440,12 +1535,18 @@ export default defineVxeComponent({
         errLog('vxe.error.errConflicts', ['multiple', 'single-mode'])
       }
     }
+    globalEvents.on($xeUpload, 'paste', $xeUpload.handleGlobalPasteEvent)
+    globalEvents.on($xeUpload, 'mousedown', $xeUpload.handleGlobalMousedownEvent)
+    globalEvents.on($xeUpload, 'blur', $xeUpload.handleGlobalBlurEvent)
   },
   beforeDestroy () {
     const $xeUpload = this
     const reactData = $xeUpload.reactData
 
     reactData.isDrag = false
+    globalEvents.off($xeUpload, 'paste')
+    globalEvents.off($xeUpload, 'mousedown')
+    globalEvents.off($xeUpload, 'blur')
   },
   render (this: any, h) {
     return this.renderVN(h)

package/styles/components/upload.scss

@@ -2,6 +2,17 @@
   position: relative;
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
+  &.is--active {
+    .vxe-upload--image-action-box {
+      border-color: var(--vxe-ui-font-primary-color);
+    }
+    .vxe-upload--file-action-btn {
+      & > .vxe-button {
+        border-color: var(--vxe-ui-font-primary-color);
+        border-style: var(--vxe-ui-upload-file-button-border-style);
+      }
+    }
+  }
   &.show--error {
     .vxe-upload--file-item {
       &.is--error {

package/types/components/upload.d.ts

@@ -34,6 +34,8 @@ export namespace VxeUploadPropTypes {
   }
   export type FileTypes = string[]
   export type SingleMode = boolean
+  export type DragToUpload = boolean
+  export type PasteToUpload = boolean
   export type KeyField = string
   export type UrlMode = boolean
   export type Multiple = boolean
@@ -111,6 +113,8 @@ export interface VxeUploadProps {
   fileTypes?: VxeUploadPropTypes.FileTypes
   multiple?: VxeUploadPropTypes.Multiple
   singleMode?: VxeUploadPropTypes.SingleMode
+  dragToUpload?: VxeUploadPropTypes.DragToUpload
+  pasteToUpload?: VxeUploadPropTypes.PasteToUpload
   keyField?: VxeUploadPropTypes.KeyField
   urlMode?: VxeUploadPropTypes.UrlMode
   /**
@@ -157,7 +161,8 @@ export interface VxeUploadPrivateComputed extends UploadPrivateComputed { }
 
 export interface UploadReactData {
   isDrag: boolean
-  showMorePopup: boolean,
+  showMorePopup: boolean
+  isActivated: boolean
   fileList: VxeUploadDefines.FileObjItem[]
   fileCacheMaps: Record<string, VxeUploadDefines.FileCacheItem>
 }