feat(gui): on enter key press open ref table rows modal for LTAR cells

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -17,6 +17,7 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener
 } from '#imports'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
@@ -70,6 +71,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
     await unlink(rec)
   }
 }
+
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>

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

@@ -15,6 +15,7 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener
 } from '#imports'
 
 const column = inject(ColumnInj)!
@@ -81,6 +82,15 @@ const onAttachRecord = () => {
   childListDlg.value = false
   listItemsDlg.value = true
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>

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

@@ -16,6 +16,8 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener,
+  ActiveCellInj,
 } from '#imports'
 
 const column = inject(ColumnInj)!
@@ -82,6 +84,15 @@ const onAttachRecord = () => {
   childListDlg.value = false
   listItemsDlg.value = true
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
@@ -98,6 +99,14 @@ const newRowState = computed(() => {
 watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
+
+// useEventListener((e: KeyboardEvent) => {
+//   switch (e.key) {
+//     case 'Enter':
+//       e.preventDefault()
+//       break
+//   }
+// })
 </script>
 
 <template>

packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

@@ -6,7 +6,7 @@ export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e
 
   watch(selected, (value) => {
     if (value) {
-      cleanup.value = useEventListener('keydown', handler)
+      cleanup.value = useEventListener('keydown', handler, true)
     } else {
       cleanup.value?.()
     }