feat(gui): open picker on pressing enter key nd close on escApe key press

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

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj, ReadonlyInj, computed, inject, ref, watch } from '#imports'
+import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -57,6 +57,19 @@ watch(
 )
 
 const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, inject, ref, useProject, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, inject, ref, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -56,6 +56,19 @@ watch(
   },
   { flush: 'post' },
 )
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>

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

@@ -14,6 +14,7 @@ import {
   ref,
   useEventListener,
   useProject,
+  useSelectedCellKeyupListener,
   watch,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
@@ -139,8 +140,9 @@ watch(isOpen, (n, _o) => {
   if (!n) aselect.value?.$el.blur()
 })
 
-useEventListener(document, 'keydown', (e) => {
-  if (active.value && e.key === 'Enter') {
+useSelectedCellKeyupListener(active, (e) => {
+  if (e.key === 'Enter') {
+    e.stopPropagation()
     isOpen.value = true
   }
 })

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

@@ -30,8 +30,9 @@ const vModel = computed({
   set: (val) => emits('update:modelValue', val),
 })
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   if (/^\d$/.test(e.key)) {
+    e.stopPropagation()
     vModel.value = +e.key === +vModel.value ? 0 : +e.key
   }
 })

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, inject, onClickOutside, useProject, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -65,6 +65,19 @@ watch(
   },
   { flush: 'post' },
 )
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, computed, inject, onClickOutside, ref, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, computed, inject, onClickOutside, ref, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
@@ -55,6 +55,19 @@ watch(
 )
 
 const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { ActiveCellInj } from '~/context'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
+import { ActiveCellInj } from '~/context'
 import {
   DropZoneRef,
   IsGalleryInj,