fix/reverted percent to v1

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

@@ -1,69 +1,19 @@
 <script setup lang="ts">
-import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
+import { EditModeInj, inject } from '#imports'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | string | null | undefined
 }
 
-const { modelValue } = defineProps<Props>()
+const props = defineProps<Props>()
-
+const emits = defineEmits(['update:modelValue'])
-const emit = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
-const column = inject(ColumnInj)
+const vModel = useVModel(props, 'modelValue', emits)
-
-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)
-  },
-  set: (val) => {
-    if (val === null) val = 0
-    if (isValidPercent(val, column?.value?.meta?.negative)) {
-      percent.value = val / 100
-    }
-  },
-})
-
-function onKeyDown(evt: KeyboardEvent) {
-  isEdited.value = true
-  return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
-}
-
-function onBlur() {
-  if (isEdited.value) {
-    emit('update:modelValue', percent.value)
-    isEdited.value = false
-  }
-}
-
-function onKeyDownEnter() {
-  if (isEdited.value) {
-    emit('update:modelValue', percent.value)
-    isEdited.value = false
-  }
-}
 </script>
 
 <template>
-  <input
+  <input v-if="editEnabled" v-model="vModel" type="number" />
-    v-if="isEdited"
+  <span v-else>{{ vModel }}</span>
-    v-model="localState"
-    type="number"
-    :step="percentStep"
-    @keydown="onKeyDown"
-    @blur="onBlur"
-    @keydown.enter="onKeyDownEnter"
-  />
-  <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
-  <span v-else>{{ localState }}</span>
 </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,45 +0,0 @@
-<script setup lang="ts">
-import { precisions } from '@/utils/percentUtils'
-
-interface Props {
-  value: Record<string, any>
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits(['update:value'])
-const vModel = useVModel(props, 'value', emit)
-
-if (!vModel.value.meta) vModel.value.meta = {}
-if (!vModel.value.meta?.negative) vModel.value.meta.negative = false
-if (!vModel.value.meta?.default) vModel.value.meta.default = null
-if (!vModel.value.meta?.precision) vModel.value.meta.precision = precisions[0].id
-</script>
-
-<template>
-  <div class="flex flex-col mt-2 gap-2">
-    <div class="flex flex-row space-x-2">
-      <a-form-item class="flex w-1/2" label="Precision">
-        <a-select v-model:value="vModel.meta.precision">
-          <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
-            <div class="flex flex-row items-center">
-              <div class="text-xs">
-                {{ precision.title }}
-              </div>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="Default Number (%)">
-        <a-input v-model:value="vModel.meta.default" name="default" type="number" />
-      </a-form-item>
-    </div>
-    <div class="flex flex-row mt-2">
-      <a-form-item>
-        <div class="flex flex-row space-x-2 items-center">
-          <a-switch v-model:checked="vModel.meta.negative" name="negative" />
-          <div class="text-xs">Allow negative numbers</div>
-        </div>
-      </a-form-item>
-    </div>
-  </div>
-</template>

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>