chore/commented out code for enhanced percentage cell and options

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

@@ -17,3 +17,60 @@ const vModel = useVModel(props, 'modelValue', emits)
   <input v-if="editEnabled" v-model="vModel" type="number" />
   <span v-else>{{ vModel }}</span>
 </template>
+
+<!-- <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)
+   },
+   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
+     v-if="isEdited"
+     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/PercentOptions.vue

@@ -0,0 +1,47 @@
+<!-- File not in use for now -->
+
+<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>