@progress/kendo-vue-upload 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/UploadListSingleItem.js

@@ -0,0 +1,228 @@
+// @ts-ignore
+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 { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, statusUploaded, statusUploadFailed } from './messages.js';
+import utils from './utils/utils.js';
+import { UploadListActionButton } from './UploadListActionButton.js';
+/**
+ * @hidden
+ */
+
+var UploadListSingleItemVue2 = {
+  name: 'KendoVueUploadListSingleItem',
+  props: {
+    files: Array,
+    disabled: Boolean,
+    async: Object
+  },
+  // @ts-ignore
+  emits: {
+    'cancel': null,
+    'retry': null,
+    'remove': null
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  methods: {
+    onRetry: function onRetry(uid) {
+      this.$emit('retry', uid);
+    },
+    onRemove: function onRemove(uid) {
+      this.$emit('remove', uid);
+    },
+    onCancel: function onCancel(uid) {
+      this.$emit('cancel', uid);
+    },
+    getFileExtension: function getFileExtension(file) {
+      return file.extension ? file.extension.substring(1) : '';
+    },
+    getFileValidationMessage: function getFileValidationMessage(file, isUploadFailed) {
+      var localizationService = provideLocalizationService(this);
+      var validationMessage = '';
+
+      if (isUploadFailed) {
+        validationMessage = localizationService.toLanguageString(statusUploadFailed, messages[statusUploadFailed]);
+      } else if (file.validationErrors && file.validationErrors.length > 0) {
+        var messageKey = "upload.".concat(file.validationErrors[0]);
+        validationMessage = localizationService.toLanguageString(messageKey, messages[messageKey]);
+      }
+
+      return validationMessage;
+    },
+    getFileExtensionIcon: function getFileExtensionIcon(file) {
+      switch (file.extension) {
+        case '.png':
+        case '.jpg':
+        case '.jpeg':
+        case '.tiff':
+        case '.bmp':
+        case '.gif':
+          return 'k-i-file-image';
+
+        case '.mp3':
+        case '.mp4':
+        case '.wav':
+          return 'k-i-file-audio';
+
+        case '.mkv':
+        case '.webm':
+        case '.flv':
+        case '.gifv':
+        case '.avi':
+        case '.wmv':
+          return 'k-i-file-video';
+
+        case '.txt':
+          return 'k-i-file-txt';
+
+        case '.pdf':
+          return 'k-i-file-pdf';
+
+        case '.ppt':
+        case '.pptx':
+          return 'k-i-file-presentation';
+
+        case '.csv':
+        case '.xls':
+        case '.xlsx':
+          return 'k-i-file-data';
+
+        case '.html':
+        case '.css':
+        case '.js':
+        case '.ts':
+          return 'k-i-file-programming';
+
+        case '.exe':
+          return 'k-i-file-config';
+
+        case '.zip':
+        case '.rar':
+          return 'k-i-file-zip';
+
+        default:
+          return 'k-i-file';
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        files = _a.files,
+        disabled = _a.disabled,
+        async = _a.async;
+    var file = files[0];
+    var itemClassName = classNames('k-file-single');
+
+    var _b = utils.getFileStatus([file]),
+        isUploaded = _b[1],
+        isUploadFailed = _b[2],
+        isUploadValidationFailed = _b[3];
+
+    var showProgressBar = !isUploadValidationFailed && !isUploaded && !isUploadFailed;
+
+    var renderValidationError = function renderValidationError(currentFile, isCurrentUploadFailed) {
+      return h("span", {
+        "class": 'k-file-name-size-wrapper',
+        key: '2'
+      }, [h("span", {
+        "class": 'k-file-name k-file-name-invalid',
+        title: currentFile.name,
+        attrs: this.v3 ? undefined : {
+          title: currentFile.name
+        }
+      }, [currentFile.name]), h("span", {
+        "class": 'k-file-validation-message k-text-error'
+      }, [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',
+        key: '2'
+      }, [h("span", {
+        "class": 'k-file-name',
+        title: currentFile.name,
+        attrs: this.v3 ? undefined : {
+          title: currentFile.name
+        }
+      }, [currentFile.name]), currentFile.progress !== 100 ? h("span", {
+        "class": 'k-file-size'
+      }, [utils.getTotalFilesSizeMessage([currentFile])]) : h("span", {
+        "class": 'k-file-validation-message k-text-success'
+      }, [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',
+      key: '1'
+    }, [h("span", {
+      "class": 'k-file-group k-icon ' + this.getFileExtensionIcon(file)
+    }), h("span", {
+      "class": 'k-file-state'
+    })]), isUploadValidationFailed || isUploadFailed ? renderValidationError.call(this, file, isUploadFailed) : renderFileDetails.call(this, file), // @ts-ignore  function children
+    h(UploadListActionButton, {
+      uid: file.uid,
+      attrs: this.v3 ? undefined : {
+        uid: file.uid,
+        status: file.status,
+        progress: file.progress,
+        files: files,
+        disabled: disabled,
+        async: async
+      },
+      status: file.status,
+      progress: file.progress,
+      files: files,
+      disabled: disabled,
+      async: async,
+      onCancel: this.onCancel,
+      on: this.v3 ? undefined : {
+        "cancel": this.onCancel,
+        "remove": this.onRemove,
+        "retry": this.onRetry
+      },
+      onRemove: this.onRemove,
+      onRetry: this.onRetry
+    })]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadListSingleItem = UploadListSingleItemVue2;
+export { UploadListSingleItem, UploadListSingleItemVue2 };

package/dist/esm/UploadNavigation.d.ts

@@ -0,0 +1,46 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { UploadUIProps } from './UploadUI';
+/**
+ * @hidden
+ */
+export interface UploadNavigationMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadNavigationState {
+    v3: boolean;
+    _uploadUI: any | null;
+    _blurTimeout: number | undefined;
+}
+/**
+ * @hidden
+ */
+export interface UploadNavigationData {
+    currentNavIndex: number;
+}
+/**
+ * @hidden
+ */
+export interface UploadNavigationComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadNavigationAll extends UploadNavigationMethods, UploadNavigationState, UploadNavigationData, UploadNavigationComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadNavigationVue2: ComponentOptions<Vue2type, DefaultData<UploadNavigationData>, DefaultMethods<UploadNavigationAll>, UploadNavigationComputed, RecordPropsDefinition<UploadUIProps>>;
+/**
+ * @hidden
+ */
+declare const UploadNavigation: DefineComponent<UploadUIProps, any, UploadNavigationData, UploadNavigationComputed, UploadNavigationMethods, {}, {}, {}, string, UploadUIProps, UploadUIProps, {}>;
+export { UploadNavigation, UploadNavigationVue2 };

package/dist/esm/UploadNavigation.js

@@ -0,0 +1,348 @@
+// @ts-ignore
+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 { Keys } from '@progress/kendo-vue-common';
+import { UploadUI } from './UploadUI.js';
+/**
+ * @hidden
+ */
+
+var NOT_FOCUSED_INDEX = -2;
+/**
+ * @hidden
+ */
+
+var DEFAULT_INDEX = -1;
+/**
+ * @hidden
+ */
+
+var UploadNavigationVue2 = {
+  name: 'KendoVueUploadNavigation',
+  props: {
+    async: Object,
+    className: String,
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showFileList: Boolean,
+    showActionButtons: Boolean,
+    actionsLayout: {
+      type: String,
+      default: function _default() {
+        return 'end';
+      }
+    },
+    tabIndex: Number,
+    accept: String,
+    groupedFiles: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    notFocusedIndex: Number,
+    list: [String, Function, Object],
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  // @ts-ignore
+  emits: {
+    'add': null,
+    'cancel': null,
+    'clear': null,
+    'upload': null,
+    'retry': null,
+    'remove': null
+  },
+  data: function data() {
+    return {
+      currentNavIndex: NOT_FOCUSED_INDEX
+    };
+  },
+  updated: function updated() {// const prevGroupLength = Object.keys(prevProps.groupedFiles).length;
+    // const groupLength = Object.keys(this.$props.groupedFiles).length;
+    // if (prevGroupLength > groupLength && this.navIndex > DEFAULT_INDEX) {
+    //     this.navIndex = this.navIndex - (prevGroupLength - groupLength);
+    // }
+  },
+  methods: {
+    actionElement: function actionElement() {
+      if (this._uploadUI) {
+        return this._uploadUI.actionElement();
+      }
+    },
+    navIndex: function navIndex(_navIndex) {
+      if (_navIndex === undefined) {
+        return this.currentNavIndex;
+      }
+
+      var prevNavIndex = this.navIndex;
+      this.currentNavIndex = _navIndex;
+
+      if (_navIndex !== prevNavIndex) {
+        this.$forceUpdate();
+      }
+    },
+    focus: function focus() {
+      if (this._uploadUI) {
+        this._uploadUI.focus();
+      }
+    },
+    onKeyDown: function onKeyDown(event, isRtl) {
+      var navIndex = this.navIndex();
+      var groupKeys = Object.keys(this.$props.groupedFiles);
+      var maxFileIndex = groupKeys.length - 1;
+      var maxNavIndex = this.$props.autoUpload || groupKeys.length === 0 ? maxFileIndex : maxFileIndex + 1;
+      var cancelButtonIndex = maxFileIndex + 1;
+      var uploadButtonIndex = cancelButtonIndex + 1;
+      var prevIndex = navIndex === NOT_FOCUSED_INDEX ? DEFAULT_INDEX : navIndex;
+      var nextIndex = navIndex;
+
+      switch (event.keyCode) {
+        case Keys.up:
+          event.preventDefault();
+
+          if (navIndex > -1) {
+            nextIndex = prevIndex - 1;
+          }
+
+          break;
+
+        case Keys.down:
+          event.preventDefault();
+
+          if (navIndex < maxNavIndex) {
+            nextIndex = prevIndex + 1;
+          }
+
+          break;
+
+        case Keys.left:
+          event.preventDefault();
+
+          if (isRtl) {
+            if (navIndex === cancelButtonIndex) {
+              nextIndex = prevIndex + 1;
+            }
+          } else {
+            if (navIndex === uploadButtonIndex) {
+              nextIndex = prevIndex - 1;
+            }
+          }
+
+          break;
+
+        case Keys.right:
+          event.preventDefault();
+
+          if (isRtl) {
+            if (navIndex === uploadButtonIndex) {
+              nextIndex = prevIndex - 1;
+            }
+          } else {
+            if (navIndex === cancelButtonIndex) {
+              nextIndex = prevIndex + 1;
+            }
+          }
+
+          break;
+
+        case Keys.enter:
+          if (navIndex === DEFAULT_INDEX || navIndex === NOT_FOCUSED_INDEX) {
+            if (this.actionElement()) {
+              this.actionElement().$el.click();
+            }
+          }
+
+          if (navIndex >= 0 && navIndex <= maxFileIndex) {
+            this.onRetry(groupKeys[navIndex]);
+          }
+
+          break;
+
+        case Keys.space:
+          event.preventDefault();
+
+          if (navIndex === DEFAULT_INDEX || navIndex === NOT_FOCUSED_INDEX) {
+            if (this.actionElement()) {
+              this.actionElement().$el.click();
+            }
+          }
+
+          break;
+
+        case Keys.tab:
+          nextIndex = NOT_FOCUSED_INDEX;
+          break;
+
+        case Keys.delete:
+          if (navIndex >= 0 && navIndex <= maxFileIndex) {
+            nextIndex = prevIndex - 1;
+            this.onRemove(groupKeys[navIndex]);
+          }
+
+          break;
+
+        case Keys.esc:
+          if (navIndex >= 0 && navIndex <= maxFileIndex) {
+            nextIndex = prevIndex - 1;
+            this.onCancel(groupKeys[navIndex]);
+          }
+
+          break;
+
+        default:
+      }
+
+      this.navIndex(nextIndex);
+    },
+    onCancel: function onCancel(uid) {
+      this.$emit('cancel', uid);
+    },
+    onClear: function onClear() {
+      this.navIndex(DEFAULT_INDEX);
+      this.$emit('clear');
+    },
+    onUpload: function onUpload() {
+      this.navIndex(DEFAULT_INDEX);
+      this.$emit('upload');
+    },
+    onRetry: function onRetry(uid) {
+      this.$emit('retry', uid);
+    },
+    onRemove: function onRemove(uid) {
+      this.navIndex(this.navIndex() > DEFAULT_INDEX ? this.navIndex() - 1 : DEFAULT_INDEX);
+      this.$emit('remove', uid);
+    },
+    onAdd: function onAdd(files) {
+      this.navIndex(DEFAULT_INDEX);
+      this.$emit('add', files);
+    },
+    onClick: function onClick(navIndex) {
+      this.navIndex(navIndex);
+    },
+    onFocus: function onFocus() {
+      if (this._blurTimeout) {
+        clearTimeout(this._blurTimeout);
+        this._blurTimeout = undefined;
+      }
+    },
+    onBlurTimeout: function onBlurTimeout() {
+      this.navIndex(NOT_FOCUSED_INDEX);
+      this._blurTimeout = undefined;
+    },
+    onBlur: function onBlur() {
+      clearTimeout(this._blurTimeout);
+      this._blurTimeout = window.setTimeout(this.onBlurTimeout);
+    }
+  },
+  mounted: function mounted() {
+    this._uploadUI = this.v3 ? this.uploadUIRef : this.$refs.uploadUI;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var uploadUIRef = ref(null);
+    return {
+      v3: v3,
+      uploadUIRef: uploadUIRef
+    };
+  },
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        multiple = _a.multiple,
+        disabled = _a.disabled,
+        showFileList = _a.showFileList,
+        showActionButtons = _a.showActionButtons,
+        actionsLayout = _a.actionsLayout,
+        tabIndex = _a.tabIndex,
+        accept = _a.accept,
+        groupedFiles = _a.groupedFiles,
+        list = _a.list,
+        id = _a.id,
+        ariaLabelledBy = _a.ariaLabelledBy,
+        ariaDescribedBy = _a.ariaDescribedBy,
+        async = _a.async;
+    return (// @ts-ignore  function children
+      h(UploadUI, {
+        ref: this.v3 ? function (el) {
+          _this.uploadUIRef = el;
+        } : 'uploadUI',
+        "class": this.$props.className,
+        onKeydown: this.onKeyDown,
+        on: this.v3 ? undefined : {
+          "keydown": this.onKeyDown,
+          "add": this.onAdd,
+          "clear": this.onClear,
+          "upload": this.onUpload,
+          "remove": this.onRemove,
+          "retry": this.onRetry,
+          "cancel": this.onCancel,
+          "click": this.onClick,
+          "focus": this.onFocus,
+          "blur": this.onBlur
+        },
+        navigationIndex: this.currentNavIndex,
+        attrs: this.v3 ? undefined : {
+          navigationIndex: this.currentNavIndex,
+          notFocusedIndex: NOT_FOCUSED_INDEX,
+          multiple: multiple,
+          disabled: disabled,
+          showFileList: showFileList,
+          showActionButtons: showActionButtons,
+          actionsLayout: actionsLayout,
+          tabIndex: tabIndex,
+          accept: accept,
+          groupedFiles: groupedFiles,
+          list: list,
+          id: id,
+          ariaLabelledBy: ariaLabelledBy,
+          ariaDescribedBy: ariaDescribedBy,
+          async: async
+        },
+        notFocusedIndex: NOT_FOCUSED_INDEX,
+        onAdd: this.onAdd,
+        onClear: this.onClear,
+        onUpload: this.onUpload,
+        onRemove: this.onRemove,
+        onRetry: this.onRetry,
+        onCancel: this.onCancel,
+        onClick: this.onClick,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        multiple: multiple,
+        disabled: disabled,
+        showFileList: showFileList,
+        showActionButtons: showActionButtons,
+        actionsLayout: actionsLayout,
+        tabIndex: tabIndex,
+        accept: accept,
+        groupedFiles: groupedFiles,
+        list: list,
+        id: id,
+        ariaLabelledBy: ariaLabelledBy,
+        ariaDescribedBy: ariaDescribedBy,
+        async: async
+      })
+    );
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadNavigation = UploadNavigationVue2;
+export { UploadNavigation, UploadNavigationVue2 };

package/dist/esm/UploadStatus.d.ts

@@ -0,0 +1,53 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface UploadStatusProps {
+    isUploading: boolean;
+    isUploaded: boolean;
+    isUploadFailed: boolean;
+}
+/**
+ * @hidden
+ */
+export interface UploadStatusMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadStatusState {
+    v3: boolean;
+    _uploadUI: any;
+    _navIndex: number;
+    _blurTimeout: number | undefined;
+}
+/**
+ * @hidden
+ */
+export interface UploadStatusData {
+}
+/**
+ * @hidden
+ */
+export interface UploadStatusComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadStatusAll extends UploadStatusMethods, UploadStatusState, UploadStatusData, UploadStatusComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadStatusVue2: ComponentOptions<Vue2type, DefaultData<UploadStatusData>, DefaultMethods<UploadStatusAll>, UploadStatusComputed, RecordPropsDefinition<UploadStatusProps>>;
+/**
+ * @hidden
+ */
+declare const UploadStatus: DefineComponent<UploadStatusProps, any, UploadStatusData, UploadStatusComputed, UploadStatusMethods, {}, {}, {}, string, UploadStatusProps, UploadStatusProps, {}>;
+export { UploadStatus, UploadStatusVue2 };