feat(gui): right align numeric fields text in grid view

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -76,6 +76,8 @@ provide(ReadonlyInj, readOnly)
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isPublic = inject(IsPublicInj, ref(false))
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -124,14 +126,26 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
 
   if (!isForm.value) e.stopImmediatePropagation()
 }
+
+const isNumericField = computed(() => {
+  return (
+    isInt(column.value, abstractType.value) ||
+    isFloat(column.value, abstractType.value) ||
+    isDecimal(column.value) ||
+    isCurrency(column.value) ||
+    isPercent(column.value) ||
+    isDuration(column.value)
+  )
+})
 </script>
 
 <template>
   <div
-    class="nc-cell w-full"
+    class="nc-cell w-full h-full"
     :class="[
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
       { 'text-blue-600': isPrimary(column) && !props.virtual && !isForm },
+      { 'nc-grid-numeric-cell': isGrid && isNumericField },
     ]"
     @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
@@ -168,3 +182,12 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
     </template>
   </div>
 </template>
+
+<style scoped lang="scss">
+.nc-grid-numeric-cell {
+  @apply text-right;
+  :deep(input) {
+    @apply text-right;
+  }
+}
+</style>

packages/nc-gui/components/smartsheet/Grid.vue

@@ -284,7 +284,11 @@ const {
             activeCell.col = 0
             makeEditable(data.value[activeCell.row], fields.value[activeCell.col])
             nextTick(() => {
-              (document.querySelector('td.cell.active')?.querySelector('input,textarea') as HTMLInputElement | HTMLTextAreaElement)?.focus()
+              ;(
+                document.querySelector('td.cell.active')?.querySelector('input,textarea') as
+                  | HTMLInputElement
+                  | HTMLTextAreaElement
+              )?.focus()
             })
           }
           break