@vaadin/upload 24.0.0-alpha1 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,16 +36,16 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/progress-bar": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/button": "24.0.0-alpha10",
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/progress-bar": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/form-layout": "24.0.0-alpha1",
+    "@vaadin/form-layout": "24.0.0-alpha10",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

package/src/vaadin-upload-file-list.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-upload-file.js';
+import { html as legacyHtml, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, render } from 'lit';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-upload>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes FocusMixin
+ * @private
+ */
+class UploadFileList extends ThemableMixin(PolymerElement) {
+  static get is() {
+    return 'vaadin-upload-file-list';
+  }
+
+  static get template() {
+    return legacyHtml`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        [part='list'] {
+          padding: 0;
+          margin: 0;
+          list-style-type: none;
+        }
+      </style>
+      <ul part="list">
+        <slot></slot>
+      </ul>
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The array of files being processed, or already uploaded.
+       */
+      items: {
+        type: Array,
+      },
+
+      /**
+       * The object used to localize upload files.
+       */
+      i18n: {
+        type: Object,
+      },
+    };
+  }
+
+  static get observers() {
+    return ['__updateItems(items, i18n)'];
+  }
+
+  /** @private */
+  __updateItems(items, i18n) {
+    if (items && i18n) {
+      this.requestContentUpdate();
+    }
+  }
+
+  /**
+   * Requests an update for the `vaadin-upload-file` elements.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate() {
+    const { items, i18n } = this;
+
+    render(
+      html`
+        ${items.map(
+          (file) => html`
+            <li>
+              <vaadin-upload-file
+                .file="${file}"
+                .complete="${file.complete}"
+                .errorMessage="${file.error}"
+                .fileName="${file.name}"
+                .held="${file.held}"
+                .indeterminate="${file.indeterminate}"
+                .progress="${file.progress}"
+                .status="${file.status}"
+                .uploading="${file.uploading}"
+                .i18n="${i18n}"
+              ></vaadin-upload-file>
+            </li>
+          `,
+        )}
+      `,
+      this,
+    );
+  }
+}
+
+customElements.define(UploadFileList.is, UploadFileList);
+
+export { UploadFileList };

package/src/vaadin-upload-file.js

@@ -1,12 +1,14 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/progress-bar/src/vaadin-progress-bar.js';
 import './vaadin-upload-icons.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -30,7 +32,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `start-button`   | Start file upload button
  * `retry-button`   | Retry file upload button
  * `remove-button`  | Remove file button
- * `progress`       | Progress bar
  *
  * The following state attributes are available for styling:
  *
@@ -46,10 +47,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes FocusMixin
  * @mixes ThemableMixin
  */
-class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
+class UploadFile extends FocusMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -71,17 +73,22 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
           border: none;
           box-shadow: none;
         }
+
+        :host([complete]) ::slotted([slot='progress']),
+        :host([error]) ::slotted([slot='progress']) {
+          display: none !important;
+        }
       </style>
 
       <div part="row">
         <div part="info">
-          <div part="done-icon" hidden$="[[!file.complete]]" aria-hidden="true"></div>
-          <div part="warning-icon" hidden$="[[!file.error]]" aria-hidden="true"></div>
+          <div part="done-icon" hidden$="[[!complete]]" aria-hidden="true"></div>
+          <div part="warning-icon" hidden$="[[!errorMessage]]" aria-hidden="true"></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 part="name" id="name">[[fileName]]</div>
+            <div part="status" hidden$="[[!status]]" id="status">[[status]]</div>
+            <div part="error" id="error" hidden$="[[!errorMessage]]">[[errorMessage]]</div>
           </div>
         </div>
         <div part="commands">
@@ -90,7 +97,7 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
             part="start-button"
             file-event="file-start"
             on-click="_fireFileEvent"
-            hidden$="[[!file.held]]"
+            hidden$="[[!held]]"
             aria-label$="[[i18n.file.start]]"
             aria-describedby="name"
           ></button>
@@ -99,7 +106,7 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
             part="retry-button"
             file-event="file-retry"
             on-click="_fireFileEvent"
-            hidden$="[[!file.error]]"
+            hidden$="[[!errorMessage]]"
             aria-label$="[[i18n.file.retry]]"
             aria-describedby="name"
           ></button>
@@ -114,15 +121,7 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
         </div>
       </div>
 
-      <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>
+      <slot name="progress"></slot>
     `;
   }
 
@@ -132,9 +131,75 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
 
   static get properties() {
     return {
-      file: Object,
+      /**
+       * True if uploading is completed, false otherwise.
+       */
+      complete: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
+
+      /**
+       * Error message returned by the server, if any.
+       */
+      errorMessage: {
+        type: String,
+        value: '',
+        observer: '_errorMessageChanged',
+      },
+
+      /**
+       * The object representing a file.
+       */
+      file: {
+        type: Object,
+      },
+
+      /**
+       * Name of the uploading file.
+       */
+      fileName: {
+        type: String,
+      },
 
-      i18n: Object,
+      /**
+       * True if uploading is not started, false otherwise.
+       */
+      held: {
+        type: Boolean,
+        value: false,
+      },
+
+      /**
+       * True if remaining time is unknown, false otherwise.
+       */
+      indeterminate: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
+
+      /**
+       * The object used to localize this component.
+       */
+      i18n: {
+        type: Object,
+      },
+
+      /**
+       * Number representing the uploading progress.
+       */
+      progress: {
+        type: Number,
+      },
+
+      /**
+       * Uploading status.
+       */
+      status: {
+        type: String,
+      },
 
       /**
        * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
@@ -145,23 +210,39 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
         value: 0,
         reflectToAttribute: true,
       },
+
+      /**
+       * True if uploading is in progress, false otherwise.
+       */
+      uploading: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
+
+      /** @private */
+      _progress: {
+        type: Object,
+      },
     };
   }
 
   static get observers() {
-    return [
-      '_fileAborted(file.abort)',
-      '_toggleHostAttribute(file.error, "error")',
-      '_toggleHostAttribute(file.indeterminate, "indeterminate")',
-      '_toggleHostAttribute(file.uploading, "uploading")',
-      '_toggleHostAttribute(file.complete, "complete")',
-    ];
+    return ['__updateProgress(_progress, progress, indeterminate)'];
   }
 
   /** @protected */
   ready() {
     super.ready();
 
+    this.addController(
+      new SlotController(this, 'progress', 'vaadin-progress-bar', {
+        initializer: (progress) => {
+          this._progress = progress;
+        },
+      }),
+    );
+
     // Handle moving focus to the button on Tab.
     this.shadowRoot.addEventListener('focusin', (e) => {
       const target = e.composedPath()[0];
@@ -191,26 +272,16 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  _fileAborted(abort) {
-    if (abort) {
-      this._remove();
-    }
-  }
-
-  /** @private */
-  _remove() {
-    this.dispatchEvent(
-      new CustomEvent('file-remove', {
-        detail: { file: this.file },
-        bubbles: true,
-        composed: true,
-      }),
-    );
+  _errorMessageChanged(errorMessage) {
+    this.toggleAttribute('error', Boolean(errorMessage));
   }
 
   /** @private */
-  _formatProgressValue(progress) {
-    return progress / 100;
+  __updateProgress(progress, value, indeterminate) {
+    if (progress) {
+      progress.value = isNaN(value) ? 0 : value / 100;
+      progress.indeterminate = indeterminate;
+    }
   }
 
   /** @private */
@@ -225,19 +296,6 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
     );
   }
 
-  /** @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.
@@ -258,23 +316,12 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
 
   /**
    * 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.
+   * will abort the upload in progress, and then remove the file from the list.
    *
    * @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(UploadFile.is, UploadFile);

package/src/vaadin-upload-icon.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-upload>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @private
+ */
+class UploadIcon extends ThemableMixin(PolymerElement) {
+  static get is() {
+    return 'vaadin-upload-icon';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+    `;
+  }
+}
+
+customElements.define(UploadIcon.is, UploadIcon);
+
+export { UploadIcon };

package/src/vaadin-upload-icons.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 const template = document.createElement('template');

package/src/vaadin-upload.d.ts

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -180,13 +181,10 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ---|---
- * `primary-buttons` | Upload container
- * `upload-button` | Upload button
- * `drop-label` | Label for drop indicator
- * `drop-label-icon` | Icon for drop indicator
- * `file-list` | File list container
+ * Part name          | Description
+ * -------------------|-------------------------------------
+ * `primary-buttons`  | Upload container
+ * `drop-label`       | Element wrapping drop label and icon
  *
  * The following state attributes are available for styling:
  *
@@ -212,7 +210,7 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
  * @fires {CustomEvent} upload-retry - Fired when retry upload is requested.
  * @fires {CustomEvent} upload-abort - Fired when upload abort is requested.
  */
-declare class Upload extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class Upload extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))) {
   /**
    * Define whether the element supports dropping files on it for uploading.
    * By default it's enabled in desktop and disabled in touch devices