@vaadin/upload 25.1.0-alpha9 → 25.1.0-beta2

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

@@ -5,176 +5,267 @@
  */
 import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { loaderStyles } from '@vaadin/component-base/src/styles/loader-styles.js';
+
+export const uploadFileStyles = [
+  loaderStyles,
+  css`
+    :host {
+      align-items: baseline;
+      display: grid;
+      gap: var(--vaadin-upload-file-gap, var(--vaadin-gap-s));
+      grid-template-columns: var(--vaadin-icon-size, 1lh) minmax(0, 1fr) auto;
+      padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
+      border-radius: var(--vaadin-upload-file-border-radius, var(--vaadin-radius-m));
+    }
+
+    :host(:focus-visible) {
+      outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+      outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
+    }
+
+    [hidden] {
+      display: none;
+    }
+
+    [part='thumbnail'],
+    [part='loader'] {
+      display: none;
+      grid-column: 1;
+    }
+
+    :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' / '';
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+      height: var(--vaadin-icon-size, 1lh);
+      width: var(--vaadin-icon-size, 1lh);
+    }
+
+    [part='loader']::before {
+      margin: calc(var(--vaadin-spinner-width, 2px) * -1);
+    }
 
-export const uploadFileStyles = css`
-  :host {
-    align-items: baseline;
-    display: grid;
-    gap: var(--vaadin-upload-file-gap, var(--vaadin-gap-s));
-    grid-template-columns: var(--vaadin-icon-size, 1lh) minmax(0, 1fr) auto;
-    padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
-    border-radius: var(--vaadin-upload-file-border-radius, var(--vaadin-radius-m));
-  }
-
-  :host(:focus-visible) {
-    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
-    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
-  }
-
-  [hidden] {
-    display: none;
-  }
-
-  /* Hide thumbnail and file-icon by default, only show with thumbnails theme */
-  [part='thumbnail'],
-  [part='file-icon'] {
-    display: none;
-  }
-
-  :host([theme~='thumbnails']) {
-    grid-template-columns: 3rem minmax(0, 1fr) auto;
-  }
-
-  :host([theme~='thumbnails']) [part='thumbnail']:not([hidden]),
-  :host([theme~='thumbnails']) [part='file-icon']:not([hidden]) {
-    display: block;
-    width: 3rem;
-    height: 3rem;
-    align-self: center;
-  }
-
-  [part='thumbnail'] {
-    object-fit: cover;
-  }
-
-  [part='file-icon'] {
-    background: #e0e0e0;
-  }
-
-  [part='done-icon']:not([hidden]),
-  [part='warning-icon']:not([hidden]) {
-    display: flex;
-  }
-
-  :host([theme~='thumbnails']) [part='done-icon'],
-  :host([theme~='thumbnails']) [part='warning-icon'] {
-    display: none !important;
-  }
-
-  [part='done-icon']::before,
-  [part='warning-icon']::before {
-    content: '\\2003' / '';
-    display: inline-flex;
-    align-items: center;
-    flex: none;
-    height: var(--vaadin-icon-size, 1lh);
-    width: var(--vaadin-icon-size, 1lh);
-  }
-
-  :is([part$='icon'], [part$='button'])::before {
-    mask-size: var(--vaadin-icon-visual-size, 100%);
-    mask-position: 50%;
-    mask-repeat: no-repeat;
-  }
-
-  [part='done-icon']::before {
-    background: var(--vaadin-upload-file-done-color, currentColor);
-    mask-image: var(--_vaadin-icon-checkmark);
-  }
-
-  [part='warning-icon']::before {
-    background: var(--vaadin-upload-file-warning-color, currentColor);
-    mask-image: var(--_vaadin-icon-warn);
-  }
-
-  [part='meta'] {
-    grid-column: 2;
-  }
-
-  [part='name'] {
-    color: var(--vaadin-upload-file-name-color, var(--vaadin-text-color));
-    font-size: var(--vaadin-upload-file-name-font-size, inherit);
-    font-weight: var(--vaadin-upload-file-name-font-weight, inherit);
-    line-height: var(--vaadin-upload-file-name-line-height, inherit);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  [part='status'] {
-    color: var(--vaadin-upload-file-status-color, var(--vaadin-text-color-secondary));
-    font-size: var(--vaadin-upload-file-status-font-size, inherit);
-    font-weight: var(--vaadin-upload-file-status-font-weight, inherit);
-    line-height: var(--vaadin-upload-file-status-line-height, inherit);
-  }
-
-  [part='error'] {
-    color: var(--vaadin-upload-file-error-color, var(--vaadin-text-color));
-    font-size: var(--vaadin-upload-file-error-font-size, inherit);
-    font-weight: var(--vaadin-upload-file-error-font-weight, inherit);
-    line-height: var(--vaadin-upload-file-error-line-height, inherit);
-  }
-
-  [part='commands'] {
-    display: flex;
-    align-items: center;
-    gap: var(--vaadin-gap-xs);
-    height: var(--vaadin-icon-size, 1lh);
-    align-self: center;
-  }
-
-  button {
-    background: var(--vaadin-upload-file-button-background, transparent);
-    border: var(--vaadin-upload-file-button-border-width, 0) solid
-      var(--vaadin-upload-file-button-border-color, var(--vaadin-border-color-secondary));
-    border-radius: var(--vaadin-upload-file-button-border-radius, var(--vaadin-radius-m));
-    color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color));
-    cursor: var(--vaadin-clickable-cursor);
-    flex-shrink: 0;
-    font: inherit;
-    /* Ensure minimum click target (WCAG) */
-    padding: var(--vaadin-upload-file-button-padding, max(0px, (24px - var(--vaadin-icon-size, 1lh)) / 2));
-  }
-
-  button:focus-visible {
-    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
-  }
-
-  [part='start-button']::before,
-  [part='retry-button']::before,
-  [part='remove-button']::before {
-    background: currentColor;
-    content: '\\2003' / '';
-    display: flex;
-    align-items: center;
-    height: var(--vaadin-icon-size, 1lh);
-    width: var(--vaadin-icon-size, 1lh);
-  }
-
-  [part='start-button']::before {
-    mask-image: var(--_vaadin-icon-play);
-  }
-
-  [part='retry-button']::before {
-    mask-image: var(--_vaadin-icon-refresh);
-  }
-
-  [part='remove-button']::before {
-    mask-image: var(--_vaadin-icon-cross);
-  }
-
-  ::slotted([slot='progress']) {
-    grid-column: 2 / -1;
-    width: auto;
-  }
-
-  :host([complete]) ::slotted([slot='progress']),
-  :host([error]) ::slotted([slot='progress']) {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
     :is([part$='icon'], [part$='button'])::before {
-      background: CanvasText;
+      mask-size: var(--vaadin-icon-visual-size, 100%);
+      mask-position: 50%;
+      mask-repeat: no-repeat;
+    }
+
+    [part='done-icon']::before {
+      background: var(--vaadin-upload-file-done-color, currentColor);
+      mask-image: var(--_vaadin-icon-checkmark);
+    }
+
+    [part='warning-icon']::before {
+      background: var(--vaadin-upload-file-warning-color, currentColor);
+      mask-image: var(--_vaadin-icon-warn);
+    }
+
+    [part='meta'] {
+      grid-column: 2;
+
+      & > div {
+        cursor: inherit;
+      }
+    }
+
+    [part='name'] {
+      color: var(--vaadin-upload-file-name-color, var(--vaadin-text-color));
+      font-size: var(--vaadin-upload-file-name-font-size, inherit);
+      font-weight: var(--vaadin-upload-file-name-font-weight, inherit);
+      line-height: var(--vaadin-upload-file-name-line-height, inherit);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    [part='status'] {
+      color: var(--vaadin-upload-file-status-color, var(--vaadin-text-color-secondary));
+      font-size: var(--vaadin-upload-file-status-font-size, inherit);
+      font-weight: var(--vaadin-upload-file-status-font-weight, inherit);
+      line-height: var(--vaadin-upload-file-status-line-height, inherit);
+    }
+
+    [part='error'] {
+      color: var(--vaadin-upload-file-error-color, var(--vaadin-text-color));
+      font-size: var(--vaadin-upload-file-error-font-size, inherit);
+      font-weight: var(--vaadin-upload-file-error-font-weight, inherit);
+      line-height: var(--vaadin-upload-file-error-line-height, inherit);
+    }
+
+    [part='commands'] {
+      display: flex;
+      align-items: center;
+      gap: var(--vaadin-gap-xs);
+      height: var(--vaadin-icon-size, 1lh);
+      align-self: center;
+    }
+
+    button {
+      background: var(--vaadin-upload-file-button-background, transparent);
+      border: var(--vaadin-upload-file-button-border-width, 0) solid
+        var(--vaadin-upload-file-button-border-color, var(--vaadin-border-color-secondary));
+      border-radius: var(--vaadin-upload-file-button-border-radius, var(--vaadin-radius-m));
+      color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color));
+      cursor: var(--vaadin-clickable-cursor);
+      flex-shrink: 0;
+      font: inherit;
+      /* Ensure minimum click target (WCAG) */
+      padding: var(--vaadin-upload-file-button-padding, max(0px, (24px - var(--vaadin-icon-size, 1lh)) / 2));
+    }
+
+    button:focus-visible {
+      outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    }
+
+    [part='start-button']::before,
+    [part='retry-button']::before,
+    [part='remove-button']::before {
+      background: currentColor;
+      content: '\\2003' / '';
+      display: flex;
+      align-items: center;
+      height: var(--vaadin-icon-size, 1lh);
+      width: var(--vaadin-icon-size, 1lh);
+    }
+
+    [part='start-button']::before {
+      mask-image: var(--_vaadin-icon-play);
+    }
+
+    [part='retry-button']::before {
+      mask-image: var(--_vaadin-icon-refresh);
+    }
+
+    [part='remove-button']::before {
+      mask-image: var(--_vaadin-icon-cross);
+    }
+
+    ::slotted([slot='progress']) {
+      grid-column: 2 / -1;
+      width: auto;
+    }
+
+    :host([complete]) ::slotted([slot='progress']),
+    :host([error]) ::slotted([slot='progress']) {
+      display: none;
+    }
+
+    /* THUMBNAILS VARIANT */
+
+    :host([theme~='thumbnails']) {
+      grid-template-columns: max-content 1fr max-content;
+      align-items: center;
+      background: var(--vaadin-background-container);
+      padding: 0;
+      contain: content;
+
+      & [part] {
+        grid-row: 1;
+      }
+
+      & [part='thumbnail'],
+      & [part$='icon'] {
+        grid-column: 1;
+        align-self: stretch;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        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;
+      }
+
+      & [part='done-icon']::before {
+        background: var(--vaadin-upload-file-done-color, currentColor);
+        mask-image: var(--_vaadin-icon-file);
+      }
+
+      & [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;
+        margin: 0;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+      }
+
+      & [part='error'] {
+        font-size: 0.875em;
+        line-height: 1.25;
+      }
+
+      & ::slotted([slot='progress']) {
+        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;
+      }
+
+      & ::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) {
+      :is([part$='icon'], [part$='button'])::before {
+        background: CanvasText;
+      }
     }
-  }
-`;
+  `,
+];

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

@@ -43,7 +43,7 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
  * Part name        | Description
  * -----------------|-------------
  * `thumbnail`      | Image thumbnail for image files (used with `thumbnails` theme)
- * `file-icon`      | Generic file icon for non-image files (used with `thumbnails` theme)
+ * `loader`         | Loading spinner (used with `thumbnails` theme)
  * `done-icon`      | File done status icon
  * `warning-icon`   | File warning status icon
  * `meta`           | Container for file name, status and error messages

package/src/vaadin-upload-file.js

@@ -23,7 +23,7 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
  * Part name        | Description
  * -----------------|-------------
  * `thumbnail`      | Image thumbnail for image files (used with `thumbnails` theme)
- * `file-icon`      | Generic file icon for non-image files (used with `thumbnails` theme)
+ * `loader`         | Loading spinner (used with `thumbnails` theme)
  * `done-icon`      | File done status icon
  * `warning-icon`   | File warning status icon
  * `meta`           | Container for file name, status and error messages
@@ -101,8 +101,13 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
     const isFileRetryVisible = this.errorMessage;
 
     return html`
-      <img src="${this.__thumbnail}" alt="${this.fileName}" part="thumbnail" ?hidden="${!this.__thumbnail}" />
-      <div part="file-icon" ?hidden="${!!this.__thumbnail}" aria-hidden="true"></div>
+      <div part="loader" ?hidden="${!this.uploading}" aria-hidden="true"></div>
+
+      ${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.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,
@@ -173,7 +170,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 +217,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 +227,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 +243,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 +255,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 +276,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 +286,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 +295,6 @@ export const UploadMixin = (superClass) =>
         /**
          * Set the withCredentials flag on the request.
          * @attr {boolean} with-credentials
-         * @type {boolean}
          */
         withCredentials: {
           type: Boolean,
@@ -317,7 +306,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 +318,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,
@@ -443,7 +430,7 @@ export const UploadMixin = (superClass) =>
      *   }
      * }
      * ```
-     * @return {!UploadI18n}
+     * @type {!UploadI18n}
      */
     get i18n() {
       return super.i18n;