add number format

app/javascript/template_builder/area.vue

@@ -161,6 +161,10 @@
               class="aspect-square mx-auto"
               :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
             />
+            <span
+              v-else-if="field.type === 'number'"
+              class="whitespace-pre-wrap"
+            >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
             <span
               v-else
               class="whitespace-pre-wrap"
@@ -417,6 +421,17 @@ export default {
     closeDropdown () {
       document.activeElement.blur()
     },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     maybeBlurSettings (e) {
       if (!e.relatedTarget || !this.$refs.settingsDropdown.contains(e.relatedTarget)) {
         this.isSettingsFocus = false

app/javascript/template_builder/field_settings.vue

@@ -1,4 +1,31 @@
 <template>
+  <div
+    v-if="field.type === 'number'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.format = $event.target.value, save()]"
+    >
+      <option
+        v-for="format in numberFormats"
+        :key="format"
+        :value="format"
+        :selected="format === field.preferences?.format || (format === 'none' && !field.preferences?.format)"
+      >
+        {{ formatNumber(123456789.567, format) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
   <div
     v-if="['number'].includes(field.type)"
     class="py-1.5 px-1 relative"
@@ -335,6 +362,14 @@ export default {
         return acc
       }, {})
     },
+    numberFormats () {
+      return [
+        'none',
+        'comma',
+        'dot',
+        'space'
+      ]
+    },
     dateFormats () {
       const formats = [
         'MM/DD/YYYY',
@@ -382,6 +417,17 @@ export default {
 
       this.save()
     },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     formatDate (date, format) {
       const monthFormats = {
         M: 'numeric',