feat: refs #8163 maxLength SupplierFD account

src/components/common/VnInput.vue

@@ -73,6 +73,9 @@ const mixinRules = [
     requiredFieldRule,
     ...($attrs.rules ?? []),
     (val) => {
+        const { maxlength } = vnInputRef.value;
+        if (maxlength && +val.length > maxlength)
+            return t(`maxLength`, { value: maxlength });
         const { min, max } = vnInputRef.value.$attrs;
         if (!min) return null;
         if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
@@ -83,13 +86,9 @@ const mixinRules = [
     },
 ];
 
-const insertMode = ref(false);
-
 const handleKeydown = (e) => {
-    if ($props.insertable && e.key === 'Insert') {
-        insertMode.value = !insertMode.value;
-    }
-    if (insertMode.value && e.key !== 'Insert') {
+    if (e.key === 'Backspace') return;
+    if ($props.insertable && e.key.match(/[0-9]/)) {
         handleInsertMode(e);
     }
 };
@@ -99,9 +98,10 @@ const handleInsertMode = (e) => {
     const input = e.target;
     const cursorPos = input.selectionStart;
 
+    let currentValue = value.value;
+    if (!currentValue) currentValue = e.key;
     const newValue = Number(e.key);
     if (newValue && !isNaN(newValue)) {
-        const currentValue = value.value;
         value.value =
             currentValue.substring(0, cursorPos) +
             newValue +
@@ -158,9 +158,11 @@ const handleInsertMode = (e) => {
 <i18n>
     en:
         inputMin: Must be more than {value}
+        maxLength: The value exceeds {value} characters
         inputMax: Must be less than {value}
     es:
         inputMin: Debe ser mayor a {value}
+        maxLength: El valor excede los {value} carácteres
         inputMax: Debe ser menor a {value}
 </i18n>
 <style lang="scss">

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -106,6 +106,7 @@ function handleLocation(data, location) {
                     clearable
                     data-cy="supplierFiscalDataAccount"
                     insertable
+                    :maxlength="10"
                 />
                 <VnSelect
                     :label="t('supplier.fiscalData.sageTaxTypeFk')"

test/cypress/integration/vnComponent/vnInput.spec.js

@@ -2,24 +2,20 @@ describe('VnInput Component', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.viewport(1920, 1080);
+        cy.visit('/#/supplier/1/fiscal-data');
+        cy.domContentLoad();
     });
 
     it('should replace character at cursor position in insert mode', () => {
-        cy.visit('/#/supplier/1/fiscal-data');
-
         // Simula escribir en el input
         cy.dataCy('supplierFiscalDataAccount').find('input').clear();
-        cy.dataCy('supplierFiscalDataAccount').find('input').type('0123456789');
-        // Activa el modo de inserción
-        cy.dataCy('supplierFiscalDataAccount')
-            .find('input')
-            .trigger('keydown', { key: 'Insert' });
+        cy.dataCy('supplierFiscalDataAccount').find('input').type('4100000001');
         // Coloca el cursor en la posición 0
-        cy.dataCy('supplierFiscalDataAccount').find('input').type('{moveToStart}');
+        cy.dataCy('supplierFiscalDataAccount').find('input').type('{movetostart}');
         // Escribe un número y verifica que se reemplace correctamente
         cy.dataCy('supplierFiscalDataAccount').find('input').type('999');
         cy.dataCy('supplierFiscalDataAccount')
             .find('input')
-            .should('have.value', '9993456789');
+            .should('have.value', '9990000001');
     });
 });