@vaadin/upload 25.1.0-alpha9 → 25.1.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.
- package/custom-elements.json +1 -1
- package/package.json +11 -11
- package/src/styles/vaadin-upload-file-base-styles.js +239 -170
- package/src/vaadin-upload-file.d.ts +1 -1
- package/src/vaadin-upload-file.js +2 -2
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -834,7 +834,7 @@
|
|
|
834
834
|
"declarations": [
|
|
835
835
|
{
|
|
836
836
|
"kind": "class",
|
|
837
|
-
"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`thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)\n`
|
|
837
|
+
"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`thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)\n`loader` | Loading spinner (used with `thumbnails` theme)\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.",
|
|
838
838
|
"name": "UploadFile",
|
|
839
839
|
"members": [
|
|
840
840
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/upload",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
39
|
-
"@vaadin/button": "25.1.0-
|
|
40
|
-
"@vaadin/component-base": "25.1.0-
|
|
41
|
-
"@vaadin/progress-bar": "25.1.0-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.1.0-beta1",
|
|
39
|
+
"@vaadin/button": "25.1.0-beta1",
|
|
40
|
+
"@vaadin/component-base": "25.1.0-beta1",
|
|
41
|
+
"@vaadin/progress-bar": "25.1.0-beta1",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta1",
|
|
43
43
|
"lit": "^3.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@vaadin/aura": "25.1.0-
|
|
47
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
48
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
46
|
+
"@vaadin/aura": "25.1.0-beta1",
|
|
47
|
+
"@vaadin/chai-plugins": "25.1.0-beta1",
|
|
48
|
+
"@vaadin/test-runner-commands": "25.1.0-beta1",
|
|
49
49
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta1",
|
|
51
51
|
"sinon": "^21.0.0"
|
|
52
52
|
},
|
|
53
53
|
"customElements": "custom-elements.json",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "0ccf77c385fc6a92ac2a6344ce8804b94956226d"
|
|
59
59
|
}
|
|
@@ -5,176 +5,245 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
7
|
import { css } from 'lit';
|
|
8
|
+
import { loaderStyles } from '@vaadin/component-base/src/styles/loader-styles.js';
|
|
9
|
+
|
|
10
|
+
export const uploadFileStyles = [
|
|
11
|
+
loaderStyles,
|
|
12
|
+
css`
|
|
13
|
+
:host {
|
|
14
|
+
align-items: baseline;
|
|
15
|
+
display: grid;
|
|
16
|
+
gap: var(--vaadin-upload-file-gap, var(--vaadin-gap-s));
|
|
17
|
+
grid-template-columns: var(--vaadin-icon-size, 1lh) minmax(0, 1fr) auto;
|
|
18
|
+
padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
|
|
19
|
+
border-radius: var(--vaadin-upload-file-border-radius, var(--vaadin-radius-m));
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:host(:focus-visible) {
|
|
23
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
24
|
+
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
[hidden] {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Hide thumbnail by default, only show with thumbnails theme */
|
|
32
|
+
[part='thumbnail'],
|
|
33
|
+
[part='loader'] {
|
|
34
|
+
display: none;
|
|
35
|
+
grid-column: 1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[part='thumbnail'] {
|
|
39
|
+
object-fit: cover;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
[part='done-icon']:not([hidden]),
|
|
43
|
+
[part='warning-icon']:not([hidden]) {
|
|
44
|
+
display: flex;
|
|
45
|
+
grid-column: 1;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[part='done-icon']::before,
|
|
49
|
+
[part='warning-icon']::before {
|
|
50
|
+
content: '\\2003' / '';
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
flex: none;
|
|
54
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
55
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
56
|
+
}
|
|
8
57
|
|
|
9
|
-
export const uploadFileStyles = css`
|
|
10
|
-
:host {
|
|
11
|
-
align-items: baseline;
|
|
12
|
-
display: grid;
|
|
13
|
-
gap: var(--vaadin-upload-file-gap, var(--vaadin-gap-s));
|
|
14
|
-
grid-template-columns: var(--vaadin-icon-size, 1lh) minmax(0, 1fr) auto;
|
|
15
|
-
padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
|
|
16
|
-
border-radius: var(--vaadin-upload-file-border-radius, var(--vaadin-radius-m));
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:host(:focus-visible) {
|
|
20
|
-
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
21
|
-
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
[hidden] {
|
|
25
|
-
display: none;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* Hide thumbnail and file-icon by default, only show with thumbnails theme */
|
|
29
|
-
[part='thumbnail'],
|
|
30
|
-
[part='file-icon'] {
|
|
31
|
-
display: none;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
:host([theme~='thumbnails']) {
|
|
35
|
-
grid-template-columns: 3rem minmax(0, 1fr) auto;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([theme~='thumbnails']) [part='thumbnail']:not([hidden]),
|
|
39
|
-
:host([theme~='thumbnails']) [part='file-icon']:not([hidden]) {
|
|
40
|
-
display: block;
|
|
41
|
-
width: 3rem;
|
|
42
|
-
height: 3rem;
|
|
43
|
-
align-self: center;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
[part='thumbnail'] {
|
|
47
|
-
object-fit: cover;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
[part='file-icon'] {
|
|
51
|
-
background: #e0e0e0;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
[part='done-icon']:not([hidden]),
|
|
55
|
-
[part='warning-icon']:not([hidden]) {
|
|
56
|
-
display: flex;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
:host([theme~='thumbnails']) [part='done-icon'],
|
|
60
|
-
:host([theme~='thumbnails']) [part='warning-icon'] {
|
|
61
|
-
display: none !important;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
[part='done-icon']::before,
|
|
65
|
-
[part='warning-icon']::before {
|
|
66
|
-
content: '\\2003' / '';
|
|
67
|
-
display: inline-flex;
|
|
68
|
-
align-items: center;
|
|
69
|
-
flex: none;
|
|
70
|
-
height: var(--vaadin-icon-size, 1lh);
|
|
71
|
-
width: var(--vaadin-icon-size, 1lh);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
:is([part$='icon'], [part$='button'])::before {
|
|
75
|
-
mask-size: var(--vaadin-icon-visual-size, 100%);
|
|
76
|
-
mask-position: 50%;
|
|
77
|
-
mask-repeat: no-repeat;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
[part='done-icon']::before {
|
|
81
|
-
background: var(--vaadin-upload-file-done-color, currentColor);
|
|
82
|
-
mask-image: var(--_vaadin-icon-checkmark);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
[part='warning-icon']::before {
|
|
86
|
-
background: var(--vaadin-upload-file-warning-color, currentColor);
|
|
87
|
-
mask-image: var(--_vaadin-icon-warn);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
[part='meta'] {
|
|
91
|
-
grid-column: 2;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
[part='name'] {
|
|
95
|
-
color: var(--vaadin-upload-file-name-color, var(--vaadin-text-color));
|
|
96
|
-
font-size: var(--vaadin-upload-file-name-font-size, inherit);
|
|
97
|
-
font-weight: var(--vaadin-upload-file-name-font-weight, inherit);
|
|
98
|
-
line-height: var(--vaadin-upload-file-name-line-height, inherit);
|
|
99
|
-
overflow: hidden;
|
|
100
|
-
text-overflow: ellipsis;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
[part='status'] {
|
|
104
|
-
color: var(--vaadin-upload-file-status-color, var(--vaadin-text-color-secondary));
|
|
105
|
-
font-size: var(--vaadin-upload-file-status-font-size, inherit);
|
|
106
|
-
font-weight: var(--vaadin-upload-file-status-font-weight, inherit);
|
|
107
|
-
line-height: var(--vaadin-upload-file-status-line-height, inherit);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
[part='error'] {
|
|
111
|
-
color: var(--vaadin-upload-file-error-color, var(--vaadin-text-color));
|
|
112
|
-
font-size: var(--vaadin-upload-file-error-font-size, inherit);
|
|
113
|
-
font-weight: var(--vaadin-upload-file-error-font-weight, inherit);
|
|
114
|
-
line-height: var(--vaadin-upload-file-error-line-height, inherit);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
[part='commands'] {
|
|
118
|
-
display: flex;
|
|
119
|
-
align-items: center;
|
|
120
|
-
gap: var(--vaadin-gap-xs);
|
|
121
|
-
height: var(--vaadin-icon-size, 1lh);
|
|
122
|
-
align-self: center;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
button {
|
|
126
|
-
background: var(--vaadin-upload-file-button-background, transparent);
|
|
127
|
-
border: var(--vaadin-upload-file-button-border-width, 0) solid
|
|
128
|
-
var(--vaadin-upload-file-button-border-color, var(--vaadin-border-color-secondary));
|
|
129
|
-
border-radius: var(--vaadin-upload-file-button-border-radius, var(--vaadin-radius-m));
|
|
130
|
-
color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color));
|
|
131
|
-
cursor: var(--vaadin-clickable-cursor);
|
|
132
|
-
flex-shrink: 0;
|
|
133
|
-
font: inherit;
|
|
134
|
-
/* Ensure minimum click target (WCAG) */
|
|
135
|
-
padding: var(--vaadin-upload-file-button-padding, max(0px, (24px - var(--vaadin-icon-size, 1lh)) / 2));
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
button:focus-visible {
|
|
139
|
-
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
[part='start-button']::before,
|
|
143
|
-
[part='retry-button']::before,
|
|
144
|
-
[part='remove-button']::before {
|
|
145
|
-
background: currentColor;
|
|
146
|
-
content: '\\2003' / '';
|
|
147
|
-
display: flex;
|
|
148
|
-
align-items: center;
|
|
149
|
-
height: var(--vaadin-icon-size, 1lh);
|
|
150
|
-
width: var(--vaadin-icon-size, 1lh);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
[part='start-button']::before {
|
|
154
|
-
mask-image: var(--_vaadin-icon-play);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
[part='retry-button']::before {
|
|
158
|
-
mask-image: var(--_vaadin-icon-refresh);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
[part='remove-button']::before {
|
|
162
|
-
mask-image: var(--_vaadin-icon-cross);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
::slotted([slot='progress']) {
|
|
166
|
-
grid-column: 2 / -1;
|
|
167
|
-
width: auto;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
:host([complete]) ::slotted([slot='progress']),
|
|
171
|
-
:host([error]) ::slotted([slot='progress']) {
|
|
172
|
-
display: none;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
@media (forced-colors: active) {
|
|
176
58
|
:is([part$='icon'], [part$='button'])::before {
|
|
177
|
-
|
|
59
|
+
mask-size: var(--vaadin-icon-visual-size, 100%);
|
|
60
|
+
mask-position: 50%;
|
|
61
|
+
mask-repeat: no-repeat;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
[part='done-icon']::before {
|
|
65
|
+
background: var(--vaadin-upload-file-done-color, currentColor);
|
|
66
|
+
mask-image: var(--_vaadin-icon-checkmark);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
[part='warning-icon']::before {
|
|
70
|
+
background: var(--vaadin-upload-file-warning-color, currentColor);
|
|
71
|
+
mask-image: var(--_vaadin-icon-warn);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
[part='meta'] {
|
|
75
|
+
grid-column: 2;
|
|
76
|
+
|
|
77
|
+
& > div {
|
|
78
|
+
cursor: inherit;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
[part='name'] {
|
|
83
|
+
color: var(--vaadin-upload-file-name-color, var(--vaadin-text-color));
|
|
84
|
+
font-size: var(--vaadin-upload-file-name-font-size, inherit);
|
|
85
|
+
font-weight: var(--vaadin-upload-file-name-font-weight, inherit);
|
|
86
|
+
line-height: var(--vaadin-upload-file-name-line-height, inherit);
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
text-overflow: ellipsis;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
[part='status'] {
|
|
92
|
+
color: var(--vaadin-upload-file-status-color, var(--vaadin-text-color-secondary));
|
|
93
|
+
font-size: var(--vaadin-upload-file-status-font-size, inherit);
|
|
94
|
+
font-weight: var(--vaadin-upload-file-status-font-weight, inherit);
|
|
95
|
+
line-height: var(--vaadin-upload-file-status-line-height, inherit);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
[part='error'] {
|
|
99
|
+
color: var(--vaadin-upload-file-error-color, var(--vaadin-text-color));
|
|
100
|
+
font-size: var(--vaadin-upload-file-error-font-size, inherit);
|
|
101
|
+
font-weight: var(--vaadin-upload-file-error-font-weight, inherit);
|
|
102
|
+
line-height: var(--vaadin-upload-file-error-line-height, inherit);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[part='commands'] {
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
gap: var(--vaadin-gap-xs);
|
|
109
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
110
|
+
align-self: center;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
button {
|
|
114
|
+
background: var(--vaadin-upload-file-button-background, transparent);
|
|
115
|
+
border: var(--vaadin-upload-file-button-border-width, 0) solid
|
|
116
|
+
var(--vaadin-upload-file-button-border-color, var(--vaadin-border-color-secondary));
|
|
117
|
+
border-radius: var(--vaadin-upload-file-button-border-radius, var(--vaadin-radius-m));
|
|
118
|
+
color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color));
|
|
119
|
+
cursor: var(--vaadin-clickable-cursor);
|
|
120
|
+
flex-shrink: 0;
|
|
121
|
+
font: inherit;
|
|
122
|
+
/* Ensure minimum click target (WCAG) */
|
|
123
|
+
padding: var(--vaadin-upload-file-button-padding, max(0px, (24px - var(--vaadin-icon-size, 1lh)) / 2));
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
button:focus-visible {
|
|
127
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
[part='start-button']::before,
|
|
131
|
+
[part='retry-button']::before,
|
|
132
|
+
[part='remove-button']::before {
|
|
133
|
+
background: currentColor;
|
|
134
|
+
content: '\\2003' / '';
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
138
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[part='start-button']::before {
|
|
142
|
+
mask-image: var(--_vaadin-icon-play);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
[part='retry-button']::before {
|
|
146
|
+
mask-image: var(--_vaadin-icon-refresh);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
[part='remove-button']::before {
|
|
150
|
+
mask-image: var(--_vaadin-icon-cross);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
::slotted([slot='progress']) {
|
|
154
|
+
grid-column: 2 / -1;
|
|
155
|
+
width: auto;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
:host([complete]) ::slotted([slot='progress']),
|
|
159
|
+
:host([error]) ::slotted([slot='progress']) {
|
|
160
|
+
display: none;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* THUMBNAILS VARIANT */
|
|
164
|
+
|
|
165
|
+
:host([theme~='thumbnails']) {
|
|
166
|
+
--_prefix-area-size: 2rem;
|
|
167
|
+
|
|
168
|
+
grid-template-columns: var(--_prefix-area-size) minmax(0, 1fr) auto;
|
|
169
|
+
grid-auto-columns: auto;
|
|
170
|
+
grid-template-rows: auto;
|
|
171
|
+
position: relative;
|
|
172
|
+
align-items: center;
|
|
173
|
+
background: var(--vaadin-background-container);
|
|
174
|
+
gap: var(--vaadin-gap-s);
|
|
175
|
+
|
|
176
|
+
& [part='thumbnail'],
|
|
177
|
+
& [part='done-icon'],
|
|
178
|
+
& [part='warning-icon'] {
|
|
179
|
+
width: 100%;
|
|
180
|
+
aspect-ratio: 1 / 1;
|
|
181
|
+
align-items: center;
|
|
182
|
+
justify-content: center;
|
|
183
|
+
grid-column: 1;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
& [part='loader']:not([hidden]) {
|
|
187
|
+
display: flex;
|
|
188
|
+
align-self: stretch;
|
|
189
|
+
aspect-ratio: 1 / 1;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
& [part='done-icon'] {
|
|
193
|
+
display: none;
|
|
194
|
+
|
|
195
|
+
&::before {
|
|
196
|
+
content: '';
|
|
197
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
198
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
199
|
+
/* TODO: Replace with vaadin file icon, once it exists. */
|
|
200
|
+
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
|
|
201
|
+
mask-size: contain;
|
|
202
|
+
background: currentColor;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
& [part='status'],
|
|
207
|
+
& [part='error'] {
|
|
208
|
+
clip-path: inset(50%);
|
|
209
|
+
width: 1px;
|
|
210
|
+
height: 1px;
|
|
211
|
+
margin: 0;
|
|
212
|
+
overflow: hidden;
|
|
213
|
+
position: absolute;
|
|
214
|
+
white-space: nowrap;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
& ::slotted([slot='progress']) {
|
|
218
|
+
clip-path: inset(50%);
|
|
219
|
+
margin: 0;
|
|
220
|
+
overflow: hidden;
|
|
221
|
+
position: absolute;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
:host([theme~='thumbnails'][complete]) {
|
|
226
|
+
& [part='thumbnail'] {
|
|
227
|
+
&:not([hidden]) {
|
|
228
|
+
display: block;
|
|
229
|
+
|
|
230
|
+
& + [part='done-icon'] {
|
|
231
|
+
display: none;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
&[hidden] + [part='done-icon'] {
|
|
236
|
+
display: flex;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* TODO: queued state styles (no attribute makes this difficult to target) */
|
|
242
|
+
|
|
243
|
+
@media (forced-colors: active) {
|
|
244
|
+
:is([part$='icon'], [part$='button'])::before {
|
|
245
|
+
background: CanvasText;
|
|
246
|
+
}
|
|
178
247
|
}
|
|
179
|
-
|
|
180
|
-
|
|
248
|
+
`,
|
|
249
|
+
];
|
|
@@ -43,7 +43,7 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
|
|
|
43
43
|
* Part name | Description
|
|
44
44
|
* -----------------|-------------
|
|
45
45
|
* `thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)
|
|
46
|
-
* `
|
|
46
|
+
* `loader` | Loading spinner (used with `thumbnails` theme)
|
|
47
47
|
* `done-icon` | File done status icon
|
|
48
48
|
* `warning-icon` | File warning status icon
|
|
49
49
|
* `meta` | Container for file name, status and error messages
|
|
@@ -23,7 +23,7 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
|
|
|
23
23
|
* Part name | Description
|
|
24
24
|
* -----------------|-------------
|
|
25
25
|
* `thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)
|
|
26
|
-
* `
|
|
26
|
+
* `loader` | Loading spinner (used with `thumbnails` theme)
|
|
27
27
|
* `done-icon` | File done status icon
|
|
28
28
|
* `warning-icon` | File warning status icon
|
|
29
29
|
* `meta` | Container for file name, status and error messages
|
|
@@ -101,8 +101,8 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
|
|
|
101
101
|
const isFileRetryVisible = this.errorMessage;
|
|
102
102
|
|
|
103
103
|
return html`
|
|
104
|
+
<div part="loader" ?hidden="${!this.uploading}" aria-hidden="true"></div>
|
|
104
105
|
<img src="${this.__thumbnail}" alt="${this.fileName}" part="thumbnail" ?hidden="${!this.__thumbnail}" />
|
|
105
|
-
<div part="file-icon" ?hidden="${!!this.__thumbnail}" aria-hidden="true"></div>
|
|
106
106
|
|
|
107
107
|
<div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
|
|
108
108
|
<div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
|
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.1.0-
|
|
4
|
+
"version": "25.1.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
},
|
|
165
165
|
{
|
|
166
166
|
"name": "vaadin-upload-file",
|
|
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`thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)\n`
|
|
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`thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)\n`loader` | Loading spinner (used with `thumbnails` theme)\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.",
|
|
168
168
|
"attributes": [
|
|
169
169
|
{
|
|
170
170
|
"name": "complete",
|
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-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
81
|
"name": "vaadin-upload-file",
|
|
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`thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)\n`
|
|
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`thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)\n`loader` | Loading spinner (used with `thumbnails` theme)\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.",
|
|
83
83
|
"extension": true,
|
|
84
84
|
"attributes": [
|
|
85
85
|
{
|