nocodb · dstala · Mar 20, 2024 · Mar 20, 2024 · Mar 20, 2024 · Mar 20, 2024
diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
@@ -63,7 +63,7 @@ const vModel = computed<boolean | number>({
   set: (val: any) => emits('update:modelValue', isMssql(column?.value?.source_id) ? +val : val),
 })
 
-function onClick(force?: boolean, event?: MouseEvent) {
+function onClick(force?: boolean, event?: MouseEvent | KeyboardEvent) {
   if (
     (event?.target as HTMLElement)?.classList?.contains('nc-checkbox') ||
     (event?.target as HTMLElement)?.closest('.nc-checkbox')
@@ -75,6 +75,19 @@ function onClick(force?: boolean, event?: MouseEvent) {
   }
 }
 
+const keydownEnter = (e: KeyboardEvent) => {
+  if (!isSurveyForm.value) {
+    onClick(true, e)
+    e.stopPropagation()
+  }
+}
+const keydownSpace = (e: KeyboardEvent) => {
+  if (isSurveyForm.value) {
+    onClick(true, e)
+    e.stopPropagation()
+  }
+}
+
 useSelectedCellKeyupListener(active, (e) => {
   switch (e.key) {
     case 'Enter':
@@ -101,8 +114,8 @@ useSelectedCellKeyupListener(active, (e) => {
     }"
     :tabindex="readOnly ? -1 : 0"
     @click="onClick(false, $event)"
-    @keydown.enter.stop="!isSurveyForm ? onClick(true, $event) : undefined"
-    @keydown.space.stop="isSurveyForm ? onClick(true, $event) : undefined"
+    @keydown.enter="keydownEnter"
+    @keydown.space="keydownSpace($event)"
   >
     <div
       class="flex items-center"

diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
@@ -103,12 +103,21 @@ onMounted(() => {
 </script>
 
 <template>
+  <div
+    v-if="isForm && !isEditColumn"
+    class="nc-currency-code h-full !bg-gray-100 border-r border-gray-200 px-3 mr-1 flex items-center"
+  >
+    <span>
+      {{ currencyMeta.currency_code }}
+    </span>
+  </div>
   <input
     v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     type="number"
-    class="nc-cell-field w-full h-full text-sm border-none rounded-md py-1 outline-none focus:outline-none focus:ring-0"
+    class="nc-cell-field h-full text-sm border-none rounded-md py-1 outline-none focus:outline-none focus:ring-0"
+    :class="isForm && !isEditColumn ? 'flex flex-1' : 'w-full'"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="onBlur"
     @keydown.enter="onKeydownEnter"

diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
@@ -5,7 +5,6 @@ import {
   EditModeInj,
   IsExpandedFormOpenInj,
   IsFormInj,
-  IsSurveyFormInj,
   ReadonlyInj,
   computed,
   inject,
@@ -31,38 +30,42 @@ const editEnabled = inject(EditModeInj)!
 
 const column = inject(ColumnInj)!
 
-const isSurveyForm = inject(IsSurveyFormInj, ref(false))
-
 const isEditColumn = inject(EditColumnInj, ref(false))
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
+
+const isForm = inject(IsFormInj)!
+
 // Used in the logic of when to display error since we are not storing the email if it's not valid
 const localState = ref(value)
    
 const vModel = computed({
   get: () => value,
   set: (val) => {
     localState.value = val
-    if (!parseProp(column.value.meta)?.validate || (val && validateEmail(val)) || !val || isSurveyForm.value) {
+    if (!parseProp(column.value.meta)?.validate || (val && validateEmail(val)) || !val || isForm.value) {
       emit('update:modelValue', val)
     }
   },
 })
 
 const validEmail = computed(() => vModel.value && validateEmail(vModel.value))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
-const isForm = inject(IsFormInj)!
-
 const focus: VNodeRef = (el) =>
   !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,
   () => {
-    if (parseProp(column.value.meta)?.validate && !editEnabled.value && localState.value && !validateEmail(localState.value)) {
+    if (
+      !isForm.value &&
+      parseProp(column.value.meta)?.validate &&
+      !editEnabled.value &&
+      localState.value &&
+      !validateEmail(localState.value)
+    ) {
       message.error(t('msg.error.invalidEmail'))
       localState.value = undefined
       return

diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
@@ -25,6 +25,10 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
+
+const isForm = inject(IsFormInj)!
+
 const _vModel = useVModel(props, 'modelValue', emits)
 
 const displayValue = computed(() => {
@@ -42,15 +46,15 @@ const vModel = computed({
       // if we clear / empty a cell in sqlite,
       // the value is considered as ''
       _vModel.value = null
+    } else if (isForm.value && !isEditColumn.value) {
+      _vModel.value = isNaN(Number(value)) ? value : Number(value)
     } else {
       _vModel.value = value
     }
   },
 })
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
-const isForm = inject(IsFormInj)!
+const inputType = computed(() => (isForm.value && !isEditColumn.value ? 'text' : 'number'))
 
 const focus: VNodeRef = (el) =>
   !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
@@ -91,7 +95,7 @@ function onKeyDown(e: any) {
     :ref="focus"
     v-model="vModel"
     class="nc-cell-field outline-none py-1 border-none w-full h-full text-sm"
-    type="number"
+    :type="inputType"
     style="letter-spacing: 0.06rem"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="editEnabled = false"
@@ -109,7 +113,8 @@ function onKeyDown(e: any) {
 </template>
 
 <style scoped lang="scss">
-input[type='number']:focus {
+input[type='number']:focus,
+input[type='text']:focus {
   @apply ring-transparent;
 }
 

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -371,6 +371,9 @@ const  KeyboardEvent) => {
   if (e.key === 'Tab') {
     isOpen.value = false
     return
+  } else if (e.key === 'Escape' && isForm.value) {
+    isOpen.value = false
+    return
   }
 
   e.stopPropagation()
@@ -394,7 +397,7 @@ const  => {
     @click="toggleMenu"
   >
     <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
-      <a-checkbox-group v-model:value="vModel" :disabled="readOnly || !editAllowed" class="nc-field-layout-list">
+      <a-checkbox-group v-model:value="vModel" :disabled="readOnly || !editAllowed" class="nc-field-layout-list" @click.stop>
         <a-checkbox
           v-for="op of options"
           :key="op.title"

diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
@@ -24,17 +24,6 @@ const _vModel = useVModel(props, 'modelValue', emits)
 
 const wrapperRef = ref<HTMLElement>()
 
-const vModel = computed({
-  get: () => _vModel.value,
-  set: (value) => {
-    if (value === '') {
-      _vModel.value = null
-    } else {
-      _vModel.value = value
-    }
-  },
-})
-
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const isForm = inject(IsFormInj)!
@@ -46,13 +35,32 @@ const cellFocused = ref(false)
 
 const expandedEditEnabled = ref(false)
 
+const vModel = computed({
+  get: () => {
+    return isForm.value && !isEditColumn.value && _vModel.value && !cellFocused.value && !isNaN(Number(_vModel.value))
+      ? `${_vModel.value}%`
+      : _vModel.value
+  },
+  set: (value) => {
+    if (value === '') {
+      _vModel.value = null
+    } else if (isForm.value && !isEditColumn.value) {
+      _vModel.value = isNaN(Number(value)) ? value : Number(value)
+    } else {
+      _vModel.value = value
+    }
+  },
+})
+
 const percentMeta = computed(() => {
   return {
     is_progress: false,
     ...parseProp(column.value?.meta),
   }
 })
 
+const inputType = computed(() => (isForm.value && !isEditColumn.value ? 'text' : 'number'))
+
 const  => {
   if (editEnabled) {
     editEnabled.value = false
@@ -106,7 +114,11 @@ const  KeyboardEvent) => {
       )
 
       for (let i = focusesNcCellIndex - 1; i >= 0; i--) {
-        const lastFormItem = nodes[i].querySelector('[tabindex="0"]') as HTMLElement
+        const node = nodes[i]
+        const lastFormItem = (node.querySelector('[tabindex="0"]') ??
+          node.querySelector('input') ??
+          node.querySelector('textarea') ??
+          node.querySelector('button')) as HTMLElement
         if (lastFormItem) {
           lastFormItem.focus()
           break
@@ -132,7 +144,7 @@ const  KeyboardEvent) => {
       :ref="focus"
       v-model="vModel"
       class="nc-cell-field w-full !text-sm !border-none !outline-none focus:ring-0 text-base py-1"
-      type="number"
+      :type="inputType"
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       @blur="onBlur"
       @focus="onFocus"

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -257,12 +257,26 @@ const  KeyboardEvent) => {
   if (e.key === 'Escape') {
     isOpen.value = false
 
+    if (isForm.value) return
+
     setTimeout(() => {
       aselect.value?.$el.querySelector('.ant-select-selection-search > input').focus()
     }, 100)
   }
 }
 
+const handleKeyDownList = (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'ArrowUp':
+    case 'ArrowDown':
+    case 'ArrowRight':
+    case 'ArrowLeft':
+      // skip
+      e.stopPropagation()
+      break
+  }
+}
+
 const  => {
   isOpen.value = false
   isEditable.value = false
@@ -315,7 +329,13 @@ const  => {
     @keydown.enter.stop.prevent="toggleMenu"
   >
     <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
-      <a-radio-group v-model:value="vModel" :disabled="readOnly || !editAllowed" class="nc-field-layout-list">
+      <a-radio-group
+        v-model:value="vModel"
+        :disabled="readOnly || !editAllowed"
+        class="nc-field-layout-list"
+        @keydown="handleKeyDownList"
+        @click.stop
+      >
         <a-radio
           v-for="op of options"
           :key="op.title"

diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
@@ -7,7 +7,6 @@ import {
   EditModeInj,
   IsExpandedFormOpenInj,
   IsFormInj,
-  IsSurveyFormInj,
   ReadonlyInj,
   computed,
   inject,
@@ -42,18 +41,20 @@ const disableOverlay = inject(CellUrlDisableOverlayInj, ref(false))
 
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
-const isSurveyForm = inject(IsSurveyFormInj, ref(false))
-
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
+
+const isForm = inject(IsFormInj)!
+
 // Used in the logic of when to display error since we are not storing the url if it's not valid
 const localState = ref(value)
 
 const vModel = computed({
   get: () => value,
   set: (val) => {
     localState.value = val
-    if (!parseProp(column.value.meta)?.validate || (val && isValidURL(val)) || !val || isSurveyForm.value) {
+    if (!parseProp(column.value.meta)?.validate || (val && isValidURL(val)) || !val || isForm.value) {
       emit('update:modelValue', val)
     }
   },
@@ -72,17 +73,19 @@ const url = computed(() => {
 
 const { cellUrlOptions } = useCellUrlConfig(url)
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
-const isForm = inject(IsFormInj)!
-
 const focus: VNodeRef = (el) =>
   !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,
   () => {
-    if (parseProp(column.value.meta)?.validate && !editEnabled.value && localState.value && !isValidURL(localState.value)) {
+    if (
+      !isForm.value &&
+      parseProp(column.value.meta)?.validate &&
+      !editEnabled.value &&
+      localState.value &&
+      !isValidURL(localState.value)
+    ) {
       message.error(t('msg.error.invalidURL'))
       localState.value = undefined
       return

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
@@ -178,6 +178,19 @@ const  any) => {
 
   selectedImage.value = item
 }
+
+const keydownEnter = (e: KeyboardEvent) => {
+  if (!isSurveyForm.value) {
+    open(e)
+    e.stopPropagation()
+  }
+}
+const keydownSpace = (e: KeyboardEvent) => {
+  if (isSurveyForm.value) {
+    open(e)
+    e.stopPropagation()
+  }
+}
 </script>
 
 <template>
@@ -211,8 +224,8 @@ const  any) => {
       data-testid="attachment-cell-file-picker-button"
       tabindex="0"
       @click="open"
-      @keydown.enter="!isSurveyForm ? open($event) : undefined"
-      @keydown.space="isSurveyForm ? open($event) : undefined"
+      @keydown.enter="keydownEnter"
+      @keydown.space="keydownSpace"
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />