@vaadin/upload 24.8.4 → 25.0.0-alpha10

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.
Files changed (40) hide show
  1. package/README.md +0 -23
  2. package/package.json +14 -15
  3. package/src/styles/vaadin-upload-base-styles.d.ts +8 -0
  4. package/src/styles/vaadin-upload-base-styles.js +58 -0
  5. package/src/styles/vaadin-upload-core-styles.d.ts +8 -0
  6. package/src/styles/vaadin-upload-core-styles.js +22 -0
  7. package/src/styles/vaadin-upload-file-base-styles.js +137 -0
  8. package/src/styles/vaadin-upload-file-core-styles.d.ts +8 -0
  9. package/src/styles/vaadin-upload-file-list-base-styles.d.ts +8 -0
  10. package/src/styles/vaadin-upload-file-list-base-styles.js +35 -0
  11. package/src/styles/vaadin-upload-file-list-core-styles.d.ts +8 -0
  12. package/src/styles/vaadin-upload-file-list-core-styles.js +22 -0
  13. package/src/styles/vaadin-upload-icon-base-styles.d.ts +8 -0
  14. package/src/styles/vaadin-upload-icon-base-styles.js +33 -0
  15. package/src/styles/vaadin-upload-icon-core-styles.d.ts +8 -0
  16. package/src/styles/vaadin-upload-icon-core-styles.js +16 -0
  17. package/src/vaadin-upload-file-list.js +11 -18
  18. package/src/vaadin-upload-file.d.ts +1 -2
  19. package/src/vaadin-upload-file.js +32 -29
  20. package/src/vaadin-upload-icon.js +16 -13
  21. package/src/vaadin-upload.d.ts +2 -3
  22. package/src/vaadin-upload.js +21 -30
  23. package/web-types.json +2 -2
  24. package/web-types.lit.json +2 -2
  25. package/src/vaadin-lit-upload-file-list.js +0 -56
  26. package/src/vaadin-lit-upload-file.js +0 -87
  27. package/src/vaadin-lit-upload-icon.js +0 -41
  28. package/src/vaadin-lit-upload.js +0 -77
  29. package/theme/lumo/vaadin-lit-upload.d.ts +0 -2
  30. package/theme/lumo/vaadin-lit-upload.js +0 -2
  31. package/theme/material/vaadin-lit-upload.d.ts +0 -2
  32. package/theme/material/vaadin-lit-upload.js +0 -2
  33. package/theme/material/vaadin-upload-styles.d.ts +0 -5
  34. package/theme/material/vaadin-upload-styles.js +0 -253
  35. package/theme/material/vaadin-upload.d.ts +0 -2
  36. package/theme/material/vaadin-upload.js +0 -2
  37. package/vaadin-lit-upload.d.ts +0 -1
  38. package/vaadin-lit-upload.js +0 -2
  39. /package/src/{vaadin-upload-file-styles.d.ts → styles/vaadin-upload-file-base-styles.d.ts} +0 -0
  40. /package/src/{vaadin-upload-file-styles.js → styles/vaadin-upload-file-core-styles.js} +0 -0
@@ -1,253 +0,0 @@
1
- import '@vaadin/vaadin-material-styles/color.js';
2
- import '@vaadin/vaadin-material-styles/font-icons.js';
3
- import '@vaadin/vaadin-material-styles/typography.js';
4
- import '@vaadin/button/theme/material/vaadin-button-styles.js';
5
- import '@vaadin/progress-bar/theme/material/vaadin-progress-bar-styles.js';
6
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
7
-
8
- registerStyles(
9
- 'vaadin-upload',
10
- css`
11
- :host(:not([nodrop])) {
12
- overflow: hidden;
13
- border: 1px dashed var(--material-divider-color);
14
- border-radius: 4px;
15
- padding: 8px 16px;
16
- transition: border-color 0.6s;
17
- position: relative;
18
- }
19
-
20
- [part='primary-buttons'] {
21
- display: inline-flex;
22
- flex-wrap: wrap;
23
- align-items: baseline;
24
- }
25
-
26
- ::slotted([slot='add-button']) {
27
- margin: 0 -8px;
28
- }
29
-
30
- [part='drop-label'] {
31
- text-align: center;
32
- white-space: normal;
33
- padding: 0 24px;
34
- color: var(--material-secondary-text-color);
35
- font-family: var(--material-font-family);
36
- font-size: var(--material-small-font-size);
37
- }
38
-
39
- :host([dragover-valid]) {
40
- border-color: var(--material-primary-color);
41
- transition: border-color 0.1s;
42
- }
43
-
44
- :host([dragover-valid]) [part='drop-label'] {
45
- color: var(--material-primary-text-color);
46
- }
47
-
48
- :host([disabled]) [part='drop-label'],
49
- :host([max-files-reached]) [part='drop-label'] {
50
- color: var(--material-disabled-text-color);
51
- }
52
-
53
- /* Ripple */
54
-
55
- :host::before {
56
- content: '';
57
- position: absolute;
58
- width: 100px;
59
- height: 100px;
60
- border-radius: 50%;
61
- top: 50%;
62
- left: 50%;
63
- pointer-events: none;
64
- background-color: var(--material-primary-color);
65
- opacity: 0;
66
- transform: translate(-50%, -50%) scale(0);
67
- transition:
68
- transform 0s cubic-bezier(0.075, 0.82, 0.165, 1),
69
- opacity 0.4s linear;
70
- transition-delay: 0.4s, 0s;
71
- }
72
-
73
- :host([dragover-valid])::before {
74
- transform: translate(-50%, -50%) scale(10);
75
- opacity: 0.1;
76
- transition-duration: 2s, 0.1s;
77
- transition-delay: 0s, 0s;
78
- }
79
- `,
80
- { moduleId: 'material-upload' },
81
- );
82
-
83
- registerStyles(
84
- 'vaadin-upload-icon',
85
- css`
86
- :host {
87
- margin-right: 8px;
88
- }
89
-
90
- :host::before {
91
- content: var(--material-icons-upload);
92
- font-family: material-icons;
93
- font-size: var(--material-icon-font-size);
94
- line-height: 1;
95
- }
96
- `,
97
- { moduleId: 'material-upload-icon' },
98
- );
99
-
100
- registerStyles(
101
- 'vaadin-upload-file',
102
- css`
103
- :host {
104
- outline: none;
105
- }
106
-
107
- [part='row'] {
108
- display: flex;
109
- align-items: flex-start;
110
- justify-content: space-between;
111
- padding: 8px;
112
- }
113
-
114
- :host([focus-ring]) [part='row'] {
115
- background-color: var(--material-divider-color);
116
- }
117
-
118
- [part='status'],
119
- [part='error'] {
120
- color: var(--material-secondary-text-color);
121
- font-size: var(--material-caption-font-size);
122
- }
123
-
124
- [part='info'] {
125
- display: flex;
126
- align-items: baseline;
127
- flex: auto;
128
- }
129
-
130
- [part='meta'] {
131
- width: 0.001px;
132
- flex: 1 1 auto;
133
- }
134
-
135
- [part='name'] {
136
- white-space: nowrap;
137
- overflow: hidden;
138
- text-overflow: ellipsis;
139
- font-size: var(--material-small-font-size);
140
- }
141
-
142
- [part='commands'] {
143
- display: flex;
144
- flex: none;
145
- }
146
-
147
- [part$='icon'] {
148
- padding: 8px;
149
- margin: -8px 0 -8px -8px;
150
- font-family: material-icons;
151
- font-size: var(--material-icon-font-size);
152
- line-height: 1;
153
- }
154
-
155
- /* When both icons are hidden, let us keep space for one */
156
- [part='done-icon'][hidden] + [part='warning-icon'][hidden] {
157
- display: block !important;
158
- visibility: hidden;
159
- }
160
-
161
- [part$='button'] {
162
- position: relative;
163
- width: 40px;
164
- height: 40px;
165
- flex: none;
166
- font-family: material-icons;
167
- font-size: var(--material-icon-font-size);
168
- color: var(--material-secondary-text-color);
169
- line-height: 1;
170
- padding: 8px;
171
- margin: -8px 0;
172
- outline: none;
173
- }
174
-
175
- [part='remove-button'] {
176
- margin-right: -8px;
177
- }
178
-
179
- [part$='button']:hover {
180
- color: inherit;
181
- }
182
-
183
- [part$='button'][disabled] {
184
- color: var(--material-disabled-text-color);
185
- }
186
-
187
- [part='done-icon']::before {
188
- content: var(--material-icons-check);
189
- color: var(--material-primary-text-color);
190
- }
191
-
192
- [part='warning-icon']::before {
193
- content: var(--material-icons-error);
194
- color: var(--material-error-text-color);
195
- }
196
-
197
- [part='start-button']::before {
198
- content: var(--material-icons-play);
199
- }
200
-
201
- [part='retry-button']::before {
202
- content: var(--material-icons-reload);
203
- }
204
-
205
- [part='remove-button']::before {
206
- content: var(--material-icons-clear);
207
- }
208
-
209
- [part$='button']:not([disabled])::after {
210
- position: absolute;
211
- content: '';
212
- top: 0;
213
- left: 0;
214
- width: 40px;
215
- height: 40px;
216
- border-radius: 50%;
217
- background-color: var(--material-body-text-color);
218
- transform: scale(0);
219
- opacity: 0;
220
- transition:
221
- transform 0.08s,
222
- opacity 0.01s;
223
- will-change: transform, opacity;
224
- }
225
-
226
- [part$='button']:hover::after {
227
- opacity: 0.08;
228
- }
229
-
230
- [part$='button']:focus::after {
231
- opacity: 0.12;
232
- }
233
-
234
- [part$='button']:active::after {
235
- opacity: 0.16;
236
- }
237
-
238
- [part$='button']:focus::after,
239
- [part$='button']:active::after {
240
- transform: scale(1.2);
241
- }
242
-
243
- [part='error'] {
244
- color: var(--material-error-text-color);
245
- }
246
-
247
- ::slotted([slot='progress']) {
248
- width: auto;
249
- margin-left: 28px;
250
- }
251
- `,
252
- { moduleId: 'material-upload-file' },
253
- );
@@ -1,2 +0,0 @@
1
- import './vaadin-upload-styles.js';
2
- import '../../src/vaadin-upload.js';
@@ -1,2 +0,0 @@
1
- import './vaadin-upload-styles.js';
2
- import '../../src/vaadin-upload.js';
@@ -1 +0,0 @@
1
- export * from './src/vaadin-upload.js';
@@ -1,2 +0,0 @@
1
- import './theme/lumo/vaadin-lit-upload.js';
2
- export * from './src/vaadin-lit-upload.js';