55 lines
1.0 KiB
Vue
55 lines
1.0 KiB
Vue
 
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { fromGroupedInput, toGroupedDisplay } from '@/utils/money'
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
value: number | null | undefined
|
||
|
|
size?: 'large' | 'middle' | 'small'
|
||
|
|
placeholder?: string
|
||
|
|
allowNegative?: boolean
|
||
|
|
disabled?: boolean
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
size: 'large',
|
||
|
|
placeholder: '',
|
||
|
|
allowNegative: false,
|
||
|
|
disabled: false,
|
||
|
|
},
|
||
|
|
)
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'update:value', value: number): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const display = computed(() => toGroupedDisplay(props.value ?? 0))
|
||
|
|
|
||
|
|
function onInput(raw: string | number) {
|
||
|
|
emit('update:value', fromGroupedInput(String(raw ?? ''), props.allowNegative))
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-input
|
||
|
|
class="money-input"
|
||
|
|
dir="ltr"
|
||
|
|
:size="size"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:disabled="disabled"
|
||
|
|
:value="display"
|
||
|
|
@update:value="onInput"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.money-input {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.money-input :deep(input) {
|
||
|
|
font-variant-numeric: tabular-nums;
|
||
|
|
text-align: left;
|
||
|
|
direction: ltr;
|
||
|
|
}
|
||
|
|
</style>
|