Merge pull request #5493 from nocodb/fix/drag-n-drop-attachment-cell

fix(nc-gui): drag n drop attachment cell

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

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { CellClickHookInj, CurrentCellInj, createEventHook, ref } from '#imports'
+
+const el = ref()
+
+const cellClickHook = createEventHook()
+
+provide(CellClickHookInj, cellClickHook)
+
+provide(CurrentCellInj, el)
+</script>
+
+<template>
+  <div ref="el" @click="cellClickHook.trigger($event)">
+    <slot />
+  </div>
+</template>

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

@@ -727,18 +727,20 @@ watch(view, (nextView) => {
                       },
                     ]"
                   >
-                    <LazySmartsheetCell
+                    <LazySmartsheetDivDataCell class="relative">
-                      v-model="formState[element.title]"
+                      <LazySmartsheetCell
-                      class="nc-input"
+                        v-model="formState[element.title]"
-                      :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                        class="nc-input"
-                      :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                        :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                      :column="element"
+                        :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                      :edit-enabled="editEnabled[index]"
+                        :column="element"
-                      @click="editEnabled[index] = true"
+                        :edit-enabled="editEnabled[index]"
-                      @cancel="editEnabled[index] = false"
+                        @click="editEnabled[index] = true"
-                      @update:edit-enabled="editEnabled[index] = $event"
+                        @cancel="editEnabled[index] = false"
-                      @click.stop.prevent
+                        @update:edit-enabled="editEnabled[index] = $event"
-                    />
+                        @click.stop.prevent
+                      />
+                    </LazySmartsheetDivDataCell>
                   </a-form-item>
 
                   <div class="text-gray-500 text-xs" data-testid="nc-form-input-help-text-label">{{ element.description }}</div>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -329,7 +329,7 @@ export default {
 
               <LazySmartsheetHeaderCell v-else :column="col" />
 
-              <div
+              <LazySmartsheetDivDataCell
                 :ref="i ? null : (el) => (cellWrapperEl = el)"
                 class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2 relative"
               >
@@ -343,7 +343,7 @@ export default {
                   :active="true"
                   @update:model-value="changedColumns.add(col.title)"
                 />
-              </div>
+              </LazySmartsheetDivDataCell>
             </div>
           </div>
         </div>

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

@@ -146,7 +146,7 @@ const onDecode = async (scannedCodeValue: string) => {
                   </div>
 
                   <div>
-                    <div class="flex">
+                    <LazySmartsheetDivDataCell class="flex relative">
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(field)"
                         :model-value="null"
@@ -178,7 +178,7 @@ const onDecode = async (scannedCodeValue: string) => {
                           <component :is="iconMap.qrCodeScan" class="h-5 w-5" />
                         </div>
                       </a-button>
-                    </div>
+                    </LazySmartsheetDivDataCell>
 
                     <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
                       <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">

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

@@ -283,7 +283,7 @@ onMounted(() => {
               />
             </div>
 
-            <div v-if="field.title">
+            <LazySmartsheetDivDataCell v-if="field.title" class="relative">
               <LazySmartsheetVirtualCell
                 v-if="isVirtualCol(field)"
                 v-model="formState[field.title]"
@@ -323,7 +323,7 @@ onMounted(() => {
                   <MaterialSymbolsKeyboardReturn class="mx-1 text-primary" /> to make a line break
                 </div>
               </div>
-            </div>
+            </LazySmartsheetDivDataCell>
           </div>
 
           <div class="ml-1 mt-4 flex w-full text-lg">