@vaadin/vaadin-upload 22.0.0-alpha6 → 22.0.0-beta1

package/theme/lumo/vaadin-upload.js

@@ -1,2 +1 @@
-import './vaadin-upload-styles.js';
-import '../../src/vaadin-upload.js';
+import '@vaadin/upload/theme/lumo/vaadin-upload.js';

package/theme/material/vaadin-upload.js

@@ -1,2 +1 @@
-import './vaadin-upload-styles.js';
-import '../../src/vaadin-upload.js';
+import '@vaadin/upload/theme/material/vaadin-upload.js';

package/vaadin-upload.d.ts

@@ -1,2 +1 @@
 export * from './src/vaadin-upload.js';
-export * from './src/interfaces';

package/src/interfaces.d.ts

@@ -1,161 +0,0 @@
-export interface UploadFile extends File {
-  uploadTarget: string;
-  elapsed: number;
-  elapsedStr: string;
-  remaining: number;
-  remainingStr: string;
-  progress: number;
-  speed: number;
-  totalStr: string;
-  loaded: number;
-  loadedStr: string;
-  status: string;
-  error: string;
-  abort?: boolean;
-  complete?: boolean;
-  uploading?: boolean;
-}
-
-export interface UploadI18n {
-  dropFiles: {
-    one: string;
-    many: string;
-  };
-  addFiles: {
-    one: string;
-    many: string;
-  };
-  cancel: string;
-  error: {
-    tooManyFiles: string;
-    fileIsTooBig: string;
-    incorrectFileType: string;
-  };
-  uploading: {
-    status: {
-      connecting: string;
-      stalled: string;
-      processing: string;
-      held: string;
-    };
-    remainingTime: {
-      prefix: string;
-      unknown: string;
-    };
-    error: {
-      serverUnavailable: string;
-      unexpectedServerError: string;
-      forbidden: string;
-    };
-  };
-  units: {
-    size: string[];
-    sizeBase?: number;
-  };
-  formatSize?: (bytes: number) => string;
-  formatTime?: (seconds: number, units: number[]) => string;
-}
-
-export type UploadMethod = 'POST' | 'PUT';
-
-/**
- * Fired when a file cannot be added to the queue due to a constrain:
- * file-size, file-type or maxFiles
- */
-export type UploadFileRejectEvent = CustomEvent<{ file: UploadFile; error: string }>;
-
-/**
- * Fired when the `files` property changes.
- */
-export type UploadFilesChangedEvent = CustomEvent<{ value: UploadFile[] }>;
-
-/**
- * Fired when the `max-files-reached` property changes.
- */
-export type UploadMaxFilesReachedChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired before the XHR is opened. Could be used for changing the request
- * URL. If the default is prevented, then XHR would not be opened.
- */
-export type UploadBeforeEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
-
-/**
- * Fired when the XHR is sent.
- */
-export type UploadStartEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
-
-/**
- * Fired as many times as the progress is updated.
- */
-export type UploadProgressEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
-
-/**
- * Fired in case the upload process succeeded.
- */
-export type UploadSuccessEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
-
-/**
- * Fired in case the upload process failed.
- */
-export type UploadErrorEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
-
-/**
- * Fired when we have the actual server response, and before the component
- * analyses it. It's useful for developers to make the upload fail depending
- * on the server response. If the event is defaultPrevented the vaadin-upload
- * will return allowing the user to do something on his own like retry the
- * upload, etc. since he has full access to the `xhr` and `file` objects.
- * Otherwise, if the event is not prevented default `vaadin-upload` continues
- * with the normal workflow checking the `xhr.status` and `file.error`
- * which also might be modified by the user to force a customized response,
- */
-export type UploadResponseEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
-
-/**
- * Fired when retry upload is requested. If the default is prevented, then
- * retry would not be performed.
- */
-export type UploadRetryEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
-
-/**
- * Fired when upload abort is requested. If the default is prevented, then the
- * file upload would not be aborted.
- */
-export type UploadAbortEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
-
-/**
- * Fired when the XHR has been opened but not sent yet. Useful for appending
- * data keys to the FormData object, for changing some parameters like
- * headers, etc. If the event is defaultPrevented, `vaadin-upload` will not
- * send the request allowing the user to do something on his own.
- */
-export type UploadRequestEvent = CustomEvent<{ xhr: XMLHttpRequest; file: UploadFile; formData: FormData }>;
-
-export interface UploadElementEventMap {
-  'file-reject': UploadFileRejectEvent;
-
-  'files-changed': UploadFilesChangedEvent;
-
-  'max-files-reached-changed': UploadMaxFilesReachedChangedEvent;
-
-  'upload-before': UploadBeforeEvent;
-
-  'upload-start': UploadStartEvent;
-
-  'upload-progress': UploadProgressEvent;
-
-  'upload-response': UploadResponseEvent;
-
-  'upload-success': UploadSuccessEvent;
-
-  'upload-error': UploadErrorEvent;
-
-  'upload-retry': UploadRetryEvent;
-
-  'upload-abort': UploadAbortEvent;
-
-  'upload-request': UploadRequestEvent;
-}
-
-export interface UploadEventMap extends HTMLElementEventMap, UploadElementEventMap {}

package/src/vaadin-upload-file.js

@@ -1,235 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import '@vaadin/vaadin-progress-bar/src/vaadin-progress-bar.js';
-import './vaadin-upload-icons.js';
-
-/**
- * `<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ---|---
- * `row` | File container
- * `info` | Container for file status icon, file name, status and error messages
- * `done-icon` | File done status icon
- * `warning-icon` | File warning status icon
- * `meta` | Container for file name, status and error messages
- * `name` | File name
- * `error` | Error message, shown when error happens
- * `status` | Status message
- * `commands` | Container for file command icons
- * `start-button` | Start file upload button
- * `retry-button` | Retry file upload button
- * `clear-button` | Clear file button
- * `progress`| Progress bar
- *
- * The following state attributes are available for styling:
- *
- * Attribute | Description | Part name
- * ---|---|---
- * `error` | An error has happened during uploading | `:host`
- * `indeterminate` | Uploading is in progress, but the progress value is unknown | `:host`
- * `uploading` | Uploading is in progress | `:host`
- * `complete` | Uploading has finished successfully | `:host`
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * @mixes ThemableMixin
- */
-class UploadFileElement extends ThemableMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        [hidden] {
-          display: none;
-        }
-
-        [part='row'] {
-          list-style-type: none;
-        }
-
-        button {
-          background: transparent;
-          padding: 0;
-          border: none;
-          box-shadow: none;
-        }
-      </style>
-
-      <li part="row" tabindex="0">
-        <div part="info">
-          <div part="done-icon" hidden$="[[!file.complete]]"></div>
-          <div part="warning-icon" hidden$="[[!file.error]]"></div>
-
-          <div part="meta">
-            <div part="name" id="name">[[file.name]]</div>
-            <div part="status" hidden$="[[!file.status]]" id="status">[[file.status]]</div>
-            <div part="error" id="error" hidden$="[[!file.error]]">[[file.error]]</div>
-          </div>
-        </div>
-        <div part="commands">
-          <button
-            type="button"
-            part="start-button"
-            file-event="file-start"
-            on-click="_fireFileEvent"
-            hidden$="[[!file.held]]"
-            aria-label$="[[i18n.file.start]]"
-            aria-describedby="name"
-          ></button>
-          <button
-            type="button"
-            part="retry-button"
-            file-event="file-retry"
-            on-click="_fireFileEvent"
-            hidden$="[[!file.error]]"
-            aria-label$="[[i18n.file.retry]]"
-            aria-describedby="name"
-          ></button>
-          <button
-            type="button"
-            part="clear-button"
-            file-event="file-abort"
-            on-click="_fireFileEvent"
-            aria-label$="[[i18n.file.clear]]"
-            aria-describedby="name"
-          ></button>
-        </div>
-      </li>
-
-      <vaadin-progress-bar
-        part="progress"
-        id="progress"
-        value$="[[_formatProgressValue(file.progress)]]"
-        error$="[[file.error]]"
-        indeterminate$="[[file.indeterminate]]"
-        uploading$="[[file.uploading]]"
-        complete$="[[file.complete]]"
-      ></vaadin-progress-bar>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-upload-file';
-  }
-
-  static get properties() {
-    return {
-      file: Object,
-
-      i18n: Object
-    };
-  }
-
-  static get observers() {
-    return [
-      '_fileAborted(file.abort)',
-      '_toggleHostAttribute(file.error, "error")',
-      '_toggleHostAttribute(file.indeterminate, "indeterminate")',
-      '_toggleHostAttribute(file.uploading, "uploading")',
-      '_toggleHostAttribute(file.complete, "complete")'
-    ];
-  }
-
-  /** @private */
-  _fileAborted(abort) {
-    if (abort) {
-      this._remove();
-    }
-  }
-
-  /** @private */
-  _remove() {
-    this.dispatchEvent(
-      new CustomEvent('file-remove', {
-        detail: { file: this.file },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-
-  /** @private */
-  _formatProgressValue(progress) {
-    return progress / 100;
-  }
-
-  /** @private */
-  _fireFileEvent(e) {
-    e.preventDefault();
-    return this.dispatchEvent(
-      new CustomEvent(e.target.getAttribute('file-event'), {
-        detail: { file: this.file },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-
-  /** @private */
-  _toggleHostAttribute(value, attributeName) {
-    const shouldHave = Boolean(value);
-    const has = this.hasAttribute(attributeName);
-    if (has !== shouldHave) {
-      if (shouldHave) {
-        this.setAttribute(attributeName, '');
-      } else {
-        this.removeAttribute(attributeName);
-      }
-    }
-  }
-
-  /**
-   * Fired when the retry button is pressed. It is listened by `vaadin-upload`
-   * which will start a new upload process of this file.
-   *
-   * @event file-retry
-   * @param {Object} detail
-   * @param {Object} detail.file file to retry upload of
-   */
-
-  /**
-   * Fired when the start button is pressed. It is listened by `vaadin-upload`
-   * which will start a new upload process of this file.
-   *
-   * @event file-start
-   * @param {Object} detail
-   * @param {Object} detail.file file to start upload of
-   */
-
-  /**
-   * Fired when abort button is pressed. It is listened by `vaadin-upload` which
-   * will abort the upload in progress, but will not remove the file from the list
-   * to allow the animation to hide the element to be run.
-   *
-   * @event file-abort
-   * @param {Object} detail
-   * @param {Object} detail.file file to abort upload of
-   */
-
-  /**
-   * Fired after the animation to hide the element has finished. It is listened
-   * by `vaadin-upload` which will actually remove the file from the upload
-   * file list.
-   *
-   * @event file-remove
-   * @param {Object} detail
-   * @param {Object} detail.file file to remove from the  upload of
-   */
-}
-
-customElements.define(UploadFileElement.is, UploadFileElement);
-
-export { UploadFileElement };

package/src/vaadin-upload-icons.js

@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = `
-  <style>
-    @font-face {
-      font-family: 'vaadin-upload-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-  </style>
-`;
-
-document.head.appendChild($_documentContainer.content);

package/theme/lumo/vaadin-upload-styles.js

@@ -1,178 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/vaadin-progress-bar/theme/lumo/vaadin-progress-bar.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-registerStyles(
-  'vaadin-upload',
-  css`
-    :host {
-      line-height: var(--lumo-line-height-m);
-    }
-
-    :host(:not([nodrop])) {
-      overflow: hidden;
-      border: 1px dashed var(--lumo-contrast-20pct);
-      border-radius: var(--lumo-border-radius-s);
-      padding: var(--lumo-space-m);
-      transition: background-color 0.6s, border-color 0.6s;
-    }
-
-    [part='primary-buttons'] > * {
-      display: inline-block;
-      white-space: nowrap;
-    }
-
-    [part='drop-label'] {
-      display: inline-block;
-      white-space: normal;
-      padding: 0 var(--lumo-space-s);
-      color: var(--lumo-secondary-text-color);
-      font-family: var(--lumo-font-family);
-    }
-
-    :host([dragover-valid]) {
-      border-color: var(--lumo-primary-color-50pct);
-      background: var(--lumo-primary-color-10pct);
-      transition: background-color 0.1s, border-color 0.1s;
-    }
-
-    :host([dragover-valid]) [part='drop-label'] {
-      color: var(--lumo-primary-text-color);
-    }
-
-    [part='drop-label-icon'] {
-      display: inline-block;
-    }
-
-    [part='drop-label-icon']::before {
-      content: var(--lumo-icons-upload);
-      font-family: lumo-icons;
-      font-size: var(--lumo-icon-size-m);
-      line-height: 1;
-      vertical-align: -0.25em;
-    }
-  `,
-  { moduleId: 'lumo-upload' }
-);
-
-const uploadFile = css`
-  :host {
-    padding: var(--lumo-space-s) 0;
-  }
-
-  :host(:not(:first-child)) {
-    border-top: 1px solid var(--lumo-contrast-10pct);
-  }
-
-  [part='row'] {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-  }
-
-  [part='status'],
-  [part='error'] {
-    color: var(--lumo-secondary-text-color);
-    font-size: var(--lumo-font-size-s);
-  }
-
-  [part='info'] {
-    display: flex;
-    align-items: baseline;
-    flex: auto;
-  }
-
-  [part='meta'] {
-    width: 0.001px;
-    flex: 1 1 auto;
-  }
-
-  [part='name'] {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  [part='commands'] {
-    display: flex;
-    align-items: baseline;
-    flex: none;
-  }
-
-  [part$='icon'] {
-    margin-right: var(--lumo-space-xs);
-    font-size: var(--lumo-icon-size-m);
-    font-family: 'lumo-icons';
-    line-height: 1;
-  }
-
-  /* When both icons are hidden, let us keep space for one */
-  [part='done-icon'][hidden] + [part='warning-icon'][hidden] {
-    display: block !important;
-    visibility: hidden;
-  }
-
-  [part$='button'] {
-    flex: none;
-    margin-left: var(--lumo-space-xs);
-    cursor: var(--lumo-clickable-cursor);
-  }
-
-  [part='row']:focus,
-  [part$='button']:focus {
-    outline: none;
-    border-radius: var(--lumo-border-radius-s);
-    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-  }
-
-  [part$='icon']::before,
-  [part$='button']::before {
-    vertical-align: -0.25em;
-  }
-
-  [part='done-icon']::before {
-    content: var(--lumo-icons-checkmark);
-    color: var(--lumo-primary-text-color);
-  }
-
-  [part='warning-icon']::before {
-    content: var(--lumo-icons-error);
-    color: var(--lumo-error-text-color);
-  }
-
-  [part='start-button']::before {
-    content: var(--lumo-icons-play);
-  }
-
-  [part='retry-button']::before {
-    content: var(--lumo-icons-reload);
-  }
-
-  [part='clear-button']::before {
-    content: var(--lumo-icons-cross);
-  }
-
-  [part='error'] {
-    color: var(--lumo-error-text-color);
-  }
-
-  [part='progress'] {
-    width: auto;
-    margin-left: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
-    margin-right: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
-  }
-
-  [part='progress'][complete],
-  [part='progress'][error] {
-    display: none;
-  }
-`;
-
-registerStyles('vaadin-upload-file', [fieldButton, uploadFile], { moduleId: 'lumo-upload-file' });