@progress/kendo-vue-upload 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/es/UploadListSingleItem.js

@@ -5,11 +5,13 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { classNames } from '@progress/kendo-vue-common';
+import { classNames, Icon } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { ProgressBar } from '@progress/kendo-vue-progressbars';
 import { messages, statusUploaded, statusUploadFailed } from './messages/main';
 import utils from './utils/utils';
 import { UploadListActionButton } from './UploadListActionButton';
+import { fileAudioIcon, fileConfigIcon, fileDataIcon, fileIcon, fileImageIcon, filePdfIcon, filePresentationIcon, fileProgrammingIcon, fileTxtIcon, fileVideoIcon, fileZipIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -55,7 +57,7 @@ var UploadListSingleItemVue2 = {
       }
       return validationMessage;
     },
-    getFileExtensionIcon: function getFileExtensionIcon(file) {
+    getFileExtensionName: function getFileExtensionName(file) {
       switch (file.extension) {
         case '.png':
         case '.jpg':
@@ -63,41 +65,86 @@ var UploadListSingleItemVue2 = {
         case '.tiff':
         case '.bmp':
         case '.gif':
-          return 'k-i-file-image';
+          return 'file-image';
         case '.mp3':
         case '.mp4':
         case '.wav':
-          return 'k-i-file-audio';
+          return 'file-audio';
         case '.mkv':
         case '.webm':
         case '.flv':
         case '.gifv':
         case '.avi':
         case '.wmv':
-          return 'k-i-file-video';
+          return 'file-video';
         case '.txt':
-          return 'k-i-file-txt';
+          return 'file-txt';
         case '.pdf':
-          return 'k-i-file-pdf';
+          return 'file-pdf';
         case '.ppt':
         case '.pptx':
-          return 'k-i-file-presentation';
+          return 'file-presentation';
         case '.csv':
         case '.xls':
         case '.xlsx':
-          return 'k-i-file-data';
+          return 'file-data';
         case '.html':
         case '.css':
         case '.js':
         case '.ts':
-          return 'k-i-file-programming';
+          return 'file-programming';
         case '.exe':
-          return 'k-i-file-config';
+          return 'file-config';
         case '.zip':
         case '.rar':
-          return 'k-i-file-zip';
+          return 'file-zip';
         default:
-          return 'k-i-file';
+          return 'file';
+      }
+    },
+    getFileExtensionSVG: function getFileExtensionSVG(file) {
+      switch (file.extension) {
+        case '.png':
+        case '.jpg':
+        case '.jpeg':
+        case '.tiff':
+        case '.bmp':
+        case '.gif':
+          return fileImageIcon;
+        case '.mp3':
+        case '.mp4':
+        case '.wav':
+          return fileAudioIcon;
+        case '.mkv':
+        case '.webm':
+        case '.flv':
+        case '.gifv':
+        case '.avi':
+        case '.wmv':
+          return fileVideoIcon;
+        case '.txt':
+          return fileTxtIcon;
+        case '.pdf':
+          return filePdfIcon;
+        case '.ppt':
+        case '.pptx':
+          return filePresentationIcon;
+        case '.csv':
+        case '.xls':
+        case '.xlsx':
+          return fileDataIcon;
+        case '.html':
+        case '.css':
+        case '.js':
+        case '.ts':
+          return fileProgrammingIcon;
+        case '.exe':
+          return fileConfigIcon;
+        case '.zip':
+        case '.rar':
+          return fileZipIcon;
+        default:
+          return fileIcon;
       }
     }
   },
@@ -125,23 +172,23 @@ var UploadListSingleItemVue2 = {
     var showProgressBar = !isUploadValidationFailed && !isUploaded && !isUploadFailed;
     var renderValidationError = function renderValidationError(currentFile, isCurrentUploadFailed) {
       return h("span", {
-        "class": 'k-file-name-size-wrapper',
+        "class": 'k-file-info',
         key: '2'
       }, [h("span", {
-        "class": 'k-file-name k-file-name-invalid',
+        "class": 'k-file-name',
         title: currentFile.name,
         attrs: this.v3 ? undefined : {
           title: currentFile.name
         }
       }, [currentFile.name]), h("span", {
-        "class": 'k-file-validation-message k-text-error'
+        "class": 'k-file-validation-message'
       }, [this.getFileValidationMessage(currentFile, isCurrentUploadFailed)])]);
     };
     var renderFileDetails = function renderFileDetails(currentFile) {
       var localizationService = provideLocalizationService(this);
       var successMessage = localizationService.toLanguageString(statusUploaded, messages[statusUploaded]);
       return h("span", {
-        "class": 'k-file-name-size-wrapper',
+        "class": 'k-file-info',
         key: '2'
       }, [h("span", {
         "class": 'k-file-name',
@@ -152,27 +199,29 @@ var UploadListSingleItemVue2 = {
       }, [currentFile.name]), currentFile.progress !== 100 ? h("span", {
         "class": 'k-file-size'
       }, [utils.getTotalFilesSizeMessage([currentFile])]) : h("span", {
-        "class": 'k-file-validation-message k-text-success'
+        "class": 'k-file-validation-message'
       }, [successMessage])]);
     };
     return h("div", {
       "class": itemClassName
-    }, [h("div", {
-      "class": 'k-progressbar',
-      style: {
-        transition: 'opacity 1s ease-in-out',
-        opacity: showProgressBar ? 1 : 0
-      }
-    }, [h("span", {
-      "class": 'k-progress',
-      style: {
-        width: (file.progress || 0) + '%'
-      }
-    })]), h("span", {
-      "class": 'k-file-group-wrapper',
+    }, [showProgressBar && h(ProgressBar, {
+      value: file.progress || 0,
+      attrs: this.v3 ? undefined : {
+        value: file.progress || 0,
+        labelVisible: false
+      },
+      labelVisible: false
+    }), h("span", {
+      "class": 'k-file-icon-wrapper',
       key: '1'
-    }, [h("span", {
-      "class": 'k-file-group k-icon ' + this.getFileExtensionIcon(file)
+    }, [h(Icon, {
+      name: this.getFileExtensionName(file),
+      attrs: this.v3 ? undefined : {
+        name: this.getFileExtensionName(file),
+        icon: this.getFileExtensionSVG(file)
+      },
+      icon: this.getFileExtensionSVG(file),
+      "class": 'k-file-icon'
     }), h("span", {
       "class": 'k-file-state'
     })]), isUploadValidationFailed || isUploadFailed ? renderValidationError.call(this, file, isUploadFailed) : renderFileDetails.call(this, file),

package/dist/es/UploadStatus.js

@@ -3,11 +3,11 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var ref = allVue.ref;
 var inject = allVue.inject;
-import { classNames } from '@progress/kendo-vue-common';
+import { classNames, Icon } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, headerStatusUploading, headerStatusUploaded } from './messages/main';
+import { checkIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -37,7 +37,6 @@ var UploadStatusVue2 = {
       isUploading = _a.isUploading,
       isUploaded = _a.isUploaded,
       isUploadFailed = _a.isUploadFailed;
-    var statusClassName = classNames(!isUploading && !isUploadFailed && isUploaded ? 'k-i-checkmark' : '', !isUploading && isUploadFailed ? 'k-i-exception' : '', isUploading ? 'k-i-loading' : '', 'k-icon');
     var statusText = '';
     var localizationService = provideLocalizationService(this);
     if (isUploading) {
@@ -46,9 +45,16 @@ var UploadStatusVue2 = {
       statusText = localizationService.toLanguageString(headerStatusUploaded, messages[headerStatusUploaded]);
     }
     return h("div", {
-      "class": classNames('k-upload-status', 'k-upload-status-total')
-    }, [h("span", {
-      "class": statusClassName
+      "class": classNames('k-upload-status')
+    }, [isUploading ? h("span", {
+      "class": 'k-icon k-i-loading'
+    }) : h(Icon, {
+      name: isUploadFailed ? 'exclamation-circle' : isUploaded ? 'check' : '',
+      attrs: this.v3 ? undefined : {
+        name: isUploadFailed ? 'exclamation-circle' : isUploaded ? 'check' : '',
+        icon: isUploadFailed ? exclamationCircleIcon : isUploaded ? checkIcon : undefined
+      },
+      icon: isUploadFailed ? exclamationCircleIcon : isUploaded ? checkIcon : undefined
     }), statusText]);
   }
 };

package/dist/es/UploadUI.js

@@ -157,7 +157,7 @@ var UploadUIVue2 = {
       ariaLabelledBy = _a.ariaLabelledBy,
       ariaDescribedBy = _a.ariaDescribedBy,
       async = _a.async;
-    var className = classNames('k-widget', 'k-upload', this.$props.className, disabled ? 'k-disabled' : '');
+    var className = classNames('k-upload', 'k-upload-async', this.$props.className, disabled ? 'k-disabled' : '');
     return h("div", {
       ref: setRef(this, 'container'),
       "class": className,

package/dist/es/messages/main.d.ts

@@ -46,6 +46,14 @@ export declare const retry = "upload.retry";
  * @hidden
  */
 export declare const select = "upload.select";
+/**
+ * @hidden
+ */
+export declare const selectTitle = "upload.selectTitle";
+/**
+ * @hidden
+ */
+export declare const selectNoFilesTitle = "upload.selectNoFilesTitle";
 /**
  * @hidden
  */
@@ -90,6 +98,8 @@ export declare const messages: {
     "upload.remove": string;
     "upload.retry": string;
     "upload.select": string;
+    "upload.selectTitle": string;
+    "upload.selectNoFilesTitle": string;
     "upload.uploadSelectedFiles": string;
     "upload.total": string;
     "upload.files": string;

package/dist/es/messages/main.js

@@ -47,6 +47,14 @@ export var retry = 'upload.retry';
  * @hidden
  */
 export var select = 'upload.select';
+/**
+ * @hidden
+ */
+export var selectTitle = 'upload.selectTitle';
+/**
+ * @hidden
+ */
+export var selectNoFilesTitle = 'upload.selectNoFilesTitle';
 /**
  * @hidden
  */
@@ -91,6 +99,8 @@ export var messages = (_a = {},
     _a[remove] = 'Remove',
     _a[retry] = 'Retry',
     _a[select] = 'Select files...',
+    _a[selectTitle] = 'Press to select more files',
+    _a[selectNoFilesTitle] = 'No files selected',
     _a[uploadSelectedFiles] = 'Upload',
     _a[total] = 'Total',
     _a[files] = 'files',

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-upload',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669967154,
+    publishDate: 1673274481,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/ExternalDropZone.js

@@ -5,8 +5,9 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { classNames, getListeners, getTabIndex, getTemplate, setRef, templateRendering, validatePackage } from '@progress/kendo-vue-common';
+import { classNames, getListeners, getTabIndex, getTemplate, Icon, setRef, templateRendering, validatePackage } from '@progress/kendo-vue-common';
 import { dropZoneHint, dropZoneNote, messages } from './messages/main.js';
+import { uploadIcon } from '@progress/kendo-svg-icons';
 import { packageMetadata } from './package-metadata.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 /**
@@ -144,14 +145,19 @@ var ExternalDropZoneVue2 = {
     }, [h("div", {
       style: this.$props.innerStyle,
       "class": 'k-dropzone-inner'
-    }, [h("span", {
-      "class": 'k-icon k-i-upload'
+    }, [h(Icon, {
+      name: 'upload',
+      attrs: this.v3 ? undefined : {
+        name: 'upload',
+        icon: uploadIcon
+      },
+      icon: uploadIcon
     }), h("span", {
       "class": 'k-dropzone-hint'
     }, [hintElement]), h("span", {
       "class": 'k-dropzone-note'
     }, [noteElement])]), h("div", {
-      "class": 'k-widget k-upload'
+      "class": 'k-upload'
     })]);
   }
 };

package/dist/esm/UploadAddButton.d.ts

@@ -17,8 +17,6 @@ export interface UploadAddButtonProps {
     disabled?: boolean;
     accept?: string;
     id?: string;
-    ariaLabelledBy?: string;
-    ariaDescribedBy?: string;
 }
 /**
  * @hidden

package/dist/esm/UploadAddButton.js

@@ -5,10 +5,11 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { classNames, setRef } from '@progress/kendo-vue-common';
+import { classNames, guid, setRef } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, select } from './messages/main.js';
 import { UploadInput } from './UploadInput.js';
+import { Button } from '@progress/kendo-vue-buttons';
 /**
  * @hidden
  */
@@ -23,9 +24,7 @@ var UploadAddButtonVue2 = {
     multiple: Boolean,
     disabled: Boolean,
     accept: String,
-    id: String,
-    ariaLabelledBy: String,
-    ariaDescribedBy: String
+    id: String
   },
   inject: {
     kendoLocalizationService: {
@@ -50,6 +49,9 @@ var UploadAddButtonVue2 = {
       kendoLocalizationService: kendoLocalizationService
     };
   },
+  created: function created() {
+    this.uploadInputId = guid();
+  },
   mounted: function mounted() {
     this.element = this.v3 ? this.elementRef : this.$refs.element;
     this.uploadInput = this.v3 ? this.uploadInputRef : this.$refs.uploadInput;
@@ -100,46 +102,55 @@ var UploadAddButtonVue2 = {
       addButtonIndex = _a.addButtonIndex,
       tabIndex = _a.tabIndex,
       id = _a.id,
-      ariaLabelledBy = _a.ariaLabelledBy,
-      ariaDescribedBy = _a.ariaDescribedBy,
       async = _a.async,
       multiple = _a.multiple,
       disabled = _a.disabled,
       accept = _a.accept;
     var localizationService = provideLocalizationService(this);
     var selectMessage = localizationService.toLanguageString(select, messages[select]);
-    var buttonClassName = classNames('k-button', 'k-button-md', 'k-button-solid', 'k-button-solid-base', 'k-rounded-md', 'k-upload-button', navigationIndex === addButtonIndex ? 'k-focus' : '');
+    var buttonClassName = classNames('k-upload-button', navigationIndex === addButtonIndex ? 'k-focus' : '');
     return h("div", {
+      "class": "k-upload-button-wrap"
+    }, [h("label", {
+      "for": this.uploadInputId,
+      attrs: this.v3 ? undefined : {
+        "for": this.uploadInputId
+      }
+    }, [
+    // @ts-ignore  function children
+    h(Button, {
       id: id,
       attrs: this.v3 ? undefined : {
         id: id,
-        role: "button",
-        "aria-label": selectMessage,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": ariaDescribedBy,
+        role: 'button',
+        disabled: disabled,
+        ariaLabel: selectMessage,
         tabindex: tabIndex
       },
       ref: setRef(this, 'element'),
-      role: "button",
+      role: 'button',
+      disabled: disabled,
+      ariaLabel: selectMessage,
       "class": buttonClassName,
-      "aria-label": selectMessage,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
       tabindex: tabIndex,
       onClick: this.onClick,
       on: this.v3 ? undefined : {
         "click": this.onClick
       }
-    }, [
+    }, this.v3 ? function () {
+      return [selectMessage];
+    } : [selectMessage])]),
     // @ts-ignore  function children
     h(UploadInput, {
-      async: async,
+      id: this.uploadInputId,
       attrs: this.v3 ? undefined : {
+        id: this.uploadInputId,
         async: async,
         multiple: multiple,
         disabled: disabled,
         accept: accept
       },
+      async: async,
       multiple: multiple,
       disabled: disabled,
       accept: accept,
@@ -152,7 +163,7 @@ var UploadAddButtonVue2 = {
       ref: this.v3 ? function (el) {
         _this.uploadInputRef = el;
       } : 'uploadInput'
-    }), h("span", [selectMessage])]);
+    })]);
   }
 };
 /**

package/dist/esm/UploadDropZone.js

@@ -103,8 +103,9 @@ var UploadDropZoneVue2 = {
     dropZoneClasses: function dropZoneClasses() {
       return {
         'k-dropzone': true,
-        'k-dropzone-active': this.currentDocumentActive,
-        'k-dropzone-hovered': this.currentElementActive
+        'k-upload-dropzone': true,
+        'k-active': this.currentDocumentActive,
+        'k-hover': this.currentElementActive
       };
     }
   },

package/dist/esm/UploadInput.d.ts

@@ -8,10 +8,14 @@ import { UploadAsyncProps } from './interfaces/UploadAsyncProps';
  * @hidden
  */
 export interface UploadInputProps {
+    id: String;
     async: UploadAsyncProps;
     multiple?: boolean;
     disabled?: boolean;
     accept?: string;
+    hasFiles?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
 }
 /**
  * @hidden

package/dist/esm/UploadInput.js

@@ -1,10 +1,12 @@
 // @ts-ignore
 import { setRef } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
+import { selectTitle, selectNoFilesTitle, select, messages } from './messages/main.js';
 var CHROME_REGEX = /(chrome)[ \/]([\w.]+)/i;
 var SAFARI_REGEX = /(webkit)[ \/]([\w.]+)/i;
 /**
@@ -14,6 +16,7 @@ var UploadInputVue2 = {
   name: 'KendoVueUploadInput',
   props: {
     async: Object,
+    id: String,
     multiple: {
       type: Boolean,
       default: undefined
@@ -25,6 +28,18 @@ var UploadInputVue2 = {
     accept: {
       type: String,
       default: undefined
+    },
+    hasFiles: {
+      type: Boolean,
+      default: false
+    },
+    ariaLabelledBy: {
+      type: String,
+      default: undefined
+    },
+    ariaDescribedBy: {
+      type: String,
+      default: undefined
     }
   },
   // @ts-ignore
@@ -32,6 +47,11 @@ var UploadInputVue2 = {
     'mousedown': null,
     'add': null
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   mounted: function mounted() {
     this._input = this.v3 ? this.inputRef : this.$refs.input;
   },
@@ -76,19 +96,32 @@ var UploadInputVue2 = {
       multiple = _a.multiple,
       async = _a.async,
       disabled = _a.disabled,
-      accept = _a.accept;
+      accept = _a.accept,
+      hasFiles = _a.hasFiles,
+      ariaLabelledBy = _a.ariaLabelledBy,
+      ariaDescribedBy = _a.ariaDescribedBy;
+    var localizationService = provideLocalizationService(this);
+    var message = hasFiles ? selectTitle : selectNoFilesTitle;
+    var selectMessage = localizationService.toLanguageString(message, messages[message]);
+    var selectLabel = localizationService.toLanguageString(select, messages[select]);
     return h("input", {
       ref: setRef(this, 'input'),
-      autocomplete: 'off',
+      id: this.id,
       attrs: this.v3 ? undefined : {
+        id: this.id,
         autocomplete: 'off',
         name: async.saveField,
         accept: accept,
         type: 'file',
         tabindex: -1,
         multiple: multiple,
-        disabled: disabled
+        disabled: disabled,
+        title: selectMessage,
+        "aria-label": ariaLabelledBy !== undefined ? undefined : selectLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
       },
+      autocomplete: 'off',
       name: async.saveField,
       accept: accept,
       type: 'file',
@@ -100,7 +133,11 @@ var UploadInputVue2 = {
         "change": this.onAdd,
         "mousedown": this.onMouseDown
       },
-      onMousedown: this.onMouseDown
+      onMousedown: this.onMouseDown,
+      title: selectMessage,
+      "aria-label": ariaLabelledBy !== undefined ? undefined : selectLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy
     });
   }
 };

package/dist/esm/UploadListActionButton.d.ts

@@ -14,6 +14,7 @@ export interface UploadListActionButtonProps {
     status: UploadFileStatus;
     async: UploadAsyncProps;
     disabled: boolean;
+    files: any[];
 }
 /**
  * @hidden