mirror of https://github.com/nocodb/nocodb
աɨռɢӄաօռɢ
2 years ago
committed by
GitHub
5 changed files with 104 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> |
@ -0,0 +1,30 @@ |
|||||||
|
export const precisions = [ |
||||||
|
{ id: 0, title: '1' }, |
||||||
|
{ id: 1, title: '1.0' }, |
||||||
|
{ id: 2, title: '1.00' }, |
||||||
|
{ id: 3, title: '1.000' }, |
||||||
|
{ id: 4, title: '1.0000' }, |
||||||
|
{ id: 5, title: '1.00000' }, |
||||||
|
{ id: 6, title: '1.000000' }, |
||||||
|
{ id: 7, title: '1.0000000' }, |
||||||
|
{ id: 8, title: '1.00000000' }, |
||||||
|
] |
||||||
|
|
||||||
|
export function renderPercent(value: any, precision: number, withPercentSymbol = true) { |
||||||
|
if (!value) return value |
||||||
|
value = (Number(value) * 100).toFixed(precision) |
||||||
|
if (withPercentSymbol) return padPercentSymbol(value) |
||||||
|
return value |
||||||
|
} |
||||||
|
|
||||||
|
export function isValidPercent(value: any, negative: boolean): boolean { |
||||||
|
return negative ? /^-?\d{1,20}(\.\d+)?$/.test(value) : /^\d{1,20}(\.\d+)?$/.test(value) |
||||||
|
} |
||||||
|
|
||||||
|
export function getPercentStep(precision: number): string { |
||||||
|
return (1 / 10 ** precision).toString() |
||||||
|
} |
||||||
|
|
||||||
|
function padPercentSymbol(value: any) { |
||||||
|
return value ? `${value}%` : value |
||||||
|
} |
Loading…
Reference in new issue