feat(gui-v2): Currency Cell

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

@@ -1,36 +1,49 @@
-<script>
-export default {
-  name: 'CurrencyCell',
-  props: {
-    column: Object,
-    value: [String, Number],
-  },
-  computed: {
-    currency() {
-      try {
-        return isNaN(this.value)
-          ? this.value
-          : new Intl.NumberFormat(this.currencyMeta.currency_locale || 'en-US', {
-              style: 'currency',
-              currency: this.currencyMeta.currency_code || 'USD',
-            }).format(this.value)
-      } catch (e) {
-        return this.value
-      }
-    },
-    currencyMeta() {
-      return {
-        currency_locale: 'en-US',
-        currency_code: 'USD',
-        ...(this.column && this.column.meta ? this.column.meta : {}),
-      }
-    },
-  },
+<script setup lang="ts">
+import { computed, inject } from '#imports'
+import { ColumnInj } from '~/context'
+
+const { modelValue: value } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const column = inject(ColumnInj)
+
+const editEnabled = inject<boolean>('editEnabled')
+
+interface Props {
+  modelValue: number
 }
+const root = ref<HTMLInputElement>()
+
+const localState = computed({
+  get: () => value,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const currencyMeta = computed(() => {
+  return {
+    currency_locale: 'en-US',
+    currency_code: 'USD',
+    ...(column && column.meta ? column.meta : {}),
+  }
+})
+const currency = computed(() => {
+  try {
+    return isNaN(value)
+      ? value
+      : new Intl.NumberFormat(currencyMeta?.value?.currency_locale || 'en-US', {
+          style: 'currency',
+          currency: currencyMeta?.value?.currency_code || 'USD',
+        }).format(value)
+  } catch (e) {
+    return value
+  }
+})
 </script>
 
 <template>
-  <a v-if="value">{{ currency }}</a>
+  <input v-if="editEnabled" ref="root" v-model="localState" />
+  <span v-else-if="value">{{ currency }}</span>
   <span v-else />
 </template>
 

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

@@ -17,6 +17,7 @@ import GenericIcon from '~icons/mdi/square-rounded'
 import AttachmentIcon from '~icons/mdi/image-multiple-outline'
 import URLIcon from '~icons/mdi/link'
 import EmailIcon from '~icons/mdi/email'
+import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
 
 const column = inject(ColumnInj)
 
@@ -51,6 +52,8 @@ const icon = computed(() => {
   // }
   else if (additionalColMeta.isURL) {
     return URLIcon
+  } else if (additionalColMeta.isCurrency) {
+    return CurrencyIcon
   } else if (additionalColMeta.isString) {
     return h(StringIcon, {
       class: 'text-[1.5rem]',

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

@@ -51,7 +51,6 @@ const {
     <!--
 todo :
  JSONCell
- Currency
 -->
 
     <!--    <RatingCell -->
@@ -197,6 +196,7 @@ todo :
     <!-- v-on="parentListeners"
         />
     -->
+    <CellCurrency v-else-if="isCurrency" v-model="localState" />
     <CellText v-else-if="isString" v-model="localState" />
     <!-- v-on="parentListeners"
         />