Merge pull request #2928 from nocodb/feat/gui-v2-number-cell

feat(gui-v2): number cell

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({
+const vModel = useVModel(props, 'modelValue', emits)
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
 
 onMounted(() => {
   root.value?.focus()
@@ -24,15 +25,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" type="number" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none w-full h-full" type="number" />
-  <span v-else>{{ localState }}</span>
+  <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped>
+<style scoped></style>
-input {
-  outline: none;
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-}
-</style>

packages/nc-gui-v2/components/cell/Integer.vue

@@ -3,34 +3,32 @@ 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({
+const vModel = useVModel(props, 'modelValue', emits)
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
 
 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" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none w-full h-full" type="number" @keydown="onKeyDown" />
-  <span v-else>{{ localState }}</span>
+  <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped>
+<style scoped></style>
-input {
-  outline: none;
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-}
-</style>

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'
@@ -49,6 +50,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

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -41,6 +41,8 @@ const {
   isAttachment,
   isTextArea,
   isString,
+  isInt,
+  isFloat,
   isSingleSelect,
   isMultiSelect,
   isPercent,
@@ -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"
         />