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