feat(nc-gui): add dropzone injection

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

@@ -3,6 +3,7 @@ import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import {
+  DropZoneRef,
   IsGalleryInj,
   inject,
   isImage,
@@ -30,11 +31,13 @@ const emits = defineEmits<Emits>()
 
 const isGallery = inject(IsGalleryInj, ref(false))
 
+const dropZoneInjection = inject(DropZoneRef, ref())
+
 const attachmentCellRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const currentCellRef = ref()
+const currentCellRef = dropZoneInjection && dropZoneInjection.value ? ref() : dropZoneInjection
 
 const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
 
@@ -57,6 +60,8 @@ const {
 watch(
   [() => rowIndex, isForm, attachmentCellRef],
   () => {
+    if (dropZoneInjection?.value) return
+
     if (!rowIndex && (isForm.value || isGallery.value)) {
       currentCellRef.value = attachmentCellRef.value
     } else {
@@ -173,7 +178,7 @@ watch(
       <div
         ref="sortableRef"
         :class="{ dragging }"
-        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
+        class="flex cursor-pointer justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
       >
         <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
           <a-tooltip placement="bottom">
@@ -203,7 +208,7 @@ watch(
         </template>
       </div>
 
-      <div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)">
+      <div class="group cursor-pointer flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)">
         <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
         <a-tooltip v-else placement="bottom">

packages/nc-gui/context/index.ts

@@ -31,3 +31,4 @@ export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-inje
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
 export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')
 export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
+export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref')

packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@@ -1,6 +1,15 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { computed, onKeyStroke, ref, useEventListener, useSharedFormStoreOrThrow, useStepper } from '#imports'
+import {
+  DropZoneRef,
+  computed,
+  onKeyStroke,
+  provide,
+  ref,
+  useEventListener,
+  useSharedFormStoreOrThrow,
+  useStepper,
+} from '#imports'
 
 const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
 
@@ -36,6 +45,8 @@ const field = computed(() => formColumns.value?.[index.value])
 
 const el = ref<HTMLDivElement>()
 
+provide(DropZoneRef, el)
+
 const transition = (direction: 'left' | 'right') => {
   isTransitioning.value = true
   transitionName.value = direction
@@ -101,7 +112,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
       <div
         ref="el"
         :key="field.title"
-        class="bg-white flex flex-col justify-center gap-4 w-full lg:max-w-1/2 max-w-500px m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+        class="bg-white flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
         <div v-if="field && !submitted" class="flex flex-col gap-2">
           <div class="flex nc-form-column-label">