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

package/dist/esm/UploadDropZone.js

@@ -0,0 +1,288 @@
+// @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 { UploadAddButton } from './UploadAddButton.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, dropFilesHere } from './messages.js';
+import utils from './utils/utils.js';
+import { UploadStatus } from './UploadStatus.js';
+/**
+ * @hidden
+ */
+
+var TIME_TO_CHECK_DRAG = 100;
+/**
+ * @hidden
+ */
+
+var UploadDropZoneVue2 = {
+  name: 'KendoVueUploadDropZone',
+  props: {
+    addButtonIndex: Number,
+    async: Object,
+    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 {};
+      }
+    },
+    navigationIndex: Number,
+    notFocusedIndex: Number,
+    list: [String, Function, Object],
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    fileGroup: Object
+  },
+  // @ts-ignore
+  emits: {
+    'add': null,
+    'click': null
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentDocumentActive: false,
+      currentElementActive: false
+    };
+  },
+  created: function created() {
+    this.currentElementActive = false;
+  },
+  mounted: function mounted() {
+    this.uploadAddButton = this.v3 ? this.uploadAddButtonRef : this.$refs.uploadAddButton;
+    document.addEventListener('dragenter', this.onDocumentDragEnter);
+    document.addEventListener('dragover', this.onDocumentDragOver);
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    document.removeEventListener('dragenter', this.onDocumentDragEnter);
+    document.removeEventListener('dragover', this.onDocumentDragOver);
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    document.removeEventListener('dragenter', this.onDocumentDragEnter);
+    document.removeEventListener('dragover', this.onDocumentDragOver);
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var uploadAddButtonRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      uploadAddButtonRef: uploadAddButtonRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  computed: {
+    dropZoneClasses: function dropZoneClasses() {
+      return {
+        'k-dropzone': true,
+        'k-dropzone-active': this.currentDocumentActive,
+        'k-dropzone-hovered': this.currentElementActive
+      };
+    }
+  },
+  methods: {
+    actionElement: function actionElement() {
+      if (this.uploadAddButton) {
+        return this.uploadAddButton.uploadInput;
+      }
+    },
+    focus: function focus() {
+      if (this.uploadAddButton) {
+        return this.uploadAddButton.focus();
+      }
+    },
+    onDocumentDragEnter: function onDocumentDragEnter() {
+      var _this = this;
+
+      if (!this.currentDocumentActive) {
+        this.currentDocumentActive = true;
+
+        var documentInterval = function documentInterval() {
+          if (_this.isDragOver(_this._lastDocumentDragOver)) {
+            _this.currentDocumentActive = false;
+            clearInterval(_this._documentInterval);
+            _this._documentInterval = null;
+            _this._lastDocumentDragOver = null;
+          }
+        };
+
+        this._documentInterval = setInterval(documentInterval, TIME_TO_CHECK_DRAG);
+      }
+    },
+    onDocumentDragOver: function onDocumentDragOver() {
+      this._lastDocumentDragOver = new Date();
+    },
+    onElementDragEnter: function onElementDragEnter() {
+      var _this = this;
+
+      if (!this.currentElementActive) {
+        this.currentElementActive = true;
+
+        var elementInterval = function elementInterval() {
+          if (_this.isDragOver(_this._lastElementDragOver)) {
+            _this.currentElementActive = false;
+            clearInterval(_this._elementInterval);
+            _this._elementInterval = null;
+            _this._lastElementDragOver = null;
+          }
+        };
+
+        this._elementInterval = setInterval(elementInterval, TIME_TO_CHECK_DRAG);
+      }
+    },
+    onElementDragOver: function onElementDragOver(event) {
+      event.preventDefault();
+      this._lastElementDragOver = new Date();
+    },
+    onDrop: function onDrop(event) {
+      event.preventDefault();
+      var droppedFiles = event.dataTransfer.files;
+
+      if (droppedFiles.length > 0 && !this.$props.disabled) {
+        this.$emit('add', droppedFiles);
+      }
+    },
+    isDragOver: function isDragOver(prevDate) {
+      return new Date().getTime() - (prevDate || new Date()).getTime() > TIME_TO_CHECK_DRAG;
+    },
+    onClick: function onClick(eventIndex) {
+      this.$emit('click', eventIndex);
+    },
+    onAdd: function onAdd(files) {
+      this.$emit('add', files);
+    }
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        multiple = _a.multiple,
+        disabled = _a.disabled,
+        tabIndex = _a.tabIndex,
+        fileGroup = _a.fileGroup,
+        accept = _a.accept,
+        showFileList = _a.showFileList,
+        groupedFiles = _a.groupedFiles,
+        navigationIndex = _a.navigationIndex,
+        showActionButtons = _a.showActionButtons,
+        actionsLayout = _a.actionsLayout,
+        notFocusedIndex = _a.notFocusedIndex,
+        list = _a.list,
+        id = _a.id,
+        ariaLabelledBy = _a.ariaLabelledBy,
+        ariaDescribedBy = _a.ariaDescribedBy;
+    var localizationService = provideLocalizationService(this);
+    var dropFilesMessage = localizationService.toLanguageString(dropFilesHere, messages[dropFilesHere]);
+
+    var _b = utils.getFileStatus(fileGroup),
+        isUploading = _b[0],
+        isUploaded = _b[1],
+        isUploadFailed = _b[2],
+        isUploadValidationFailed = _b[3];
+
+    var dropZoneClassName = classNames('k-dropzone-hint', {// Unsure about that, since it hides the "Drop Files Message" when we remove all uploaded components.
+      // 'k-hidden': this.isDragged && !this.elementActive
+    });
+
+    var addButtonComponent = function addButtonComponent() {
+      var _this = this;
+
+      return (// @ts-ignore  function children
+        h(UploadAddButton, {
+          id: id,
+          attrs: this.v3 ? undefined : {
+            id: id,
+            ariaLabelledBy: ariaLabelledBy,
+            ariaDescribedBy: ariaDescribedBy,
+            accept: accept,
+            async: this.async,
+            addButtonIndex: this.addButtonIndex,
+            navigationIndex: navigationIndex,
+            notFocusedIndex: notFocusedIndex,
+            tabIndex: tabIndex,
+            multiple: multiple,
+            disabled: disabled
+          },
+          ariaLabelledBy: ariaLabelledBy,
+          ariaDescribedBy: ariaDescribedBy,
+          ref: this.v3 ? function (el) {
+            _this.uploadAddButtonRef = el;
+          } : 'uploadAddButton',
+          accept: accept,
+          async: this.async,
+          addButtonIndex: this.addButtonIndex,
+          navigationIndex: navigationIndex,
+          notFocusedIndex: notFocusedIndex,
+          tabIndex: tabIndex,
+          multiple: multiple,
+          disabled: disabled,
+          onClick: this.onClick,
+          on: this.v3 ? undefined : {
+            "click": this.onClick,
+            "add": this.onAdd
+          },
+          onAdd: this.onAdd
+        })
+      );
+    };
+
+    return h("div", {
+      "class": this.dropZoneClasses,
+      onDrop: this.onDrop,
+      on: this.v3 ? undefined : {
+        "drop": this.onDrop,
+        "dragenter": this.onElementDragEnter,
+        "dragover": this.onElementDragOver
+      },
+      onDragenter: this.onElementDragEnter,
+      onDragover: this.onElementDragOver
+    }, [addButtonComponent.call(this), isUploading || isUploaded || isUploadFailed || isUploadValidationFailed ? // @ts-ignore  function children
+    h(UploadStatus, {
+      isUploading: isUploading,
+      attrs: this.v3 ? undefined : {
+        isUploading: isUploading,
+        isUploaded: isUploaded,
+        isUploadFailed: isUploadFailed
+      },
+      isUploaded: isUploaded,
+      isUploadFailed: isUploadFailed
+    }) : h("div", {
+      "class": dropZoneClassName
+    }, [dropFilesMessage])]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadDropZone = UploadDropZoneVue2;
+export { UploadDropZone, UploadDropZoneVue2 };

package/dist/esm/UploadInput.d.ts

@@ -0,0 +1,56 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => UploadInputData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { UploadAsyncProps } from './interfaces/UploadAsyncProps';
+/**
+ * @hidden
+ */
+export interface UploadInputProps {
+    async: UploadAsyncProps;
+    multiple?: boolean;
+    disabled?: boolean;
+    accept?: string;
+}
+/**
+ * @hidden
+ */
+export interface UploadInputMethods {
+    [key: string]: any;
+    focus: () => any;
+    onClick: () => any;
+    actionElement: () => any;
+}
+/**
+ * @hidden
+ */
+export interface UploadInputState {
+    v3: boolean;
+    _input: HTMLInputElement | null;
+}
+/**
+ * @hidden
+ */
+export interface UploadInputData {
+}
+/**
+ * @hidden
+ */
+export interface UploadInputComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadInputAll extends UploadInputMethods, UploadInputState, UploadInputData, UploadInputComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadInputVue2: ComponentOptions<Vue2type, DefaultData<UploadInputData>, DefaultMethods<UploadInputAll>, UploadInputComputed, RecordPropsDefinition<UploadInputProps>>;
+/**
+ * @hidden
+ */
+declare const UploadInput: DefineComponent<UploadInputProps, any, UploadInputData, UploadInputComputed, UploadInputMethods, {}, {}, {}, string, UploadInputProps, UploadInputProps, {}>;
+export { UploadInput, UploadInputVue2 };

package/dist/esm/UploadInput.js

@@ -0,0 +1,116 @@
+// @ts-ignore
+import { setRef } from '@progress/kendo-vue-common';
+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 CHROME_REGEX = /(chrome)[ \/]([\w.]+)/i;
+var SAFARI_REGEX = /(webkit)[ \/]([\w.]+)/i;
+/**
+ * @hidden
+ */
+
+var UploadInputVue2 = {
+  name: 'KendoVueUploadInput',
+  props: {
+    async: Object,
+    multiple: {
+      type: Boolean,
+      default: undefined
+    },
+    disabled: {
+      type: Boolean,
+      default: undefined
+    },
+    accept: {
+      type: String,
+      default: undefined
+    }
+  },
+  // @ts-ignore
+  emits: {
+    'mousedown': null,
+    'add': null
+  },
+  mounted: function mounted() {
+    this._input = this.v3 ? this.inputRef : this.$refs.input;
+  },
+  methods: {
+    onMouseDown: function onMouseDown(e) {
+      this.$emit('mousedown', e);
+    },
+    onAdd: function onAdd() {
+      var ua = navigator.userAgent;
+      var input = this._input;
+
+      if (input) {
+        if (input.files) {
+          this.$emit('add', input.files);
+        }
+        /*
+            Chrome and Internet Explorer do not trigger a `change` event
+            when a file with the same name is selected a number of consecutive times.
+            As a workaround, clear the input value after handling the file.
+        */
+
+
+        if (!(!ua.match(CHROME_REGEX) && ua.match(SAFARI_REGEX))) {
+          input.type = '';
+          input.type = 'file';
+        }
+      }
+    },
+    actionElement: function actionElement() {
+      return this._input;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        multiple = _a.multiple,
+        async = _a.async,
+        disabled = _a.disabled,
+        accept = _a.accept;
+    return h("input", {
+      ref: setRef(this, 'input'),
+      autocomplete: 'off',
+      attrs: this.v3 ? undefined : {
+        autocomplete: 'off',
+        name: async.saveField,
+        accept: accept,
+        type: 'file',
+        tabindex: -1,
+        multiple: multiple,
+        disabled: disabled
+      },
+      name: async.saveField,
+      accept: accept,
+      type: 'file',
+      tabindex: -1,
+      multiple: multiple,
+      disabled: disabled,
+      onChange: this.onAdd,
+      on: this.v3 ? undefined : {
+        "change": this.onAdd,
+        "mousedown": this.onMouseDown
+      },
+      onMousedown: this.onMouseDown
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadInput = UploadInputVue2;
+export { UploadInput, UploadInputVue2 };

package/dist/esm/UploadList.d.ts

@@ -0,0 +1,58 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => UploadListData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { GroupedFiles } from './interfaces/FileGroup';
+import { UploadAsyncProps } from './interfaces/UploadAsyncProps';
+/**
+ * @hidden
+ */
+export interface UploadListProps {
+    groupedFiles: GroupedFiles;
+    async: UploadAsyncProps;
+    disabled: boolean;
+    navigationIndex?: number;
+    list?: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListMethods {
+    [key: string]: any;
+    onRetry: (uid: string) => void;
+    onRemove: (uid: string) => void;
+    onCancel: (uid: string) => void;
+}
+/**
+ * @hidden
+ */
+export interface UploadListState {
+    v3: boolean;
+    _input: HTMLInputElement | null;
+}
+/**
+ * @hidden
+ */
+export interface UploadListData {
+}
+/**
+ * @hidden
+ */
+export interface UploadListComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListAll extends UploadListMethods, UploadListState, UploadListData, UploadListComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadListVue2: ComponentOptions<Vue2type, DefaultData<UploadListData>, DefaultMethods<UploadListAll>, UploadListComputed, RecordPropsDefinition<UploadListProps>>;
+/**
+ * @hidden
+ */
+declare const UploadList: DefineComponent<UploadListProps, any, UploadListData, UploadListComputed, UploadListMethods, {}, {}, {}, string, UploadListProps, UploadListProps, {}>;
+export { UploadList, UploadListVue2 };

package/dist/esm/UploadList.js

@@ -0,0 +1,103 @@
+// @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 { classNames } from '@progress/kendo-vue-common';
+import { UploadListGroup } from './UploadListGroup.js';
+/**
+ * @hidden
+ */
+
+var UploadListVue2 = {
+  name: 'KendoVueUploadList',
+  props: {
+    groupedFiles: Object,
+    async: Object,
+    disabled: Boolean,
+    navigationIndex: {
+      type: Number,
+      default: undefined
+    },
+    list: [String, Function, Object]
+  },
+  // @ts-ignore
+  emits: {
+    'cancel': null,
+    'click': null,
+    'retry': null,
+    'remove': null
+  },
+  methods: {
+    onClick: function onClick(navIndex) {
+      this.$emit('click', navIndex);
+    },
+    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;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        groupedFiles = _a.groupedFiles,
+        navigationIndex = _a.navigationIndex,
+        async = _a.async,
+        disabled = _a.disabled,
+        list = _a.list;
+    var ulClassName = classNames('k-upload-files', 'k-reset');
+    return h("ul", {
+      "class": ulClassName
+    }, [Object.keys(groupedFiles).map(function (key, index) {
+      var files = groupedFiles[key];
+      return (// @ts-ignore  function children
+        h(UploadListGroup, {
+          key: key,
+          files: files,
+          attrs: this.v3 ? undefined : {
+            files: files,
+            index: index,
+            navigationIndex: navigationIndex,
+            async: async,
+            disabled: disabled,
+            list: list
+          },
+          index: index,
+          navigationIndex: navigationIndex,
+          async: async,
+          disabled: disabled,
+          list: list,
+          onCancel: this.onCancel,
+          on: this.v3 ? undefined : {
+            "cancel": this.onCancel,
+            "click": this.onClick,
+            "remove": this.onRemove,
+            "retry": this.onRetry
+          },
+          onClick: this.onClick,
+          onRemove: this.onRemove,
+          onRetry: this.onRetry
+        })
+      );
+    }, this)]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadList = UploadListVue2;
+export { UploadList, UploadListVue2 };

package/dist/esm/UploadListActionButton.d.ts

@@ -0,0 +1,56 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => UploadListActionButtonData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { UploadAsyncProps } from './interfaces/UploadAsyncProps';
+import { UploadFileStatus } from './interfaces/UploadFileStatus';
+/**
+ * @hidden
+ */
+export interface UploadListActionButtonProps {
+    progress: number;
+    uid: string;
+    status: UploadFileStatus;
+    async: UploadAsyncProps;
+    disabled: boolean;
+}
+/**
+ * @hidden
+ */
+export interface UploadListActionButtonMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListActionButtonState {
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface UploadListActionButtonData {
+    retryFocused: boolean;
+    actionFocused: boolean;
+}
+/**
+ * @hidden
+ */
+export interface UploadListActionButtonComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadListActionButtonAll extends UploadListActionButtonMethods, UploadListActionButtonState, UploadListActionButtonData, UploadListActionButtonComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadListActionButtonVue2: ComponentOptions<Vue2type, DefaultData<UploadListActionButtonData>, DefaultMethods<UploadListActionButtonAll>, UploadListActionButtonComputed, RecordPropsDefinition<UploadListActionButtonProps>>;
+/**
+ * @hidden
+ */
+declare const UploadListActionButton: DefineComponent<UploadListActionButtonProps, any, UploadListActionButtonData, UploadListActionButtonComputed, UploadListActionButtonMethods, {}, {}, {}, string, UploadListActionButtonProps, UploadListActionButtonProps, {}>;
+export { UploadListActionButton, UploadListActionButtonVue2 };