From 23287e5547652be9fd9173beeb6562b4d4ba67f1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 13:19:14 +0800
Subject: [PATCH 1/5] feat(gui-v2): add percent utils

---
 packages/nc-gui-v2/utils/percentUtils.ts | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 packages/nc-gui-v2/utils/percentUtils.ts

diff --git a/packages/nc-gui-v2/utils/percentUtils.ts b/packages/nc-gui-v2/utils/percentUtils.ts
new file mode 100644
index 0000000000..de32276d6b
--- /dev/null
+++ b/packages/nc-gui-v2/utils/percentUtils.ts
@@ -0,0 +1,30 @@
+export const precisions = [
+  { id: 0, title: '1' },
+  { id: 1, title: '1.0' },
+  { id: 2, title: '1.00' },
+  { id: 3, title: '1.000' },
+  { id: 4, title: '1.0000' },
+  { id: 5, title: '1.00000' },
+  { id: 6, title: '1.000000' },
+  { id: 7, title: '1.0000000' },
+  { id: 8, title: '1.00000000' },
+]
+
+export function renderPercent(value: any, precision: number, withPercentSymbol = true) {
+  if (!value) return value
+  value = (Number(value) * 100).toFixed(precision)
+  if (withPercentSymbol) return padPercentSymbol(value)
+  return value
+}
+
+export function isValidPercent(value: any, negative: boolean): boolean {
+  return negative ? /^-?\d{1,20}(\.\d+)?$/.test(value) : /^\d{1,20}(\.\d+)?$/.test(value)
+}
+
+export function getPercentStep(precision: number): string {
+  return (1 / 10 ** precision).toString()
+}
+
+function padPercentSymbol(value: any) {
+  return value ? `${value}%` : value
+}

From d3d1b6622dc08138e9f234e84ccf27a14b996746 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 13:19:32 +0800
Subject: [PATCH 2/5] feat(gui-v2): add isPercent

---
 packages/nc-gui-v2/composables/useColumn.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 9eb65f1195..f694981884 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -31,6 +31,7 @@ export default (column: ColumnType) => {
   const isRating = uiDatatype === UITypes.Rating
   const isCurrency = uiDatatype === 'Currency'
   const isDuration = uiDatatype === UITypes.Duration
+  const isPercent = uiDatatype === UITypes.Percent
   const isAutoSaved = [
     UITypes.SingleLineText,
     UITypes.LongText,
@@ -72,5 +73,6 @@ export default (column: ColumnType) => {
     isManualSaved,
     isSingleSelect,
     isMultiSelect,
+    isPercent,
   }
 }

From 84015a4fa5018ee577b41785c284c9629957ef4f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 13:19:41 +0800
Subject: [PATCH 3/5] feat(gui-v2): include CellPercent

---
 packages/nc-gui-v2/components/smartsheet/Cell.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 78550bdf39..495b58c9d8 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -44,6 +44,7 @@ const {
   isString,
   isSingleSelect,
   isMultiSelect,
+  isPercent,
 } = useColumn(column)
 </script>
 
@@ -203,6 +204,7 @@ todo :
     <!-- v-on="parentListeners"
         />
     -->
+    <CellPercent v-else-if="isPercent" v-model="localState" />
     <CellText v-else v-model="localState" />
     <!--  v-on="$listeners"   <span v-if="hint" class="nc-hint">{{ hint }}</span> -->
 

From 3bc938777b0ad8014c8376542cfee446dc872614 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 13:19:50 +0800
Subject: [PATCH 4/5] feat(gui-v2): add icon for percent cell

---
 packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 93fb9456b2..59b3383bb5 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -18,6 +18,7 @@ import AttachmentIcon from '~icons/mdi/image-multiple-outline'
 import URLIcon from '~icons/mdi/link'
 import EmailIcon from '~icons/mdi/email'
 import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
+import PercentIcon from '~icons/mdi/percent-outline'
 
 const column = inject(ColumnInj)
 
@@ -54,6 +55,8 @@ const icon = computed(() => {
     return URLIcon
   } else if (additionalColMeta.isCurrency) {
     return CurrencyIcon
+  } else if (additionalColMeta.isPercent) {
+    return PercentIcon
   } else if (additionalColMeta.isString) {
     return h(StringIcon, {
       class: 'text-[1.5rem]',

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 5/5] 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>