add format options for number field component

resources/js/Components/ui/number-field/NumberField.vue

@@ -2,22 +2,61 @@
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { computed, type HTMLAttributes, inject, type ComputedRef } from 'vue'
+import type { Organization } from '@/packages/api/src'
 
-const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldRootProps & { 
+  class?: HTMLAttributes['class']
+  formatOptions?: {
+    maximumFractionDigits?: number
+    minimumFractionDigits?: number
+  }
+}>()
 const emits = defineEmits<NumberFieldRootEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, formatOptions: __, ...delegated } = props
-
   return delegated
 })
 
+const organization = inject<ComputedRef<Organization>>('organization')
+
+const locale = computed(() => {
+  const format = organization?.value?.number_format || 'comma-point'
+  
+  // space poin is not supported in reka-ui
+  switch (format) {
+    case 'point-comma':
+      return 'de-DE' // Uses point for thousands and comma for decimal
+    case 'comma-point':
+      return 'en-US' // Uses comma for thousands and point for decimal
+    case 'space-comma':
+      return 'sv-SE' // Uses space for thousands and comma for decimal
+    case 'apostrophe-point':
+      return 'de-CH' // Uses apostrophe for thousands and point for decimal
+    default:
+      return 'en-US'
+  }
+})
+
+const defaultFormatOptions = {
+  maximumFractionDigits: 2
+}
+
+const formatOptions = computed(() => ({
+  ...defaultFormatOptions,
+  ...props.formatOptions
+}))
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+  <NumberFieldRoot 
+    v-bind="forwarded" 
+    :locale="locale"
+    :format-options="formatOptions"
+    :class="cn('grid gap-1.5', props.class)">
     <slot />
   </NumberFieldRoot>
 </template>