opendesk

1<template>
2  <div v-if="attachments.length" class="flex flex-wrap gap-2">
3    <AttachmentItem
4      v-for="attachment in attachments"
5      :key="attachment.file_url"
6      :label="attachment.file_name"
7      :url="attachment.file_url"
8    >
9      <template #suffix>
10        <LucideX
11          class="size-3.5 cursor-pointer text-ink-gray-6 transition-colors hover:text-ink-gray-9"
12          @click.stop.prevent="emit('remove', attachment)"
13        />
14      </template>
15    </AttachmentItem>
16  </div>
17</template>
18
19<script setup lang="ts">
20import { AttachmentItem } from "@/components";
21import LucideX from "~icons/lucide/x";
22
23interface Attachment {
24  file_url: string;
25  file_name: string;
26}
27
28withDefaults(defineProps<{ attachments?: Attachment[] }>(), {
29  attachments: () => [],
30});
31
32const emit = defineEmits<{ remove: [attachment: Attachment] }>();
33</script>
34