diff --git a/src/components/common/VnAccountNumber.vue b/src/components/common/VnAccountNumber.vue index c4fa7867465..3955da74ca6 100644 --- a/src/components/common/VnAccountNumber.vue +++ b/src/components/common/VnAccountNumber.vue @@ -1,12 +1,9 @@ <script setup> -import { nextTick, ref, watch } from 'vue'; -import { QInput } from 'quasar'; +import { nextTick, ref } from 'vue'; +import VnInput from './VnInput.vue'; +import { useAccountShortToStandard } from 'src/composables/useAccountShortToStandard'; const $props = defineProps({ - modelValue: { - type: String, - default: '', - }, insertable: { type: Boolean, default: false, @@ -14,70 +11,26 @@ const $props = defineProps({ }); const emit = defineEmits(['update:modelValue', 'accountShortToStandard']); +const model = defineModel({ prop: 'modelValue' }); +const inputRef = ref(false); -let internalValue = ref($props.modelValue); - -watch( - () => $props.modelValue, - (newVal) => { - internalValue.value = newVal; - } -); - -watch( - () => internalValue.value, - (newVal) => { - emit('update:modelValue', newVal); - accountShortToStandard(); - } -); - -const handleKeydown = (e) => { - if (e.key === 'Backspace') return; - if (e.key === '.') { - accountShortToStandard(); - // TODO: Fix this setTimeout, with nextTick doesn't work - setTimeout(() => { - setCursorPosition(0, e.target); - }, 1); - return; - } - - if ($props.insertable && e.key.match(/[0-9]/)) { - handleInsertMode(e); - } -}; -function setCursorPosition(pos, el = vnInputRef.value) { - el.focus(); - el.setSelectionRange(pos, pos); +function setCursorPosition(pos) { + const input = inputRef.value.vnInputRef.$el.querySelector('input'); + input.focus(); + input.setSelectionRange(pos, pos); } -const vnInputRef = ref(false); -const handleInsertMode = (e) => { - e.preventDefault(); - const input = e.target; - const cursorPos = input.selectionStart; - const { maxlength } = vnInputRef.value; - let currentValue = internalValue.value; - if (!currentValue) currentValue = e.key; - const newValue = e.key; - if (newValue && !isNaN(newValue) && cursorPos < maxlength) { - internalValue.value = - currentValue.substring(0, cursorPos) + - newValue + - currentValue.substring(cursorPos + 1); - } - nextTick(() => { - input.setSelectionRange(cursorPos + 1, cursorPos + 1); - }); -}; -function accountShortToStandard() { - internalValue.value = internalValue.value?.replace( - '.', - '0'.repeat(11 - internalValue.value.length) - ); + +async function handleUpdateModel(val) { + model.value = val?.at(-1) === '.' ? useAccountShortToStandard(val) : val; + await nextTick(() => setCursorPosition(0)); } </script> - <template> - <QInput @keydown="handleKeydown" ref="vnInputRef" v-model="internalValue" /> + <VnInput + v-model="model" + ref="inputRef" + v-bind="$attrs" + :insertable + @update:model-value="handleUpdateModel" + /> </template> diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue index aeb4a31fd4b..fb607f0cf4b 100644 --- a/src/components/common/VnInput.vue +++ b/src/components/common/VnInput.vue @@ -83,7 +83,7 @@ const mixinRules = [ requiredFieldRule, ...($attrs.rules ?? []), (val) => { - const { maxlength } = vnInputRef.value; + const maxlength = $props.maxlength; if (maxlength && +val.length > maxlength) return t(`maxLength`, { value: maxlength }); const { min, max } = vnInputRef.value.$attrs; @@ -108,7 +108,7 @@ const handleInsertMode = (e) => { e.preventDefault(); const input = e.target; const cursorPos = input.selectionStart; - const { maxlength } = vnInputRef.value; + const maxlength = $props.maxlength; let currentValue = value.value; if (!currentValue) currentValue = e.key; const newValue = e.key; diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue index ecee5b76b09..4293bd41a8f 100644 --- a/src/pages/Supplier/Card/SupplierFiscalData.vue +++ b/src/pages/Supplier/Card/SupplierFiscalData.vue @@ -108,7 +108,6 @@ function handleLocation(data, location) { <VnAccountNumber v-model="data.account" :label="t('supplier.fiscalData.account')" - clearable data-cy="supplierFiscalDataAccount" insertable :maxlength="10" @@ -185,8 +184,8 @@ function handleLocation(data, location) { /> <VnCheckbox v-model="data.isVies" - :label="t('globals.isVies')" - :info="t('whenActivatingIt')" + :label="t('globals.isVies')" + :info="t('whenActivatingIt')" /> </div> </VnRow>