mirror of
https://github.com/koel/koel
synced 2024-12-25 20:13:06 +00:00
59 lines
2.1 KiB
Vue
59 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
:class="cssClass"
|
|
:title="file.message"
|
|
class="upload-item relative rounded min-h-[32px] overflow-hidden bg-k-bg-secondary"
|
|
>
|
|
<span class="progress absolute h-full top-0 left-0 z-0 duration-200 ease-out bg-k-highlight" />
|
|
<span class="details z-10 absolute h-full w-full flex items-center content-between">
|
|
<span class="name px-4 flex-1">{{ file.name }}</span>
|
|
<span class="flex items-center">
|
|
<span v-if="file.status === 'Errored'" v-koel-tooltip.left :title="file.message" class="info !px-3">
|
|
<Icon :icon="faInfoCircle" :title="file.message" />
|
|
</span>
|
|
<Btn v-if="canRetry" class="!px-3" icon-only title="Retry" transparent unrounded @click="retry">
|
|
<Icon :icon="faRotateBack" />
|
|
</Btn>
|
|
<Btn v-if="canRemove" class="!px-3" icon-only title="Remove" transparent unrounded @click="remove">
|
|
<Icon :icon="faTrashCan" />
|
|
</Btn>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import slugify from 'slugify'
|
|
import { faInfoCircle, faRotateBack, faTrashCan } from '@fortawesome/free-solid-svg-icons'
|
|
import { computed, defineAsyncComponent, toRefs } from 'vue'
|
|
import type { UploadFile } from '@/services'
|
|
import { uploadService } from '@/services'
|
|
|
|
const props = defineProps<{ file: UploadFile }>()
|
|
|
|
const Btn = defineAsyncComponent(() => import('@/components/ui/form/Btn.vue'))
|
|
|
|
const { file } = toRefs(props)
|
|
|
|
const canRetry = computed(() => file.value.status === 'Canceled' || file.value.status === 'Errored')
|
|
const canRemove = computed(() => file.value.status !== 'Uploading') // we're not supporting cancel tokens (yet).
|
|
const cssClass = computed(() => slugify(file.value.status).toLowerCase())
|
|
const progressBarWidth = computed(() => file.value.status === 'Uploading' ? `${file.value.progress}%` : '0')
|
|
|
|
const remove = () => uploadService.remove(file.value)
|
|
const retry = () => uploadService.retry(file.value)
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.progress {
|
|
width: v-bind(progressBarWidth);
|
|
}
|
|
|
|
.uploaded {
|
|
@apply bg-k-success;
|
|
}
|
|
|
|
.errored {
|
|
@apply bg-k-danger;
|
|
}
|
|
</style>
|