fix: refactor files

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

@@ -89,7 +89,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           <NcCarouselContent>
             <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
               <div class="w-full flex items-center">
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   v-if="isImage(item.title, item.mimeType)"
                   class="nc-attachment-img-wrapper"
                   object-fit="contain"
@@ -97,7 +97,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                   :srcs="getPossibleAttachmentSrc(item)"
                 />
 
-                <LazyCellAttachmentVideo
+                <LazyCellAttachmentPreviewVideo
                   v-else-if="isVideo(item.title, item.mimeType)"
                   class="!h-full"
                   :src="getPossibleAttachmentSrc(item)[0]"
@@ -112,7 +112,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           </NcCarouselContent>
         </NcCarousel>
 
-        <div class="absolute w-full !bottom-5 max-h-18 z-30 flex items-center justify-center">
+        <div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center">
           <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
             <NcCarouselContent class="!flex !gap-2 ml-0">
               <NcCarouselItem
@@ -120,12 +120,17 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                 :key="index"
                 :class="{
                   'opacity-100': index === selectedIndex,
+                  '!basis-1/2': visibleItems.length === 2,
+                  '!basis-1/3': visibleItems.length === 3,
+                  '!basis-1': visibleItems.length === 1,
+                  '!basis-1/4': visibleItems.length === 4,
+                  '!basis-1/8': visibleItems.length > 4,
                 }"
-                class="px-2 keep-open opacity-50 !basis-1/8 cursor-pointer"
+                class="px-2 keep-open opacity-50 cursor-pointer"
                 @click="onThumbClick(index)"
               >
                 <div class="flex items-center justify-center">
-                  <LazyCellAttachmentImage
+                  <LazyCellAttachmentPreviewImage
                     v-if="isImage(item.title, item.mimeType)"
                     class="nc-attachment-img-wrapper h-12"
                     object-fit="contain"

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

@@ -144,7 +144,7 @@ const handleFileDelete = (i: number) => {
               :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
               class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden"
             >
-              <LazyCellAttachmentImage
+              <LazyCellAttachmentPreviewImage
                 v-if="isImage(item.title, item.mimetype)"
                 :srcs="getPossibleAttachmentSrc(item)"
                 class="max-h-full h-64 m-auto justify-center"

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

@@ -293,7 +293,7 @@ const handleFileDelete = (i: number) => {
                 :class="{ '!w-30': isForm || isExpandedForm }"
                 @click="() => onFileClick(item)"
               >
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   :alt="item.title || `#${i}`"
                   class="rounded"
                   :class="{

packages/nc-gui/components/general/FormBanner.vue

@@ -19,7 +19,11 @@ const getBannerImageSrc = computed(() => {
     :class="!bannerImageUrl ? 'shadow-sm' : ''"
     :style="{ aspectRatio: 4 / 1 }"
   >
-    <LazyCellAttachmentImage v-if="bannerImageUrl" :srcs="getBannerImageSrc" class="nc-form-banner-image object-cover w-full" />
+    <LazyCellAttachmentPreviewImage
+      v-if="bannerImageUrl"
+      :srcs="getBannerImageSrc"
+      class="nc-form-banner-image object-cover w-full"
+    />
     <div v-else class="h-full flex items-stretch justify-between bg-white">
       <div class="flex -mt-1">
         <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />

packages/nc-gui/components/smartsheet/Form.vue

@@ -872,7 +872,7 @@ useEventListener(
                             "
                             style="transition: all 0.3s ease-in"
                           >
-                            <LazyCellAttachmentImage
+                            <LazyCellAttachmentPreviewImage
                               v-if="formViewData.logo_url"
                               :key="formViewData.logo_url?.path"
                               :srcs="getFormLogoSrc"

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -299,7 +299,7 @@ watch(
                   </template>
 
                   <template v-for="(attachment, index) in attachments(record)">
-                    <LazyCellAttachmentImage
+                    <LazyCellAttachmentPreviewImage
                       v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                       :key="`carousel-${record.row.id}-${index}`"
                       class="h-52"

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -785,7 +785,7 @@ const handleSubmitRenameOrNewStack = async (loadMeta: boolean, stack?: any, stac
                                         </template>
 
                                         <template v-for="attachment in attachments(record)">
-                                          <LazyCellAttachmentImage
+                                          <LazyCellAttachmentPreviewImage
                                             v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                                             :key="attachment.path"
                                             class="h-52"

packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@@ -582,7 +582,7 @@ onClickOutside(searchRef, toggleSearch)
                     </template>
 
                     <template v-for="(attachment, index) in attachments(record)">
-                      <LazyCellAttachmentImage
+                      <LazyCellAttachmentPreviewImage
                         v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                         :key="`carousel-${record.row.id}-${index}`"
                         class="h-10 !w-10 !object-contain"

packages/nc-gui/components/virtual-cell/components/ListItem.vue

@@ -88,7 +88,7 @@ const displayValue = computed(() => {
             <a-carousel autoplay class="!w-11 !h-11 !max-h-11 !max-w-11">
               <template #customPaging> </template>
               <template v-for="(attachmentObj, index) in attachments">
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
                   :key="`carousel-${attachmentObj.title}-${index}`"
                   class="!w-11 !h-11 !max-h-11 !max-w-11object-cover !rounded-l-xl"