60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
ContextMenu,
|
|
ContextMenuTrigger,
|
|
ContextMenuContent,
|
|
ContextMenuItem,
|
|
} from '@/components/ui/context-menu';
|
|
import { deleteWarrenEntry } from '~/lib/api/warrens';
|
|
import type { FileType } from '~/types';
|
|
|
|
const route = useRoute();
|
|
const warrenRoute = useWarrenRoute();
|
|
|
|
const { name, fileType, disabled } = defineProps<{
|
|
name: string;
|
|
fileType: FileType;
|
|
disabled: boolean;
|
|
}>();
|
|
|
|
const iconName = computed(() =>
|
|
fileType === 'file' ? 'lucide:file' : 'lucide:folder'
|
|
);
|
|
const deleting = ref(false);
|
|
|
|
async function submitDelete() {
|
|
deleting.value = true;
|
|
|
|
await deleteWarrenEntry(warrenRoute.value, name, fileType);
|
|
|
|
deleting.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ContextMenu>
|
|
<ContextMenuTrigger>
|
|
<NuxtLink
|
|
:to="joinPaths(route.path, name)"
|
|
:class="['select-none', { 'pointer-events-none': disabled }]"
|
|
>
|
|
<Button
|
|
class="w-44 h-12"
|
|
variant="outline"
|
|
size="lg"
|
|
:disabled="disabled"
|
|
>
|
|
<Icon :name="iconName" />
|
|
<span class="truncate">{{ name }}</span>
|
|
</Button>
|
|
</NuxtLink>
|
|
</ContextMenuTrigger>
|
|
<ContextMenuContent>
|
|
<ContextMenuItem @select="submitDelete">
|
|
<Icon name="lucide:trash-2" />
|
|
Delete
|
|
</ContextMenuItem>
|
|
</ContextMenuContent>
|
|
</ContextMenu>
|
|
</template>
|