design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dees-input-fileupload): enhance dropzone styles and improve file list rendering

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-19 17:35:58 +00:00
parent 12b0aa0aad
commit 0b2675c7e5
2 changed files with 36 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ts_web/elements/dees-input-fileupload/component.ts
View File

@@ -75,7 +75,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
.required=${this.required}
></dees-label>
<div
class="dropzone ${this.state === 'dragOver' ? 'dropzone--active' : ''} ${this.disabled ? 'dropzone--disabled' : ''}"
class="dropzone ${this.state === 'dragOver' ? 'dropzone--active' : ''} ${this.disabled ? 'dropzone--disabled' : ''} ${this.value.length > 0 ? 'dropzone--has-files' : ''}"
role="button"
tabindex=${this.disabled ? -1 : 0}
aria-disabled=${this.disabled}
@@ -117,8 +117,8 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
<div class="dropzone__meta">
${metaEntries.map((entry) => html`<span>${entry}</span>`)}
</div>
${this.renderFileList()}
</div>
${this.renderFileList()}
${this.validationMessage
? html`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>`
: html``}
@@ -128,14 +128,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
private renderFileList(): TemplateResult {
if (this.value.length === 0) {
return html`
<div class="file-empty">
<div class="file-empty__title">No files selected</div>
<div class="file-empty__hint">
Selected files will be listed here
</div>
</div>
`;
return html``;
}
return html`
@@ -199,8 +192,8 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
if (this.disabled) {
return;
}
// Don't prevent default - let the click bubble
if ((event.target as HTMLElement).closest('.dropzone__browse')) {
// Don't open file selector if clicking on the browse button or file list
if ((event.target as HTMLElement).closest('.dropzone__browse, .file-list')) {
return;
}
this.openFileSelector();