@vaadin/upload 25.0.3 → 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/README.md +23 -0
- package/package.json +11 -11
- 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/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-file.js +5 -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.d.ts +10 -0
- package/src/vaadin-upload-mixin.js +79 -57
- 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 +258 -1
- package/web-types.lit.json +106 -1
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.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.",
|
|
@@ -229,6 +327,13 @@
|
|
|
229
327
|
"kind": "expression"
|
|
230
328
|
}
|
|
231
329
|
},
|
|
330
|
+
{
|
|
331
|
+
"name": ".maxConcurrentUploads",
|
|
332
|
+
"description": "Specifies the maximum number of files that can be uploaded simultaneously.\nThis helps prevent browser performance degradation and XHR limitations when\nuploading large numbers of files. Files exceeding this limit will be queued\nand uploaded as active uploads complete.",
|
|
333
|
+
"value": {
|
|
334
|
+
"kind": "expression"
|
|
335
|
+
}
|
|
336
|
+
},
|
|
232
337
|
{
|
|
233
338
|
"name": ".capture",
|
|
234
339
|
"description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",
|