Browse Source

feat: add today shortcut for Date related fields (#9425)

* fix: document today's date shortcut

* fix: update keyboard bindings

* fix: update keybinding

* fix: date time cell copypaste
pull/9441/head
Anbarasu 3 months ago committed by GitHub
parent
commit
ddb102b4e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 23
      packages/nc-gui/components/cell/DatePicker.vue
  2. 23
      packages/nc-gui/components/cell/DateTimePicker.vue
  3. 23
      packages/nc-gui/components/cell/TimePicker.vue
  4. 23
      packages/nc-gui/components/cell/YearPicker.vue
  5. 3
      packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md

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

@ -242,32 +242,25 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
// To prevent event listener on non active cell // To prevent event listener on non active cell
if (!active.value) return if (!active.value) return
if ( if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
e.altKey ||
e.ctrlKey ||
e.shiftKey ||
e.metaKey ||
!isGrid.value ||
isExpandedForm.value ||
isEditColumn.value ||
isExpandedFormOpenExist()
) {
return return
} }
switch (e.key) { if (e.metaKey || e.ctrlKey) {
case ';': if (e.key === ';') {
if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
localState.value = dayjs(new Date()) localState.value = dayjs(new Date())
e.preventDefault() e.preventDefault()
break }
default: } else return
}
if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
isClearedInputMode.value = true isClearedInputMode.value = true
datePickerRef.value.focus() datePickerRef.value.focus()
editable.value = true editable.value = true
open.value = true open.value = true
} }
}
}) })
const handleUpdateValue = (e: Event) => { const handleUpdateValue = (e: Event) => {

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

@ -296,32 +296,25 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
// To prevent event listener on non active cell // To prevent event listener on non active cell
if (!active.value) return if (!active.value) return
if ( if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
e.altKey ||
e.ctrlKey ||
e.shiftKey ||
e.metaKey ||
!isGrid.value ||
isExpandedForm.value ||
isEditColumn.value ||
isExpandedFormOpenExist()
) {
return return
} }
switch (e.key) { if (e.metaKey || e.ctrlKey) {
case ';': if (e.key === ';') {
if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
localState.value = dayjs(new Date()) localState.value = dayjs(new Date())
e.preventDefault() e.preventDefault()
break }
default: } else return
}
if (!isOpen.value && (datePickerRef.value || timePickerRef.value) && /^[0-9a-z]$/i.test(e.key)) { if (!isOpen.value && (datePickerRef.value || timePickerRef.value) && /^[0-9a-z]$/i.test(e.key)) {
isClearedInputMode.value = true isClearedInputMode.value = true
isDatePicker.value ? datePickerRef.value?.focus() : timePickerRef.value?.focus() isDatePicker.value ? datePickerRef.value?.focus() : timePickerRef.value?.focus()
editable.value = true editable.value = true
open.value = true open.value = true
} }
}
}) })
watch(editable, (nextValue) => { watch(editable, (nextValue) => {

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

@ -225,32 +225,25 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
// To prevent event listener on non active cell // To prevent event listener on non active cell
if (!active.value) return if (!active.value) return
if ( if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
e.altKey ||
e.ctrlKey ||
e.shiftKey ||
e.metaKey ||
!isGrid.value ||
isExpandedForm.value ||
isEditColumn.value ||
isExpandedFormOpenExist()
) {
return return
} }
switch (e.key) { if (e.metaKey || e.ctrlKey) {
case ';': if (e.key === ';') {
if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
localState.value = dayjs(new Date()) localState.value = dayjs(new Date())
e.preventDefault() e.preventDefault()
break }
default: } else return
}
if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
isClearedInputMode.value = true isClearedInputMode.value = true
datePickerRef.value.focus() datePickerRef.value.focus()
editable.value = true editable.value = true
open.value = true open.value = true
} }
}
}) })
const handleUpdateValue = (e: Event) => { const handleUpdateValue = (e: Event) => {

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

@ -206,32 +206,25 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
// To prevent event listener on non active cell // To prevent event listener on non active cell
if (!active.value) return if (!active.value) return
if ( if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
e.altKey ||
e.ctrlKey ||
e.shiftKey ||
e.metaKey ||
!isGrid.value ||
isExpandedForm.value ||
isEditColumn.value ||
isExpandedFormOpenExist()
) {
return return
} }
switch (e.key) { if (e.metaKey || e.ctrlKey) {
case ';': if (e.key === ';') {
if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
localState.value = dayjs(new Date()) localState.value = dayjs(new Date())
e.preventDefault() e.preventDefault()
break }
default: } else return
}
if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) { if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
isClearedInputMode.value = true isClearedInputMode.value = true
datePickerRef.value.focus() datePickerRef.value.focus()
editable.value = true editable.value = true
open.value = true open.value = true
} }
}
}) })
const handleUpdateValue = (e: Event) => { const handleUpdateValue = (e: Event) => {

3
packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md

@ -92,7 +92,7 @@ To navigate within ⌘+J menu,
## Field type specific shortcuts ## Field type specific shortcuts
| Datatype | Key | Behaviour | | Datatype | Key | Behaviour |
|:----------------------:|------------:|:-----------------------------------| |:-----------------------------:|------------:|:-----------------------------------|
| Text & Numerical cells | `←` `→` | Move cursor to the left / right | | Text & Numerical cells | `←` `→` | Move cursor to the left / right |
| | `↑` `↓` | Move cursor to the beginning / end | | | `↑` `↓` | Move cursor to the beginning / end |
| Single Select | `↑` `↓` | Move between options | | Single Select | `↑` `↓` | Move between options |
@ -103,6 +103,7 @@ To navigate within ⌘+J menu,
| | `Enter` | Link current selection | | | `Enter` | Link current selection |
| Checkbox | `Enter` | Toggle | | Checkbox | `Enter` | Toggle |
| Rating | `<0 ~ Max>` | Enter number to toggle rating | | Rating | `<0 ~ Max>` | Enter number to toggle rating |
| Date / Time / DateTime / Year | `⌘` + `;` | Select today's date |
## Expanded form shortcuts ## Expanded form shortcuts

Loading…
Cancel
Save