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

<script setup lang="ts">
import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
import { cn } from '@/lib/utils';
import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
import { computed, type HTMLAttributes, inject, type ComputedRef } from 'vue';
import type { Organization } from '@/packages/api/src';

const props = defineProps<
    NumberFieldRootProps & {
        class?: HTMLAttributes['class'];
        formatOptions?: {
            maximumFractionDigits?: number;
            minimumFractionDigits?: number;
        };
    }
>();
const emits = defineEmits<NumberFieldRootEmits>();

const delegatedProps = computed(() => {
    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"
        :locale="locale"
        :format-options="formatOptions"
        :class="cn('grid gap-1.5', props.class)">
        <slot />
    </NumberFieldRoot>
</template>