@formixru/b2b-ui 4.1.0 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "4.1.0",
+    "version": "4.2.1",
     "type": "module",
     "repository": {
         "type": "git",

package/src/components/search-input/index.vue

@@ -9,7 +9,6 @@
             type="text"
             :placeholder="props.placeholder"
             autocomplete="off"
-            @input="emit('input', $event)"
             @focusin="emit('focusin', $event)"
             @focusout="emit('focusout', $event)"
             @keydown="emit('keydown', $event)"
@@ -22,7 +21,9 @@
                 emit('submit');
             "
         >
-            <span v-show="props.isLoading" class="search-input__spinner"><span class="spinner"></span></span>
+            <span v-show="props.isLoading" class="search-input__spinner">
+                <span class="spinner"></span>
+            </span>
             <svg v-show="!props.isLoading" class="search-input__submit-icon">
                 <use :href="`${ICONS_PATH}#search`" />
             </svg>
@@ -40,7 +41,7 @@ import { ref, useTemplateRef, watch, watchEffect } from 'vue';
 
 const ICONS_PATH = window.ICONS_PATH;
 
-const emit = defineEmits(['input', 'focusin', 'focusout', 'keydown', 'submit']);
+const emit = defineEmits(['focusin', 'focusout', 'keydown', 'submit']);
 const model = defineModel({ type: String, default: '' });
 
 const props = defineProps({

package/src/components/suggest-input/index.scss

@@ -118,6 +118,11 @@ $b: '.suggest-input';
             color: $suggest-input-item-active-color;
         }
 
+        &_disabled {
+            color: $suggest-input-item-disabled-color;
+            pointer-events: none;
+        }
+
         mark {
             background-color: transparent;
             color: $suggest-input-item-mark-color;

package/src/components/suggest-input/index.vue

@@ -10,7 +10,7 @@
             :input-delay="0"
             :input-css-classes="props.inputCssClasses"
             :is-loading="isLoading"
-            @input="handleInput()"
+            @update:model-value="handleInput()"
             @focusin="focusin()"
             @focusout="focusout($event)"
             @keydown="arrowNavigation($event)"
@@ -33,7 +33,13 @@
             @keydown="arrowNavigation($event)"
         />
         <div v-show="isLoading && !props.searchInput" class="suggest-input__loader"><div class="spinner"></div></div>
-        <button v-show="isClearVisible && !props.searchInput" ref="$clear" class="suggest-input__clear" type="button" @click="clear()">
+        <button
+            v-show="isClearVisible && !props.searchInput"
+            ref="$clear"
+            class="suggest-input__clear"
+            type="button"
+            @click="clear()"
+        >
             <svg class="suggest-input__clear-icon"><use :href="`${ICONS_PATH}#close`" /></svg>
         </button>
         <div v-show="showSuggests" ref="$list" class="suggest-input__list" @mouseover="focusSuggestIndex = -1">
@@ -42,7 +48,10 @@
                     v-for="(item, index) in formattedSuggests"
                     :key="index"
                     class="suggest-input__list-item"
-                    :class="{ 'suggest-input__list-item_focus': index === focusSuggestIndex }"
+                    :class="{
+                        'suggest-input__list-item_focus': index === focusSuggestIndex,
+                        'suggest-input__list-item_disabled': item.disabled,
+                    }"
                     tabindex="0"
                     @click="select(item)"
                 >
@@ -245,7 +254,10 @@ const cancelRequest = () => {
     isLoading.value = false;
 };
 
-const handleInput = () => {
+const handleInput = async () => {
+    // Ждём, чтобы model.value точно обновилось (может быть задержка из-за v-model/@update:model-value в SearchInput)
+    await nextTick();
+
     if (model.value.length >= props.minlength) {
         _debouncedGetSuggests(model.value);
     } else {
@@ -283,13 +295,17 @@ const clear = () => {
     showSuggests.value = false;
 };
 
-const select = ({ label, value }) => {
+const select = (item) => {
+    if (item.disabled) {
+        return;
+    }
+
     cancelRequest();
-    model.value = label;
+    model.value = item.label;
     showSuggests.value = false;
     emit('select', {
         input: model.value,
-        value,
+        value: item.value,
     });
 };
 
@@ -298,15 +314,32 @@ const arrowNavigation = async (event) => {
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
             event.preventDefault();
 
+            const len = suggests.value.length;
+            if (len === 0) {
+                return;
+            }
+
             switch (event.key) {
                 case 'ArrowDown': {
-                    focusSuggestIndex.value =
-                        suggests.value.length === focusSuggestIndex.value + 1 ? 0 : focusSuggestIndex.value + 1;
+                    let nextIndex = focusSuggestIndex.value;
+                    for (let i = 0; i < len; i++) {
+                        nextIndex = (nextIndex + 1) % len;
+                        if (!suggests.value[nextIndex]?.disabled) {
+                            focusSuggestIndex.value = nextIndex;
+                            break;
+                        }
+                    }
                     break;
                 }
                 case 'ArrowUp': {
-                    focusSuggestIndex.value =
-                        focusSuggestIndex.value <= 0 ? suggests.value.length - 1 : focusSuggestIndex.value - 1;
+                    let nextIndex = focusSuggestIndex.value === -1 ? 0 : focusSuggestIndex.value;
+                    for (let i = 0; i < len; i++) {
+                        nextIndex = (nextIndex - 1 + len) % len;
+                        if (!suggests.value[nextIndex]?.disabled) {
+                            focusSuggestIndex.value = nextIndex;
+                            break;
+                        }
+                    }
                     break;
                 }
             }
@@ -334,11 +367,16 @@ const arrowNavigation = async (event) => {
                 }
             }
         }
+
         if (event.key === 'Enter' && focusSuggestIndex.value >= 0) {
-            // Ждём, чтобы событие нажатия Enter сработало у других обработчиков (например, в формах)
-            setTimeout(() => {
-                select(suggests.value[focusSuggestIndex.value]);
-            });
+            const item = suggests.value[focusSuggestIndex.value];
+
+            if (item && !item.disabled) {
+                // Ждём, чтобы событие нажатия Enter сработало у других обработчиков (например, в формах)
+                setTimeout(() => {
+                    select(item);
+                });
+            }
         }
     }
 };

package/src/variables.scss

@@ -602,6 +602,8 @@ $suggest-input-item-font: ('font-size': $font-size, 'line-height': $line-height)
 $suggest-input-item-mark-color: inherit !default;
 $suggest-input-item-mark-font: ('font-weight': bold) !default;
 
+$suggest-input-item-disabled-color: $font-color-tertiary !default;
+
 $suggest-input-item-active-bg: $color-grey-90 !default;
 $suggest-input-item-active-color: $font-color-action !default;