feat(gui-v2): reopen attachment modal on carousel close

# What's changed?

* When modal was used to open the image carousel, reopen the modal when carousel is closed

packages/nc-gui-v2/components.d.ts

@@ -71,6 +71,8 @@ declare module '@vue/runtime-core' {
     IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
     IcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    MaterialSymbolsArrowCircleLeftRounded: typeof import('~icons/material-symbols/arrow-circle-left-rounded')['default']
+    MaterialSymbolsArrowCircleRightRounded: typeof import('~icons/material-symbols/arrow-circle-right-rounded')['default']
     MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
     MaterialSymbolsChevronLeftRounded: typeof import('~icons/material-symbols/chevron-left-rounded')['default']
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']

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

@@ -1,11 +1,7 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
-import { isImage } from '~/utils'
-import { computed, onClickOutside, ref } from '#imports'
-import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
-import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
-import MdiCloseCircle from '~icons/mdi/close-circle'
+import { computed, isImage, onClickOutside, ref } from '#imports'
 
 const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
 

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

@@ -2,8 +2,7 @@
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import { ref, useDropZone, useUIPermission } from '#imports'
-import { isImage, openLink } from '~/utils'
+import { isImage, openLink, ref, useDropZone, useUIPermission, watch } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -39,6 +38,22 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
+
+function onClick(item: Record<string, any>) {
+  selectedImage.value = item
+  modalVisible.value = false
+
+  const stopHandle = watch(selectedImage, (nextImage, _, onCleanup) => {
+    if (!nextImage) {
+      setTimeout(() => {
+        modalVisible.value = true
+      }, 50)
+      stopHandle?.()
+    }
+
+    onCleanup(() => stopHandle?.())
+  })
+}
 </script>
 
 <template>
@@ -103,7 +118,7 @@ onKeyDown('Escape', () => {
                 v-if="isImage(item.title, item.mimetype)"
                 :style="{ backgroundImage: `url('${item.url}')` }"
                 class="w-full h-full bg-contain bg-center bg-no-repeat"
-                @click.stop="() => (selectedImage = item) && (modalVisible = false)"
+                @click.stop="onClick(item)"
               />
 
               <component

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

@@ -4,8 +4,7 @@ import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { computed, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
-import { isImage, openLink } from '~/utils'
+import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null