@vaadin/upload 25.1.0-alpha3 → 25.1.0-alpha5

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 (10) hide show
  1. package/package.json +11 -11
  2. package/src/styles/vaadin-upload-file-base-styles.js +31 -0
  3. package/src/styles/vaadin-upload-file-list-base-styles.js +15 -0
  4. package/src/vaadin-upload-file-list-mixin.js +4 -2
  5. package/src/vaadin-upload-file-mixin.js +37 -1
  6. package/src/vaadin-upload-file.d.ts +2 -0
  7. package/src/vaadin-upload-file.js +5 -0
  8. package/src/vaadin-upload-mixin.js +6 -1
  9. package/web-types.json +2 -2
  10. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/upload",
3
- "version": "25.1.0-alpha3",
3
+ "version": "25.1.0-alpha5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,24 +34,24 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "@open-wc/dedupe-mixin": "^1.3.0",
37
- "@vaadin/a11y-base": "25.1.0-alpha3",
38
- "@vaadin/button": "25.1.0-alpha3",
39
- "@vaadin/component-base": "25.1.0-alpha3",
40
- "@vaadin/progress-bar": "25.1.0-alpha3",
41
- "@vaadin/vaadin-themable-mixin": "25.1.0-alpha3",
37
+ "@vaadin/a11y-base": "25.1.0-alpha5",
38
+ "@vaadin/button": "25.1.0-alpha5",
39
+ "@vaadin/component-base": "25.1.0-alpha5",
40
+ "@vaadin/progress-bar": "25.1.0-alpha5",
41
+ "@vaadin/vaadin-themable-mixin": "25.1.0-alpha5",
42
42
  "lit": "^3.0.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@vaadin/aura": "25.1.0-alpha3",
46
- "@vaadin/chai-plugins": "25.1.0-alpha3",
47
- "@vaadin/test-runner-commands": "25.1.0-alpha3",
45
+ "@vaadin/aura": "25.1.0-alpha5",
46
+ "@vaadin/chai-plugins": "25.1.0-alpha5",
47
+ "@vaadin/test-runner-commands": "25.1.0-alpha5",
48
48
  "@vaadin/testing-helpers": "^2.0.0",
49
- "@vaadin/vaadin-lumo-styles": "25.1.0-alpha3",
49
+ "@vaadin/vaadin-lumo-styles": "25.1.0-alpha5",
50
50
  "sinon": "^21.0.0"
51
51
  },
52
52
  "web-types": [
53
53
  "web-types.json",
54
54
  "web-types.lit.json"
55
55
  ],
56
- "gitHead": "b3bb340cfd5e837cda8498aee1608950362e5177"
56
+ "gitHead": "9681e63d220c9e8d9d7c58cee272e5820b8ced19"
57
57
  }
package/src/styles/vaadin-upload-file-base-styles.js CHANGED
@@ -25,11 +25,42 @@ export const uploadFileStyles = css`
25
25
  display: none;
26
26
  }
27
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
+
28
54
  [part='done-icon']:not([hidden]),
29
55
  [part='warning-icon']:not([hidden]) {
30
56
  display: flex;
31
57
  }
32
58
 
59
+ :host([theme~='thumbnails']) [part='done-icon'],
60
+ :host([theme~='thumbnails']) [part='warning-icon'] {
61
+ display: none !important;
62
+ }
63
+
33
64
  [part='done-icon']::before,
34
65
  [part='warning-icon']::before {
35
66
  content: '\\2003' / '';
package/src/styles/vaadin-upload-file-list-base-styles.js CHANGED
@@ -30,4 +30,19 @@ export const uploadFileListStyles = css`
30
30
  border-bottom: var(--vaadin-upload-file-list-divider-width, 1px) solid
31
31
  var(--vaadin-upload-file-list-divider-color, var(--vaadin-border-color-secondary));
32
32
  }
33
+
34
+ /* Thumbnails theme variant */
35
+ :host([theme~='thumbnails']) [part='list'] {
36
+ display: flex;
37
+ flex-wrap: wrap;
38
+ gap: var(--vaadin-gap-s);
39
+ }
40
+
41
+ :host([theme~='thumbnails']) ::slotted(:first-child) {
42
+ margin-top: 0;
43
+ }
44
+
45
+ :host([theme~='thumbnails']) ::slotted(li) {
46
+ border-bottom: none;
47
+ }
33
48
  `;
package/src/vaadin-upload-file-list-mixin.js CHANGED
@@ -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 { html, render } from 'lit';
7
+ import { ifDefined } from 'lit/directives/if-defined.js';
7
8
  import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
8
9
  import { UploadManager } from './vaadin-upload-manager.js';
9
10
 
@@ -81,7 +82,7 @@ export const UploadFileListMixin = (superClass) =>
81
82
  }
82
83
 
83
84
  static get observers() {
84
- return ['__updateItems(items, __effectiveI18n, disabled)'];
85
+ return ['__updateItems(items, __effectiveI18n, disabled, _theme)'];
85
86
  }
86
87
 
87
88
  constructor() {
@@ -191,7 +192,7 @@ export const UploadFileListMixin = (superClass) =>
191
192
  }
192
193
 
193
194
  /** @private */
194
- __updateItems(items, i18n) {
195
+ __updateItems(items, i18n, _disabled, _theme) {
195
196
  if (items && i18n) {
196
197
  // Apply i18n formatting to each file
197
198
  items.forEach((file) => this.__applyI18nToFile(file));
@@ -339,6 +340,7 @@ export const UploadFileListMixin = (superClass) =>
339
340
  .status="${file.status}"
340
341
  .uploading="${file.uploading}"
341
342
  .i18n="${i18n}"
343
+ theme="${ifDefined(this._theme)}"
342
344
  ></vaadin-upload-file>
343
345
  </li>
344
346
  `,
package/src/vaadin-upload-file-mixin.js CHANGED
@@ -115,11 +115,20 @@ export const UploadFileMixin = (superClass) =>
115
115
  _progress: {
116
116
  type: Object,
117
117
  },
118
+
119
+ /** @private */
120
+ __thumbnail: {
121
+ type: String,
122
+ },
118
123
  };
119
124
  }
120
125
 
121
126
  static get observers() {
122
- return ['__updateTabindex(tabindex, disabled)', '__updateProgress(_progress, progress, indeterminate)'];
127
+ return [
128
+ '__updateTabindex(tabindex, disabled)',
129
+ '__updateProgress(_progress, progress, indeterminate)',
130
+ '__updateThumbnail(file)',
131
+ ];
123
132
  }
124
133
 
125
134
  /** @protected */
@@ -204,4 +213,31 @@ export const UploadFileMixin = (superClass) =>
204
213
  }),
205
214
  );
206
215
  }
216
+
217
+ /** @private */
218
+ __updateThumbnail(file) {
219
+ // Abort any pending read
220
+ if (this.__thumbnailReader) {
221
+ this.__thumbnailReader.abort();
222
+ this.__thumbnailReader = null;
223
+ }
224
+
225
+ if (!file) {
226
+ this.__thumbnail = '';
227
+ return;
228
+ }
229
+
230
+ // Check if file is an image and is an actual File/Blob object
231
+ if (file.type && file.type.startsWith('image/') && file instanceof Blob) {
232
+ const reader = new FileReader();
233
+ this.__thumbnailReader = reader;
234
+ reader.onload = (e) => {
235
+ this.__thumbnail = e.target.result;
236
+ this.__thumbnailReader = null;
237
+ };
238
+ reader.readAsDataURL(file);
239
+ } else {
240
+ this.__thumbnail = '';
241
+ }
242
+ }
207
243
  };
package/src/vaadin-upload-file.d.ts CHANGED
@@ -42,6 +42,8 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
42
42
  *
43
43
  * Part name | Description
44
44
  * -----------------|-------------
45
+ * `thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)
46
+ * `file-icon` | Generic file icon for non-image files (used with `thumbnails` theme)
45
47
  * `done-icon` | File done status icon
46
48
  * `warning-icon` | File warning status icon
47
49
  * `meta` | Container for file name, status and error messages
package/src/vaadin-upload-file.js CHANGED
@@ -22,6 +22,8 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
22
22
  *
23
23
  * Part name | Description
24
24
  * -----------------|-------------
25
+ * `thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)
26
+ * `file-icon` | Generic file icon for non-image files (used with `thumbnails` theme)
25
27
  * `done-icon` | File done status icon
26
28
  * `warning-icon` | File warning status icon
27
29
  * `meta` | Container for file name, status and error messages
@@ -99,6 +101,9 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
99
101
  const isFileRetryVisible = this.errorMessage;
100
102
 
101
103
  return html`
104
+ <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
+
102
107
  <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
103
108
  <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
104
109
 
package/src/vaadin-upload-mixin.js CHANGED
@@ -381,7 +381,7 @@ export const UploadMixin = (superClass) =>
381
381
  return [
382
382
  '__updateAddButton(_addButton, maxFiles, __effectiveI18n, maxFilesReached, disabled)',
383
383
  '__updateDropLabel(_dropLabel, maxFiles, __effectiveI18n)',
384
- '__updateFileList(_fileList, files, __effectiveI18n, disabled)',
384
+ '__updateFileList(_fileList, files, __effectiveI18n, disabled, _theme)',
385
385
  '__updateMaxFilesReached(maxFiles, files)',
386
386
  ];
387
387
  }
@@ -590,6 +590,11 @@ export const UploadMixin = (superClass) =>
590
590
  list.items = [...files];
591
591
  list.i18n = effectiveI18n;
592
592
  list.disabled = disabled;
593
+ if (this._theme) {
594
+ list.setAttribute('theme', this._theme);
595
+ } else {
596
+ list.removeAttribute('theme');
597
+ }
593
598
  }
594
599
  }
595
600
 
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-alpha3",
4
+ "version": "25.1.0-alpha5",
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`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.",
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`file-icon` | Generic file icon for non-image files (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": "disabled",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/upload",
4
- "version": "25.1.0-alpha3",
4
+ "version": "25.1.0-alpha5",
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`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.",
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`file-icon` | Generic file icon for non-image files (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
  {