src/components/common/VnAccountNumber.vue

@@ -1,20 +1,24 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { QInput } from 'quasar';
 
-const props = defineProps({
+const $props = defineProps({
     modelValue: {
         type: String,
         default: '',
     },
+    insertable: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(['update:modelValue', 'accountShortToStandard']);
 
-let internalValue = ref(props.modelValue);
+let internalValue = ref($props.modelValue);
 
 watch(
-    () => props.modelValue,
+    () => $props.modelValue,
     (newVal) => {
         internalValue.value = newVal;
     }
@@ -28,8 +32,46 @@ watch(
     }
 );
 
+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);
+}
+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(
+    internalValue.value = internalValue.value?.replace(
         '.',
         '0'.repeat(11 - internalValue.value.length)
     );
@@ -37,5 +79,5 @@ function accountShortToStandard() {
 </script>
 
 <template>
-    <q-input v-model="internalValue" />
+    <QInput @keydown="handleKeydown" ref="vnInputRef" v-model="internalValue" />
 </template>

src/components/common/VnInput.vue

@@ -92,6 +92,7 @@ const mixinRules = [
 
 const handleKeydown = (e) => {
     if (e.key === 'Backspace') return;
+
     if ($props.insertable && e.key.match(/[0-9]/)) {
         handleInsertMode(e);
     } else {
@@ -103,25 +104,16 @@ const handleInsertMode = (e) => {
     e.preventDefault();
     const input = e.target;
     const cursorPos = input.selectionStart;
-
+    const { maxlength } = vnInputRef.value;
     let currentValue = value.value;
     if (!currentValue) currentValue = e.key;
     const newValue = e.key;
-
+    if (newValue && !isNaN(newValue) && cursorPos < maxlength) {
-    if (
+        value.value =
-        !newValue ||
+            currentValue.substring(0, cursorPos) +
-        ($props.maxlength &&
+            newValue +
-            currentValue.length >= $props.maxlength &&
+            currentValue.substring(cursorPos + 1);
-            cursorPos == $props.maxlength)
-    ) {
-        return;
     }
-
-    value.value =
-        currentValue.substring(0, cursorPos) +
-        newValue +
-        currentValue.substring(cursorPos + 1);
-
     nextTick(() => {
         input.setSelectionRange(cursorPos + 1, cursorPos + 1);
     });

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -9,6 +9,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
+import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -100,7 +101,7 @@ function handleLocation(data, location) {
                 />
             </VnRow>
             <VnRow>
-                <VnInput
+                <VnAccountNumber
                     v-model="data.account"
                     :label="t('supplier.fiscalData.account')"
                     clearable