@vaadin/upload 25.3.0-alpha9 → 25.3.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/custom-elements.json +482 -84
  2. package/package.json +11 -11
  3. package/src/vaadin-upload-button.js +1 -1
  4. package/src/vaadin-upload-file-list-mixin.d.ts +1 -0
  5. package/src/vaadin-upload-file-list-mixin.js +10 -103
  6. package/src/vaadin-upload-helpers.js +143 -0
  7. package/src/vaadin-upload-internal-manager.js +174 -0
  8. package/src/vaadin-upload-manager.js +85 -32
  9. package/src/vaadin-upload-mixin.d.ts +4 -44
  10. package/src/vaadin-upload-mixin.js +359 -564
  11. package/src/vaadin-upload.d.ts +39 -38
  12. package/src/vaadin-upload.js +39 -38
  13. package/web-types.json +2 -2
  14. package/web-types.lit.json +2 -2
package/src/vaadin-upload.d.ts CHANGED
@@ -156,44 +156,45 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
156
156
  *
157
157
  * The following custom CSS properties are available for styling:
158
158
  *
159
- * Custom CSS property |
160
- * :--------------------------------------------|
161
- * `--vaadin-upload-background` |
162
- * `--vaadin-upload-border-color` |
163
- * `--vaadin-upload-border-radius` |
164
- * `--vaadin-upload-border-width` |
165
- * `--vaadin-upload-gap` |
166
- * `--vaadin-upload-padding` |
167
- * `--vaadin-upload-drop-label-color` |
168
- * `--vaadin-upload-drop-label-font-size` |
169
- * `--vaadin-upload-drop-label-font-weight` |
170
- * `--vaadin-upload-drop-label-gap` |
171
- * `--vaadin-upload-drop-label-line-height` |
172
- * `--vaadin-upload-file-list-divider-color` |
173
- * `--vaadin-upload-file-list-divider-width` |
174
- * `--vaadin-upload-file-border-radius` |
175
- * `--vaadin-upload-file-button-background` |
176
- * `--vaadin-upload-file-button-border-color` |
177
- * `--vaadin-upload-file-button-border-radius` |
178
- * `--vaadin-upload-file-button-border-width` |
179
- * `--vaadin-upload-file-button-text-color` |
180
- * `--vaadin-upload-file-button-padding` |
181
- * `--vaadin-upload-file-done-color` |
182
- * `--vaadin-upload-file-error-color` |
183
- * `--vaadin-upload-file-error-font-size` |
184
- * `--vaadin-upload-file-error-font-weight` |
185
- * `--vaadin-upload-file-error-line-height` |
186
- * `--vaadin-upload-file-gap` |
187
- * `--vaadin-upload-file-name-color` |
188
- * `--vaadin-upload-file-name-font-size` |
189
- * `--vaadin-upload-file-name-font-weight` |
190
- * `--vaadin-upload-file-name-line-height` |
191
- * `--vaadin-upload-file-padding` |
192
- * `--vaadin-upload-file-status-color` |
193
- * `--vaadin-upload-file-status-font-size` |
194
- * `--vaadin-upload-file-status-font-weight` |
195
- * `--vaadin-upload-file-status-line-height` |
196
- * `--vaadin-upload-file-warning-color` |
159
+ * Custom CSS property |
160
+ * :-----------------------------------------------|
161
+ * | `--vaadin-upload-background` |
162
+ * | `--vaadin-upload-border-color` |
163
+ * | `--vaadin-upload-border-radius` |
164
+ * | `--vaadin-upload-border-width` |
165
+ * | `--vaadin-upload-drop-label-color` |
166
+ * | `--vaadin-upload-drop-label-font-size` |
167
+ * | `--vaadin-upload-drop-label-font-weight` |
168
+ * | `--vaadin-upload-drop-label-gap` |
169
+ * | `--vaadin-upload-drop-label-line-height` |
170
+ * | `--vaadin-upload-file-border-radius` |
171
+ * | `--vaadin-upload-file-button-background` |
172
+ * | `--vaadin-upload-file-button-border-color` |
173
+ * | `--vaadin-upload-file-button-border-radius` |
174
+ * | `--vaadin-upload-file-button-border-width` |
175
+ * | `--vaadin-upload-file-button-padding` |
176
+ * | `--vaadin-upload-file-button-text-color` |
177
+ * | `--vaadin-upload-file-done-color` |
178
+ * | `--vaadin-upload-file-error-color` |
179
+ * | `--vaadin-upload-file-error-font-size` |
180
+ * | `--vaadin-upload-file-error-font-weight` |
181
+ * | `--vaadin-upload-file-error-line-height` |
182
+ * | `--vaadin-upload-file-gap` |
183
+ * | `--vaadin-upload-file-list-divider-color` |
184
+ * | `--vaadin-upload-file-list-divider-width` |
185
+ * | `--vaadin-upload-file-name-color` |
186
+ * | `--vaadin-upload-file-name-font-size` |
187
+ * | `--vaadin-upload-file-name-font-weight` |
188
+ * | `--vaadin-upload-file-name-line-height` |
189
+ * | `--vaadin-upload-file-padding` |
190
+ * | `--vaadin-upload-file-status-color` |
191
+ * | `--vaadin-upload-file-status-font-size` |
192
+ * | `--vaadin-upload-file-status-font-weight` |
193
+ * | `--vaadin-upload-file-status-line-height` |
194
+ * | `--vaadin-upload-file-warning-color` |
195
+ * | `--vaadin-upload-gap` |
196
+ * | `--vaadin-upload-icon-color` |
197
+ * | `--vaadin-upload-padding` |
197
198
  *
198
199
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
199
200
  *
package/src/vaadin-upload.js CHANGED
@@ -47,44 +47,45 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
47
47
  *
48
48
  * The following custom CSS properties are available for styling:
49
49
  *
50
- * Custom CSS property |
51
- * :--------------------------------------------|
52
- * `--vaadin-upload-background` |
53
- * `--vaadin-upload-border-color` |
54
- * `--vaadin-upload-border-radius` |
55
- * `--vaadin-upload-border-width` |
56
- * `--vaadin-upload-gap` |
57
- * `--vaadin-upload-padding` |
58
- * `--vaadin-upload-drop-label-color` |
59
- * `--vaadin-upload-drop-label-font-size` |
60
- * `--vaadin-upload-drop-label-font-weight` |
61
- * `--vaadin-upload-drop-label-gap` |
62
- * `--vaadin-upload-drop-label-line-height` |
63
- * `--vaadin-upload-file-list-divider-color` |
64
- * `--vaadin-upload-file-list-divider-width` |
65
- * `--vaadin-upload-file-border-radius` |
66
- * `--vaadin-upload-file-button-background` |
67
- * `--vaadin-upload-file-button-border-color` |
68
- * `--vaadin-upload-file-button-border-radius` |
69
- * `--vaadin-upload-file-button-border-width` |
70
- * `--vaadin-upload-file-button-text-color` |
71
- * `--vaadin-upload-file-button-padding` |
72
- * `--vaadin-upload-file-done-color` |
73
- * `--vaadin-upload-file-error-color` |
74
- * `--vaadin-upload-file-error-font-size` |
75
- * `--vaadin-upload-file-error-font-weight` |
76
- * `--vaadin-upload-file-error-line-height` |
77
- * `--vaadin-upload-file-gap` |
78
- * `--vaadin-upload-file-name-color` |
79
- * `--vaadin-upload-file-name-font-size` |
80
- * `--vaadin-upload-file-name-font-weight` |
81
- * `--vaadin-upload-file-name-line-height` |
82
- * `--vaadin-upload-file-padding` |
83
- * `--vaadin-upload-file-status-color` |
84
- * `--vaadin-upload-file-status-font-size` |
85
- * `--vaadin-upload-file-status-font-weight` |
86
- * `--vaadin-upload-file-status-line-height` |
87
- * `--vaadin-upload-file-warning-color` |
50
+ * Custom CSS property |
51
+ * :-----------------------------------------------|
52
+ * | `--vaadin-upload-background` |
53
+ * | `--vaadin-upload-border-color` |
54
+ * | `--vaadin-upload-border-radius` |
55
+ * | `--vaadin-upload-border-width` |
56
+ * | `--vaadin-upload-drop-label-color` |
57
+ * | `--vaadin-upload-drop-label-font-size` |
58
+ * | `--vaadin-upload-drop-label-font-weight` |
59
+ * | `--vaadin-upload-drop-label-gap` |
60
+ * | `--vaadin-upload-drop-label-line-height` |
61
+ * | `--vaadin-upload-file-border-radius` |
62
+ * | `--vaadin-upload-file-button-background` |
63
+ * | `--vaadin-upload-file-button-border-color` |
64
+ * | `--vaadin-upload-file-button-border-radius` |
65
+ * | `--vaadin-upload-file-button-border-width` |
66
+ * | `--vaadin-upload-file-button-padding` |
67
+ * | `--vaadin-upload-file-button-text-color` |
68
+ * | `--vaadin-upload-file-done-color` |
69
+ * | `--vaadin-upload-file-error-color` |
70
+ * | `--vaadin-upload-file-error-font-size` |
71
+ * | `--vaadin-upload-file-error-font-weight` |
72
+ * | `--vaadin-upload-file-error-line-height` |
73
+ * | `--vaadin-upload-file-gap` |
74
+ * | `--vaadin-upload-file-list-divider-color` |
75
+ * | `--vaadin-upload-file-list-divider-width` |
76
+ * | `--vaadin-upload-file-name-color` |
77
+ * | `--vaadin-upload-file-name-font-size` |
78
+ * | `--vaadin-upload-file-name-font-weight` |
79
+ * | `--vaadin-upload-file-name-line-height` |
80
+ * | `--vaadin-upload-file-padding` |
81
+ * | `--vaadin-upload-file-status-color` |
82
+ * | `--vaadin-upload-file-status-font-size` |
83
+ * | `--vaadin-upload-file-status-font-weight` |
84
+ * | `--vaadin-upload-file-status-line-height` |
85
+ * | `--vaadin-upload-file-warning-color` |
86
+ * | `--vaadin-upload-gap` |
87
+ * | `--vaadin-upload-icon-color` |
88
+ * | `--vaadin-upload-padding` |
88
89
  *
89
90
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
90
91
  *
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/upload",
4
- "version": "25.3.0-alpha9",
4
+ "version": "25.3.0-beta1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -410,7 +410,7 @@
410
410
  },
411
411
  {
412
412
  "name": "vaadin-upload",
413
- "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```html\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\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`nodrop` | Set when drag and drop is disabled (e.g., on touch devices)\n`dragover` | Set when the file is being dragged over the element\n`dragover-valid` | Set when the dragged file is valid with `maxFiles` and `accept` criteria\n`max-files-reached` | Set when maximum number of files that the user is allowed to add has been reached\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-upload-background` |\n`--vaadin-upload-border-color` |\n`--vaadin-upload-border-radius` |\n`--vaadin-upload-border-width` |\n`--vaadin-upload-gap` |\n`--vaadin-upload-padding` |\n`--vaadin-upload-drop-label-color` |\n`--vaadin-upload-drop-label-font-size` |\n`--vaadin-upload-drop-label-font-weight` |\n`--vaadin-upload-drop-label-gap` |\n`--vaadin-upload-drop-label-line-height` |\n`--vaadin-upload-file-list-divider-color` |\n`--vaadin-upload-file-list-divider-width` |\n`--vaadin-upload-file-border-radius` |\n`--vaadin-upload-file-button-background` |\n`--vaadin-upload-file-button-border-color` |\n`--vaadin-upload-file-button-border-radius` |\n`--vaadin-upload-file-button-border-width` |\n`--vaadin-upload-file-button-text-color` |\n`--vaadin-upload-file-button-padding` |\n`--vaadin-upload-file-done-color` |\n`--vaadin-upload-file-error-color` |\n`--vaadin-upload-file-error-font-size` |\n`--vaadin-upload-file-error-font-weight` |\n`--vaadin-upload-file-error-line-height` |\n`--vaadin-upload-file-gap` |\n`--vaadin-upload-file-name-color` |\n`--vaadin-upload-file-name-font-size` |\n`--vaadin-upload-file-name-font-weight` |\n`--vaadin-upload-file-name-line-height` |\n`--vaadin-upload-file-padding` |\n`--vaadin-upload-file-status-color` |\n`--vaadin-upload-file-status-font-size` |\n`--vaadin-upload-file-status-font-weight` |\n`--vaadin-upload-file-status-line-height` |\n`--vaadin-upload-file-warning-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
413
+ "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```html\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\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`nodrop` | Set when drag and drop is disabled (e.g., on touch devices)\n`dragover` | Set when the file is being dragged over the element\n`dragover-valid` | Set when the dragged file is valid with `maxFiles` and `accept` criteria\n`max-files-reached` | Set when maximum number of files that the user is allowed to add has been reached\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------------|\n| `--vaadin-upload-background` |\n| `--vaadin-upload-border-color` |\n| `--vaadin-upload-border-radius` |\n| `--vaadin-upload-border-width` |\n| `--vaadin-upload-drop-label-color` |\n| `--vaadin-upload-drop-label-font-size` |\n| `--vaadin-upload-drop-label-font-weight` |\n| `--vaadin-upload-drop-label-gap` |\n| `--vaadin-upload-drop-label-line-height` |\n| `--vaadin-upload-file-border-radius` |\n| `--vaadin-upload-file-button-background` |\n| `--vaadin-upload-file-button-border-color` |\n| `--vaadin-upload-file-button-border-radius` |\n| `--vaadin-upload-file-button-border-width` |\n| `--vaadin-upload-file-button-padding` |\n| `--vaadin-upload-file-button-text-color` |\n| `--vaadin-upload-file-done-color` |\n| `--vaadin-upload-file-error-color` |\n| `--vaadin-upload-file-error-font-size` |\n| `--vaadin-upload-file-error-font-weight` |\n| `--vaadin-upload-file-error-line-height` |\n| `--vaadin-upload-file-gap` |\n| `--vaadin-upload-file-list-divider-color` |\n| `--vaadin-upload-file-list-divider-width` |\n| `--vaadin-upload-file-name-color` |\n| `--vaadin-upload-file-name-font-size` |\n| `--vaadin-upload-file-name-font-weight` |\n| `--vaadin-upload-file-name-line-height` |\n| `--vaadin-upload-file-padding` |\n| `--vaadin-upload-file-status-color` |\n| `--vaadin-upload-file-status-font-size` |\n| `--vaadin-upload-file-status-font-weight` |\n| `--vaadin-upload-file-status-line-height` |\n| `--vaadin-upload-file-warning-color` |\n| `--vaadin-upload-gap` |\n| `--vaadin-upload-icon-color` |\n| `--vaadin-upload-padding` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
414
414
  "attributes": [
415
415
  {
416
416
  "name": "accept",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/upload",
4
- "version": "25.3.0-alpha9",
4
+ "version": "25.3.0-beta1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -205,7 +205,7 @@
205
205
  },
206
206
  {
207
207
  "name": "vaadin-upload",
208
- "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```html\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\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`nodrop` | Set when drag and drop is disabled (e.g., on touch devices)\n`dragover` | Set when the file is being dragged over the element\n`dragover-valid` | Set when the dragged file is valid with `maxFiles` and `accept` criteria\n`max-files-reached` | Set when maximum number of files that the user is allowed to add has been reached\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-upload-background` |\n`--vaadin-upload-border-color` |\n`--vaadin-upload-border-radius` |\n`--vaadin-upload-border-width` |\n`--vaadin-upload-gap` |\n`--vaadin-upload-padding` |\n`--vaadin-upload-drop-label-color` |\n`--vaadin-upload-drop-label-font-size` |\n`--vaadin-upload-drop-label-font-weight` |\n`--vaadin-upload-drop-label-gap` |\n`--vaadin-upload-drop-label-line-height` |\n`--vaadin-upload-file-list-divider-color` |\n`--vaadin-upload-file-list-divider-width` |\n`--vaadin-upload-file-border-radius` |\n`--vaadin-upload-file-button-background` |\n`--vaadin-upload-file-button-border-color` |\n`--vaadin-upload-file-button-border-radius` |\n`--vaadin-upload-file-button-border-width` |\n`--vaadin-upload-file-button-text-color` |\n`--vaadin-upload-file-button-padding` |\n`--vaadin-upload-file-done-color` |\n`--vaadin-upload-file-error-color` |\n`--vaadin-upload-file-error-font-size` |\n`--vaadin-upload-file-error-font-weight` |\n`--vaadin-upload-file-error-line-height` |\n`--vaadin-upload-file-gap` |\n`--vaadin-upload-file-name-color` |\n`--vaadin-upload-file-name-font-size` |\n`--vaadin-upload-file-name-font-weight` |\n`--vaadin-upload-file-name-line-height` |\n`--vaadin-upload-file-padding` |\n`--vaadin-upload-file-status-color` |\n`--vaadin-upload-file-status-font-size` |\n`--vaadin-upload-file-status-font-weight` |\n`--vaadin-upload-file-status-line-height` |\n`--vaadin-upload-file-warning-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
208
+ "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```html\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\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`nodrop` | Set when drag and drop is disabled (e.g., on touch devices)\n`dragover` | Set when the file is being dragged over the element\n`dragover-valid` | Set when the dragged file is valid with `maxFiles` and `accept` criteria\n`max-files-reached` | Set when maximum number of files that the user is allowed to add has been reached\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------------|\n| `--vaadin-upload-background` |\n| `--vaadin-upload-border-color` |\n| `--vaadin-upload-border-radius` |\n| `--vaadin-upload-border-width` |\n| `--vaadin-upload-drop-label-color` |\n| `--vaadin-upload-drop-label-font-size` |\n| `--vaadin-upload-drop-label-font-weight` |\n| `--vaadin-upload-drop-label-gap` |\n| `--vaadin-upload-drop-label-line-height` |\n| `--vaadin-upload-file-border-radius` |\n| `--vaadin-upload-file-button-background` |\n| `--vaadin-upload-file-button-border-color` |\n| `--vaadin-upload-file-button-border-radius` |\n| `--vaadin-upload-file-button-border-width` |\n| `--vaadin-upload-file-button-padding` |\n| `--vaadin-upload-file-button-text-color` |\n| `--vaadin-upload-file-done-color` |\n| `--vaadin-upload-file-error-color` |\n| `--vaadin-upload-file-error-font-size` |\n| `--vaadin-upload-file-error-font-weight` |\n| `--vaadin-upload-file-error-line-height` |\n| `--vaadin-upload-file-gap` |\n| `--vaadin-upload-file-list-divider-color` |\n| `--vaadin-upload-file-list-divider-width` |\n| `--vaadin-upload-file-name-color` |\n| `--vaadin-upload-file-name-font-size` |\n| `--vaadin-upload-file-name-font-weight` |\n| `--vaadin-upload-file-name-line-height` |\n| `--vaadin-upload-file-padding` |\n| `--vaadin-upload-file-status-color` |\n| `--vaadin-upload-file-status-font-size` |\n| `--vaadin-upload-file-status-font-weight` |\n| `--vaadin-upload-file-status-line-height` |\n| `--vaadin-upload-file-warning-color` |\n| `--vaadin-upload-gap` |\n| `--vaadin-upload-icon-color` |\n| `--vaadin-upload-padding` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
209
209
  "extension": true,
210
210
  "attributes": [
211
211
  {