From 41778faa0ff2064f912975d48f0894b13d51de0e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 13:25:02 +0800
Subject: [PATCH] feat(gui-v2): percent cell

---
 .../nc-gui-v2/components/cell/Percent.vue     | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/cell/Percent.vue

diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
new file mode 100644
index 0000000000..dde455185c
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/Percent.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, inject } from '#imports'
+import { ColumnInj } from '~/context'
+import { getPercentStep, isValidPercent, renderPercent } from '@/utils/percentUtils'
+
+interface Props {
+  modelValue: number | string
+}
+
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const column = inject(ColumnInj)
+
+const percent = ref()
+
+const isEdited = ref(false)
+
+const percentType = computed(() => column?.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?.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-else v-model="localState" type="text" @focus="isEdited = true" />
+</template>