@vaadin/upload 25.1.0-alpha1 → 25.1.0-alpha2
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.
- package/package.json +11 -10
- package/src/styles/vaadin-upload-button-base-styles.d.ts +8 -0
- package/src/styles/vaadin-upload-button-base-styles.js +11 -0
- package/src/styles/vaadin-upload-drop-zone-base-styles.d.ts +8 -0
- package/src/styles/vaadin-upload-drop-zone-base-styles.js +26 -0
- package/src/styles/vaadin-upload-file-base-styles.js +19 -11
- package/src/vaadin-upload-button.d.ts +100 -0
- package/src/vaadin-upload-button.js +288 -0
- package/src/vaadin-upload-drop-zone.d.ts +72 -0
- package/src/vaadin-upload-drop-zone.js +215 -0
- package/src/vaadin-upload-file-list-mixin.d.ts +74 -0
- package/src/vaadin-upload-file-list-mixin.js +281 -15
- package/src/vaadin-upload-file-list.d.ts +83 -0
- package/src/vaadin-upload-file-list.js +62 -2
- package/src/vaadin-upload-helpers.js +48 -0
- package/src/vaadin-upload-manager.d.ts +345 -0
- package/src/vaadin-upload-manager.js +720 -0
- package/src/vaadin-upload-mixin.js +2 -49
- package/vaadin-upload-button.d.ts +1 -0
- package/vaadin-upload-button.js +3 -0
- package/vaadin-upload-drop-zone.d.ts +1 -0
- package/vaadin-upload-drop-zone.js +3 -0
- package/vaadin-upload-file-list.d.ts +1 -0
- package/vaadin-upload-file-list.js +3 -0
- package/vaadin-upload-manager.d.ts +1 -0
- package/vaadin-upload-manager.js +1 -0
- package/web-types.json +240 -1
- package/web-types.lit.json +99 -1
|
@@ -8,6 +8,7 @@ import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
|
8
8
|
import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
|
|
9
9
|
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
10
10
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
11
|
+
import { getFilesFromDropEvent } from './vaadin-upload-helpers.js';
|
|
11
12
|
|
|
12
13
|
export const DEFAULT_I18N = {
|
|
13
14
|
dropFiles: {
|
|
@@ -616,59 +617,11 @@ export const UploadMixin = (superClass) =>
|
|
|
616
617
|
event.preventDefault();
|
|
617
618
|
this._dragover = this._dragoverValid = false;
|
|
618
619
|
|
|
619
|
-
const files = await
|
|
620
|
+
const files = await getFilesFromDropEvent(event);
|
|
620
621
|
this._addFiles(files);
|
|
621
622
|
}
|
|
622
623
|
}
|
|
623
624
|
|
|
624
|
-
/**
|
|
625
|
-
* Get the files from the drop event. The dropped items may contain a
|
|
626
|
-
* combination of files and directories. If a dropped item is a directory,
|
|
627
|
-
* it will be recursively traversed to get all files.
|
|
628
|
-
*
|
|
629
|
-
* @param {!DragEvent} dropEvent - The drop event
|
|
630
|
-
* @returns {Promise<File[]>} - The files from the drop event
|
|
631
|
-
* @private
|
|
632
|
-
*/
|
|
633
|
-
__getFilesFromDropEvent(dropEvent) {
|
|
634
|
-
async function getFilesFromEntry(entry) {
|
|
635
|
-
if (entry.isFile) {
|
|
636
|
-
return new Promise((resolve) => {
|
|
637
|
-
// In case of an error, resolve without any files
|
|
638
|
-
entry.file(resolve, () => resolve([]));
|
|
639
|
-
});
|
|
640
|
-
} else if (entry.isDirectory) {
|
|
641
|
-
const reader = entry.createReader();
|
|
642
|
-
const entries = await new Promise((resolve) => {
|
|
643
|
-
// In case of an error, resolve without any files
|
|
644
|
-
reader.readEntries(resolve, () => resolve([]));
|
|
645
|
-
});
|
|
646
|
-
const files = await Promise.all(entries.map(getFilesFromEntry));
|
|
647
|
-
return files.flat();
|
|
648
|
-
}
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
// In some cases (like dragging attachments from Outlook on Windows), "webkitGetAsEntry"
|
|
652
|
-
// can return null for "dataTransfer" items. Also, there is no reason to check for
|
|
653
|
-
// "webkitGetAsEntry" when there are no folders. Therefore, "dataTransfer.files" is used
|
|
654
|
-
// to handle such cases.
|
|
655
|
-
const containsFolders = Array.from(dropEvent.dataTransfer.items)
|
|
656
|
-
.filter((item) => !!item)
|
|
657
|
-
.filter((item) => typeof item.webkitGetAsEntry === 'function')
|
|
658
|
-
.map((item) => item.webkitGetAsEntry())
|
|
659
|
-
.some((entry) => !!entry && entry.isDirectory);
|
|
660
|
-
if (!containsFolders) {
|
|
661
|
-
return Promise.resolve(dropEvent.dataTransfer.files ? Array.from(dropEvent.dataTransfer.files) : []);
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
const filePromises = Array.from(dropEvent.dataTransfer.items)
|
|
665
|
-
.map((item) => item.webkitGetAsEntry())
|
|
666
|
-
.filter((entry) => !!entry)
|
|
667
|
-
.map(getFilesFromEntry);
|
|
668
|
-
|
|
669
|
-
return Promise.all(filePromises).then((files) => files.flat());
|
|
670
|
-
}
|
|
671
|
-
|
|
672
625
|
/** @private */
|
|
673
626
|
_createXhr() {
|
|
674
627
|
return new XMLHttpRequest();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-upload-button.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-upload-drop-zone.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-upload-file-list.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-upload-manager.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-upload-manager.js';
|
package/web-types.json
CHANGED
|
@@ -1,11 +1,167 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/upload",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-upload-button",
|
|
11
|
+
"description": "`<vaadin-upload-button>` is a button component for file uploads.\nWhen clicked, it opens a file picker dialog and calls addFiles\non a linked UploadManager.\n\n```html\n<vaadin-upload-button>Upload Files</vaadin-upload-button>\n```\n\nThe button must be linked to an UploadManager by setting the\n`manager` property:\n\n```javascript\nconst button = document.querySelector('vaadin-upload-button');\nbutton.manager = uploadManager;\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "disabled",
|
|
15
|
+
"description": "If true, the user cannot interact with this element.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "capture",
|
|
26
|
+
"description": "Capture attribute for mobile file input.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"string"
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "max-files-reached",
|
|
35
|
+
"description": "True when max files has been reached on the manager.",
|
|
36
|
+
"value": {
|
|
37
|
+
"type": [
|
|
38
|
+
"boolean"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "theme",
|
|
44
|
+
"description": "The theme variants to apply to the component.",
|
|
45
|
+
"value": {
|
|
46
|
+
"type": [
|
|
47
|
+
"string",
|
|
48
|
+
"null",
|
|
49
|
+
"undefined"
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
],
|
|
54
|
+
"js": {
|
|
55
|
+
"properties": [
|
|
56
|
+
{
|
|
57
|
+
"name": "disabled",
|
|
58
|
+
"description": "Whether the button is disabled.\nReturns true if either explicitly disabled or maxFilesReached is true.",
|
|
59
|
+
"value": {
|
|
60
|
+
"type": [
|
|
61
|
+
"?"
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"name": "manager",
|
|
67
|
+
"description": "Reference to an UploadManager.\nWhen set, the button will automatically disable when maxFilesReached\nbecomes true on the manager.",
|
|
68
|
+
"value": {
|
|
69
|
+
"type": [
|
|
70
|
+
"Object",
|
|
71
|
+
"null"
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "capture",
|
|
77
|
+
"description": "Capture attribute for mobile file input.",
|
|
78
|
+
"value": {
|
|
79
|
+
"type": [
|
|
80
|
+
"string"
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "maxFilesReached",
|
|
86
|
+
"description": "True when max files has been reached on the manager.",
|
|
87
|
+
"value": {
|
|
88
|
+
"type": [
|
|
89
|
+
"boolean"
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
"events": []
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"name": "vaadin-upload-drop-zone",
|
|
99
|
+
"description": "`<vaadin-upload-drop-zone>` is a Web Component that can be used as a drop zone\nfor file uploads. When files are dropped on the drop zone, they are added to\na linked UploadManager.\n\n```html\n<vaadin-upload-drop-zone>\n <p>Drop files here</p>\n</vaadin-upload-drop-zone>\n```\n\nThe drop zone must be linked to an UploadManager by setting the\n`manager` property:\n\n```javascript\nconst dropZone = document.querySelector('vaadin-upload-drop-zone');\ndropZone.manager = uploadManager;\n```\n\n### Styling\n\nThe component has no styling by default. When files are dragged over,\nthe `dragover` attribute is set and the component uses a hover effect.\nTo override the hover effect, use `vaadin-upload-drop-zone[dragover]::after`\nselector to style the pseudo-element covering the drop zone during dragover.\n\nAttribute | Description\n-------------------|--------------------------------------------\n`dragover` | Set when files are being dragged over the element\n`disabled` | Set when the drop zone is explicitly disabled\n`max-files-reached`| Set when the manager has reached maxFiles\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
100
|
+
"attributes": [
|
|
101
|
+
{
|
|
102
|
+
"name": "disabled",
|
|
103
|
+
"description": "Whether the drop zone is disabled.",
|
|
104
|
+
"value": {
|
|
105
|
+
"type": [
|
|
106
|
+
"boolean"
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"name": "max-files-reached",
|
|
112
|
+
"description": "True when max files has been reached on the manager.",
|
|
113
|
+
"value": {
|
|
114
|
+
"type": [
|
|
115
|
+
"boolean"
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"name": "theme",
|
|
121
|
+
"description": "The theme variants to apply to the component.",
|
|
122
|
+
"value": {
|
|
123
|
+
"type": [
|
|
124
|
+
"string",
|
|
125
|
+
"null",
|
|
126
|
+
"undefined"
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"js": {
|
|
132
|
+
"properties": [
|
|
133
|
+
{
|
|
134
|
+
"name": "manager",
|
|
135
|
+
"description": "Reference to an UploadManager.\nWhen set, dropped files will be automatically added to the manager.",
|
|
136
|
+
"value": {
|
|
137
|
+
"type": [
|
|
138
|
+
"Object",
|
|
139
|
+
"null"
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"name": "disabled",
|
|
145
|
+
"description": "Whether the drop zone is disabled.",
|
|
146
|
+
"value": {
|
|
147
|
+
"type": [
|
|
148
|
+
"boolean"
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "maxFilesReached",
|
|
154
|
+
"description": "True when max files has been reached on the manager.",
|
|
155
|
+
"value": {
|
|
156
|
+
"type": [
|
|
157
|
+
"boolean"
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
],
|
|
162
|
+
"events": []
|
|
163
|
+
}
|
|
164
|
+
},
|
|
9
165
|
{
|
|
10
166
|
"name": "vaadin-upload-file",
|
|
11
167
|
"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`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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\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.",
|
|
@@ -261,6 +417,89 @@
|
|
|
261
417
|
]
|
|
262
418
|
}
|
|
263
419
|
},
|
|
420
|
+
{
|
|
421
|
+
"name": "vaadin-upload-file-list",
|
|
422
|
+
"description": "`<vaadin-upload-file-list>` is a Web Component that displays a list of uploaded files.\nIt automatically syncs files from the manager and forwards file events back to it.\n\n```html\n<vaadin-upload-file-list></vaadin-upload-file-list>\n```\n\nThe file list must be linked to an UploadManager by setting the `manager` property:\n\n```javascript\nimport { UploadManager } from '@vaadin/upload/vaadin-upload-manager.js';\n\nconst manager = new UploadManager({ target: '/api/upload' });\nconst fileList = document.querySelector('vaadin-upload-file-list');\nfileList.manager = manager;\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`list` | The `<ul>` element wrapping the file items\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------|-------------\n`disabled` | Set when the element is disabled\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\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.",
|
|
423
|
+
"attributes": [
|
|
424
|
+
{
|
|
425
|
+
"name": "i18n",
|
|
426
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
427
|
+
"value": {
|
|
428
|
+
"type": [
|
|
429
|
+
"Object"
|
|
430
|
+
]
|
|
431
|
+
}
|
|
432
|
+
},
|
|
433
|
+
{
|
|
434
|
+
"name": "disabled",
|
|
435
|
+
"description": "If true, the user cannot interact with this element.",
|
|
436
|
+
"value": {
|
|
437
|
+
"type": [
|
|
438
|
+
"boolean",
|
|
439
|
+
"null",
|
|
440
|
+
"undefined"
|
|
441
|
+
]
|
|
442
|
+
}
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"name": "theme",
|
|
446
|
+
"description": "The theme variants to apply to the component.",
|
|
447
|
+
"value": {
|
|
448
|
+
"type": [
|
|
449
|
+
"string",
|
|
450
|
+
"null",
|
|
451
|
+
"undefined"
|
|
452
|
+
]
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
],
|
|
456
|
+
"js": {
|
|
457
|
+
"properties": [
|
|
458
|
+
{
|
|
459
|
+
"name": "i18n",
|
|
460
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
461
|
+
"value": {
|
|
462
|
+
"type": [
|
|
463
|
+
"Object"
|
|
464
|
+
]
|
|
465
|
+
}
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
"name": "items",
|
|
469
|
+
"description": "The array of files being processed, or already uploaded.",
|
|
470
|
+
"value": {
|
|
471
|
+
"type": [
|
|
472
|
+
"Array",
|
|
473
|
+
"null",
|
|
474
|
+
"undefined"
|
|
475
|
+
]
|
|
476
|
+
}
|
|
477
|
+
},
|
|
478
|
+
{
|
|
479
|
+
"name": "disabled",
|
|
480
|
+
"description": "If true, the user cannot interact with this element.",
|
|
481
|
+
"value": {
|
|
482
|
+
"type": [
|
|
483
|
+
"boolean",
|
|
484
|
+
"null",
|
|
485
|
+
"undefined"
|
|
486
|
+
]
|
|
487
|
+
}
|
|
488
|
+
},
|
|
489
|
+
{
|
|
490
|
+
"name": "manager",
|
|
491
|
+
"description": "Reference to an UploadManager to link this file list to.\nWhen set, the file list automatically:\n- Syncs files from the manager\n- Forwards retry/abort/start/remove events back to the manager",
|
|
492
|
+
"value": {
|
|
493
|
+
"type": [
|
|
494
|
+
"Object",
|
|
495
|
+
"null"
|
|
496
|
+
]
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
],
|
|
500
|
+
"events": []
|
|
501
|
+
}
|
|
502
|
+
},
|
|
264
503
|
{
|
|
265
504
|
"name": "vaadin-upload",
|
|
266
505
|
"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.",
|
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.1.0-
|
|
4
|
+
"version": "25.1.0-alpha2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -14,6 +14,69 @@
|
|
|
14
14
|
"contributions": {
|
|
15
15
|
"html": {
|
|
16
16
|
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-upload-button",
|
|
19
|
+
"description": "`<vaadin-upload-button>` is a button component for file uploads.\nWhen clicked, it opens a file picker dialog and calls addFiles\non a linked UploadManager.\n\n```html\n<vaadin-upload-button>Upload Files</vaadin-upload-button>\n```\n\nThe button must be linked to an UploadManager by setting the\n`manager` property:\n\n```javascript\nconst button = document.querySelector('vaadin-upload-button');\nbutton.manager = uploadManager;\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?maxFilesReached",
|
|
24
|
+
"description": "True when max files has been reached on the manager.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": ".disabled",
|
|
31
|
+
"description": "Whether the button is disabled.\nReturns true if either explicitly disabled or maxFilesReached is true.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": ".manager",
|
|
38
|
+
"description": "Reference to an UploadManager.\nWhen set, the button will automatically disable when maxFilesReached\nbecomes true on the manager.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": ".capture",
|
|
45
|
+
"description": "Capture attribute for mobile file input.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "vaadin-upload-drop-zone",
|
|
54
|
+
"description": "`<vaadin-upload-drop-zone>` is a Web Component that can be used as a drop zone\nfor file uploads. When files are dropped on the drop zone, they are added to\na linked UploadManager.\n\n```html\n<vaadin-upload-drop-zone>\n <p>Drop files here</p>\n</vaadin-upload-drop-zone>\n```\n\nThe drop zone must be linked to an UploadManager by setting the\n`manager` property:\n\n```javascript\nconst dropZone = document.querySelector('vaadin-upload-drop-zone');\ndropZone.manager = uploadManager;\n```\n\n### Styling\n\nThe component has no styling by default. When files are dragged over,\nthe `dragover` attribute is set and the component uses a hover effect.\nTo override the hover effect, use `vaadin-upload-drop-zone[dragover]::after`\nselector to style the pseudo-element covering the drop zone during dragover.\n\nAttribute | Description\n-------------------|--------------------------------------------\n`dragover` | Set when files are being dragged over the element\n`disabled` | Set when the drop zone is explicitly disabled\n`max-files-reached`| Set when the manager has reached maxFiles\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
55
|
+
"extension": true,
|
|
56
|
+
"attributes": [
|
|
57
|
+
{
|
|
58
|
+
"name": "?disabled",
|
|
59
|
+
"description": "Whether the drop zone is disabled.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "?maxFilesReached",
|
|
66
|
+
"description": "True when max files has been reached on the manager.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": ".manager",
|
|
73
|
+
"description": "Reference to an UploadManager.\nWhen set, dropped files will be automatically added to the manager.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
},
|
|
17
80
|
{
|
|
18
81
|
"name": "vaadin-upload-file",
|
|
19
82
|
"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`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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\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.",
|
|
@@ -119,6 +182,41 @@
|
|
|
119
182
|
}
|
|
120
183
|
]
|
|
121
184
|
},
|
|
185
|
+
{
|
|
186
|
+
"name": "vaadin-upload-file-list",
|
|
187
|
+
"description": "`<vaadin-upload-file-list>` is a Web Component that displays a list of uploaded files.\nIt automatically syncs files from the manager and forwards file events back to it.\n\n```html\n<vaadin-upload-file-list></vaadin-upload-file-list>\n```\n\nThe file list must be linked to an UploadManager by setting the `manager` property:\n\n```javascript\nimport { UploadManager } from '@vaadin/upload/vaadin-upload-manager.js';\n\nconst manager = new UploadManager({ target: '/api/upload' });\nconst fileList = document.querySelector('vaadin-upload-file-list');\nfileList.manager = manager;\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`list` | The `<ul>` element wrapping the file items\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------|-------------\n`disabled` | Set when the element is disabled\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\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.",
|
|
188
|
+
"extension": true,
|
|
189
|
+
"attributes": [
|
|
190
|
+
{
|
|
191
|
+
"name": "?disabled",
|
|
192
|
+
"description": "If true, the user cannot interact with this element.",
|
|
193
|
+
"value": {
|
|
194
|
+
"kind": "expression"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"name": ".i18n",
|
|
199
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
200
|
+
"value": {
|
|
201
|
+
"kind": "expression"
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"name": ".items",
|
|
206
|
+
"description": "The array of files being processed, or already uploaded.",
|
|
207
|
+
"value": {
|
|
208
|
+
"kind": "expression"
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": ".manager",
|
|
213
|
+
"description": "Reference to an UploadManager to link this file list to.\nWhen set, the file list automatically:\n- Syncs files from the manager\n- Forwards retry/abort/start/remove events back to the manager",
|
|
214
|
+
"value": {
|
|
215
|
+
"kind": "expression"
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
]
|
|
219
|
+
},
|
|
122
220
|
{
|
|
123
221
|
"name": "vaadin-upload",
|
|
124
222
|
"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.",
|