Browse Source

feat: toggle checkbox on enter key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4222/head
Pranav C 2 years ago
parent
commit
747202024b
  1. 13
      packages/nc-gui/components/cell/Checkbox.vue
  2. 20
      packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

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

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

20
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,
}
}
Loading…
Cancel
Save