Implement progress and error for import UploadEntry
This commit is contained in:
@ -4,13 +4,15 @@
|
||||
<AudioWaveform :size="32" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<p class="font-medium">
|
||||
{{ title }}
|
||||
</p>
|
||||
<Pen />
|
||||
<UiButton variant="ghost" v-if="size">
|
||||
<Pen />
|
||||
</UiButton>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-row" v-if="size && format">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ size }}
|
||||
</p>
|
||||
@ -19,9 +21,22 @@
|
||||
{{ format }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-2" v-if="progress">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ progress }}%
|
||||
</p>
|
||||
<UiProgress :modelValue="progress" />
|
||||
</div>
|
||||
<div class="flex flex-row" v-if="error">
|
||||
<p class="text-sm text-destructive-foreground">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<EllipsisVertical :size="32" />
|
||||
<UiButton variant="ghost">
|
||||
<EllipsisVertical :size="32" />
|
||||
</UiButton>
|
||||
</div>
|
||||
</Frame>
|
||||
</template>
|
||||
@ -32,8 +47,8 @@ import { AudioWaveform, Dot, EllipsisVertical, Pen } from 'lucide-vue-next'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
size: string
|
||||
format: string
|
||||
size?: string
|
||||
format?: string
|
||||
progress?: number
|
||||
error?: string
|
||||
}
|
||||
|
||||
38
app/components/ui/progress/Progress.vue
Normal file
38
app/components/ui/progress/Progress.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import type { ProgressRootProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import {
|
||||
ProgressIndicator,
|
||||
ProgressRoot,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
|
||||
{
|
||||
modelValue: 0,
|
||||
},
|
||||
)
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProgressRoot
|
||||
data-slot="progress"
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<ProgressIndicator
|
||||
data-slot="progress-indicator"
|
||||
class="bg-primary h-full w-full flex-1 transition-all"
|
||||
:style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
|
||||
/>
|
||||
</ProgressRoot>
|
||||
</template>
|
||||
1
app/components/ui/progress/index.ts
Normal file
1
app/components/ui/progress/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as Progress } from "./Progress.vue"
|
||||
@ -36,7 +36,11 @@ import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vu
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
|
||||
Uploaded files
|
||||
</h3>
|
||||
<UploadEntry title="Test" size="3.8 MB" format="mp4" />
|
||||
<div class="space-y-2">
|
||||
<UploadEntry title="Test" size="3.8 MB" format="mp4" />
|
||||
<UploadEntry title="Test" :progress="78" />
|
||||
<UploadEntry title="Test" error="Uploading failed, please check your internet" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
|
||||
12
bun.lock
12
bun.lock
@ -13,7 +13,7 @@
|
||||
"@tanstack/vue-query": "^5.90.7",
|
||||
"@vee-validate/zod": "^4.15.1",
|
||||
"@vue-dnd-kit/core": "^1.7.0",
|
||||
"@vueuse/core": "^14.0.0",
|
||||
"@vueuse/core": "^14.1.0",
|
||||
"axios": "^1.13.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
@ -22,7 +22,7 @@
|
||||
"nuxt": "^4.2.0",
|
||||
"oidc-client-ts": "^3.3.0",
|
||||
"pinia": "^3.0.4",
|
||||
"reka-ui": "^2.6.0",
|
||||
"reka-ui": "^2.7.0",
|
||||
"shadcn-nuxt": "2.3.2",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.16",
|
||||
@ -654,11 +654,11 @@
|
||||
|
||||
"@vue/shared": ["@vue/shared@3.5.22", "", {}, "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w=="],
|
||||
|
||||
"@vueuse/core": ["@vueuse/core@14.0.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.0.0", "@vueuse/shared": "14.0.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ=="],
|
||||
"@vueuse/core": ["@vueuse/core@14.1.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.1.0", "@vueuse/shared": "14.1.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw=="],
|
||||
|
||||
"@vueuse/metadata": ["@vueuse/metadata@14.0.0", "", {}, "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA=="],
|
||||
"@vueuse/metadata": ["@vueuse/metadata@14.1.0", "", {}, "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA=="],
|
||||
|
||||
"@vueuse/shared": ["@vueuse/shared@14.0.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw=="],
|
||||
"@vueuse/shared": ["@vueuse/shared@14.1.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw=="],
|
||||
|
||||
"abbrev": ["abbrev@3.0.1", "", {}, "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg=="],
|
||||
|
||||
@ -1656,7 +1656,7 @@
|
||||
|
||||
"regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="],
|
||||
|
||||
"reka-ui": ["reka-ui@2.6.0", "", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^12.5.0", "@vueuse/shared": "^12.5.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.2.0" } }, "sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w=="],
|
||||
"reka-ui": ["reka-ui@2.7.0", "", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^12.5.0", "@vueuse/shared": "^12.5.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.2.0" } }, "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA=="],
|
||||
|
||||
"remove-accents": ["remove-accents@0.5.0", "", {}, "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="],
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
"@tanstack/vue-query": "^5.90.7",
|
||||
"@vee-validate/zod": "^4.15.1",
|
||||
"@vue-dnd-kit/core": "^1.7.0",
|
||||
"@vueuse/core": "^14.0.0",
|
||||
"@vueuse/core": "^14.1.0",
|
||||
"axios": "^1.13.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
@ -27,7 +27,7 @@
|
||||
"nuxt": "^4.2.0",
|
||||
"oidc-client-ts": "^3.3.0",
|
||||
"pinia": "^3.0.4",
|
||||
"reka-ui": "^2.6.0",
|
||||
"reka-ui": "^2.7.0",
|
||||
"shadcn-nuxt": "2.3.2",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.16",
|
||||
|
||||
Reference in New Issue
Block a user