37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import type { DirectoryEntry } from '#shared/types';
|
|
|
|
const { entries, parent, isOverDropZone } = defineProps<{
|
|
entries: DirectoryEntry[];
|
|
parent: DirectoryEntry | null;
|
|
isOverDropZone?: boolean;
|
|
}>();
|
|
|
|
const { isLoading } = useLoadingIndicator();
|
|
|
|
const sortedEntries = computed(() =>
|
|
entries.toSorted((a, b) => a.name.localeCompare(b.name))
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<ScrollArea class="h-full w-full">
|
|
<div
|
|
v-if="isOverDropZone"
|
|
class="bg-background/50 pointer-events-none absolute flex h-full w-full items-center justify-center"
|
|
>
|
|
<Icon class="size-16 animate-pulse" name="lucide:upload" />
|
|
</div>
|
|
<div class="flex flex-row flex-wrap gap-2">
|
|
<DirectoryBackEntry v-if="parent != null" :entry="parent" />
|
|
<DirectoryEntry
|
|
v-for="entry in sortedEntries"
|
|
:key="entry.name"
|
|
:entry="entry"
|
|
:disabled="isLoading"
|
|
/>
|
|
</div>
|
|
</ScrollArea>
|
|
</template>
|