Browse Source

fix(nc-gui): focus when expanded form not open

pull/5539/head
Wing-Kam Wong 2 years ago
parent
commit
7a5e76ed51
  1. 6
      packages/nc-gui/components/cell/Currency.vue
  2. 6
      packages/nc-gui/components/cell/Decimal.vue
  3. 5
      packages/nc-gui/components/cell/Duration.vue
  4. 6
      packages/nc-gui/components/cell/Email.vue
  5. 6
      packages/nc-gui/components/cell/Float.vue
  6. 6
      packages/nc-gui/components/cell/Integer.vue
  7. 8
      packages/nc-gui/components/cell/Percent.vue
  8. 8
      packages/nc-gui/components/cell/Text.vue
  9. 6
      packages/nc-gui/components/cell/TextArea.vue
  10. 5
      packages/nc-gui/components/cell/Url.vue

6
packages/nc-gui/components/cell/Currency.vue

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { ColumnInj, EditModeInj, computed, inject, parseProp, useVModel } from '#imports' import { ColumnInj, EditModeInj, IsExpandedFormOpenInj, computed, inject, parseProp, useVModel } from '#imports'
interface Props { interface Props {
modelValue: number | null | undefined modelValue: number | null | undefined
@ -52,7 +52,9 @@ const currency = computed(() => {
} }
}) })
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
const submitCurrency = () => { const submitCurrency = () => {
if (lastSaved.value !== vModel.value) { if (lastSaved.value !== vModel.value) {

6
packages/nc-gui/components/cell/Decimal.vue

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, inject, useVModel } from '#imports' import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
interface Props { interface Props {
// when we set a number, then it is number type // when we set a number, then it is number type
@ -36,7 +36,9 @@ const vModel = computed({
}, },
}) })
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
</script> </script>
<template> <template>

5
packages/nc-gui/components/cell/Duration.vue

@ -3,6 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
import { import {
ColumnInj, ColumnInj,
EditModeInj, EditModeInj,
IsExpandedFormOpenInj,
computed, computed,
convertDurationToSeconds, convertDurationToSeconds,
convertMS2Duration, convertMS2Duration,
@ -73,7 +74,9 @@ const submitDuration = () => {
isEdited.value = false isEdited.value = false
} }
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
</script> </script>
<template> <template>

6
packages/nc-gui/components/cell/Email.vue

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, IsSurveyFormInj, computed, inject, useI18n, validateEmail } from '#imports' import { EditModeInj, IsExpandedFormOpenInj, IsSurveyFormInj, computed, inject, useI18n, validateEmail } from '#imports'
interface Props { interface Props {
modelValue: string | null | undefined modelValue: string | null | undefined
@ -35,7 +35,9 @@ const vModel = computed({
const validEmail = computed(() => vModel.value && validateEmail(vModel.value)) const validEmail = computed(() => vModel.value && validateEmail(vModel.value))
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
watch( watch(
() => editEnabled.value, () => editEnabled.value,

6
packages/nc-gui/components/cell/Float.vue

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, inject, useVModel } from '#imports' import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
interface Props { interface Props {
// when we set a number, then it is number type // when we set a number, then it is number type
@ -36,7 +36,9 @@ const vModel = computed({
}, },
}) })
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
</script> </script>
<template> <template>

6
packages/nc-gui/components/cell/Integer.vue

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, inject, useVModel } from '#imports' import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
interface Props { interface Props {
// when we set a number, then it is number type // when we set a number, then it is number type
@ -36,7 +36,9 @@ const vModel = computed({
}, },
}) })
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
function onKeyDown(evt: KeyboardEvent) { function onKeyDown(evt: KeyboardEvent) {
return evt.key === '.' && evt.preventDefault() return evt.key === '.' && evt.preventDefault()

8
packages/nc-gui/components/cell/Percent.vue

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, inject, useVModel } from '#imports' import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
interface Props { interface Props {
modelValue?: number | string | null modelValue?: number | string | null
@ -27,9 +27,9 @@ const vModel = computed({
}, },
}) })
const focus: VNodeRef = (el) => { const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
;(el as HTMLInputElement)?.focus()
} const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
</script> </script>
<template> <template>

8
packages/nc-gui/components/cell/Text.vue

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, ReadonlyInj, inject, ref, useVModel } from '#imports' import { EditModeInj, IsExpandedFormOpenInj, ReadonlyInj, inject, ref, useVModel } from '#imports'
interface Props { interface Props {
modelValue?: string | null modelValue?: string | null
@ -23,9 +23,9 @@ const readonly = inject(ReadonlyInj, ref(false))
const vModel = useVModel(props, 'modelValue', emits) const vModel = useVModel(props, 'modelValue', emits)
const focus: VNodeRef = (el) => { const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
;(el as HTMLInputElement)?.focus()
} const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
</script> </script>
<template> <template>

6
packages/nc-gui/components/cell/TextArea.vue

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, RowHeightInj, inject, useVModel } from '#imports' import { EditModeInj, IsExpandedFormOpenInj, RowHeightInj, inject, useVModel } from '#imports'
const props = defineProps<{ const props = defineProps<{
modelValue?: string | number modelValue?: string | number
@ -19,7 +19,9 @@ const { showNull } = useGlobal()
const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' }) const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus() const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLTextAreaElement)?.focus()
</script> </script>
<template> <template>

5
packages/nc-gui/components/cell/Url.vue

@ -4,6 +4,7 @@ import {
CellUrlDisableOverlayInj, CellUrlDisableOverlayInj,
ColumnInj, ColumnInj,
EditModeInj, EditModeInj,
IsExpandedFormOpenInj,
IsSurveyFormInj, IsSurveyFormInj,
computed, computed,
inject, inject,
@ -62,7 +63,9 @@ const url = computed(() => {
const { cellUrlOptions } = useCellUrlConfig(url) const { cellUrlOptions } = useCellUrlConfig(url)
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const isExpandedFormOpen = inject(IsExpandedFormOpenInj)!
const focus: VNodeRef = (el) => !isExpandedFormOpen && (el as HTMLInputElement)?.focus()
watch( watch(
() => editEnabled.value, () => editEnabled.value,

Loading…
Cancel
Save