@soroka282/rm.ui-kit 0.0.49 → 0.0.50

package/dist/src/UI-kit/components/UI/inputs/UIInput.vue.d.ts

@@ -1,6 +1,7 @@
 import { EInputInputmode, EInputType, EInputComponentType, IInputProps } from '../../../types';
 declare const _default: import('vue').DefineComponent<IInputProps, {
     focus: () => void;
+    blur: () => void;
     setSelectionRange: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     blur: (...args: any[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@soroka282/rm.ui-kit",
-    "version": "0.0.49",
+    "version": "0.0.50",
     "private": false,
     "type": "module",
     "main": "dist/rm.ui-kit.umd.js",

package/src/UI-kit/components/UI/inputs/UIInput.vue

@@ -125,6 +125,9 @@
         focus: () => {
             inputEl.value.focus();
         },
+        blur: () => {
+            inputEl.value.blur();
+        },
         setSelectionRange: () => {
             if (props.type !== EInputType.email) {
                 inputEl.value?.setSelectionRange(0, 0);

package/src/modules/auth/components/AuthCheckCodeForm.vue

@@ -28,6 +28,7 @@
 
     type InputElement = {
         focus: () => void;
+        blur: () => void;
         setSelectionRange: (start: number, end: number) => void;
     };
 
@@ -36,6 +37,7 @@
     const errorResponseStatus = ref(false);
     const isFormSubmitted = ref(false);
     const isReady = ref(false);
+    const activeInput = ref<number | null>(null);
 
     const formData = reactive({
         codeArray: ['', '', '', ''],
@@ -103,12 +105,15 @@
         formData.codeArray[index] = value;
 
         if (value && index < inputs.value.length - 1) {
+            inputs.value[index]?.blur();
             inputs.value[index + 1]?.focus();
             inputs.value[index + 1]?.setSelectionRange(0, 1);
+            activeInput.value = index + 1;
         }
 
         if (!value && index > 0) {
             inputs.value[index - 1]?.focus();
+            activeInput.value = index - 1;
         }
 
         code.value = formData.codeArray.join('') || '';
@@ -131,14 +136,25 @@
         resetErrorState('code');
     };
 
+    const resetFocus = (evt: Event) => {
+        if (evt.target?.className === 'ui-input') {
+            return;
+        }
+        activeInput.value = null;
+    };
+
     onUnmounted(() => {
         resetForm();
+
+        document.removeEventListener('click', resetFocus);
     });
 
     onMounted(() => {
         setTimeout(() => {
             isReady.value = true;
         }, 100);
+
+        document.addEventListener('click', resetFocus);
     });
 
     watch(authStep, (newStep) => {
@@ -165,10 +181,12 @@
                 class="auth-check-code-form__input"
                 :class="{
                     '--error': hasInputCodeError,
+                    '--active': activeInput === index,
                 }"
                 :inputmode="EInputInputmode.numeric"
                 @update:model-value="update($event.trim(), index)"
                 @input="resetErrorState('code')"
+                @click="activeInput = index"
             />
         </div>
         <UIInfo
@@ -241,7 +259,7 @@
 
                 &:hover,
                 &:focus {
-                    border-color: var(--blue-500);
+                    border-color: var(--gray-300);
                 }
 
                 &::placeholder {
@@ -256,6 +274,12 @@
                     border-radius: 8px;
                 }
             }
+
+            &.--active {
+                &:deep(.ui-input) {
+                    border-color: var(--blue-500);
+                }
+            }
         }
     }
 </style>