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

package/dist/es/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';
+import { uploadIcon } from '@progress/kendo-svg-icons';
 import { packageMetadata } from './package-metadata';
 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/es/UploadAddButton.d.ts

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

package/dist/es/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';
 import { UploadInput } from './UploadInput';
+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/es/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/es/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/es/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';
 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/es/UploadListActionButton.d.ts

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

package/dist/es/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';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, cancel, retry, remove } from './messages/main';
@@ -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/es/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/es/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';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, total, files as filesM, statusUploadFailed, statusUploaded } from './messages/main';
 import { UploadListActionButton } from './UploadListActionButton';
+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, {