chore: refactor

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -37,7 +37,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 useEventListener(container, 'click', (e) => {
   const target = e.target as HTMLElement
-  if (!target.closest('.keep-open') || !target.closest('.nc-button')) {
+  if (!target.closest('.keep-open') || !target.closest('.nc-button') || !target?.closest('img') || !target?.closest('video')) {
     selectedFile.value = false
   }
 })
@@ -83,8 +83,11 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 
 <template>
   <GeneralOverlay v-model="selectedFile" transition :z-index="50" class="bg-black bg-opacity-90">
-    <div v-if="selectedFile" class="flex w-full justify-center items-center">
+    <div
-      <div ref="container" class="overflow-hidden w-full flex items-center justify-center text-center relative h-screen">
+      v-if="selectedFile"
+      ref="container"
+      class="flex w-full overflow-hidden justify-center text-center relative h-screen items-center"
+    >
       <NcButton
         class="top-5 !absolute cursor-pointer !hover:bg-transparent left-5"
         size="xsmall"
@@ -100,16 +103,13 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
         <h3
           style="width: max-content"
           class="hover:underline pointer-events-auto font-semibold cursor-pointer text-white"
-            @click.stop="downloadAttachment(selectedImage)"
+          @click.stop="downloadAttachment(selectedFile)"
         >
           {{ selectedFile && selectedFile.title }}
         </h3>
       </div>
 
-        <NcCarousel
+      <NcCarousel class="!absolute inset-16 keep-open flex justify-center items-center" @init-api="(val) => (emblaMainApi = val)">
-          class="!absolute inset-16 keep-open flex justify-center items-center"
-          @init-api="(val) => (emblaMainApi = val)"
-        >
         <NcCarouselContent>
           <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
             <div class="w-full h-full justify-center flex items-center">
@@ -230,7 +230,6 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
         </template>
       </GeneralDeleteModal>
     </div>
-    </div>
   </GeneralOverlay>
 </template>