Caramel-CRM/resources/js/components/ui/number-input/NumberInput.vue

<script lang="ts">
import { component as VueNumber } from '@coders-tm/vue-number-format'
import { defineComponent, HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

export default defineComponent({
    components: {
        VueNumber,
    },

    props: {
        modelValue: {
            type: Number,
            required: true,
        }
    },

    emits: ['update:modelValue'],

    computed: {
        value: {
            get(): number {
                return this.modelValue
            },
            set(value: number) {
                this.$emit('update:modelValue', value)
            },
        },
    },

    data() {
        return {
            number: {
                decimal: ',',
                separator: '.',
                prefix: '',
                suffix: ' €',
                precision: 2,
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
                masked: false,
            } as {
                decimal: string;
                separator: string;
                prefix: string;
                suffix: string;
                precision: number;
                minimumFractionDigits: number;
                maximumFractionDigits: number;
                masked: boolean;
            },
        }
    },
})
</script>

<template>
    <div class="flex items-center gap-2">
        <vue-number class="file:text-foreground border-input flex min-w-4 rounded-lg text-base transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive tabular-nums h-6 py-0 px-1 m-0 bg-transparent border-none dark:bg-transparent hover:border-1
dark:hover:border-1 placeholder:text-muted-foreground/30 shadow-none w-28 text-right" v-model="value"
            v-bind="number" />
    </div>
</template>