From a7dc9bd1067a6fb97de2cd51336f417fafa43fd7 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 2 Dec 2023 12:12:08 +0300
Subject: [PATCH] fix: PR requested changes

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/Percent.vue | 79 +++++++++++++++------
 1 file changed, 58 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index cdf9993658..0492fb5e32 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -35,35 +35,72 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 
+const cellFocused = ref(false)
+
+const expandedEditEnabled = ref(false)
+
 const percentMeta = computed(() => {
   return {
     is_progress: false,
     ...parseProp(column.value?.meta),
   }
 })
+
+const onBlur = () => {
+  if (editEnabled) {
+    editEnabled.value = false
+  }
+  cellFocused.value = false
+  expandedEditEnabled.value = false
+}
+
+const onFocus = () => {
+  cellFocused.value = true
+}
+
+const onMouseover = () => {
+  expandedEditEnabled.value = true
+}
+
+const onMouseleave = () => {
+  if (!cellFocused.value) {
+    expandedEditEnabled.value = false
+  }
+}
 </script>
 
 <template>
-  <input
-    v-if="editEnabled"
-    :ref="focus"
-    v-model="vModel"
-    class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base p-1"
-    :class="{ '!px-2': editEnabled }"
-    type="number"
-    :placeholder="isEditColumn ? $t('labels.optional') : ''"
-    @blur="editEnabled = false"
-    @keydown.down.stop
-    @keydown.left.stop
-    @keydown.right.stop
-    @keydown.up.stop
-    @keydown.delete.stop
-    @selectstart.capture.stop
-    @mousedown.stop
-  />
-  <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
-  <div v-else-if="percentMeta.is_progress === true && vModel !== null" class="px-3">
-    <a-progress :percent="Number(vModel)" size="small" />
+  <div class="w-full" @mouseover="onMouseover" @mouseleave="onMouseleave">
+    <input
+      v-if="(!isExpandedFormOpen && editEnabled) || (isExpandedFormOpen && expandedEditEnabled)"
+      :ref="focus"
+      v-model="vModel"
+      class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base p-1"
+      :class="{ '!px-2': editEnabled }"
+      type="number"
+      :placeholder="isEditColumn ? $t('labels.optional') : ''"
+      @blur="onBlur"
+      @focus="onFocus"
+      @keydown.down.stop
+      @keydown.left.stop
+      @keydown.right.stop
+      @keydown.up.stop
+      @keydown.delete.stop
+      @selectstart.capture.stop
+      @mousedown.stop
+    />
+    <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
+    <div v-else-if="percentMeta.is_progress === true && vModel !== null && vModel !== undefined" class="px-2">
+      <a-progress
+        :percent="Number(parseFloat(vModel.toString()).toFixed(2))"
+        size="small"
+        status="normal"
+        stroke-color="#3366FF"
+        trail-color="#E5E5E5"
+        :show-info="false"
+      />
+    </div>
+    <!-- nbsp to keep height even if vModel is zero length -->
+    <span v-else>{{ vModel }}&nbsp;</span>
   </div>
-  <span v-else>{{ vModel }}</span>
 </template>