@vaadin/upload 25.1.0-beta1 → 25.1.0-beta3

package/src/styles/vaadin-upload-file-base-styles.js

@@ -28,23 +28,20 @@ export const uploadFileStyles = [
       display: none;
     }
 
-    /* Hide thumbnail by default, only show with thumbnails theme */
     [part='thumbnail'],
     [part='loader'] {
       display: none;
       grid-column: 1;
     }
 
-    [part='thumbnail'] {
-      object-fit: cover;
-    }
-
+    :host([uploading]) [part='loader'],
     [part='done-icon']:not([hidden]),
     [part='warning-icon']:not([hidden]) {
       display: flex;
       grid-column: 1;
     }
 
+    [part='loader']::before,
     [part='done-icon']::before,
     [part='warning-icon']::before {
       content: '\\2003' / '';
@@ -55,6 +52,10 @@ export const uploadFileStyles = [
       width: var(--vaadin-icon-size, 1lh);
     }
 
+    [part='loader']::before {
+      margin: calc(var(--vaadin-spinner-width, 2px) * -1);
+    }
+
     :is([part$='icon'], [part$='button'])::before {
       mask-size: var(--vaadin-icon-visual-size, 100%);
       mask-position: 50%;
@@ -163,48 +164,65 @@ export const uploadFileStyles = [
     /* THUMBNAILS VARIANT */
 
     :host([theme~='thumbnails']) {
-      --_prefix-area-size: 2rem;
-
-      grid-template-columns: var(--_prefix-area-size) minmax(0, 1fr) auto;
-      grid-auto-columns: auto;
-      grid-template-rows: auto;
-      position: relative;
+      grid-template-columns: max-content 1fr max-content;
       align-items: center;
       background: var(--vaadin-background-container);
-      gap: var(--vaadin-gap-s);
+      padding: 0;
+      contain: content;
+
+      & [part] {
+        grid-row: 1;
+      }
 
       & [part='thumbnail'],
-      & [part='done-icon'],
-      & [part='warning-icon'] {
-        width: 100%;
-        aspect-ratio: 1 / 1;
+      & [part$='icon'] {
+        grid-column: 1;
+        align-self: stretch;
+        display: flex;
         align-items: center;
         justify-content: center;
-        grid-column: 1;
+        transition: 0.2s opacity linear;
+        background: var(--vaadin-background-container-strong);
+        padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
+        contain: content;
+
+        &[hidden] {
+          opacity: 0;
+        }
+      }
+
+      & [part='thumbnail'] > img {
+        object-fit: cover;
+        position: absolute;
+        width: 100%;
+        height: 100%;
       }
 
       & [part='loader']:not([hidden]) {
+        place-self: center;
         display: flex;
-        align-self: stretch;
-        aspect-ratio: 1 / 1;
       }
 
-      & [part='done-icon'] {
-        display: none;
-
-        &::before {
-          content: '';
-          width: var(--vaadin-icon-size, 1lh);
-          height: var(--vaadin-icon-size, 1lh);
-          /* TODO: Replace with vaadin file icon, once it exists. */
-          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
-          mask-size: contain;
-          background: currentColor;
-        }
+      & [part='done-icon']::before {
+        background: var(--vaadin-upload-file-done-color, currentColor);
+        mask-image: var(--_vaadin-icon-file);
       }
 
-      & [part='status'],
-      & [part='error'] {
+      & [part='meta'] {
+        padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
+        padding-inline: 0;
+      }
+
+      & [part='name'] {
+        word-break: break-all;
+      }
+
+      & [part='commands'] {
+        padding: var(--vaadin-upload-padding, var(--vaadin-padding-s));
+        padding-inline-start: 0;
+      }
+
+      & [part='status'] {
         clip-path: inset(50%);
         width: 1px;
         height: 1px;
@@ -214,30 +232,34 @@ export const uploadFileStyles = [
         white-space: nowrap;
       }
 
+      & [part='error'] {
+        font-size: 0.875em;
+        line-height: 1.25;
+      }
+
       & ::slotted([slot='progress']) {
-        clip-path: inset(50%);
-        margin: 0;
-        overflow: hidden;
+        grid-row: auto;
+        grid-column: auto;
         position: absolute;
+        inset: 0;
+        opacity: 0.3;
+        pointer-events: none;
+        --vaadin-progress-bar-height: auto;
+        --vaadin-progress-bar-border-width: 0px;
+        --vaadin-progress-bar-border-radius: 0px;
+        --vaadin-progress-bar-background: transparent;
       }
-    }
-
-    :host([theme~='thumbnails'][complete]) {
-      & [part='thumbnail'] {
-        &:not([hidden]) {
-          display: block;
-
-          & + [part='done-icon'] {
-            display: none;
-          }
-        }
 
-        &[hidden] + [part='done-icon'] {
-          display: flex;
-        }
+      & ::slotted([slot='progress'][indeterminate]) {
+        opacity: 0;
       }
     }
 
+    :host([theme~='thumbnails']:not([complete])) [part='thumbnail'],
+    :host([theme~='thumbnails'][complete]) [part='thumbnail']:not([hidden]) + [part='done-icon'] {
+      display: none;
+    }
+
     /* TODO: queued state styles (no attribute makes this difficult to target) */
 
     @media (forced-colors: active) {

package/src/vaadin-upload-button.js

@@ -101,7 +101,6 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
 
       /**
        * Capture attribute for mobile file input.
-       * @type {string}
        */
       capture: {
         type: String,
@@ -109,7 +108,6 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
 
       /**
        * True when max files has been reached on the manager.
-       * @type {boolean}
        */
       maxFilesReached: {
         type: Boolean,

package/src/vaadin-upload-drop-zone.js

@@ -81,7 +81,6 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
       /**
        * Whether the drop zone is disabled.
        * Returns true if either explicitly disabled, manager is disabled, or no manager is set.
-       * @type {boolean}
        */
       disabled: {
         type: Boolean,
@@ -90,7 +89,6 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
 
       /**
        * True when max files has been reached on the manager.
-       * @type {boolean}
        * @readonly
        */
       maxFilesReached: {

package/src/vaadin-upload-file.d.ts

@@ -96,6 +96,10 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
  * `--vaadin-upload-file-warning-color`         |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @fires {CustomEvent} file-abort - Fired when the abort button is pressed.
+ * @fires {CustomEvent} file-retry - Fired when the retry button is pressed.
+ * @fires {CustomEvent} file-start - Fired when the start button is pressed.
  */
 declare class UploadFile extends UploadFileMixin(ThemableMixin(HTMLElement)) {
   addEventListener<K extends keyof UploadFileEventMap>(

package/src/vaadin-upload-file.js

@@ -77,6 +77,10 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @fires {CustomEvent} file-abort - Fired when the abort button is pressed.
+ * @fires {CustomEvent} file-retry - Fired when the retry button is pressed.
+ * @fires {CustomEvent} file-start - Fired when the start button is pressed.
+ *
  * @customElement vaadin-upload-file
  * @extends HTMLElement
  * @mixes UploadFileMixin
@@ -102,7 +106,12 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
 
     return html`
       <div part="loader" ?hidden="${!this.uploading}" aria-hidden="true"></div>
-      <img src="${this.__thumbnail}" alt="${this.fileName}" part="thumbnail" ?hidden="${!this.__thumbnail}" />
+
+      ${this.__thumbnail
+        ? html`<div part="thumbnail">
+            <img src="${this.__thumbnail}" alt="${this.fileName}" />
+          </div>`
+        : nothing}
 
       <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
       <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>

package/src/vaadin-upload-mixin.d.ts

@@ -273,7 +273,6 @@ export declare class UploadMixinClass {
    * }
    * ```
    *
-   * @type {!UploadI18n}
    * @default {English}
    */
   i18n: UploadI18n;

package/src/vaadin-upload-mixin.js

@@ -114,7 +114,6 @@ export const UploadMixin = (superClass) =>
       return {
         /**
          * If true, the user cannot interact with this element.
-         * @type {boolean}
          */
         disabled: {
           type: Boolean,
@@ -129,7 +128,6 @@ export const UploadMixin = (superClass) =>
          * it false means that drop is enabled even in touch-devices, and true
          * disables drop in all devices.
          *
-         * @type {boolean}
          * @default true in touch-devices, false otherwise.
          */
         nodrop: {
@@ -141,7 +139,6 @@ export const UploadMixin = (superClass) =>
         /**
          * The server URL. The default value is an empty string, which means that
          * _window.location_ will be used.
-         * @type {string}
          */
         target: {
           type: String,
@@ -150,7 +147,6 @@ export const UploadMixin = (superClass) =>
 
         /**
          * HTTP Method used to send the files. Only POST and PUT are allowed.
-         * @type {!UploadMethod}
          */
         method: {
           type: String,
@@ -173,7 +169,6 @@ export const UploadMixin = (superClass) =>
         /**
          * Max time in milliseconds for the entire upload process, if exceeded the
          * request will be aborted. Zero means that there is no timeout.
-         * @type {number}
          */
         timeout: {
           type: Number,
@@ -221,7 +216,6 @@ export const UploadMixin = (superClass) =>
          * Limit of files to upload, by default it is unlimited. If the value is
          * set to one, native file browser will prevent selecting multiple files.
          * @attr {number} max-files
-         * @type {number}
          */
         maxFiles: {
           type: Number,
@@ -232,7 +226,6 @@ export const UploadMixin = (superClass) =>
         /**
          * Specifies if the maximum number of files have been uploaded
          * @attr {boolean} max-files-reached
-         * @type {boolean}
          */
         maxFilesReached: {
           type: Boolean,
@@ -249,7 +242,6 @@ export const UploadMixin = (superClass) =>
          * Notice that MIME types are widely supported, while file extensions
          * are only implemented in certain browsers, so avoid using it.
          * Example: accept="video/*,image/tiff" or accept=".pdf,audio/mp3"
-         * @type {string}
          */
         accept: {
           type: String,
@@ -262,7 +254,6 @@ export const UploadMixin = (superClass) =>
          * sending the request. Obviously you need to do the same validation in
          * the server-side and be sure that they are aligned.
          * @attr {number} max-file-size
-         * @type {number}
          */
         maxFileSize: {
           type: Number,
@@ -284,7 +275,6 @@ export const UploadMixin = (superClass) =>
          * Specifies the 'name' property at Content-Disposition for multipart uploads.
          * This property is ignored when uploadFormat is 'raw'.
          * @attr {string} form-data-name
-         * @type {string}
          */
         formDataName: {
           type: String,
@@ -295,7 +285,6 @@ export const UploadMixin = (superClass) =>
          * Prevents upload(s) from immediately uploading upon adding file(s).
          * When set, you must manually trigger uploads using the `uploadFiles` method
          * @attr {boolean} no-auto
-         * @type {boolean}
          */
         noAuto: {
           type: Boolean,
@@ -305,7 +294,6 @@ export const UploadMixin = (superClass) =>
         /**
          * Set the withCredentials flag on the request.
          * @attr {boolean} with-credentials
-         * @type {boolean}
          */
         withCredentials: {
           type: Boolean,
@@ -317,7 +305,6 @@ export const UploadMixin = (superClass) =>
          * - 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default)
          * - 'multipart': Send file using multipart/form-data encoding
          * @attr {string} upload-format
-         * @type {string}
          */
         uploadFormat: {
           type: String,
@@ -330,7 +317,6 @@ export const UploadMixin = (superClass) =>
          * uploading large numbers of files. Files exceeding this limit will be queued
          * and uploaded as active uploads complete.
          * @attr {number} max-concurrent-uploads
-         * @type {number}
          */
         maxConcurrentUploads: {
           type: Number,
@@ -342,7 +328,9 @@ export const UploadMixin = (superClass) =>
          * Pass-through to input's capture attribute. Allows user to trigger device inputs
          * such as camera or microphone immediately.
          */
-        capture: String,
+        capture: {
+          type: String,
+        },
 
         /** @private */
         _addButton: {
@@ -443,7 +431,7 @@ export const UploadMixin = (superClass) =>
      *   }
      * }
      * ```
-     * @return {!UploadI18n}
+     * @type {!UploadI18n}
      */
     get i18n() {
       return super.i18n;

package/src/vaadin-upload.d.ts

@@ -77,6 +77,11 @@ export type UploadRetryEvent = UploadEvent<{ xhr: XMLHttpRequest; file: UploadFi
  */
 export type UploadAbortEvent = UploadEvent<{ xhr: XMLHttpRequest; file: UploadFile }>;
 
+/**
+ * Fired when a file is removed from the list.
+ */
+export type UploadFileRemoveEvent = UploadEvent<{ 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
@@ -94,6 +99,8 @@ export type UploadRequestEvent = UploadEvent<{
 export interface UploadCustomEventMap {
   'file-reject': UploadFileRejectEvent;
 
+  'file-remove': UploadFileRemoveEvent;
+
   'files-changed': UploadFilesChangedEvent;
 
   'max-files-reached-changed': UploadMaxFilesReachedChangedEvent;
@@ -191,6 +198,7 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} file-reject - Fired when a file cannot be added to the queue due to a constrain.
+ * @fires {CustomEvent} file-remove - Fired when a file is removed from the list.
  * @fires {CustomEvent} files-changed - Fired when the `files` property changes.
  * @fires {CustomEvent} max-files-reached-changed - Fired when the `maxFilesReached` property changes.
  * @fires {CustomEvent} upload-before - Fired before the XHR is opened.

package/src/vaadin-upload.js

@@ -89,6 +89,7 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} file-reject - Fired when a file cannot be added to the queue due to a constrain.
+ * @fires {CustomEvent} file-remove - Fired when a file is removed from the list.
  * @fires {CustomEvent} files-changed - Fired when the `files` property changes.
  * @fires {CustomEvent} max-files-reached-changed - Fired when the `maxFilesReached` property changes.
  * @fires {CustomEvent} upload-before - Fired before the XHR is opened.