@vaadin/upload 22.0.0-alpha9 → 22.0.0

package/README.md

@@ -1,13 +1,10 @@
-# <vaadin-upload>
+# @vaadin/upload
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-upload/html-examples/upload-basic-demos)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-upload/html-api)
+A web component for uploading files.
 
-[<vaadin-upload>](https://vaadin.com/components/vaadin-upload) is a Web Component for uploading files, part of the [Vaadin components](https://vaadin.com/components).
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/upload)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/upload)](https://www.npmjs.com/package/@vaadin/upload)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-upload)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -16,41 +13,44 @@
 </vaadin-upload>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-upload/master/screenshot.png" alt="Screenshot of vaadin-upload" width="670" />](https://vaadin.com/components/vaadin-upload)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/upload/screenshot.png" width="656" alt="Screenshot of vaadin-upload">](https://vaadin.com/docs/latest/ds/components/upload)
 
 ## Installation
 
-Install `vaadin-upload`:
+Install the component:
 
 ```sh
-npm i @vaadin/upload --save
+npm i @vaadin/upload
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/upload/vaadin-upload.js';
+import '@vaadin/upload';
 ```
 
-## Getting started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/upload/vaadin-upload.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the component from the `theme/material` folder:
 
-## Entry points
-
-- The component with the Lumo theme:
-
-  `theme/lumo/vaadin-upload.js`
+```js
+import '@vaadin/upload/theme/material/vaadin-upload.js';
+```
 
-- The component with the Material theme:
+You can also import the Lumo version of the component explicitly:
 
-  `theme/material/vaadin-upload.js`
+```js
+import '@vaadin/upload/theme/lumo/vaadin-upload.js';
+```
 
-- Alias for `theme/lumo/vaadin-upload.js`:
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-  `vaadin-upload.js`
+```js
+import '@vaadin/upload/src/vaadin-upload.js';
+```
 
 ## Contributing
 
@@ -60,4 +60,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -33,17 +33,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "22.0.0-alpha9",
-    "@vaadin/component-base": "22.0.0-alpha9",
-    "@vaadin/progress-bar": "22.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
+    "@vaadin/button": "^22.0.0",
+    "@vaadin/component-base": "^22.0.0",
+    "@vaadin/progress-bar": "^22.0.0",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0",
+    "@vaadin/vaadin-material-styles": "^22.0.0",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/form-layout": "^22.0.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
 }

package/src/vaadin-upload-file.js

@@ -3,10 +3,10 @@
  * 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/progress-bar/src/vaadin-progress-bar.js';
 import './vaadin-upload-icons.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * `<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.
@@ -68,10 +68,10 @@ class UploadFile extends ThemableMixin(PolymerElement) {
         }
       </style>
 
-      <li part="row" tabindex="0">
+      <div part="row">
         <div part="info">
-          <div part="done-icon" hidden$="[[!file.complete]]"></div>
-          <div part="warning-icon" hidden$="[[!file.error]]"></div>
+          <div part="done-icon" hidden$="[[!file.complete]]" aria-hidden="true"></div>
+          <div part="warning-icon" hidden$="[[!file.error]]" aria-hidden="true"></div>
 
           <div part="meta">
             <div part="name" id="name">[[file.name]]</div>
@@ -107,7 +107,7 @@ class UploadFile extends ThemableMixin(PolymerElement) {
             aria-describedby="name"
           ></button>
         </div>
-      </li>
+      </div>
 
       <vaadin-progress-bar
         part="progress"

package/src/vaadin-upload.d.ts

@@ -398,20 +398,6 @@ declare class Upload extends ThemableMixin(ElementMixin(HTMLElement)) {
    */
   uploadFiles(files?: UploadFile | UploadFile[]): void;
 
-  /**
-   * Add the file for uploading. Called internally for each file after picking files from dialog or dropping files.
-   *
-   * @param file File being added
-   */
-  _addFile(file: UploadFile): void;
-
-  /**
-   * Remove file from upload list. Called internally if file upload was canceled.
-   *
-   * @param file File to remove
-   */
-  _removeFile(file: UploadFile): void;
-
   addEventListener<K extends keyof UploadEventMap>(
     type: K,
     listener: (this: Upload, ev: UploadEventMap[K]) => void,

package/src/vaadin-upload.js

@@ -3,14 +3,15 @@
  * 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 { resetMouseCanceller } from '@polymer/polymer/lib/utils/gestures.js';
 import '@polymer/polymer/lib/elements/dom-repeat.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import '@vaadin/button/src/vaadin-button.js';
 import './vaadin-upload-icons.js';
 import './vaadin-upload-file.js';
+import { resetMouseCanceller } from '@polymer/polymer/lib/utils/gestures.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * `<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.
@@ -68,6 +69,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         :host {
           display: block;
           position: relative;
+          box-sizing: border-box;
         }
 
         :host([hidden]) {
@@ -81,6 +83,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         [part='file-list'] {
           padding: 0;
           margin: 0;
+          list-style-type: none;
         }
       </style>
 
@@ -102,7 +105,9 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       <slot name="file-list">
         <ul id="fileList" part="file-list">
           <template is="dom-repeat" items="[[files]]" as="file">
-            <vaadin-upload-file file="[[file]]" i18n="[[i18n]]"></vaadin-upload-file>
+            <li>
+              <vaadin-upload-file tabindex="0" file="[[file]]" i18n="[[i18n]]"></vaadin-upload-file>
+            </li>
           </template>
         </ul>
       </slot>
@@ -138,13 +143,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       nodrop: {
         type: Boolean,
         reflectToAttribute: true,
-        value: function () {
-          try {
-            return !!document.createEvent('TouchEvent');
-          } catch (e) {
-            return false;
-          }
-        }
+        value: isTouch
       },
 
       /**
@@ -824,7 +823,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     // cancelling the following synthetic click. See also:
     // https://github.com/Polymer/polymer/issues/5289
     this.__resetMouseCanceller();
-    this._onAddFilesClick();
+    this._onAddFilesClick(e);
   }
 
   /** @private */
@@ -833,11 +832,12 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  _onAddFilesClick() {
+  _onAddFilesClick(e) {
     if (this.maxFilesReached) {
       return;
     }
 
+    e.stopPropagation();
     this.$.fileInput.value = '';
     this.$.fileInput.click();
   }

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

@@ -4,10 +4,10 @@ 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/progress-bar/theme/lumo/vaadin-progress-bar.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-upload',
@@ -19,7 +19,7 @@ registerStyles(
     :host(:not([nodrop])) {
       overflow: hidden;
       border: 1px dashed var(--lumo-contrast-20pct);
-      border-radius: var(--lumo-border-radius-s);
+      border-radius: var(--lumo-border-radius-l);
       padding: var(--lumo-space-m);
       transition: background-color 0.6s, border-color 0.6s;
     }
@@ -62,6 +62,10 @@ registerStyles(
       line-height: 1;
       vertical-align: -0.25em;
     }
+
+    [part='file-list'] > *:not(:first-child) > * {
+      border-top: 1px solid var(--lumo-contrast-10pct);
+    }
   `,
   { moduleId: 'lumo-upload' }
 );
@@ -71,8 +75,13 @@ const uploadFile = css`
     padding: var(--lumo-space-s) 0;
   }
 
-  :host(:not(:first-child)) {
-    border-top: 1px solid var(--lumo-contrast-10pct);
+  :host(:focus) {
+    outline: none;
+  }
+
+  :host(:focus) [part='row'] {
+    border-radius: var(--lumo-border-radius-s);
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
   }
 
   [part='row'] {
@@ -129,7 +138,6 @@ const uploadFile = css`
     cursor: var(--lumo-clickable-cursor);
   }
 
-  [part='row']:focus,
   [part$='button']:focus {
     outline: none;
     border-radius: var(--lumo-border-radius-s);

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

@@ -3,7 +3,7 @@ import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/button/theme/material/vaadin-button.js';
 import '@vaadin/progress-bar/theme/material/vaadin-progress-bar.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-upload',
@@ -106,8 +106,11 @@ registerStyles(
       padding: 8px;
     }
 
-    [part='row']:focus {
+    :host(:focus) {
       outline: none;
+    }
+
+    :host(:focus) [part='row'] {
       background-color: var(--material-divider-color);
     }