|
|
|
@ -60,78 +60,76 @@ onKeyDown('Escape', () => {
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div ref="dropZoneRef" class="nc-attachment-cell flex-1 color-transition flex items-center justify-between gap-1"> |
|
|
|
|
<div ref="dropZoneRef" class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"> |
|
|
|
|
<Carousel /> |
|
|
|
|
|
|
|
|
|
<template v-if="!isReadonly && !dragging && isOverDropZone"> |
|
|
|
|
<div |
|
|
|
|
class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary" |
|
|
|
|
class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gray-700/75 text-white" |
|
|
|
|
> |
|
|
|
|
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template v-else> |
|
|
|
|
<div |
|
|
|
|
v-if="!isReadonly" |
|
|
|
|
:class="{ 'mx-auto px-4': !visibleItems.length }" |
|
|
|
|
class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10" |
|
|
|
|
@click.stop="open" |
|
|
|
|
> |
|
|
|
|
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> |
|
|
|
|
<div |
|
|
|
|
v-if="!isReadonly" |
|
|
|
|
:class="{ 'mx-auto px-4': !visibleItems.length }" |
|
|
|
|
class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10" |
|
|
|
|
@click.stop="open" |
|
|
|
|
> |
|
|
|
|
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> |
|
|
|
|
|
|
|
|
|
<a-tooltip v-else placement="bottom"> |
|
|
|
|
<template #title> Click or drop a file into cell </template> |
|
|
|
|
<a-tooltip v-else placement="bottom"> |
|
|
|
|
<template #title> Click or drop a file into cell </template> |
|
|
|
|
|
|
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
|
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" /> |
|
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
|
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" /> |
|
|
|
|
|
|
|
|
|
<div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div> |
|
|
|
|
</div> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div> |
|
|
|
|
</div> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-if="visibleItems.length"> |
|
|
|
|
<template v-if="visibleItems.length"> |
|
|
|
|
<div |
|
|
|
|
ref="sortableRef" |
|
|
|
|
:class="{ dragging }" |
|
|
|
|
class="flex gap-2 py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
ref="sortableRef" |
|
|
|
|
:class="{ dragging }" |
|
|
|
|
class="h-full w-full flex flex-wrap flex-col gap-2 content-start py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary" |
|
|
|
|
v-for="(item, i) of visibleItems" |
|
|
|
|
:id="item.url" |
|
|
|
|
:key="item.url || item.title" |
|
|
|
|
class="nc-attachment flex-auto flex items-center justify-center min-w-[45px] w-[45px] border-1" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
v-for="(item, i) of visibleItems" |
|
|
|
|
:id="item.url" |
|
|
|
|
:key="item.url || item.title" |
|
|
|
|
class="nc-attachment flex-auto flex items-center justify-center w-[45px] border-1" |
|
|
|
|
> |
|
|
|
|
<a-tooltip placement="bottom"> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="text-center w-full">{{ item.title }}</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<img |
|
|
|
|
v-if="isImage(item.title, item.mimetype)" |
|
|
|
|
:alt="item.title || `#${i}`" |
|
|
|
|
:src="item.url || item.data" |
|
|
|
|
@click="selectImage(item)" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" /> |
|
|
|
|
|
|
|
|
|
<IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" /> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<a-tooltip placement="bottom"> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="text-center w-full">{{ item.title }}</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"> |
|
|
|
|
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> |
|
|
|
|
<img |
|
|
|
|
v-if="isImage(item.title, item.mimetype)" |
|
|
|
|
:alt="item.title || `#${i}`" |
|
|
|
|
:src="item.url || item.data" |
|
|
|
|
@click="selectImage(item)" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<a-tooltip v-else placement="bottom"> |
|
|
|
|
<template #title> View attachments </template> |
|
|
|
|
<component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" /> |
|
|
|
|
|
|
|
|
|
<MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" /> |
|
|
|
|
<IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" /> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"> |
|
|
|
|
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> |
|
|
|
|
|
|
|
|
|
<a-tooltip v-else placement="bottom"> |
|
|
|
|
<template #title> View attachments </template> |
|
|
|
|
|
|
|
|
|
<MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" /> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<Modal /> |
|
|
|
|