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

package/dist/esm/UploadStatus.js

@@ -0,0 +1,63 @@
+// @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, headerStatusUploading, headerStatusUploaded } from './messages.js';
+/**
+ * @hidden
+ */
+
+var UploadStatusVue2 = {
+  props: {
+    isUploading: Boolean,
+    isUploaded: Boolean,
+    isUploadFailed: Boolean
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @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,
+        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) {
+      statusText = localizationService.toLanguageString(headerStatusUploading, messages[headerStatusUploading]);
+    } else if (isUploaded || isUploadFailed) {
+      statusText = localizationService.toLanguageString(headerStatusUploaded, messages[headerStatusUploaded]);
+    }
+
+    return h("div", {
+      "class": classNames('k-upload-status', 'k-upload-status-total')
+    }, [h("span", {
+      "class": statusClassName
+    }), statusText]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadStatus = UploadStatusVue2;
+export { UploadStatus, UploadStatusVue2 };

package/dist/esm/UploadUI.d.ts

@@ -0,0 +1,81 @@
+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 { GroupedFiles } from './interfaces/FileGroup';
+import { UploadAsyncProps } from './interfaces/UploadAsyncProps';
+/**
+ * @hidden
+ */
+export interface UploadUIProps extends UploadAsyncProps {
+    className?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    showFileList?: boolean;
+    showActionButtons?: boolean;
+    actionsLayout?: string;
+    tabIndex?: number;
+    accept?: string;
+    groupedFiles: GroupedFiles;
+    navigationIndex?: number;
+    notFocusedIndex?: number;
+    list?: any;
+    id?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    async?: Object;
+    addButtonIndex?: number;
+}
+/**
+ * @hidden
+ */
+export interface UploadUIMethods {
+    [key: string]: any;
+    onAdd?: (files: FileList) => void;
+    onCancel?: (uid: string) => void;
+    onRemove?: (uid: string) => void;
+    onRetry?: (uid: string) => void;
+    onUpload?: () => void;
+    onClear?: () => void;
+    onFocus?: (event: any) => void;
+    onBlur?: (event: any) => void;
+    onKeyDown?: (event: KeyboardEvent, isRtl?: boolean) => void;
+    onClick?: (navIndex: number | undefined) => void;
+}
+/**
+ * @hidden
+ */
+export interface UploadUIState {
+    v3: boolean;
+    _container: HTMLDivElement | null;
+    _uploadAddButton: any | null;
+    _uploadUI: any;
+    _navIndex: number;
+    _blurTimeout: number | undefined;
+}
+/**
+ * @hidden
+ */
+export interface UploadUIData {
+}
+/**
+ * @hidden
+ */
+export interface UploadUIComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface UploadUIAll extends UploadUIMethods, UploadUIState, UploadUIData, UploadUIComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let UploadUIVue2: ComponentOptions<Vue2type, DefaultData<UploadUIData>, DefaultMethods<UploadUIAll>, UploadUIComputed, RecordPropsDefinition<UploadUIProps>>;
+/**
+ * @hidden
+ */
+declare const UploadUI: DefineComponent<UploadUIProps, any, UploadUIData, UploadUIComputed, UploadUIMethods, {}, {}, {}, string, UploadUIProps, UploadUIProps, {}>;
+export { UploadUI, UploadUIVue2 };

package/dist/esm/UploadUI.js

@@ -0,0 +1,265 @@
+// @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, setRef } from '@progress/kendo-vue-common';
+import { UploadList } from './UploadList.js';
+import { UploadActionButtons } from './UploadActionButtons.js';
+import { UploadDropZone } from './UploadDropZone.js';
+var ADD_BUTTON_NAV_INDEX = -1;
+/**
+ * @hidden
+ */
+
+var UploadUIVue2 = {
+  name: 'KendoVueUploadUI',
+  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 {};
+      }
+    },
+    navigationIndex: Number,
+    notFocusedIndex: Number,
+    list: [String, Function, Object],
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  computed: {
+    groupsCount: function groupsCount() {
+      return Object.keys(this.$props.groupedFiles).length;
+    },
+    lastGroupIndex: function lastGroupIndex() {
+      return this.groupsCount - 1;
+    },
+    addButtonIndex: function addButtonIndex() {
+      return ADD_BUTTON_NAV_INDEX;
+    },
+    clearButtonIndex: function clearButtonIndex() {
+      return this.lastGroupIndex + 1;
+    },
+    uploadButtonIndex: function uploadButtonIndex() {
+      return this.lastGroupIndex + 2;
+    },
+    isRtl: function isRtl() {
+      return this._container && getComputedStyle(this._container).direction === 'rtl' || false;
+    }
+  },
+  methods: {
+    actionElement: function actionElement() {
+      if (this.uploadDropZone) {
+        return this.uploadDropZone.actionElement();
+      }
+    },
+    focus: function focus() {
+      if (this.uploadDropZone) {
+        return this.uploadDropZone.focus();
+      }
+    },
+    onAdd: function onAdd(files) {
+      this.$emit('add', files);
+    },
+    onRetry: function onRetry(uid) {
+      this.$emit('retry', uid);
+    },
+    onCancel: function onCancel(uid) {
+      this.$emit('cancel', uid);
+    },
+    onClear: function onClear() {
+      this.$emit('clear');
+    },
+    onUpload: function onUpload() {
+      this.$emit('upload');
+    },
+    onRemove: function onRemove(uid) {
+      this.$emit('remove', uid);
+    },
+    onKeyDown: function onKeyDown(event) {
+      this.$emit('keydown', event, this.isRtl);
+    },
+    onFocus: function onFocus(event) {
+      this.$emit('focus', event);
+    },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', event);
+    },
+    onClick: function onClick(navIndex) {
+      this.$emit('click', navIndex);
+    }
+  },
+  // @ts-ignore
+  emits: {
+    'add': null,
+    'retry': null,
+    'cancel': null,
+    'clear': null,
+    'upload': null,
+    'remove': null,
+    'keydown': null,
+    'click': null,
+    'focus': null,
+    'blur': null
+  },
+  mounted: function mounted() {
+    this._container = this.v3 ? this.containerRef : this.$refs.container;
+    this.uploadDropZone = this.v3 ? this.uploadDropZoneRef : this.$refs.uploadDropZone;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var containerRef = ref(null);
+    var uploadDropZoneRef = ref(null);
+    return {
+      v3: v3,
+      containerRef: containerRef,
+      uploadDropZoneRef: uploadDropZoneRef
+    };
+  },
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        multiple = _a.multiple,
+        disabled = _a.disabled,
+        tabIndex = _a.tabIndex,
+        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,
+        async = _a.async;
+    var className = classNames('k-widget', 'k-upload', this.$props.className, disabled ? 'k-disabled' : '');
+    return h("div", {
+      ref: setRef(this, 'container'),
+      "class": className,
+      onKeydown: this.onKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDown,
+        "focus": this.onFocus,
+        "blur": this.onBlur
+      },
+      onFocus: this.onFocus,
+      onBlur: this.onBlur
+    }, [// @ts-ignore  function children
+    h(UploadDropZone, {
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id,
+        ariaLabelledBy: ariaLabelledBy,
+        ariaDescribedBy: ariaDescribedBy,
+        accept: accept,
+        async: async,
+        addButtonIndex: this.addButtonIndex,
+        navigationIndex: navigationIndex,
+        notFocusedIndex: notFocusedIndex,
+        tabIndex: tabIndex,
+        multiple: multiple,
+        fileGroup: groupedFiles,
+        disabled: disabled
+      },
+      ariaLabelledBy: ariaLabelledBy,
+      ariaDescribedBy: ariaDescribedBy,
+      ref: this.v3 ? function (el) {
+        _this.uploadDropZoneRef = el;
+      } : 'uploadDropZone',
+      accept: accept,
+      async: async,
+      addButtonIndex: this.addButtonIndex,
+      navigationIndex: navigationIndex,
+      notFocusedIndex: notFocusedIndex,
+      tabIndex: tabIndex,
+      multiple: multiple,
+      onClick: this.onClick,
+      on: this.v3 ? undefined : {
+        "click": this.onClick,
+        "add": this.onAdd
+      },
+      onAdd: this.onAdd,
+      fileGroup: groupedFiles,
+      disabled: disabled
+    }), showFileList ? // @ts-ignore  function children
+    h(UploadList, {
+      groupedFiles: groupedFiles,
+      attrs: this.v3 ? undefined : {
+        groupedFiles: groupedFiles,
+        disabled: disabled,
+        async: async,
+        navigationIndex: navigationIndex,
+        list: list
+      },
+      disabled: disabled,
+      async: async,
+      navigationIndex: navigationIndex,
+      list: list,
+      onCancel: this.onCancel,
+      on: this.v3 ? undefined : {
+        "cancel": this.onCancel,
+        "remove": this.onRemove,
+        "retry": this.onRetry,
+        "click": this.onClick
+      },
+      onRemove: this.onRemove,
+      onRetry: this.onRetry,
+      onClick: this.onClick
+    }) : undefined, showActionButtons ? // @ts-ignore  function children
+    h(UploadActionButtons, {
+      disabled: disabled,
+      attrs: this.v3 ? undefined : {
+        disabled: disabled,
+        navigationIndex: navigationIndex,
+        clearButtonIndex: this.clearButtonIndex,
+        uploadButtonIndex: this.uploadButtonIndex,
+        actionsLayout: actionsLayout
+      },
+      navigationIndex: navigationIndex,
+      clearButtonIndex: this.clearButtonIndex,
+      uploadButtonIndex: this.uploadButtonIndex,
+      actionsLayout: actionsLayout,
+      onUpload: this.onUpload,
+      on: this.v3 ? undefined : {
+        "upload": this.onUpload,
+        "clear": this.onClear,
+        "click": this.onClick
+      },
+      onClear: this.onClear,
+      onClick: this.onClick
+    }) : undefined]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var UploadUI = UploadUIVue2;
+export { UploadUI, UploadUIVue2 };

package/dist/esm/additionalTypes.ts

@@ -0,0 +1,21 @@
+// @ts-ignore
+import { DefineComponent } from 'vue';
+// @ts-ignore
+import * as Vue from 'vue';
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+type Vue2type = Vue.default;
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+/**
+ * @hidden
+ */
+// @ts-ignore
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/esm/interfaces/BaseUploadEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @hidden
+ */
+export interface BaseUploadEvent<T> {
+    /**
+     * An event target.
+     */
+    target: T;
+}

package/dist/esm/interfaces/BaseUploadEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/FileGroup.d.ts

@@ -0,0 +1,7 @@
+import { UploadFileInfo } from './UploadFileInfo';
+/**
+ * @hidden
+ */
+export interface GroupedFiles {
+    [uid: string]: Array<UploadFileInfo>;
+}

package/dist/esm/interfaces/FileGroup.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/UploadActionsLayout.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Lists the possible layout of the Upload action buttons.
+ */
+export declare type UploadActionsLayout = 'start' | 'center' | 'end' | 'stretched';

package/dist/esm/interfaces/UploadActionsLayout.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/UploadAdditionalData.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Represents the additional data that is sent as a key-value pair.
+ */
+export interface UploadAdditionalData {
+    [name: string]: any;
+}

package/dist/esm/interfaces/UploadAdditionalData.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/UploadAsyncProps.d.ts

@@ -0,0 +1,82 @@
+import { UploadHttpHeaders } from './UploadHttpHeaders';
+import { UploadFileInfo } from '../main';
+/**
+ * Represents the async properties of the Upload component.
+ */
+export interface UploadAsyncProps {
+    /**
+     * By default, the selected files are immediately uploaded.
+     * To change this behavior, set `autoUpload` to `false`.
+     */
+    autoUpload?: boolean;
+    /**
+     * When enabled, all files in the selection are uploaded in one request.
+     * Any files that are selected one after the other are uploaded in separate requests.
+     */
+    batch?: boolean;
+    /**
+     * Configures whether credentials (cookies, headers) will be sent for cross-site requests.
+     * Defaults to `true`. Setting `withCredentials` has no effect on same-site requests.
+     * To add credentials to the request, use the `saveHeaders` or `removeHeaders` property.
+     */
+    withCredentials?: boolean;
+    /**
+     * Sets the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key which
+     * contains the files submitted to `saveUrl`. Defaults to `files`.
+     */
+    saveField?: string;
+    /**
+     * Configures the `HttpHeaders` that are attached to each upload request.
+     */
+    saveHeaders?: UploadHttpHeaders;
+    /**
+     * Sets the [`request`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) method of the upload request.
+     * Defaults to `POST`.
+     */
+    saveMethod?: string;
+    /**
+     * Sets the URL of the endpoint for the upload request.
+     * The requested [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key is named after
+     * the `saveField` property and contains the list of files that will be uploaded.
+     */
+    saveUrl?: string | ((files: UploadFileInfo[], options: {
+        formData: FormData;
+        requestOptions: any;
+    }, onProgress: (uid: string, event: ProgressEvent) => void) => Promise<{
+        uid: string;
+    }>);
+    /**
+     * Sets the expected [response type](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType)
+     * of the server.
+     * Used to parse the response appropriately.
+     * Defaults to `json`.
+     */
+    responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+    /**
+     * Sets the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key
+     * which contains the list of file names that are submitted to `removeUrl`.
+     * Defaults to `fileNames`.
+     */
+    removeField?: string;
+    /**
+     * Configures the `HttpHeaders` that are attached to each `remove` request.
+     */
+    removeHeaders?: UploadHttpHeaders;
+    /**
+     * Sets the [request method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) of the `remove` request.
+     * Defaults to `POST`.
+     */
+    removeMethod?: string;
+    /**
+     * Sets the URL of the endpoint for the `remove` request.
+     * The [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) request
+     * key is named after the `removeField` property.
+     * It contains the list of file names which will be removed.
+     */
+    removeUrl?: string | ((files: UploadFileInfo[], options: {
+        formData: FormData;
+        requestOptions: any;
+    }) => Promise<{
+        uid: string;
+    }>);
+}

package/dist/esm/interfaces/UploadAsyncProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/UploadFileInfo.d.ts

@@ -0,0 +1,41 @@
+import { UploadFileStatus } from './UploadFileStatus';
+/**
+ * Contains information which is related to the selected file.
+ */
+export interface UploadFileInfo {
+    /**
+     * The unique identifier of the group (batch) with one or more files.
+     * Has to be set for the initial list of files.
+     */
+    uid: string;
+    /**
+     * The file name.
+     */
+    name: string;
+    /**
+     * The file extension including the leading dot—for example, `.jpg`, `.png`, or other.
+     */
+    extension?: string;
+    /**
+     * The file size in bytes.
+     */
+    size?: number;
+    /**
+     * A list which contains the validation errors (if any).
+     */
+    validationErrors?: Array<string>;
+    /**
+     * The current state of the file&mdash;`Failed`, `Selected`, `Uploaded`, or `Uploading`.
+     * `Initial` is a special value for `FileState` and is
+     * automatically applied to initial files without you having to explicitly set their state.
+     */
+    status: UploadFileStatus;
+    /**
+     * The current upload progress.
+     */
+    progress: number;
+    /**
+     * Gets the raw file instance.
+     */
+    getRawFile?: () => File;
+}

package/dist/esm/interfaces/UploadFileInfo.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/UploadFileRestrictions.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Configures the restrictions for the files that can be uploaded.
+ */
+export interface UploadFileRestrictions {
+    /**
+     * The list of the allowed file extensions.
+     * Recognizes entries of both `.type` (for example, `.docx`, `.png`, `.svg`, `.xls`, and others)
+     * and `type` (for example, `docx`, `png`, `svg`, `xls`, and others) values.
+     */
+    allowedExtensions?: Array<string>;
+    /**
+     * Defines the maximum file size in bytes.
+     */
+    maxFileSize?: number;
+    /**
+     * Defines the minimum file size in bytes.
+     */
+    minFileSize?: number;
+}

package/dist/esm/interfaces/UploadFileRestrictions.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/UploadFileStatus.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Lists the possible states of a file.
+ */
+export declare enum UploadFileStatus {
+    /**
+     * Indicates that the file upload process has failed.
+     */
+    UploadFailed = 0,
+    /**
+     * An initially selected fake file without a set state.
+     */
+    Initial = 1,
+    /**
+     * The file is selected.
+     */
+    Selected = 2,
+    /**
+     * The file is in the process of uploading.
+     */
+    Uploading = 3,
+    /**
+     * The file is successfully uploaded.
+     */
+    Uploaded = 4,
+    /**
+     * The remove process has failed.
+     */
+    RemoveFailed = 5,
+    /**
+     * The file is in the process of removing.
+     */
+    Removing = 6
+}