Two month of work
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { isNumeric } from '@/lib/utils';
|
||||
import { component as VueNumber } from '@coders-tm/vue-number-format'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: number | string
|
||||
decimal?: string
|
||||
separator?: string
|
||||
precision?: number
|
||||
minimumFractionDigits?: number
|
||||
maximumFractionDigits?: number
|
||||
prefix?: string
|
||||
suffix?: string
|
||||
}>()
|
||||
const emit = defineEmits<{ (e: 'update:modelValue', value: number): void }>()
|
||||
|
||||
const value = computed<number>({
|
||||
get() {
|
||||
if (typeof props.modelValue === 'string') {
|
||||
const parsedValue = parseFloat(props.modelValue.replace(',', '.'))
|
||||
return isNaN(parsedValue) ? 0 : parsedValue
|
||||
}
|
||||
return (props.modelValue as number) || 0
|
||||
},
|
||||
set(val: any) {
|
||||
const newVal = parseFloat(String(val));
|
||||
const current = typeof props.modelValue === 'string'
|
||||
? parseFloat(props.modelValue.replace(',', '.'))
|
||||
: (props.modelValue as number) || 0;
|
||||
|
||||
if (isNaN(newVal) && isNaN(current)) return;
|
||||
if (newVal === current) return;
|
||||
|
||||
emit('update:modelValue', newVal);
|
||||
}
|
||||
})
|
||||
|
||||
const number = {
|
||||
decimal: props.decimal || ',',
|
||||
separator: props.separator || '.',
|
||||
prefix: props.prefix || '',
|
||||
suffix: props.suffix || '',
|
||||
precision: props.precision || 2,
|
||||
minimumFractionDigits: isNumeric(props.minimumFractionDigits) ? props.minimumFractionDigits : 2,
|
||||
maximumFractionDigits: isNumeric(props.maximumFractionDigits) ? props.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 transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 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
|
||||
dark:hover:border placeholder:text-muted-foreground/30 shadow-none w-full text-right" v-model="value" v-bind="number" />
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user