@vaadin/upload 25.0.0-alpha15 → 25.0.0-alpha17
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 -11
- package/src/styles/vaadin-upload-file-base-styles.js +9 -8
- package/src/styles/vaadin-upload-file-list-base-styles.js +1 -0
- package/src/vaadin-upload-file.d.ts +0 -2
- package/src/vaadin-upload-file.js +44 -43
- package/src/vaadin-upload.d.ts +7 -7
- package/src/vaadin-upload.js +7 -7
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/upload",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha17",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,23 +34,23 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
37
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
38
|
-
"@vaadin/button": "25.0.0-
|
|
39
|
-
"@vaadin/component-base": "25.0.0-
|
|
40
|
-
"@vaadin/progress-bar": "25.0.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-alpha17",
|
|
38
|
+
"@vaadin/button": "25.0.0-alpha17",
|
|
39
|
+
"@vaadin/component-base": "25.0.0-alpha17",
|
|
40
|
+
"@vaadin/progress-bar": "25.0.0-alpha17",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha17",
|
|
42
42
|
"lit": "^3.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
46
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
45
|
+
"@vaadin/chai-plugins": "25.0.0-alpha17",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha17",
|
|
47
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
49
|
-
"sinon": "^
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha17",
|
|
49
|
+
"sinon": "^21.0.0"
|
|
50
50
|
},
|
|
51
51
|
"web-types": [
|
|
52
52
|
"web-types.json",
|
|
53
53
|
"web-types.lit.json"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
|
|
56
56
|
}
|
|
@@ -15,16 +15,13 @@ export const uploadFileStyles = css`
|
|
|
15
15
|
padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
[part='row'] {
|
|
23
|
-
display: contents;
|
|
18
|
+
:host(:focus-visible) {
|
|
19
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
20
|
+
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
|
|
24
21
|
}
|
|
25
22
|
|
|
26
|
-
[
|
|
27
|
-
display:
|
|
23
|
+
[hidden] {
|
|
24
|
+
display: none;
|
|
28
25
|
}
|
|
29
26
|
|
|
30
27
|
[part='done-icon']:not([hidden]),
|
|
@@ -97,6 +94,10 @@ export const uploadFileStyles = css`
|
|
|
97
94
|
padding: var(--vaadin-upload-file-button-padding, var(--vaadin-padding-container));
|
|
98
95
|
}
|
|
99
96
|
|
|
97
|
+
button:focus-visible {
|
|
98
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
99
|
+
}
|
|
100
|
+
|
|
100
101
|
[part='start-button']::before,
|
|
101
102
|
[part='retry-button']::before,
|
|
102
103
|
[part='remove-button']::before {
|
|
@@ -42,8 +42,6 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
|
|
|
42
42
|
*
|
|
43
43
|
* Part name | Description
|
|
44
44
|
* -----------------|-------------
|
|
45
|
-
* `row` | File container
|
|
46
|
-
* `info` | Container for file status icon, file name, status and error messages
|
|
47
45
|
* `done-icon` | File done status icon
|
|
48
46
|
* `warning-icon` | File warning status icon
|
|
49
47
|
* `meta` | Container for file name, status and error messages
|
|
@@ -22,8 +22,6 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
|
|
|
22
22
|
*
|
|
23
23
|
* Part name | Description
|
|
24
24
|
* -----------------|-------------
|
|
25
|
-
* `row` | File container
|
|
26
|
-
* `info` | Container for file status icon, file name, status and error messages
|
|
27
25
|
* `done-icon` | File done status icon
|
|
28
26
|
* `warning-icon` | File warning status icon
|
|
29
27
|
* `meta` | Container for file name, status and error messages
|
|
@@ -63,51 +61,54 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
|
|
|
63
61
|
return uploadFileStyles;
|
|
64
62
|
}
|
|
65
63
|
|
|
64
|
+
static get lumoInjector() {
|
|
65
|
+
return {
|
|
66
|
+
includeBaseStyles: true,
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
|
|
66
70
|
/** @protected */
|
|
67
71
|
render() {
|
|
68
72
|
return html`
|
|
69
|
-
<div part="
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
<div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
|
|
74
|
+
<div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
|
|
75
|
+
|
|
76
|
+
<div part="meta">
|
|
77
|
+
<div part="name" id="name">${this.fileName}</div>
|
|
78
|
+
<div part="status" ?hidden="${!this.status}" id="status">${this.status}</div>
|
|
79
|
+
<div part="error" id="error" ?hidden="${!this.errorMessage}">${this.errorMessage}</div>
|
|
80
|
+
</div>
|
|
73
81
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
file-event="file-abort"
|
|
105
|
-
@click="${this._fireFileEvent}"
|
|
106
|
-
?disabled="${this.disabled}"
|
|
107
|
-
aria-label="${this.i18n ? this.i18n.file.remove : nothing}"
|
|
108
|
-
aria-describedby="name"
|
|
109
|
-
></button>
|
|
110
|
-
</div>
|
|
82
|
+
<div part="commands">
|
|
83
|
+
<button
|
|
84
|
+
type="button"
|
|
85
|
+
part="start-button"
|
|
86
|
+
file-event="file-start"
|
|
87
|
+
@click="${this._fireFileEvent}"
|
|
88
|
+
?hidden="${!this.held}"
|
|
89
|
+
?disabled="${this.disabled}"
|
|
90
|
+
aria-label="${this.i18n ? this.i18n.file.start : nothing}"
|
|
91
|
+
aria-describedby="name"
|
|
92
|
+
></button>
|
|
93
|
+
<button
|
|
94
|
+
type="button"
|
|
95
|
+
part="retry-button"
|
|
96
|
+
file-event="file-retry"
|
|
97
|
+
@click="${this._fireFileEvent}"
|
|
98
|
+
?hidden="${!this.errorMessage}"
|
|
99
|
+
?disabled="${this.disabled}"
|
|
100
|
+
aria-label="${this.i18n ? this.i18n.file.retry : nothing}"
|
|
101
|
+
aria-describedby="name"
|
|
102
|
+
></button>
|
|
103
|
+
<button
|
|
104
|
+
type="button"
|
|
105
|
+
part="remove-button"
|
|
106
|
+
file-event="file-abort"
|
|
107
|
+
@click="${this._fireFileEvent}"
|
|
108
|
+
?disabled="${this.disabled}"
|
|
109
|
+
aria-label="${this.i18n ? this.i18n.file.remove : nothing}"
|
|
110
|
+
aria-describedby="name"
|
|
111
|
+
></button>
|
|
111
112
|
</div>
|
|
112
113
|
|
|
113
114
|
<slot name="progress"></slot>
|
package/src/vaadin-upload.d.ts
CHANGED
|
@@ -133,13 +133,13 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
|
|
|
133
133
|
*
|
|
134
134
|
* The following state attributes are available for styling:
|
|
135
135
|
*
|
|
136
|
-
* Attribute
|
|
137
|
-
*
|
|
138
|
-
* `disabled`
|
|
139
|
-
* `nodrop`
|
|
140
|
-
* `dragover`
|
|
141
|
-
* `dragover-valid`
|
|
142
|
-
* `max-files-reached`
|
|
136
|
+
* Attribute | Description
|
|
137
|
+
* ---------------------|---------------------------------
|
|
138
|
+
* `disabled` | Set when the element is disabled
|
|
139
|
+
* `nodrop` | Set when drag and drop is disabled (e.g., on touch devices)
|
|
140
|
+
* `dragover` | Set when the file is being dragged over the element
|
|
141
|
+
* `dragover-valid` | Set when the dragged file is valid with `maxFiles` and `accept` criteria
|
|
142
|
+
* `max-files-reached` | Set when maximum number of files that the user is allowed to add has been reached
|
|
143
143
|
*
|
|
144
144
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
145
145
|
*
|
package/src/vaadin-upload.js
CHANGED
|
@@ -37,13 +37,13 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
|
|
|
37
37
|
*
|
|
38
38
|
* The following state attributes are available for styling:
|
|
39
39
|
*
|
|
40
|
-
* Attribute
|
|
41
|
-
*
|
|
42
|
-
* `disabled`
|
|
43
|
-
* `nodrop`
|
|
44
|
-
* `dragover`
|
|
45
|
-
* `dragover-valid`
|
|
46
|
-
* `max-files-reached`
|
|
40
|
+
* Attribute | Description
|
|
41
|
+
* ---------------------|---------------------------------
|
|
42
|
+
* `disabled` | Set when the element is disabled
|
|
43
|
+
* `nodrop` | Set when drag and drop is disabled (e.g., on touch devices)
|
|
44
|
+
* `dragover` | Set when the file is being dragged over the element
|
|
45
|
+
* `dragover-valid` | Set when the dragged file is valid with `maxFiles` and `accept` criteria
|
|
46
|
+
* `max-files-reached` | Set when maximum number of files that the user is allowed to add has been reached
|
|
47
47
|
*
|
|
48
48
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
49
49
|
*
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/upload",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha17",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-upload-file",
|
|
11
|
-
"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`
|
|
11
|
+
"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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
},
|
|
264
264
|
{
|
|
265
265
|
"name": "vaadin-upload",
|
|
266
|
-
"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
|
|
266
|
+
"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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
267
267
|
"attributes": [
|
|
268
268
|
{
|
|
269
269
|
"name": "disabled",
|
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.0-
|
|
4
|
+
"version": "25.0.0-alpha17",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-upload-file",
|
|
19
|
-
"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`
|
|
19
|
+
"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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
},
|
|
122
122
|
{
|
|
123
123
|
"name": "vaadin-upload",
|
|
124
|
-
"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
|
|
124
|
+
"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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
125
125
|
"extension": true,
|
|
126
126
|
"attributes": [
|
|
127
127
|
{
|