63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
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 placeholder:text-muted-foreground dark:bg-input/30 border-input flex h-9 min-w-4 rounded-md bg-input px-3 py-1 text-base shadow-xs 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>
|