@vaadin/upload 25.1.0-alpha8 → 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 +117 -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 +146 -155
- package/web-types.lit.json +52 -52
package/custom-elements.json
CHANGED
|
@@ -344,6 +344,28 @@
|
|
|
344
344
|
"description": "If true, the user cannot interact with this element.",
|
|
345
345
|
"attribute": "disabled"
|
|
346
346
|
},
|
|
347
|
+
{
|
|
348
|
+
"kind": "field",
|
|
349
|
+
"name": "i18n",
|
|
350
|
+
"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.",
|
|
351
|
+
"return": {
|
|
352
|
+
"type": {
|
|
353
|
+
"text": "Object"
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
"parameters": [
|
|
357
|
+
{
|
|
358
|
+
"name": "value",
|
|
359
|
+
"type": {
|
|
360
|
+
"text": "Object"
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
],
|
|
364
|
+
"inheritedFrom": {
|
|
365
|
+
"name": "I18nMixin",
|
|
366
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
367
|
+
}
|
|
368
|
+
},
|
|
347
369
|
{
|
|
348
370
|
"kind": "field",
|
|
349
371
|
"name": "items",
|
|
@@ -375,6 +397,13 @@
|
|
|
375
397
|
"description": "If true, the user cannot interact with this element.",
|
|
376
398
|
"fieldName": "disabled"
|
|
377
399
|
},
|
|
400
|
+
{
|
|
401
|
+
"name": "i18n",
|
|
402
|
+
"inheritedFrom": {
|
|
403
|
+
"name": "I18nMixin",
|
|
404
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
405
|
+
}
|
|
406
|
+
},
|
|
378
407
|
{
|
|
379
408
|
"name": "items",
|
|
380
409
|
"type": {
|
|
@@ -440,6 +469,28 @@
|
|
|
440
469
|
"module": "src/vaadin-upload-file-list-mixin.js"
|
|
441
470
|
}
|
|
442
471
|
},
|
|
472
|
+
{
|
|
473
|
+
"kind": "field",
|
|
474
|
+
"name": "i18n",
|
|
475
|
+
"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.",
|
|
476
|
+
"return": {
|
|
477
|
+
"type": {
|
|
478
|
+
"text": "Object"
|
|
479
|
+
}
|
|
480
|
+
},
|
|
481
|
+
"parameters": [
|
|
482
|
+
{
|
|
483
|
+
"name": "value",
|
|
484
|
+
"type": {
|
|
485
|
+
"text": "Object"
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
],
|
|
489
|
+
"inheritedFrom": {
|
|
490
|
+
"name": "I18nMixin",
|
|
491
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
492
|
+
}
|
|
493
|
+
},
|
|
443
494
|
{
|
|
444
495
|
"kind": "field",
|
|
445
496
|
"name": "items",
|
|
@@ -503,6 +554,13 @@
|
|
|
503
554
|
"module": "src/vaadin-upload-file-list-mixin.js"
|
|
504
555
|
}
|
|
505
556
|
},
|
|
557
|
+
{
|
|
558
|
+
"name": "i18n",
|
|
559
|
+
"inheritedFrom": {
|
|
560
|
+
"name": "I18nMixin",
|
|
561
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
562
|
+
}
|
|
563
|
+
},
|
|
506
564
|
{
|
|
507
565
|
"name": "items",
|
|
508
566
|
"type": {
|
|
@@ -776,7 +834,7 @@
|
|
|
776
834
|
"declarations": [
|
|
777
835
|
{
|
|
778
836
|
"kind": "class",
|
|
779
|
-
"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.",
|
|
780
838
|
"name": "UploadFile",
|
|
781
839
|
"members": [
|
|
782
840
|
{
|
|
@@ -1551,6 +1609,28 @@
|
|
|
1551
1609
|
"description": "Key-Value map to send to the server. If you set this property as an\nattribute, use a valid JSON string, for example:\n```html\n<vaadin-upload headers='{\"X-Foo\": \"Bar\"}'></vaadin-upload>\n```",
|
|
1552
1610
|
"attribute": "headers"
|
|
1553
1611
|
},
|
|
1612
|
+
{
|
|
1613
|
+
"kind": "field",
|
|
1614
|
+
"name": "i18n",
|
|
1615
|
+
"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\nThe object has the following JSON structure and default values:\n\n```js\n{\n dropFiles: {\n one: 'Drop file here',\n many: 'Drop files here'\n },\n addFiles: {\n one: 'Upload File...',\n many: 'Upload Files...'\n },\n error: {\n tooManyFiles: 'Too Many Files.',\n fileIsTooBig: 'File is Too Big.',\n incorrectFileType: 'Incorrect File Type.'\n },\n uploading: {\n status: {\n connecting: 'Connecting...',\n stalled: 'Stalled',\n processing: 'Processing File...',\n held: 'Queued'\n },\n remainingTime: {\n prefix: 'remaining time: ',\n unknown: 'unknown remaining time'\n },\n error: {\n serverUnavailable: 'Upload failed, please try again later',\n unexpectedServerError: 'Upload failed due to server error',\n forbidden: 'Upload forbidden'\n }\n },\n file: {\n retry: 'Retry',\n start: 'Start',\n remove: 'Remove'\n },\n units: {\n size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n sizeBase: 1000\n },\n formatSize: function(bytes) {\n // returns the size followed by the best suitable unit\n },\n formatTime: function(seconds, [secs, mins, hours]) {\n // returns a 'HH:MM:SS' string\n }\n}\n```",
|
|
1616
|
+
"return": {
|
|
1617
|
+
"type": {
|
|
1618
|
+
"text": "!UploadI18n"
|
|
1619
|
+
}
|
|
1620
|
+
},
|
|
1621
|
+
"parameters": [
|
|
1622
|
+
{
|
|
1623
|
+
"name": "value",
|
|
1624
|
+
"type": {
|
|
1625
|
+
"text": "Object"
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1628
|
+
],
|
|
1629
|
+
"inheritedFrom": {
|
|
1630
|
+
"name": "I18nMixin",
|
|
1631
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1632
|
+
}
|
|
1633
|
+
},
|
|
1554
1634
|
{
|
|
1555
1635
|
"kind": "field",
|
|
1556
1636
|
"name": "maxConcurrentUploads",
|
|
@@ -1764,6 +1844,13 @@
|
|
|
1764
1844
|
"description": "Specifies the 'name' property at Content-Disposition for multipart uploads.\nThis property is ignored when uploadFormat is 'raw'.",
|
|
1765
1845
|
"fieldName": "formDataName"
|
|
1766
1846
|
},
|
|
1847
|
+
{
|
|
1848
|
+
"name": "i18n",
|
|
1849
|
+
"inheritedFrom": {
|
|
1850
|
+
"name": "I18nMixin",
|
|
1851
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1852
|
+
}
|
|
1853
|
+
},
|
|
1767
1854
|
{
|
|
1768
1855
|
"name": "max-concurrent-uploads",
|
|
1769
1856
|
"type": {
|
|
@@ -1985,6 +2072,28 @@
|
|
|
1985
2072
|
"module": "src/vaadin-upload-mixin.js"
|
|
1986
2073
|
}
|
|
1987
2074
|
},
|
|
2075
|
+
{
|
|
2076
|
+
"kind": "field",
|
|
2077
|
+
"name": "i18n",
|
|
2078
|
+
"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\nThe object has the following JSON structure and default values:\n\n```js\n{\n dropFiles: {\n one: 'Drop file here',\n many: 'Drop files here'\n },\n addFiles: {\n one: 'Upload File...',\n many: 'Upload Files...'\n },\n error: {\n tooManyFiles: 'Too Many Files.',\n fileIsTooBig: 'File is Too Big.',\n incorrectFileType: 'Incorrect File Type.'\n },\n uploading: {\n status: {\n connecting: 'Connecting...',\n stalled: 'Stalled',\n processing: 'Processing File...',\n held: 'Queued'\n },\n remainingTime: {\n prefix: 'remaining time: ',\n unknown: 'unknown remaining time'\n },\n error: {\n serverUnavailable: 'Upload failed, please try again later',\n unexpectedServerError: 'Upload failed due to server error',\n forbidden: 'Upload forbidden'\n }\n },\n file: {\n retry: 'Retry',\n start: 'Start',\n remove: 'Remove'\n },\n units: {\n size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n sizeBase: 1000\n },\n formatSize: function(bytes) {\n // returns the size followed by the best suitable unit\n },\n formatTime: function(seconds, [secs, mins, hours]) {\n // returns a 'HH:MM:SS' string\n }\n}\n```",
|
|
2079
|
+
"return": {
|
|
2080
|
+
"type": {
|
|
2081
|
+
"text": "!UploadI18n"
|
|
2082
|
+
}
|
|
2083
|
+
},
|
|
2084
|
+
"parameters": [
|
|
2085
|
+
{
|
|
2086
|
+
"name": "value",
|
|
2087
|
+
"type": {
|
|
2088
|
+
"text": "Object"
|
|
2089
|
+
}
|
|
2090
|
+
}
|
|
2091
|
+
],
|
|
2092
|
+
"inheritedFrom": {
|
|
2093
|
+
"name": "I18nMixin",
|
|
2094
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
2095
|
+
}
|
|
2096
|
+
},
|
|
1988
2097
|
{
|
|
1989
2098
|
"kind": "field",
|
|
1990
2099
|
"name": "maxConcurrentUploads",
|
|
@@ -2362,6 +2471,13 @@
|
|
|
2362
2471
|
"module": "src/vaadin-upload-mixin.js"
|
|
2363
2472
|
}
|
|
2364
2473
|
},
|
|
2474
|
+
{
|
|
2475
|
+
"name": "i18n",
|
|
2476
|
+
"inheritedFrom": {
|
|
2477
|
+
"name": "I18nMixin",
|
|
2478
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
2479
|
+
}
|
|
2480
|
+
},
|
|
2365
2481
|
{
|
|
2366
2482
|
"name": "max-concurrent-uploads",
|
|
2367
2483
|
"type": {
|
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>
|