From e24e337f055f11aca17dcbe9c02c15c69b805be3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 18:35:54 +0800
Subject: [PATCH 1/5] feat(gui-v2): integer cell

---
 .../nc-gui-v2/components/cell/Integer.vue     | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 5cea217783..3355265046 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -3,34 +3,36 @@ interface Props {
   modelValue: number
 }
 
-const { modelValue: value } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', model: number): void
+}
+
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits<Emits>()
 
 const editEnabled = inject<boolean>('editEnabled')
 
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
 onMounted(() => {
   root.value?.focus()
 })
+
+function onKeyDown(evt: KeyboardEvent) {
+  return evt.key === '.' && evt.preventDefault()
+}
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" type="number" />
-  <span v-else>{{ localState }}</span>
+  <input v-if="editEnabled" ref="root" v-model="vModel" type="number" @keydown="onKeyDown" />
+  <span v-else>{{ vModel }}</span>
 </template>
 
 <style scoped>
 input {
-  outline: none;
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
+  @apply outline-none w-full h-full;
 }
 </style>

From aae745a53ba280f16287aa3c4c40f7b669c9a1e5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 18:36:08 +0800
Subject: [PATCH 2/5] feat(gui-v2): add icon for integer & float 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..8a3c2747f6 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -14,6 +14,7 @@ import DatetimeIcon from '~icons/mdi/calendar-clock'
 import DateIcon from '~icons/mdi/calendar'
 import RatingIcon from '~icons/mdi/star'
 import GenericIcon from '~icons/mdi/square-rounded'
+import NumericIcon from '~icons/mdi/numeric'
 import AttachmentIcon from '~icons/mdi/image-multiple-outline'
 import URLIcon from '~icons/mdi/link'
 import EmailIcon from '~icons/mdi/email'
@@ -46,6 +47,8 @@ const icon = computed(() => {
     return RatingIcon
   } else if (additionalColMeta.isAttachment) {
     return AttachmentIcon
+  } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
+    return NumericIcon
   }
   // else if(additionalColMeta.isForeignKey) {
   //   return FKIcon

From 0eef0062896051a5910c6ee08b9cc9f3eefaf0f4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 18:36:25 +0800
Subject: [PATCH 3/5] feat(gui-v2): include CellInteger & CellFloat

---
 .../nc-gui-v2/components/smartsheet/Cell.vue   | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 78550bdf39..7308348d87 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -42,6 +42,8 @@ const {
   isAttachment,
   isTextArea,
   isString,
+  isInt,
+  isFloat,
   isSingleSelect,
   isMultiSelect,
 } = useColumn(column)
@@ -78,20 +80,6 @@ todo :
     <!--      v-on="parentListeners" -->
     <!--    />&ndash;&gt; -->
 
-    <!--    <IntegerCell -->
-    <!--      v-else-if="isInt" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <FloatCell -->
-    <!--      v-else-if="isFloat" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
     <!--    <DatePickerCell -->
     <!--      v-else-if="isDate" -->
     <!--      /> -->
@@ -199,6 +187,8 @@ todo :
         />
     -->
     <CellCurrency v-else-if="isCurrency" v-model="localState" />
+    <CellInteger v-else-if="isInt" v-model="localState" />
+    <CellFloat v-else-if="isFloat" v-model="localState" />
     <CellText v-else-if="isString" v-model="localState" />
     <!-- v-on="parentListeners"
         />

From dabda0e591983728a202f4b47b3a0bbffda6a3e2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 18:37:45 +0800
Subject: [PATCH 4/5] feat(gui-v2): float cell

---
 packages/nc-gui-v2/components/cell/Float.vue | 22 +++++++++-----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 56e12d0657..34fbfa2a45 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -5,18 +5,19 @@ interface Props {
   modelValue: number
 }
 
-const { modelValue: value } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', model: number): void
+}
+
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits<Emits>()
 
 const editEnabled = inject<boolean>('editEnabled')
 
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
 onMounted(() => {
   root.value?.focus()
@@ -24,15 +25,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" type="number" />
-  <span v-else>{{ localState }}</span>
+  <input v-if="editEnabled" ref="root" v-model="vModel" type="number" />
+  <span v-else>{{ vModel }}</span>
 </template>
 
 <style scoped>
 input {
-  outline: none;
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
+  @apply outline-none w-full h-full;
 }
 </style>

From aa66ff25bda55609cb1a53bf4811af6f4b07c62c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 18:38:39 +0800
Subject: [PATCH 5/5] refactor(gui-v2): move css to class

---
 packages/nc-gui-v2/components/cell/Float.vue   | 8 ++------
 packages/nc-gui-v2/components/cell/Integer.vue | 8 ++------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 34fbfa2a45..009f556a5c 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -25,12 +25,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" type="number" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none w-full h-full" type="number" />
   <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped>
-input {
-  @apply outline-none w-full h-full;
-}
-</style>
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 3355265046..6798ff348c 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -27,12 +27,8 @@ function onKeyDown(evt: KeyboardEvent) {
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" type="number" @keydown="onKeyDown" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none w-full h-full" type="number" @keydown="onKeyDown" />
   <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped>
-input {
-  @apply outline-none w-full h-full;
-}
-</style>
+<style scoped></style>