Merge pull request #2945 from nocodb/feat/gui-v2-decimal-cell

feat(gui-v2): Decimal Cell

packages/nc-gui-v2/components.d.ts

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AForm: typeof import('ant-design-vue/es')['Form']
@@ -32,6 +33,7 @@ declare module '@vue/runtime-core' {
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AList: typeof import('ant-design-vue/es')['List']
     AListItem: typeof import('ant-design-vue/es')['ListItem']
+    AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']

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

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { computed, inject, onMounted, ref } from '#imports'
+
+interface Props {
+  modelValue: number
+}
+
+interface Emits {
+  (event: 'update:modelValue', model: number): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const editEnabled = inject<boolean>('editEnabled')
+
+const root = ref<HTMLInputElement>()
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+onMounted(() => {
+  root.value?.focus()
+})
+</script>
+
+<template>
+  <input
+    v-if="editEnabled"
+    ref="root"
+    v-model="vModel"
+    class="outline-none pa-0 border-none w-full h-full prose-sm"
+    type="number"
+    step="0.1"
+  />
+  <span v-else class="prose-sm">{{ vModel }}</span>
+</template>
+
+<style scoped lang="scss">
+input[type='number']:focus {
+  @apply ring-transparent;
+}
+</style>

packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@@ -21,6 +21,7 @@ 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'
+import DecimalIcon from '~icons/mdi/decimal'
 
 const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
 
@@ -51,6 +52,8 @@ const icon = computed(() => {
     return RatingIcon
   } else if (additionalColMeta.isAttachment) {
     return AttachmentIcon
+  } else if (additionalColMeta.isDecimal) {
+    return DecimalIcon
   } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
     return NumericIcon
   } else if (additionalColMeta.isPhoneNumber) {

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

@@ -43,6 +43,7 @@ const {
   isString,
   isInt,
   isFloat,
+  isDecimal,
   isSingleSelect,
   isMultiSelect,
   isPercent,
@@ -189,6 +190,7 @@ todo :
         />
     -->
     <CellCurrency v-else-if="isCurrency" v-model="localState" />
+    <CellDecimal v-else-if="isDecimal" 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" />

packages/nc-gui-v2/composables/useColumn.ts

@@ -30,7 +30,8 @@ export function useColumn(column: ColumnType) {
   const isAttachment = uiDatatype === 'Attachment'
   const isRating = uiDatatype === UITypes.Rating
   const isCurrency = uiDatatype === 'Currency'
-  const isPhoneNumber = uiDatatype === 'PhoneNumber'
+  const isPhoneNumber = uiDatatype === UITypes.PhoneNumber
+  const isDecimal = uiDatatype === UITypes.Decimal
   const isDuration = uiDatatype === UITypes.Duration
   const isPercent = uiDatatype === UITypes.Percent
   const isAutoSaved = [
@@ -69,6 +70,7 @@ export function useColumn(column: ColumnType) {
     isAttachment,
     isRating,
     isCurrency,
+    isDecimal,
     isDuration,
     isAutoSaved,
     isManualSaved,