mirror of https://github.com/nocodb/nocodb
1 changed files with 67 additions and 0 deletions
@ -0,0 +1,67 @@
|
||||
<script setup lang="ts"> |
||||
import { computed, inject } from '#imports' |
||||
import { ColumnInj } from '~/context' |
||||
import { getPercentStep, isValidPercent, renderPercent } from '@/utils/percentUtils' |
||||
|
||||
interface Props { |
||||
modelValue: number | string |
||||
} |
||||
|
||||
const { modelValue } = defineProps<Props>() |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
const column = inject(ColumnInj) |
||||
|
||||
const percent = ref() |
||||
|
||||
const isEdited = ref(false) |
||||
|
||||
const percentType = computed(() => column?.meta?.precision || 0) |
||||
|
||||
const percentStep = computed(() => getPercentStep(percentType.value)) |
||||
|
||||
const localState = computed({ |
||||
get: () => { |
||||
return renderPercent(modelValue, percentType.value, !isEdited.value) |
||||
}, |
||||
set: (val) => { |
||||
if (val === null) val = 0 |
||||
if (isValidPercent(val, column?.meta?.negative)) { |
||||
percent.value = val / 100 |
||||
} |
||||
}, |
||||
}) |
||||
|
||||
function onKeyDown(evt: KeyboardEvent) { |
||||
isEdited.value = true |
||||
return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault() |
||||
} |
||||
|
||||
function onBlur() { |
||||
if (isEdited.value) { |
||||
emit('update:modelValue', percent.value) |
||||
isEdited.value = false |
||||
} |
||||
} |
||||
|
||||
function onKeyDownEnter() { |
||||
if (isEdited.value) { |
||||
emit('update:modelValue', percent.value) |
||||
isEdited.value = false |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<input |
||||
v-if="isEdited" |
||||
v-model="localState" |
||||
type="number" |
||||
:step="percentStep" |
||||
@keydown="onKeyDown" |
||||
@blur="onBlur" |
||||
@keydown.enter="onKeyDownEnter" |
||||
/> |
||||
<input v-else v-model="localState" type="text" @focus="isEdited = true" /> |
||||
</template> |
Loading…
Reference in new issue