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

package/dist/esm/UploadListActionButton.js

@@ -6,6 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { classNames } from '@progress/kendo-vue-common';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
 import { UploadFileStatus } from './interfaces/UploadFileStatus.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, cancel, retry, remove } from './messages/main.js';
@@ -19,7 +20,8 @@ var UploadListActionButtonVue2 = {
     uid: String,
     status: Number,
     async: Object,
-    disabled: Boolean
+    disabled: Boolean,
+    files: Array
   },
   // @ts-ignore
   emits: {
@@ -49,7 +51,7 @@ var UploadListActionButtonVue2 = {
       return localizationService.toLanguageString(retry, messages[retry]);
     },
     buttonClassNames: function buttonClassNames(type) {
-      return classNames('k-button k-button-icon k-flat k-upload-action', this.$props.disabled ? 'k-disabled' : '', this.actionFocused && type === 'action' || this.retryFocused && type === 'retry' ? 'k-focus' : '');
+      return classNames(this.actionFocused && type === 'action' || this.retryFocused && type === 'retry' ? 'k-focus' : '');
     },
     onRetryFocus: function onRetryFocus() {
       this.retryFocused = true;
@@ -101,24 +103,37 @@ var UploadListActionButtonVue2 = {
     var _a = this.$props,
       status = _a.status,
       progress = _a.progress;
-    var actionButtonClassNames = classNames('k-icon', status === UploadFileStatus.Uploading ? 'k-cancel k-i-deny' : '', status !== UploadFileStatus.Uploading ? 'k-delete k-i-x' : '');
     var isRetryVisible = status === UploadFileStatus.UploadFailed;
     var isProgressVisible = status === UploadFileStatus.Uploading;
     var isActionHidden = (status === UploadFileStatus.Uploaded || status === UploadFileStatus.Initial) && !this.$props.async.removeUrl;
     var localizationService = provideLocalizationService(this);
     var percent = '%';
-    return h("strong", {
-      "class": 'k-upload-status'
+    return h("div", {
+      "class": 'k-upload-actions'
     }, [isProgressVisible ? h("span", {
       "class": 'k-upload-pct'
-    }, [progress, percent]) : undefined, isRetryVisible ? h("button", {
+    }, [progress, percent]) : undefined, isRetryVisible ?
+    // @ts-ignore
+    h(KButton, {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        tabindex: -1
+        tabindex: -1,
+        disabled: this.disabled,
+        icon: 'arrow-rotate-cw-small'
+        //  svgIcon={isProgressVisible ? denyIcon : xIcon}
+        ,
+        iconClass: 'k-retry',
+        ariaLabel: this.retryButtonTitle(localizationService),
+        title: this.retryButtonTitle(localizationService)
       },
       tabindex: -1,
+      disabled: this.disabled,
       "class": this.buttonClassNames('retry'),
+      icon: 'arrow-rotate-cw-small',
+      iconClass: 'k-retry',
+      ariaLabel: this.retryButtonTitle(localizationService),
+      title: this.retryButtonTitle(localizationService),
       onFocus: this.onRetryFocus,
       on: this.v3 ? undefined : {
         "focus": this.onRetryFocus,
@@ -127,21 +142,24 @@ var UploadListActionButtonVue2 = {
       },
       onBlur: this.onRetryBlur,
       onClick: this.onRetryClick
-    }, [h("span", {
-      "aria-label": this.retryButtonTitle(localizationService),
-      attrs: this.v3 ? undefined : {
-        "aria-label": this.retryButtonTitle(localizationService),
-        title: this.retryButtonTitle(localizationService)
-      },
-      title: this.retryButtonTitle(localizationService),
-      "class": 'k-icon k-retry k-i-arrow-rotate-cw-small'
-    })]) : undefined, !isActionHidden ? h("button", {
+    }) : undefined, !isActionHidden ?
+    // @ts-ignore
+    h(KButton, {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        tabindex: -1
+        fillMode: 'flat',
+        tabindex: -1,
+        disabled: this.disabled,
+        icon: isProgressVisible ? 'deny' : 'x'
+        // svgIcon={isProgressVisible ? denyIcon : xIcon}
+        ,
+        ariaLabel: this.actionButtonTitle(status, localizationService),
+        title: this.actionButtonTitle(status, localizationService)
       },
+      fillMode: 'flat',
       tabindex: -1,
+      disabled: this.disabled,
       "class": this.buttonClassNames('action'),
       onFocus: this.onActionFocus,
       on: this.v3 ? undefined : {
@@ -150,16 +168,11 @@ var UploadListActionButtonVue2 = {
         "click": this.onActionClick
       },
       onBlur: this.onActionBlur,
-      onClick: this.onActionClick
-    }, [h("span", {
-      "aria-label": this.actionButtonTitle(status, localizationService),
-      attrs: this.v3 ? undefined : {
-        "aria-label": this.actionButtonTitle(status, localizationService),
-        title: this.actionButtonTitle(status, localizationService)
-      },
-      title: this.actionButtonTitle(status, localizationService),
-      "class": actionButtonClassNames
-    })]) : undefined]);
+      onClick: this.onActionClick,
+      icon: isProgressVisible ? 'deny' : 'x',
+      ariaLabel: this.actionButtonTitle(status, localizationService),
+      title: this.actionButtonTitle(status, localizationService)
+    }) : undefined]);
   }
 };
 /**

package/dist/esm/UploadListGroup.js

@@ -74,7 +74,15 @@ var UploadListGroupVue2 = {
       list = _a.list;
     var firstFile = files[0];
     var isFileSuccess = firstFile.status === UploadFileStatus.Uploaded || firstFile.status === UploadFileStatus.Initial;
-    var liClassName = classNames('k-file', utils.filesHaveValidationErrors(files) ? 'k-file-invalid' : '', firstFile.status === UploadFileStatus.UploadFailed || firstFile.status === UploadFileStatus.RemoveFailed ? 'k-file-error' : '', firstFile.status === UploadFileStatus.Uploading ? 'k-file-progress' : '', isFileSuccess ? 'k-file-success' : '', navigationIndex === index ? 'k-focus' : '');
+    var validationErrors = utils.filesHaveValidationErrors(files);
+    var actionFailed = firstFile.status === UploadFileStatus.UploadFailed || firstFile.status === UploadFileStatus.RemoveFailed;
+    var liClassName = classNames('k-file', {
+      'k-file-invalid': validationErrors,
+      'k-file-error': actionFailed,
+      'k-file-progress': firstFile.status === UploadFileStatus.Uploading,
+      'k-file-success': isFileSuccess,
+      'k-focus': navigationIndex === index
+    });
     var itemComponent;
     var defaultItemRendering = files.length === 1 ?
     // @ts-ignore

package/dist/esm/UploadListMultiItem.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 utils from './utils/utils.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, total, files as filesM, statusUploadFailed, statusUploaded } from './messages/main.js';
 import { UploadListActionButton } from './UploadListActionButton.js';
+import { ProgressBar } from '@progress/kendo-vue-progressbars';
+import { copyIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -90,7 +92,7 @@ var UploadListMultiItemVue2 = {
       return files.map(function (file) {
         return h("span", {
           key: file.name,
-          "class": 'k-file-name-size-wrapper'
+          "class": 'k-file-info'
         }, [h("span", {
           "class": 'k-file-name',
           title: file.name,
@@ -98,7 +100,7 @@ var UploadListMultiItemVue2 = {
             title: file.name
           }
         }, [file.name]), utils.fileHasValidationErrors(file) ? h("span", {
-          "class": 'k-file-validation-message k-text-error'
+          "class": 'k-file-validation-message'
         }, [this.getFileValidationMessage(file)]) : h("span", {
           key: "".concat(file.name, "-size"),
           "class": 'k-file-size'
@@ -107,29 +109,31 @@ var UploadListMultiItemVue2 = {
     };
     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: (progress || 0) + '%'
-      }
-    })]), h("span", {
-      "class": 'k-multiple-files-group-wrapper'
-    }, [h("span", {
-      "class": 'k-file-group k-icon k-i-copy'
+    }, [showProgressBar && h(ProgressBar, {
+      value: progress || 0,
+      attrs: this.v3 ? undefined : {
+        value: progress || 0,
+        labelVisible: false
+      },
+      labelVisible: false
+    }), h("span", {
+      "class": 'k-file-icon-wrapper'
+    }, [h(Icon, {
+      name: 'copy',
+      attrs: this.v3 ? undefined : {
+        name: 'copy',
+        icon: copyIcon
+      },
+      icon: copyIcon,
+      "class": 'k-file-icon'
     })]), h("span", {
       "class": "k-multiple-files-wrapper"
     }, [mapFiles.call(this), !isUploadFailed ? progress !== 100 ? h("span", {
-      "class": 'k-file-information'
+      "class": 'k-file-summary'
     }, ["".concat(totalMessage, ": ").concat(files.length, " ").concat(filesMessage, ", ").concat(utils.getTotalFilesSizeMessage(files))]) : h("span", {
-      "class": 'k-file-information k-text-success'
+      "class": 'k-file-summary k-text-success'
     }, ["".concat(files.length, " ").concat(successMessage)]) : h("span", {
-      "class": 'k-file-validation-message k-text-error'
+      "class": 'k-file-validation-message'
     }, ["".concat(files.length, " ").concat(uploadFailedMessage)])]),
     // @ts-ignore  function children
     h(UploadListActionButton, {

package/dist/esm/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.js';
 import utils from './utils/utils.js';
 import { UploadListActionButton } from './UploadListActionButton.js';
+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/esm/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.js';
+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/esm/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/esm/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/esm/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/esm/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/npm/ExternalDropZone.js

@@ -13,6 +13,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var main_1 = require("./messages/main");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var package_metadata_1 = require("./package-metadata");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 /**
@@ -150,14 +151,19 @@ var ExternalDropZoneVue2 = {
     }, [h("div", {
       style: this.$props.innerStyle,
       "class": 'k-dropzone-inner'
-    }, [h("span", {
-      "class": 'k-icon k-i-upload'
+    }, [h(kendo_vue_common_1.Icon, {
+      name: 'upload',
+      attrs: this.v3 ? undefined : {
+        name: 'upload',
+        icon: kendo_svg_icons_1.uploadIcon
+      },
+      icon: kendo_svg_icons_1.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/npm/UploadAddButton.d.ts

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