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">