Merge pull request #3180 from nocodb/fix/reverted-percent-to-v1

Reverted percent to how percent is handled in v1

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

@@ -1,28 +1,38 @@
 <script setup lang="ts">
-import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, inject } from '#imports'
 
 interface Props {
   modelValue: number | string | null | undefined
 }
 
-const { modelValue } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
+const props = defineProps<Props>()
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
-const column = inject(ColumnInj)
-
-const percent = ref()
-
-const isEdited = ref(false)
-
-const percentType = computed(() => column?.value?.meta?.precision || 0)
+const vModel = useVModel(props, 'modelValue', emits)
+</script>
 
-const percentStep = computed(() => getPercentStep(percentType.value))
+<template>
+  <input v-if="editEnabled" v-model="vModel" type="number" />
+  <span v-else>{{ vModel }}</span>
+</template>
 
-const localState = computed({
+<!-- <script setup lang="ts">
+ import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
+ import { EditModeInj } from '~/context'
+ interface Props {
+   modelValue: number | string | null | undefined
+ }
+ const { modelValue } = defineProps<Props>()
+ const emit = defineEmits(['update:modelValue'])
+ const editEnabled = inject(EditModeInj)
+ const column = inject(ColumnInj)
+ const percent = ref()
+ const isEdited = ref(false)
+ const percentType = computed(() => column?.value?.meta?.precision || 0)
+ const percentStep = computed(() => getPercentStep(percentType.value))
+ const localState = computed({
    get: () => {
      return renderPercent(modelValue, percentType.value, !isEdited.value)
    },
@@ -32,29 +42,26 @@ const localState = computed({
        percent.value = val / 100
      }
    },
-})
-
-function onKeyDown(evt: KeyboardEvent) {
+ })
+ function onKeyDown(evt: KeyboardEvent) {
    isEdited.value = true
    return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
-}
-
-function onBlur() {
+ }
+ function onBlur() {
    if (isEdited.value) {
      emit('update:modelValue', percent.value)
      isEdited.value = false
    }
-}
-
-function onKeyDownEnter() {
+ }
+ function onKeyDownEnter() {
    if (isEdited.value) {
      emit('update:modelValue', percent.value)
      isEdited.value = false
    }
-}
-</script>
+ }
+ </script>
 
-<template>
+ <template>
    <input
      v-if="isEdited"
      v-model="localState"
@@ -66,4 +73,4 @@ function onKeyDownEnter() {
    />
    <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
    <span v-else>{{ localState }}</span>
-</template>
+ </template> -->

packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@@ -132,7 +132,6 @@ useEventListener(document, 'click', handleClose)
           v-model:value="formState"
         />
         <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
-        <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
         <SmartsheetColumnSelectOptions
           v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
           v-model:value="formState"

packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue

@@ -1,3 +1,5 @@
+<!-- File not in use for now -->
+
 <script setup lang="ts">
 import { precisions } from '@/utils/percentUtils'
 

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -134,12 +134,12 @@ const syncAndNavigate = (dir: NavigateDir) => {
     <CellEmail v-else-if="isEmail" v-model="vModel" />
     <CellUrl v-else-if="isURL" v-model="vModel" />
     <CellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
+    <CellPercent v-else-if="isPercent" v-model="vModel" />
     <CellCurrency v-else-if="isCurrency" v-model="vModel" />
     <CellDecimal v-else-if="isDecimal" v-model="vModel" />
     <CellInteger v-else-if="isInt" v-model="vModel" />
     <CellFloat v-else-if="isFloat" v-model="vModel" />
     <CellText v-else-if="isString" v-model="vModel" />
-    <CellPercent v-else-if="isPercent" v-model="vModel" />
     <CellJson v-else-if="isJSON" v-model="vModel" />
     <CellText v-else v-model="vModel" />
   </div>