feat: toggle checkbox on enter key press

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

packages/nc-gui/components/cell/Checkbox.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject } from '#imports'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
+import { ActiveCellInj } from '~/context'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -42,6 +44,16 @@ function onClick() {
     vModel = !vModel
   }
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  console.log(e.key)
+  switch (e.key) {
+    case 'Enter':
+      onClick()
+      e.stopPropagation()
+      break
+  }
+})
 </script>
 
 <template>
@@ -72,6 +84,7 @@ function onClick() {
 .nc-cell-hover-show {
   opacity: 0;
   transition: 0.3s opacity;
+
   &:hover {
     opacity: 0.7;
   }

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

@@ -0,0 +1,20 @@
+import type { Ref } from 'vue'
+import { onUnmounted, useEventListener } from '#imports'
+
+export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e: KeyboardEvent) => void) {
+  const cleanup: Ref<ReturnType<typeof useEventListener> | null> = ref(null)
+
+  watch(selected, (value) => {
+    if (value) {
+      cleanup.value = useEventListener('keydown', handler)
+    } else {
+      cleanup.value?.()
+    }
+  })
+
+  onUnmounted(() => cleanup.value?.())
+
+  return {
+    cleanup,
+  }
+}