@vaadin/upload - npm Package Compare versions

Comparing version 24.6.0-alpha7 to 24.6.0-alpha8

package.json

 {
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha7",
+  "version": "24.6.0-alpha8",
   "publishConfig": {
@@ -40,13 +40,13 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.6.0-alpha7",
-    "@vaadin/button": "24.6.0-alpha7",
-    "@vaadin/component-base": "24.6.0-alpha7",
-    "@vaadin/progress-bar": "24.6.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha7",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha7",
+    "@vaadin/a11y-base": "24.6.0-alpha8",
+    "@vaadin/button": "24.6.0-alpha8",
+    "@vaadin/component-base": "24.6.0-alpha8",
+    "@vaadin/progress-bar": "24.6.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha7",
+    "@vaadin/chai-plugins": "24.6.0-alpha8",
     "@vaadin/testing-helpers": "^1.0.0",
@@ -59,3 +59,3 @@ "sinon": "^18.0.0"
   ],
-  "gitHead": "675d6fe0a08b8cc63ac00140c63f28fc3f52e4ea"
+  "gitHead": "a11e1510c4caa08775b202714f5fc1198c22132a"
 }

src/vaadin-lit-upload-file.js

@@ -54,2 +54,3 @@ /**
             ?hidden="${!this.held}"
+            ?disabled="${this.disabled}"
             aria-label="${this.i18n.file.start}"
@@ -64,2 +65,3 @@ aria-describedby="name"
             ?hidden="${!this.errorMessage}"
+            ?disabled="${this.disabled}"
             aria-label="${this.i18n.file.retry}"
@@ -73,2 +75,3 @@ aria-describedby="name"
             @click="${this._fireFileEvent}"
+            ?disabled="${this.disabled}"
             aria-label="${this.i18n.file.remove}"
@@ -75,0 +78,0 @@ aria-describedby="name"

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

@@ -28,2 +28,11 @@ /**
         },
+
+        /**
+         * If true, the user cannot interact with this element.
+         */
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
       };
@@ -33,3 +42,3 @@ }
     static get observers() {
-      return ['__updateItems(items, i18n)'];
+      return ['__updateItems(items, i18n, disabled)'];
     }
@@ -50,3 +59,3 @@
     requestContentUpdate() {
-      const { items, i18n } = this;
+      const { items, i18n, disabled } = this;
 
@@ -59,2 +68,3 @@ render(
                 <vaadin-upload-file
+                  .disabled="${disabled}"
                   .file="${file}"
@@ -61,0 +71,0 @@ .complete="${file.complete}"

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

@@ -23,2 +23,7 @@ /**
   /**
+   * If true, the user cannot interact with this element.
+   */
+  disabled: boolean;
+
+  /**
    * True if uploading is completed, false otherwise.
@@ -25,0 +30,0 @@ */

src/vaadin-upload-file-mixin.js

@@ -18,2 +18,11 @@ /**
         /**
+         * If true, the user cannot interact with this element.
+         */
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
          * True if uploading is completed, false otherwise.
@@ -95,3 +104,2 @@ */
           value: 0,
-          reflectToAttribute: true,
         },
@@ -116,3 +124,3 @@
     static get observers() {
-      return ['__updateProgress(_progress, progress, indeterminate)'];
+      return ['__updateTabindex(tabindex, disabled)', '__updateProgress(_progress, progress, indeterminate)'];
     }
@@ -161,2 +169,11 @@
     /** @private */
+    __disabledChanged(disabled) {
+      if (disabled) {
+        this.removeAttribute('tabindex');
+      } else {
+        this.setAttribute('tabindex', this.tabindex);
+      }
+    }
+
+    /** @private */
     _errorMessageChanged(errorMessage) {
@@ -167,2 +184,11 @@ this.toggleAttribute('error', Boolean(errorMessage));
     /** @private */
+    __updateTabindex(tabindex, disabled) {
+      if (disabled) {
+        this.removeAttribute('tabindex');
+      } else {
+        this.setAttribute('tabindex', tabindex);
+      }
+    }
+
+    /** @private */
     __updateProgress(progress, value, indeterminate) {
@@ -169,0 +195,0 @@ if (progress) {

src/vaadin-upload-file.d.ts

@@ -63,2 +63,3 @@ /**
  * -----------------|-------------
+ * `disabled`       | Set when the element is disabled
  * `focus-ring`     | Set when the element is focused using the keyboard.
@@ -65,0 +66,0 @@ * `focused`        | Set when the element is focused.

src/vaadin-upload-file.js

@@ -43,2 +43,3 @@ /**
  * -----------------|-------------
+ * `disabled`       | Set when the element is disabled
  * `focus-ring`     | Set when the element is focused using the keyboard.
@@ -80,2 +81,3 @@ * `focused`        | Set when the element is focused.
             hidden$="[[!held]]"
+            disabled$="[[disabled]]"
             aria-label$="[[i18n.file.start]]"
@@ -90,2 +92,3 @@ aria-describedby="name"
             hidden$="[[!errorMessage]]"
+            disabled$="[[disabled]]"
             aria-label$="[[i18n.file.retry]]"
@@ -99,2 +102,3 @@ aria-describedby="name"
             on-click="_fireFileEvent"
+            disabled$="[[disabled]]"
             aria-label$="[[i18n.file.remove]]"
@@ -101,0 +105,0 @@ aria-describedby="name"

src/vaadin-upload-mixin.d.ts

@@ -72,2 +72,7 @@ /**
   /**
+   * If true, the user cannot interact with this element.
+   */
+  disabled: boolean;
+
+  /**
    * Define whether the element supports dropping files on it for uploading.
@@ -74,0 +79,0 @@ * By default it's enabled in desktop and disabled in touch devices

src/vaadin-upload-mixin.js

@@ -71,2 +71,12 @@ /**
         /**
+         * If true, the user cannot interact with this element.
+         * @type {boolean}
+         */
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
          * Define whether the element supports dropping files on it for uploading.
@@ -396,5 +406,5 @@ * By default it's enabled in desktop and disabled in touch devices
       return [
-        '__updateAddButton(_addButton, maxFiles, i18n, maxFilesReached)',
+        '__updateAddButton(_addButton, maxFiles, i18n, maxFilesReached, disabled)',
         '__updateDropLabel(_dropLabel, maxFiles, i18n)',
-        '__updateFileList(_fileList, files, i18n)',
+        '__updateFileList(_fileList, files, i18n, disabled)',
         '__updateMaxFilesReached(maxFiles, files)',
@@ -517,5 +527,5 @@ ];
     /** @private */
-    __updateAddButton(addButton, maxFiles, i18n, maxFilesReached) {
+    __updateAddButton(addButton, maxFiles, i18n, maxFilesReached, disabled) {
       if (addButton) {
-        addButton.disabled = maxFilesReached;
+        addButton.disabled = disabled || maxFilesReached;
 
@@ -538,6 +548,7 @@ // Only update text content for the default button element
     /** @private */
-    __updateFileList(list, files, i18n) {
+    __updateFileList(list, files, i18n, disabled) {
       if (list) {
         list.items = [...files];
         list.i18n = i18n;
+        list.disabled = disabled;
       }
@@ -550,3 +561,3 @@ }
       if (!this.nodrop && !this._dragover) {
-        this._dragoverValid = !this.maxFilesReached;
+        this._dragoverValid = !this.maxFilesReached && !this.disabled;
         this._dragover = true;
@@ -567,3 +578,3 @@ }
     async _onDrop(event) {
-      if (!this.nodrop) {
+      if (!this.nodrop && !this.disabled) {
         event.preventDefault();
@@ -570,0 +581,0 @@ this._dragover = this._dragoverValid = false;

src/vaadin-upload.d.ts

@@ -137,2 +137,3 @@ /**
  * ---|---|---
+ * `disabled` | Set when the element is disabled | `:host`
  * `nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`
@@ -139,0 +140,0 @@ * `dragover` | A file is being dragged over the element | `:host`

src/vaadin-upload.js

@@ -39,2 +39,3 @@ /**
  * ---|---|---
+ * `disabled` | Set when the element is disabled | `:host`
  * `nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`
@@ -41,0 +42,0 @@ * `dragover` | A file is being dragged over the element | `:host`

theme/lumo/vaadin-upload-styles.js

@@ -49,2 +49,3 @@ import '@vaadin/vaadin-lumo-styles/font-icons.js';
 
+    :host([disabled]) [part='drop-label'],
     :host([max-files-reached]) [part='drop-label'] {
@@ -51,0 +52,0 @@ color: var(--lumo-disabled-text-color);

theme/material/vaadin-upload-styles.js

@@ -48,2 +48,3 @@ import '@vaadin/vaadin-material-styles/color.js';
 
+    :host([disabled]) [part='drop-label'],
     :host([max-files-reached]) [part='drop-label'] {
@@ -183,2 +184,6 @@ color: var(--material-disabled-text-color);
 
+    [part$='button'][disabled] {
+      color: var(--material-disabled-text-color);
+    }
+
     [part='done-icon']::before {
@@ -206,3 +211,3 @@ content: var(--material-icons-check);
 
-    [part$='button']::after {
+    [part$='button']:not([disabled])::after {
       position: absolute;
@@ -209,0 +214,0 @@ content: '';

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha7",
+  "version": "24.6.0-alpha8",
   "description-markup": "markdown",
@@ -11,5 +11,16 @@ "contributions": {
           "name": "vaadin-upload-file",
-          "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`row`            | File container\n`info`           | Container for file status icon, file name, status and error messages\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`row`            | File container\n`info`           | Container for file status icon, file name, status and error messages\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`disabled`       | Set when the element is disabled\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
               "name": "complete",
@@ -117,2 +128,13 @@ "description": "True if uploading is completed, false otherwise.",
               {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
                 "name": "complete",
@@ -246,5 +268,14 @@ "description": "True if uploading is completed, false otherwise.",
           "name": "vaadin-upload",
-          "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n`max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`disabled` | Set when the element is disabled | `:host`\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n`max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
               "name": "nodrop",
@@ -365,2 +396,11 @@ "description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",
               {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
                 "name": "nodrop",
@@ -367,0 +407,0 @@ "description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha7",
+  "version": "24.6.0-alpha8",
   "description-markup": "markdown",
@@ -19,6 +19,13 @@ "framework": "lit",
           "name": "vaadin-upload-file",
-          "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`row`            | File container\n`info`           | Container for file status icon, file name, status and error messages\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`row`            | File container\n`info`           | Container for file status icon, file name, status and error messages\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`disabled`       | Set when the element is disabled\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
               "name": "?complete",
@@ -118,6 +125,13 @@ "description": "True if uploading is completed, false otherwise.",
           "name": "vaadin-upload",
-          "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n`max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`disabled` | Set when the element is disabled | `:host`\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n`max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
               "name": "?nodrop",
@@ -124,0 +138,0 @@ "description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",

No alert changes

Improved metrics

Total package byte prevSize

151533

increased by2.68%

Lines of code

3758

increased by3.27%

Dependency changes

• + Added@vaadin/a11y-base@24.6.0-alpha8(transitive)

• + Added@vaadin/button@24.6.0-alpha8(transitive)

• + Added@vaadin/component-base@24.6.0-alpha8(transitive)

• + Added@vaadin/icon@24.6.0-alpha8(transitive)

• + Added@vaadin/progress-bar@24.6.0-alpha8(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.6.0-alpha8(transitive)

• + Added@vaadin/vaadin-material-styles@24.6.0-alpha8(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.6.0-alpha8(transitive)

• - Removed@vaadin/a11y-base@24.6.0-alpha7(transitive)

• - Removed@vaadin/button@24.6.0-alpha7(transitive)

• - Removed@vaadin/component-base@24.6.0-alpha7(transitive)

• - Removed@vaadin/icon@24.6.0-alpha7(transitive)

• - Removed@vaadin/progress-bar@24.6.0-alpha7(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.6.0-alpha7(transitive)

• - Removed@vaadin/vaadin-material-styles@24.6.0-alpha7(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.6.0-alpha7(transitive)

• Updated@vaadin/a11y-base@24.6.0-alpha8

• Updated@vaadin/button@24.6.0-alpha8

• Updated@vaadin/component-base@24.6.0-alpha8

• Updated@vaadin/progress-bar@24.6.0-alpha8

• Updated@vaadin/vaadin-lumo-styles@24.6.0-alpha8

• Updated@vaadin/vaadin-material-styles@24.6.0-alpha8

• Updated@vaadin/vaadin-themable-mixin@24.6.0-alpha8