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

package/dist/esm/UploadListActionButton.js

@@ -0,0 +1,176 @@
+// @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 { UploadFileStatus } from './interfaces/UploadFileStatus.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, cancel, retry, remove } from './messages.js';
+/**
+ * @hidden
+ */
+
+var UploadListActionButtonVue2 = {
+  name: 'KendoVueUploadListActionButton',
+  props: {
+    progress: Number,
+    uid: String,
+    status: Number,
+    async: Object,
+    disabled: Boolean
+  },
+  // @ts-ignore
+  emits: {
+    'cancel': null,
+    'retry': null,
+    'remove': null
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      retryFocused: false,
+      actionFocused: false
+    };
+  },
+  methods: {
+    actionButtonTitle: function actionButtonTitle(status, localizationService) {
+      if (status === UploadFileStatus.Uploading) {
+        return localizationService.toLanguageString(cancel, messages[cancel]);
+      }
+
+      return localizationService.toLanguageString(remove, messages[remove]);
+    },
+    retryButtonTitle: function retryButtonTitle(localizationService) {
+      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' : '');
+    },
+    onRetryFocus: function onRetryFocus() {
+      this.retryFocused = true;
+    },
+    onRetryBlur: function onRetryBlur() {
+      this.retryFocused = false;
+    },
+    onActionFocus: function onActionFocus() {
+      this.actionFocused = true;
+    },
+    onActionBlur: function onActionBlur() {
+      this.actionFocused = false;
+    },
+    onActionClick: function onActionClick() {
+      var _a = this.$props,
+          status = _a.status,
+          uid = _a.uid,
+          disabled = _a.disabled;
+
+      if (disabled || status === UploadFileStatus.Removing) {
+        return;
+      }
+
+      if (status === UploadFileStatus.Uploading) {
+        this.$emit('cancel', uid);
+      } else {
+        this.$emit('remove', uid);
+      }
+    },
+    onRetryClick: function onRetryClick() {
+      var _a = this.$props,
+          uid = _a.uid,
+          disabled = _a.disabled;
+
+      if (disabled) {
+        return;
+      }
+
+      this.$emit('retry', uid);
+    }
+  },
+  // @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,
+        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'
+    }, [isProgressVisible ? h("span", {
+      "class": 'k-upload-pct'
+    }, [progress, percent]) : undefined, isRetryVisible ? h("button", {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabindex: -1
+      },
+      tabindex: -1,
+      "class": this.buttonClassNames('retry'),
+      onFocus: this.onRetryFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.onRetryFocus,
+        "blur": this.onRetryBlur,
+        "click": this.onRetryClick
+      },
+      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-refresh-sm'
+    })]) : undefined, !isActionHidden ? h("button", {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabindex: -1
+      },
+      tabindex: -1,
+      "class": this.buttonClassNames('action'),
+      onFocus: this.onActionFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.onActionFocus,
+        "blur": this.onActionBlur,
+        "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]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadListActionButton = UploadListActionButtonVue2;
+export { UploadListActionButton, UploadListActionButtonVue2 };

package/dist/esm/UploadListGroup.d.ts

@@ -0,0 +1,56 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => UploadListGroupData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { UploadFileInfo } from './interfaces/UploadFileInfo';
+import { UploadAsyncProps } from './interfaces/UploadAsyncProps';
+/**
+ * @hidden
+ */
+export interface UploadListGroupProps {
+    files: Array<UploadFileInfo>;
+    async: UploadAsyncProps;
+    disabled: boolean;
+    navigationIndex: number | undefined;
+    list?: any;
+    index: number;
+}
+/**
+ * @hidden
+ */
+export interface UploadListGroupMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListGroupState {
+    v3: boolean;
+    _element: HTMLLIElement | null;
+}
+/**
+ * @hidden
+ */
+export interface UploadListGroupData {
+}
+/**
+ * @hidden
+ */
+export interface UploadListGroupComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListGroupAll extends UploadListGroupMethods, UploadListGroupState, UploadListGroupData, UploadListGroupComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadListGroupVue2: ComponentOptions<Vue2type, DefaultData<UploadListGroupData>, DefaultMethods<UploadListGroupAll>, UploadListGroupComputed, RecordPropsDefinition<UploadListGroupProps>>;
+/**
+ * @hidden
+ */
+declare const UploadListGroup: DefineComponent<UploadListGroupProps, any, UploadListGroupData, UploadListGroupComputed, UploadListGroupMethods, {}, {}, {}, string, UploadListGroupProps, UploadListGroupProps, {}>;
+export { UploadListGroup, UploadListGroupVue2 };

package/dist/esm/UploadListGroup.js

@@ -0,0 +1,150 @@
+// @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 { canUseDOM, classNames, getTemplate, setRef } from '@progress/kendo-vue-common';
+import { UploadFileStatus } from './interfaces/UploadFileStatus.js';
+import { UploadListSingleItem } from './UploadListSingleItem.js';
+import { UploadListMultiItem } from './UploadListMultiItem.js';
+import utils from './utils/utils.js';
+/**
+ * @hidden
+ */
+
+var UploadListGroupVue2 = {
+  name: 'KendoVueUploadListGroup',
+  props: {
+    files: Array,
+    async: Object,
+    disabled: Boolean,
+    navigationIndex: Number,
+    list: [String, Function, Object],
+    index: Number
+  },
+  // @ts-ignore
+  emits: {
+    'cancel': null,
+    'click': null,
+    'retry': null,
+    'remove': null
+  },
+  mounted: function mounted() {
+    this._element = this.v3 ? this.elementRef : this.$refs.element;
+  },
+  updated: function updated() {
+    var _a = this.$props,
+        navigationIndex = _a.navigationIndex,
+        index = _a.index;
+
+    if (navigationIndex === index && this._element && canUseDOM && document.activeElement !== this._element) {
+      this._element.focus();
+    }
+  },
+  methods: {
+    onClick: function onClick() {
+      this.$emit('click', this.$props.index);
+    },
+    onRetry: function onRetry(uid) {
+      this.$emit('retry', uid);
+    },
+    onRemove: function onRemove(uid) {
+      this.$emit('remove', uid);
+    },
+    onCancel: function onCancel(uid) {
+      this.$emit('cancel', uid);
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var elementRef = ref(null);
+    return {
+      v3: v3,
+      elementRef: elementRef
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        files = _a.files,
+        async = _a.async,
+        disabled = _a.disabled,
+        navigationIndex = _a.navigationIndex,
+        index = _a.index,
+        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 itemComponent;
+    var defaultItemRendering = files.length === 1 ? // @ts-ignore
+    h(UploadListSingleItem, {
+      files: files,
+      attrs: this.v3 ? undefined : {
+        files: files,
+        async: async,
+        disabled: disabled
+      },
+      async: async,
+      disabled: disabled,
+      onCancel: this.onCancel,
+      on: this.v3 ? undefined : {
+        "cancel": this.onCancel,
+        "remove": this.onRemove,
+        "retry": this.onRetry
+      },
+      onRemove: this.onRemove,
+      onRetry: this.onRetry
+    }) : // @ts-ignore
+    h(UploadListMultiItem, {
+      files: files,
+      attrs: this.v3 ? undefined : {
+        files: files,
+        async: async,
+        disabled: disabled
+      },
+      async: async,
+      disabled: disabled,
+      onCancel: this.onCancel,
+      on: this.v3 ? undefined : {
+        "cancel": this.onCancel,
+        "remove": this.onRemove,
+        "retry": this.onRetry
+      },
+      onRemove: this.onRemove,
+      onRetry: this.onRetry
+    });
+    itemComponent = getTemplate.call(this, {
+      h: h,
+      template: this.$props.list,
+      defaultRendering: defaultItemRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        retry: this.onRetry,
+        remove: this.onRemove,
+        cancel: this.onCancel
+      }
+    });
+    return h("li", {
+      ref: setRef(this, 'element'),
+      "class": liClassName,
+      "data-uid": firstFile.uid,
+      attrs: this.v3 ? undefined : {
+        "data-uid": firstFile.uid,
+        tabindex: -1
+      },
+      tabindex: -1,
+      onClick: this.onClick,
+      on: this.v3 ? undefined : {
+        "click": this.onClick
+      }
+    }, [itemComponent]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadListGroup = UploadListGroupVue2;
+export { UploadListGroup, UploadListGroupVue2 };

package/dist/esm/UploadListMultiItem.d.ts

@@ -0,0 +1,44 @@
+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 { UploadListItemProps } from './interfaces/UploadListItemProps';
+/**
+ * @hidden
+ */
+export interface UploadListMultiItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListMultiItemState {
+    v3: boolean;
+    _element: HTMLLIElement | null;
+}
+/**
+ * @hidden
+ */
+export interface UploadListMultiItemData {
+}
+/**
+ * @hidden
+ */
+export interface UploadListMultiItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListMultiItemAll extends UploadListMultiItemMethods, UploadListMultiItemState, UploadListMultiItemData, UploadListMultiItemComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadListMultiItemVue2: ComponentOptions<Vue2type, DefaultData<UploadListMultiItemData>, DefaultMethods<UploadListMultiItemAll>, UploadListMultiItemComputed, RecordPropsDefinition<UploadListItemProps>>;
+/**
+ * @hidden
+ */
+declare const UploadListMultiItem: DefineComponent<UploadListItemProps, any, UploadListMultiItemData, UploadListMultiItemComputed, UploadListMultiItemMethods, {}, {}, {}, string, UploadListItemProps, UploadListItemProps, {}>;
+export { UploadListMultiItem, UploadListMultiItemVue2 };

package/dist/esm/UploadListMultiItem.js

@@ -0,0 +1,172 @@
+// @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 utils from './utils/utils.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, total, files as filesM, statusUploadFailed, statusUploaded } from './messages.js';
+import { UploadListActionButton } from './UploadListActionButton.js';
+/**
+ * @hidden
+ */
+
+var UploadListMultiItemVue2 = {
+  name: 'KendoVueUploadListMultiItem',
+  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);
+    },
+    getFileValidationMessage: function getFileValidationMessage(file) {
+      var localizationService = provideLocalizationService(this);
+      var validationMessage = '';
+
+      if (file.validationErrors && file.validationErrors.length > 0) {
+        var messageKey = "upload.".concat(file.validationErrors[0]);
+        validationMessage = localizationService.toLanguageString(messageKey, messages[messageKey]);
+      }
+
+      return validationMessage;
+    },
+    progress: function progress() {
+      var files = this.$props.files;
+      var sum = 0;
+      files.forEach(function (file) {
+        sum += file.progress || 0;
+      });
+      return sum / files.length;
+    }
+  },
+  // @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 itemClassName = classNames('k-file-multiple');
+
+    var _b = utils.getFileStatus(files),
+        isUploaded = _b[1],
+        isUploadFailed = _b[2],
+        isUploadValidationFailed = _b[3];
+
+    var localizationService = provideLocalizationService(this);
+    var totalMessage = localizationService.toLanguageString(total, messages[total]);
+    var filesMessage = localizationService.toLanguageString(filesM, messages[filesM]);
+    var uploadFailedMessage = localizationService.toLanguageString(statusUploadFailed, messages[statusUploadFailed]);
+    var successMessage = localizationService.toLanguageString(statusUploaded, messages[statusUploaded]);
+    var progress = this.progress();
+    var showProgressBar = !isUploadValidationFailed && !isUploaded && !isUploadFailed;
+
+    var mapFiles = function mapFiles() {
+      return files.map(function (file) {
+        return h("span", {
+          key: file.name,
+          "class": 'k-file-name-size-wrapper'
+        }, [h("span", {
+          "class": 'k-file-name',
+          title: file.name,
+          attrs: this.v3 ? undefined : {
+            title: file.name
+          }
+        }, [file.name]), utils.fileHasValidationErrors(file) ? h("span", {
+          "class": 'k-file-validation-message k-text-error'
+        }, [this.getFileValidationMessage(file)]) : h("span", {
+          key: "".concat(file.name, "-size"),
+          "class": 'k-file-size'
+        }, [utils.getTotalFilesSizeMessage([file])])]);
+      }, this);
+    };
+
+    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'
+    })]), h("span", {
+      "class": "k-multiple-files-wrapper"
+    }, [mapFiles.call(this), !isUploadFailed ? progress !== 100 ? h("span", {
+      "class": 'k-file-information'
+    }, ["".concat(totalMessage, ": ").concat(files.length, " ").concat(filesMessage, ", ").concat(utils.getTotalFilesSizeMessage(files))]) : h("span", {
+      "class": 'k-file-information k-text-success'
+    }, ["".concat(files.length, " ").concat(successMessage)]) : h("span", {
+      "class": 'k-file-validation-message k-text-error'
+    }, ["".concat(files.length, " ").concat(uploadFailedMessage)])]), // @ts-ignore  function children
+    h(UploadListActionButton, {
+      uid: files[0].uid,
+      attrs: this.v3 ? undefined : {
+        uid: files[0].uid,
+        status: files[0].status,
+        progress: progress,
+        files: files,
+        disabled: disabled,
+        async: async
+      },
+      status: files[0].status,
+      progress: 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 UploadListMultiItem = UploadListMultiItemVue2;
+export { UploadListMultiItem, UploadListMultiItemVue2 };

package/dist/esm/UploadListSingleItem.d.ts

@@ -0,0 +1,44 @@
+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 { UploadListItemProps } from './interfaces/UploadListItemProps';
+/**
+ * @hidden
+ */
+export interface UploadListSingleItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListSingleItemState {
+    v3: boolean;
+    _element: HTMLLIElement | null;
+}
+/**
+ * @hidden
+ */
+export interface UploadListSingleItemData {
+}
+/**
+ * @hidden
+ */
+export interface UploadListSingleItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListSingleItemAll extends UploadListSingleItemMethods, UploadListSingleItemState, UploadListSingleItemData, UploadListSingleItemComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadListSingleItemVue2: ComponentOptions<Vue2type, DefaultData<UploadListSingleItemData>, DefaultMethods<UploadListSingleItemAll>, UploadListSingleItemComputed, RecordPropsDefinition<UploadListItemProps>>;
+/**
+ * @hidden
+ */
+declare const UploadListSingleItem: DefineComponent<UploadListItemProps, any, UploadListSingleItemData, UploadListSingleItemComputed, UploadListSingleItemMethods, {}, {}, {}, string, UploadListItemProps, UploadListItemProps, {}>;
+export { UploadListSingleItem, UploadListSingleItemVue2 };