add percent format

app/javascript/submission_form/area.vue

@@ -643,6 +643,10 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }

app/javascript/template_builder/area.vue

@@ -620,6 +620,10 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }

app/javascript/template_builder/dynamic_variable.vue

@@ -248,7 +248,7 @@ export default {
     FieldType,
     IconSettings
   },
-  inject: ['t', 'save', 'backgroundColor', 'dateFormats'],
+  inject: ['t', 'save', 'backgroundColor', 'dateFormats', 'locale'],
   provide () {
     return {
       fieldTypes: ['text', 'number', 'date', 'checkbox', 'radio', 'select']
@@ -308,15 +308,18 @@ export default {
       return { text: 'string', number: 'number', date: 'date', checkbox: 'boolean', radio: 'string', select: 'string' }
     },
     numberFormats () {
-      return [
+      const formats = ['none', 'usd', 'eur', 'gbp', 'comma', 'dot', 'space']
-        'none',
+      const spaceLocales = ['fr-FR', 'es-ES', 'pt-PT', 'de-DE', 'it-IT', 'nl-NL']
-        'usd',
+
-        'eur',
+      formats.push(spaceLocales.includes(this.locale) ? 'percent_space' : 'percent')
-        'gbp',
+
-        'comma',
+      const selectedFormat = this.schema.format
-        'dot',
+
-        'space'
+      if (selectedFormat && !formats.includes(selectedFormat)) {
-      ]
+        formats.push(selectedFormat)
+      }
+
+      return formats
     },
     availableDateFormats () {
       const formats = this.dateFormats.length
@@ -397,6 +400,10 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }

app/javascript/template_builder/field_context_menu.vue

@@ -514,7 +514,7 @@ export default {
     ContextSubmenu,
     ContextModal
   },
-  inject: ['t', 'getFieldTypeIndex', 'template', 'withCustomFields', 'currencies', 'dateFormats'],
+  inject: ['t', 'getFieldTypeIndex', 'template', 'withCustomFields', 'currencies', 'dateFormats', 'locale'],
   props: {
     contextMenu: {
       type: Object,

app/javascript/template_builder/field_settings.vue

@@ -610,7 +610,7 @@ export default {
     IconTypography,
     IconX
   },
-  inject: ['template', 't', 'dateFormats'],
+  inject: ['template', 't', 'dateFormats', 'locale'],
   props: {
     field: {
       type: Object,
@@ -691,15 +691,18 @@ export default {
       }
     },
     numberFormats () {
-      return [
+      const formats = ['none', 'usd', 'eur', 'gbp', 'comma', 'dot', 'space']
-        'none',
+      const spaceLocales = ['fr-FR', 'es-ES', 'pt-PT', 'de-DE', 'it-IT', 'nl-NL']
-        'usd',
+
-        'eur',
+      formats.push(spaceLocales.includes(this.locale) ? 'percent_space' : 'percent')
-        'gbp',
+
-        'comma',
+      const selectedFormat = this.field.preferences?.format
-        'dot',
+
-        'space'
+      if (selectedFormat && !formats.includes(selectedFormat)) {
-      ]
+        formats.push(selectedFormat)
+      }
+
+      return formats
     },
     availableDateFormats () {
       const formats = this.dateFormats.length
@@ -824,6 +827,10 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }

lib/number_utils.rb

@@ -25,6 +25,10 @@ module NumberUtils
       ApplicationController.helpers.number_to_currency(number, locale:, precision: 2, unit: CURRENCY_SYMBOLS[format])
     elsif locale
       ApplicationController.helpers.number_with_delimiter(number, locale:)
+    elsif format == 'percent'
+      "#{number}%"
+    elsif format == 'percent_space'
+      "#{number.to_s.tr('.', ',')} %"
     else
       number
     end