@vaadin/upload 25.0.0-alpha9 → 25.0.0-beta2
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 -14
- package/src/styles/vaadin-upload-base-styles.js +8 -16
- package/src/styles/vaadin-upload-file-base-styles.js +25 -20
- package/src/styles/vaadin-upload-file-list-base-styles.js +5 -7
- package/src/styles/vaadin-upload-icon-base-styles.js +2 -2
- package/src/vaadin-upload-file-list.js +2 -3
- package/src/vaadin-upload-file.d.ts +0 -2
- package/src/vaadin-upload-file.js +45 -44
- package/src/vaadin-upload-icon.js +1 -1
- package/src/vaadin-upload-mixin.d.ts +2 -2
- package/src/vaadin-upload-mixin.js +5 -4
- package/src/vaadin-upload.d.ts +7 -7
- package/src/vaadin-upload.js +8 -8
- package/vaadin-upload.js +1 -1
- package/web-types.json +5 -5
- package/web-types.lit.json +5 -5
- package/src/styles/vaadin-upload-core-styles.d.ts +0 -8
- package/src/styles/vaadin-upload-core-styles.js +0 -22
- package/src/styles/vaadin-upload-file-core-styles.d.ts +0 -8
- package/src/styles/vaadin-upload-file-core-styles.js +0 -32
- package/src/styles/vaadin-upload-file-list-core-styles.d.ts +0 -8
- package/src/styles/vaadin-upload-file-list-core-styles.js +0 -22
- package/src/styles/vaadin-upload-icon-core-styles.d.ts +0 -8
- package/src/styles/vaadin-upload-icon-core-styles.js +0 -16
- package/theme/lumo/vaadin-upload-styles.d.ts +0 -8
- package/theme/lumo/vaadin-upload-styles.js +0 -192
- package/theme/lumo/vaadin-upload.d.ts +0 -2
- package/theme/lumo/vaadin-upload.js +0 -2
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-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,9 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"!src/styles/*-base-styles.d.ts",
|
|
25
|
-
"!src/styles/*-base-styles.js",
|
|
26
|
-
"theme",
|
|
27
24
|
"vaadin-*.d.ts",
|
|
28
25
|
"vaadin-*.js",
|
|
29
26
|
"web-types.json",
|
|
@@ -37,23 +34,23 @@
|
|
|
37
34
|
],
|
|
38
35
|
"dependencies": {
|
|
39
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/button": "25.0.0-
|
|
42
|
-
"@vaadin/component-base": "25.0.0-
|
|
43
|
-
"@vaadin/progress-bar": "25.0.0-
|
|
44
|
-
"@vaadin/vaadin-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-beta2",
|
|
38
|
+
"@vaadin/button": "25.0.0-beta2",
|
|
39
|
+
"@vaadin/component-base": "25.0.0-beta2",
|
|
40
|
+
"@vaadin/progress-bar": "25.0.0-beta2",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-beta2",
|
|
46
42
|
"lit": "^3.0.0"
|
|
47
43
|
},
|
|
48
44
|
"devDependencies": {
|
|
49
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
45
|
+
"@vaadin/chai-plugins": "25.0.0-beta2",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.0.0-beta2",
|
|
51
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-beta2",
|
|
49
|
+
"sinon": "^21.0.0"
|
|
53
50
|
},
|
|
54
51
|
"web-types": [
|
|
55
52
|
"web-types.json",
|
|
56
53
|
"web-types.lit.json"
|
|
57
54
|
],
|
|
58
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
|
|
59
56
|
}
|
|
@@ -3,27 +3,25 @@
|
|
|
3
3
|
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const uploadStyles = css`
|
|
10
10
|
:host {
|
|
11
11
|
background: var(--vaadin-upload-background, transparent);
|
|
12
|
-
border: var(
|
|
13
|
-
--vaadin-upload-border,
|
|
14
|
-
var(--vaadin-upload-border-width, 1px) solid var(--vaadin-upload-border-color, var(--vaadin-border-color))
|
|
15
|
-
);
|
|
12
|
+
border: var(--vaadin-upload-border-width, 1px) solid
|
|
13
|
+
var(--vaadin-upload-border-color, var(--vaadin-border-color-secondary));
|
|
16
14
|
border-radius: var(--vaadin-upload-border-radius, var(--vaadin-radius-m));
|
|
17
15
|
box-sizing: border-box;
|
|
18
16
|
display: flex;
|
|
19
17
|
flex-direction: column;
|
|
20
|
-
padding: var(--vaadin-upload-padding, var(--vaadin-padding));
|
|
18
|
+
padding: var(--vaadin-upload-padding, var(--vaadin-padding-s));
|
|
21
19
|
position: relative;
|
|
22
20
|
}
|
|
23
21
|
|
|
24
22
|
:host([dragover-valid]) {
|
|
25
23
|
--vaadin-upload-background: var(--vaadin-background-container);
|
|
26
|
-
--vaadin-upload-border: 1px dashed var(--vaadin-color);
|
|
24
|
+
--vaadin-upload-border: 1px dashed var(--vaadin-text-color);
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
:host([hidden]) {
|
|
@@ -37,22 +35,16 @@ export const uploadStyles = css`
|
|
|
37
35
|
[part='primary-buttons'] {
|
|
38
36
|
align-items: center;
|
|
39
37
|
display: flex;
|
|
40
|
-
gap: var(--vaadin-gap-
|
|
38
|
+
gap: var(--vaadin-gap-s);
|
|
41
39
|
}
|
|
42
40
|
|
|
43
41
|
[part='drop-label'] {
|
|
44
42
|
align-items: center;
|
|
45
|
-
color: var(--vaadin-upload-drop-label-color, var(--vaadin-color));
|
|
43
|
+
color: var(--vaadin-upload-drop-label-color, var(--vaadin-text-color));
|
|
46
44
|
display: flex;
|
|
47
45
|
font-size: var(--vaadin-upload-drop-label-font-size, inherit);
|
|
48
46
|
font-weight: var(--vaadin-upload-drop-label-font-weight, inherit);
|
|
49
|
-
gap: var(--vaadin-upload-drop-label-gap, var(--vaadin-gap-
|
|
47
|
+
gap: var(--vaadin-upload-drop-label-gap, var(--vaadin-gap-s));
|
|
50
48
|
line-height: var(--vaadin-upload-drop-label-line-height, inherit);
|
|
51
49
|
}
|
|
52
|
-
|
|
53
|
-
:host([nodrop]) {
|
|
54
|
-
--vaadin-upload-border: none;
|
|
55
|
-
--vaadin-upload-border-radius: 0;
|
|
56
|
-
--vaadin-upload-padding: 0;
|
|
57
|
-
}
|
|
58
50
|
`;
|
|
@@ -3,28 +3,26 @@
|
|
|
3
3
|
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const uploadFileStyles = css`
|
|
10
10
|
:host {
|
|
11
11
|
align-items: center;
|
|
12
12
|
display: grid;
|
|
13
|
-
gap: var(--vaadin-upload-file-gap, var(--vaadin-gap-
|
|
13
|
+
gap: var(--vaadin-upload-file-gap, var(--vaadin-gap-s));
|
|
14
14
|
grid-template-columns: var(--vaadin-icon-size, 1lh) minmax(0, 1fr) auto;
|
|
15
|
-
padding: var(--vaadin-upload-file-padding, var(--vaadin-padding));
|
|
15
|
+
padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
|
|
16
|
+
border-radius: var(--vaadin-upload-file-border-radius, var(--vaadin-radius-m));
|
|
16
17
|
}
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
|
|
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);
|
|
20
22
|
}
|
|
21
23
|
|
|
22
|
-
[
|
|
23
|
-
display:
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
[part='info'] {
|
|
27
|
-
display: contents;
|
|
24
|
+
[hidden] {
|
|
25
|
+
display: none;
|
|
28
26
|
}
|
|
29
27
|
|
|
30
28
|
[part='done-icon']:not([hidden]),
|
|
@@ -41,6 +39,12 @@ export const uploadFileStyles = css`
|
|
|
41
39
|
width: var(--vaadin-icon-size, 1lh);
|
|
42
40
|
}
|
|
43
41
|
|
|
42
|
+
:is([part$='icon'], [part$='button'])::before {
|
|
43
|
+
mask-size: var(--vaadin-icon-visual-size, 100%);
|
|
44
|
+
mask-position: 50%;
|
|
45
|
+
mask-repeat: no-repeat;
|
|
46
|
+
}
|
|
47
|
+
|
|
44
48
|
[part='done-icon']::before {
|
|
45
49
|
background: var(--vaadin-upload-file-done-color, currentColor);
|
|
46
50
|
mask-image: var(--_vaadin-icon-checkmark);
|
|
@@ -56,7 +60,7 @@ export const uploadFileStyles = css`
|
|
|
56
60
|
}
|
|
57
61
|
|
|
58
62
|
[part='name'] {
|
|
59
|
-
color: var(--vaadin-upload-file-name-color, var(--vaadin-color));
|
|
63
|
+
color: var(--vaadin-upload-file-name-color, var(--vaadin-text-color));
|
|
60
64
|
font-size: var(--vaadin-upload-file-name-font-size, inherit);
|
|
61
65
|
font-weight: var(--vaadin-upload-file-name-font-weight, inherit);
|
|
62
66
|
line-height: var(--vaadin-upload-file-name-line-height, inherit);
|
|
@@ -65,14 +69,14 @@ export const uploadFileStyles = css`
|
|
|
65
69
|
}
|
|
66
70
|
|
|
67
71
|
[part='status'] {
|
|
68
|
-
color: var(--vaadin-upload-file-status-color, var(--vaadin-color-
|
|
72
|
+
color: var(--vaadin-upload-file-status-color, var(--vaadin-text-color-secondary));
|
|
69
73
|
font-size: var(--vaadin-upload-file-status-font-size, inherit);
|
|
70
74
|
font-weight: var(--vaadin-upload-file-status-font-weight, inherit);
|
|
71
75
|
line-height: var(--vaadin-upload-file-status-line-height, inherit);
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
[part='error'] {
|
|
75
|
-
color: var(--vaadin-upload-file-error-color, var(--vaadin-color));
|
|
79
|
+
color: var(--vaadin-upload-file-error-color, var(--vaadin-text-color));
|
|
76
80
|
font-size: var(--vaadin-upload-file-error-font-size, inherit);
|
|
77
81
|
font-weight: var(--vaadin-upload-file-error-font-weight, inherit);
|
|
78
82
|
line-height: var(--vaadin-upload-file-error-line-height, inherit);
|
|
@@ -80,13 +84,10 @@ export const uploadFileStyles = css`
|
|
|
80
84
|
|
|
81
85
|
button {
|
|
82
86
|
background: var(--vaadin-upload-file-button-background, transparent);
|
|
83
|
-
border: var(
|
|
84
|
-
--vaadin-upload-file-button-border,
|
|
85
|
-
var(--vaadin-upload-file-button-border-width, 1px) solid
|
|
86
|
-
var(--vaadin-upload-file-button-border-color, transparent)
|
|
87
|
-
);
|
|
87
|
+
border: var(--vaadin-upload-file-button-border-width, 1px) solid
|
|
88
|
+
var(--vaadin-upload-file-button-border-color, transparent);
|
|
88
89
|
border-radius: var(--vaadin-upload-file-button-border-radius, var(--vaadin-radius-m));
|
|
89
|
-
color: var(--vaadin-upload-file-button-text-color, var(--vaadin-color));
|
|
90
|
+
color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color));
|
|
90
91
|
cursor: var(--vaadin-clickable-cursor);
|
|
91
92
|
flex-shrink: 0;
|
|
92
93
|
font-family: var(--vaadin-upload-file-button-font-family, inherit);
|
|
@@ -97,6 +98,10 @@ export const uploadFileStyles = css`
|
|
|
97
98
|
padding: var(--vaadin-upload-file-button-padding, var(--vaadin-padding-container));
|
|
98
99
|
}
|
|
99
100
|
|
|
101
|
+
button:focus-visible {
|
|
102
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
103
|
+
}
|
|
104
|
+
|
|
100
105
|
[part='start-button']::before,
|
|
101
106
|
[part='retry-button']::before,
|
|
102
107
|
[part='remove-button']::before {
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const uploadFileListStyles = css`
|
|
10
10
|
:host {
|
|
11
11
|
display: block;
|
|
12
|
+
overflow: auto;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
:host([hidden]) {
|
|
@@ -22,14 +23,11 @@ export const uploadFileListStyles = css`
|
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
::slotted(:first-child) {
|
|
25
|
-
margin-top: var(--vaadin-upload-gap, var(--vaadin-gap-
|
|
26
|
+
margin-top: var(--vaadin-upload-gap, var(--vaadin-gap-s));
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
::slotted(li:not(:last-of-type)) {
|
|
29
|
-
border-bottom: var(
|
|
30
|
-
--vaadin-upload-file-list-border
|
|
31
|
-
var(--vaadin-upload-file-list-border-width, 1px) solid
|
|
32
|
-
var(--vaadin-upload-file-list-border-color, var(--vaadin-border-color))
|
|
33
|
-
);
|
|
30
|
+
border-bottom: var(--vaadin-upload-file-list-divider-width, 1px) solid
|
|
31
|
+
var(--vaadin-upload-file-list-divider-color, var(--vaadin-border-color-secondary));
|
|
34
32
|
}
|
|
35
33
|
`;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const uploadIconStyles = css`
|
|
@@ -17,7 +17,7 @@ export const uploadIconStyles = css`
|
|
|
17
17
|
display: inline-block;
|
|
18
18
|
flex: none;
|
|
19
19
|
height: var(--vaadin-icon-size, 1lh);
|
|
20
|
-
mask
|
|
20
|
+
mask: var(--_vaadin-icon-upload) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
|
|
21
21
|
width: var(--vaadin-icon-size, 1lh);
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -7,9 +7,8 @@ import './vaadin-upload-file.js';
|
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
8
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
9
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
|
-
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
11
10
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
|
-
import { uploadFileListStyles } from './styles/vaadin-upload-file-list-
|
|
11
|
+
import { uploadFileListStyles } from './styles/vaadin-upload-file-list-base-styles.js';
|
|
13
12
|
import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
|
|
14
13
|
|
|
15
14
|
/**
|
|
@@ -21,7 +20,7 @@ import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
|
|
|
21
20
|
* @mixes UploadFileListMixin
|
|
22
21
|
* @private
|
|
23
22
|
*/
|
|
24
|
-
class UploadFileList extends UploadFileListMixin(ThemableMixin(PolylitMixin(
|
|
23
|
+
class UploadFileList extends UploadFileListMixin(ThemableMixin(PolylitMixin(LitElement))) {
|
|
25
24
|
static get is() {
|
|
26
25
|
return 'vaadin-upload-file-list';
|
|
27
26
|
}
|
|
@@ -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
|
|
@@ -10,7 +10,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
|
10
10
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
11
11
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
12
12
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
-
import { uploadFileStyles } from './styles/vaadin-upload-file-
|
|
13
|
+
import { uploadFileStyles } from './styles/vaadin-upload-file-base-styles.js';
|
|
14
14
|
import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
|
|
15
15
|
|
|
16
16
|
/**
|
|
@@ -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>
|
|
@@ -7,7 +7,7 @@ import { html, LitElement } from 'lit';
|
|
|
7
7
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
8
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
9
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
-
import { uploadIconStyles } from './styles/vaadin-upload-icon-
|
|
10
|
+
import { uploadIconStyles } from './styles/vaadin-upload-icon-base-styles.js';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* An element used internally by `<vaadin-upload>`. Not intended to be used separately.
|
|
@@ -101,7 +101,7 @@ export declare class UploadMixinClass {
|
|
|
101
101
|
/**
|
|
102
102
|
* Key-Value map to send to the server. If you set this property as an
|
|
103
103
|
* attribute, use a valid JSON string, for example:
|
|
104
|
-
* ```
|
|
104
|
+
* ```html
|
|
105
105
|
* <vaadin-upload headers='{"X-Foo": "Bar"}'></vaadin-upload>
|
|
106
106
|
* ```
|
|
107
107
|
*/
|
|
@@ -201,7 +201,7 @@ export declare class UploadMixinClass {
|
|
|
201
201
|
*
|
|
202
202
|
* The object has the following JSON structure and default values:
|
|
203
203
|
*
|
|
204
|
-
* ```
|
|
204
|
+
* ```js
|
|
205
205
|
* {
|
|
206
206
|
* dropFiles: {
|
|
207
207
|
* one: 'Drop file here',
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { announce } from '@vaadin/a11y-base/src/announce.js';
|
|
7
|
+
import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
7
8
|
import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
|
|
8
9
|
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
9
10
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
@@ -157,7 +158,7 @@ export const UploadMixin = (superClass) =>
|
|
|
157
158
|
/**
|
|
158
159
|
* Key-Value map to send to the server. If you set this property as an
|
|
159
160
|
* attribute, use a valid JSON string, for example:
|
|
160
|
-
* ```
|
|
161
|
+
* ```html
|
|
161
162
|
* <vaadin-upload headers='{"X-Foo": "Bar"}'></vaadin-upload>
|
|
162
163
|
* ```
|
|
163
164
|
* @type {object | string}
|
|
@@ -352,7 +353,7 @@ export const UploadMixin = (superClass) =>
|
|
|
352
353
|
*
|
|
353
354
|
* The object has the following JSON structure and default values:
|
|
354
355
|
*
|
|
355
|
-
* ```
|
|
356
|
+
* ```js
|
|
356
357
|
* {
|
|
357
358
|
* dropFiles: {
|
|
358
359
|
* one: 'Drop file here',
|
|
@@ -894,14 +895,14 @@ export const UploadMixin = (superClass) =>
|
|
|
894
895
|
/** @private */
|
|
895
896
|
_updateFocus(fileIndex) {
|
|
896
897
|
if (this.files.length === 0) {
|
|
897
|
-
this._addButton.focus();
|
|
898
|
+
this._addButton.focus({ focusVisible: isKeyboardActive() });
|
|
898
899
|
return;
|
|
899
900
|
}
|
|
900
901
|
const lastFileRemoved = fileIndex === this.files.length;
|
|
901
902
|
if (lastFileRemoved) {
|
|
902
903
|
fileIndex -= 1;
|
|
903
904
|
}
|
|
904
|
-
this._fileList.children[fileIndex].firstElementChild.focus();
|
|
905
|
+
this._fileList.children[fileIndex].firstElementChild.focus({ focusVisible: isKeyboardActive() });
|
|
905
906
|
}
|
|
906
907
|
|
|
907
908
|
/**
|
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
|
@@ -14,7 +14,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
|
14
14
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
15
15
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
16
16
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
17
|
-
import { uploadStyles } from './styles/vaadin-upload-
|
|
17
|
+
import { uploadStyles } from './styles/vaadin-upload-base-styles.js';
|
|
18
18
|
import { UploadMixin } from './vaadin-upload-mixin.js';
|
|
19
19
|
|
|
20
20
|
/**
|
|
@@ -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/vaadin-upload.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-upload.js';
|
|
2
2
|
export * from './src/vaadin-upload.js';
|
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-beta2",
|
|
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",
|
|
@@ -391,7 +391,7 @@
|
|
|
391
391
|
"properties": [
|
|
392
392
|
{
|
|
393
393
|
"name": "i18n",
|
|
394
|
-
"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
|
|
394
|
+
"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```",
|
|
395
395
|
"value": {
|
|
396
396
|
"type": [
|
|
397
397
|
"UploadI18n"
|
|
@@ -436,7 +436,7 @@
|
|
|
436
436
|
},
|
|
437
437
|
{
|
|
438
438
|
"name": "headers",
|
|
439
|
-
"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
|
|
439
|
+
"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```",
|
|
440
440
|
"value": {
|
|
441
441
|
"type": [
|
|
442
442
|
"object",
|
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-beta2",
|
|
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
|
{
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
"name": ".i18n",
|
|
157
|
-
"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
|
|
157
|
+
"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```",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
177
|
"name": ".headers",
|
|
178
|
-
"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
|
|
178
|
+
"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```",
|
|
179
179
|
"value": {
|
|
180
180
|
"kind": "expression"
|
|
181
181
|
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const uploadStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: block;
|
|
11
|
-
position: relative;
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
:host([hidden]) {
|
|
16
|
-
display: none !important;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
[hidden] {
|
|
20
|
-
display: none !important;
|
|
21
|
-
}
|
|
22
|
-
`;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const uploadFileStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: block;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
[hidden] {
|
|
14
|
-
display: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
[part='row'] {
|
|
18
|
-
list-style-type: none;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
button {
|
|
22
|
-
background: transparent;
|
|
23
|
-
padding: 0;
|
|
24
|
-
border: none;
|
|
25
|
-
box-shadow: none;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
:host([complete]) ::slotted([slot='progress']),
|
|
29
|
-
:host([error]) ::slotted([slot='progress']) {
|
|
30
|
-
display: none !important;
|
|
31
|
-
}
|
|
32
|
-
`;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const uploadFileListStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: block;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([hidden]) {
|
|
14
|
-
display: none !important;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
[part='list'] {
|
|
18
|
-
padding: 0;
|
|
19
|
-
margin: 0;
|
|
20
|
-
list-style-type: none;
|
|
21
|
-
}
|
|
22
|
-
`;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const uploadIconStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: inline-block;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([hidden]) {
|
|
14
|
-
display: none !important;
|
|
15
|
-
}
|
|
16
|
-
`;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/font-icons.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/sizing.js';
|
|
4
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
5
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
6
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
7
|
-
import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
|
|
8
|
-
import '@vaadin/progress-bar/theme/lumo/vaadin-progress-bar-styles.js';
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/font-icons.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/sizing.js';
|
|
4
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
5
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
6
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
7
|
-
import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
|
|
8
|
-
import '@vaadin/progress-bar/theme/lumo/vaadin-progress-bar-styles.js';
|
|
9
|
-
import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
|
|
10
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
|
-
|
|
12
|
-
registerStyles(
|
|
13
|
-
'vaadin-upload',
|
|
14
|
-
css`
|
|
15
|
-
:host {
|
|
16
|
-
line-height: var(--lumo-line-height-m);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:host(:not([nodrop])) {
|
|
20
|
-
overflow: hidden;
|
|
21
|
-
border: 1px dashed var(--lumo-contrast-20pct);
|
|
22
|
-
border-radius: var(--lumo-border-radius-l);
|
|
23
|
-
padding: var(--lumo-space-m);
|
|
24
|
-
transition:
|
|
25
|
-
background-color 0.6s,
|
|
26
|
-
border-color 0.6s;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
[part='drop-label'] {
|
|
30
|
-
display: inline-block;
|
|
31
|
-
white-space: normal;
|
|
32
|
-
padding: 0 var(--lumo-space-s);
|
|
33
|
-
color: var(--lumo-secondary-text-color);
|
|
34
|
-
font-family: var(--lumo-font-family);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
:host([dragover-valid]) {
|
|
38
|
-
border-color: var(--lumo-primary-color-50pct);
|
|
39
|
-
background: var(--lumo-primary-color-10pct);
|
|
40
|
-
transition:
|
|
41
|
-
background-color 0.1s,
|
|
42
|
-
border-color 0.1s;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
:host([dragover-valid]) [part='drop-label'] {
|
|
46
|
-
color: var(--lumo-primary-text-color);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:host([disabled]) [part='drop-label'],
|
|
50
|
-
:host([max-files-reached]) [part='drop-label'] {
|
|
51
|
-
color: var(--lumo-disabled-text-color);
|
|
52
|
-
}
|
|
53
|
-
`,
|
|
54
|
-
{ moduleId: 'lumo-upload' },
|
|
55
|
-
);
|
|
56
|
-
|
|
57
|
-
registerStyles(
|
|
58
|
-
'vaadin-upload-icon',
|
|
59
|
-
css`
|
|
60
|
-
:host::before {
|
|
61
|
-
content: var(--lumo-icons-upload);
|
|
62
|
-
font-family: lumo-icons;
|
|
63
|
-
font-size: var(--lumo-icon-size-m);
|
|
64
|
-
line-height: 1;
|
|
65
|
-
vertical-align: -0.25em;
|
|
66
|
-
}
|
|
67
|
-
`,
|
|
68
|
-
{ moduleId: 'lumo-upload-icon' },
|
|
69
|
-
);
|
|
70
|
-
|
|
71
|
-
registerStyles(
|
|
72
|
-
'vaadin-upload-file-list',
|
|
73
|
-
css`
|
|
74
|
-
::slotted(li:not(:first-of-type)) {
|
|
75
|
-
border-top: 1px solid var(--lumo-contrast-10pct);
|
|
76
|
-
}
|
|
77
|
-
`,
|
|
78
|
-
{ moduleId: 'lumo-upload-file-list' },
|
|
79
|
-
);
|
|
80
|
-
|
|
81
|
-
const uploadFile = css`
|
|
82
|
-
:host {
|
|
83
|
-
padding: var(--lumo-space-s) 0;
|
|
84
|
-
outline: none;
|
|
85
|
-
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
|
|
86
|
-
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
:host([focus-ring]) [part='row'] {
|
|
90
|
-
border-radius: var(--lumo-border-radius-s);
|
|
91
|
-
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
[part='row'] {
|
|
95
|
-
display: flex;
|
|
96
|
-
align-items: baseline;
|
|
97
|
-
justify-content: space-between;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
[part='status'],
|
|
101
|
-
[part='error'] {
|
|
102
|
-
color: var(--lumo-secondary-text-color);
|
|
103
|
-
font-size: var(--lumo-font-size-s);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
[part='info'] {
|
|
107
|
-
display: flex;
|
|
108
|
-
align-items: baseline;
|
|
109
|
-
flex: auto;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
[part='meta'] {
|
|
113
|
-
width: 0.001px;
|
|
114
|
-
flex: 1 1 auto;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
[part='name'] {
|
|
118
|
-
white-space: nowrap;
|
|
119
|
-
overflow: hidden;
|
|
120
|
-
text-overflow: ellipsis;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
[part='commands'] {
|
|
124
|
-
display: flex;
|
|
125
|
-
align-items: baseline;
|
|
126
|
-
flex: none;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
[part$='icon'] {
|
|
130
|
-
margin-right: var(--lumo-space-xs);
|
|
131
|
-
font-size: var(--lumo-icon-size-m);
|
|
132
|
-
font-family: 'lumo-icons';
|
|
133
|
-
line-height: 1;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
/* When both icons are hidden, let us keep space for one */
|
|
137
|
-
[part='done-icon'][hidden] + [part='warning-icon'][hidden] {
|
|
138
|
-
display: block !important;
|
|
139
|
-
visibility: hidden;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
[part$='button'] {
|
|
143
|
-
flex: none;
|
|
144
|
-
margin-left: var(--lumo-space-xs);
|
|
145
|
-
cursor: var(--lumo-clickable-cursor);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
[part$='button']:focus {
|
|
149
|
-
outline: none;
|
|
150
|
-
border-radius: var(--lumo-border-radius-s);
|
|
151
|
-
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
[part$='icon']::before,
|
|
155
|
-
[part$='button']::before {
|
|
156
|
-
vertical-align: -0.25em;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
[part='done-icon']::before {
|
|
160
|
-
content: var(--lumo-icons-checkmark);
|
|
161
|
-
color: var(--lumo-primary-text-color);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
[part='warning-icon']::before {
|
|
165
|
-
content: var(--lumo-icons-error);
|
|
166
|
-
color: var(--lumo-error-text-color);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
[part='start-button']::before {
|
|
170
|
-
content: var(--lumo-icons-play);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
[part='retry-button']::before {
|
|
174
|
-
content: var(--lumo-icons-reload);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
[part='remove-button']::before {
|
|
178
|
-
content: var(--lumo-icons-cross);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
[part='error'] {
|
|
182
|
-
color: var(--lumo-error-text-color);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
::slotted([slot='progress']) {
|
|
186
|
-
width: auto;
|
|
187
|
-
margin-left: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
|
|
188
|
-
margin-right: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
|
|
189
|
-
}
|
|
190
|
-
`;
|
|
191
|
-
|
|
192
|
-
registerStyles('vaadin-upload-file', [fieldButton, uploadFile], { moduleId: 'lumo-upload-file' });
|