mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
40 lines
1.6 KiB
Plaintext
40 lines
1.6 KiB
Plaintext
---
|
|
// One row of the Dropzone file list, as the script builds it (core/js/src/dropzone.ts `_createItem`).
|
|
// Written by hand it shows a state without an upload; goes into the default slot of Dropzone.astro.
|
|
|
|
/** core/scss/ui/forms/_form-dropzone.scss `.dropzone-item-{status}` modifier classes */
|
|
type DropzoneItemStatus = 'uploading' | 'success' | 'error'
|
|
|
|
interface Props {
|
|
/** `.dropzone-item-name`: the file name */
|
|
title: string
|
|
/** `.dropzone-item-meta`: the file size, or the error message */
|
|
description?: string
|
|
status?: DropzoneItemStatus | undefined
|
|
/** upload progress in percent; renders the progress bar */
|
|
value?: number | undefined
|
|
/** aria-label of the remove button */
|
|
removeLabel?: string
|
|
class?: string
|
|
/** remaining attributes (data-*, aria-*, …) are forwarded to the root element */
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const { title, description, status, value, removeLabel = 'Remove file', class: className, ...rest } = Astro.props
|
|
---
|
|
|
|
<div class:list={['dropzone-item', status && `dropzone-item-${status}`, className]} {...rest}>
|
|
<div class="dropzone-item-body">
|
|
<div class="dropzone-item-name">{title}</div>
|
|
{description && <div class="dropzone-item-meta">{description}</div>}
|
|
{
|
|
value !== undefined && (
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar" style={`width: ${value}%`} role="progressbar" aria-label={title} aria-valuenow={value} aria-valuemin="0" aria-valuemax="100" />
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
<button type="button" class="btn-close dropzone-item-remove" aria-label={removeLabel}></button>
|
|
</div>
|