Files
homebox/frontend/components/Item/AttachmentsList.vue
Tonya d4e28e6f3b Upgrade frontend deps, including nuxt (#982)
* feat: begin upgrading deps, still very buggy

* feat: progress

* feat: sort all type issues

* fix: sort type issues

* fix: import sonner styles

* fix: nuxt is the enemy

* fix: try sorting issue with workflows

* fix: update vitest config for dynamic import of path and defineConfig

* fix: add missing import

* fix: add time out to try and fix issues

* fix: add ui:ci:preview task for frontend build in CI mode

* fix: i was silly

* feat: add go:ci:with-frontend task for CI mode and remove ui:ci:preview from e2e workflow

* fix: update baseURL in Playwright config for local testing to use port 7745

* fix: update E2E_BASE_URL and remove wait for timeout in login test for smoother execution
2025-09-04 09:00:25 +01:00

67 lines
2.2 KiB
Vue

<template>
<ul role="list" class="divide-y rounded-md border">
<li
v-for="attachment in attachments"
:key="attachment.id"
class="flex items-center justify-between py-3 pl-3 pr-4 text-sm"
>
<div class="flex w-0 flex-1 items-center">
<MdiPaperclip class="size-5 shrink-0 text-gray-400" aria-hidden="true" />
<span class="ml-2 w-0 flex-1 truncate"> {{ attachment.title }}</span>
</div>
<div class="ml-4 flex shrink-0 gap-2">
<TooltipProvider :delay-duration="0">
<Tooltip>
<TooltipTrigger as-child>
<a
:class="buttonVariants({ size: 'icon' })"
:href="attachmentURL(attachment.id)"
:download="attachment.title"
>
<MdiDownload />
</a>
</TooltipTrigger>
<TooltipContent> {{ $t("components.item.attachments_list.download") }} </TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger as-child>
<a :class="buttonVariants({ size: 'icon' })" :href="attachmentURL(attachment.id)" target="_blank">
<MdiOpenInNew />
</a>
</TooltipTrigger>
<TooltipContent> {{ $t("components.item.attachments_list.open_new_tab") }} </TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</li>
</ul>
</template>
<script setup lang="ts">
import type { ItemAttachment } from "~~/lib/api/types/data-contracts";
import MdiPaperclip from "~icons/mdi/paperclip";
import MdiDownload from "~icons/mdi/download";
import MdiOpenInNew from "~icons/mdi/open-in-new";
import { buttonVariants } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
const props = defineProps({
attachments: {
type: Object as () => ItemAttachment[],
required: true,
},
itemId: {
type: String,
required: true,
},
});
const api = useUserApi();
function attachmentURL(attachmentId: string) {
return api.authURL(`/items/${props.itemId}/attachments/${attachmentId}`);
}
</script>
<style scoped></style>