@formixru/b2b-ui 3.6.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "3.6.1",
+    "version": "4.0.0",
     "type": "module",
     "repository": {
         "type": "git",
@@ -29,7 +29,7 @@
         "@advdominion/pluralize": "^1.0.2",
         "@advdominion/scroll-to": "^1.0.1",
         "@advdominion/stylelint-config": "^1.1.0",
-        "@advdominion/tooltip": "^6.0.0",
+        "@advdominion/tooltip": "^7.0.1",
         "@floating-ui/dom": "^1.7.6",
         "@popperjs/core": "^2.11.8",
         "@prettier/plugin-php": "^0.25.0",
@@ -73,7 +73,7 @@
         "@advdominion/get-scrollbar-width": "^2.0.0",
         "@advdominion/pluralize": "^1.0.0",
         "@advdominion/scroll-to": "^1.0.0",
-        "@advdominion/tooltip": "^6.0.0",
+        "@advdominion/tooltip": "^7.0.0",
         "color": "^5.0.0",
         "dayjs": "^1.0.0",
         "es-toolkit": "^1.0.0",

package/src/base.scss

@@ -26,6 +26,13 @@
     --easing-deceleration: cubic-bezier(0, 0, 0.2, 1);
     --easing-acceleration: cubic-bezier(0.4, 0, 1, 1);
 
+    --input-delay: 300ms;
+    --change-delay: 900ms;
+    --loader-delay: 600ms;
+    --loader-delay-min: 300ms;
+    --loader-min-time: 600ms;
+    --fallback-timeout: 3000ms;
+
     @each $key, $value in $breakpoints {
         --breakpoint-#{$key}: #{$value};
     }

package/src/components/request/index.js

@@ -27,11 +27,24 @@ export const request = async ({
     url = '',
     method = 'GET',
     data = {},
+    signal,
     loader = true,
     showLoaderDelay,
-    hideLoaderOnSuccess = true,
+    hideLoaderOnSuccess: initialHideLoaderOnSuccess = true,
     interceptData = true,
+    ...unknownParams
 }) => {
+    let hideLoaderOnSuccess = initialHideLoaderOnSuccess;
+
+    const unknownKeys = Object.keys(unknownParams);
+    if (unknownKeys.length > 0) {
+        if (unknownKeys.length === 1) {
+            console.warn(`В функцию request передан неизвестный параметр: ${unknownKeys.join(', ')}`);
+        } else {
+            console.warn(`В функцию request переданы неизвестные параметры: ${unknownKeys.join(', ')}`);
+        }
+    }
+
     const reqUrl = new URL(url, location.origin);
     const options = {
         method,
@@ -39,7 +52,9 @@ export const request = async ({
             'X-Requested-With': 'XMLHttpRequest',
             'X-Session-Id': BX.message('bitrix_sessid'),
         },
+        signal,
     };
+
     if (method === 'GET') {
         let entries;
         if (data instanceof FormData) {
@@ -60,9 +75,11 @@ export const request = async ({
             options.headers['Content-Type'] = 'application/json';
         }
     }
+
     if (loader) {
         showLoader(showLoaderDelay);
     }
+
     try {
         const response = await fetch(reqUrl, options);
         if (!response.ok) {
@@ -78,9 +95,6 @@ export const request = async ({
             data = { content: raw };
         }
 
-        const shouldHideLoader = loader && hideLoaderOnSuccess;
-        let isLoaderHidden = false;
-
         if (isString(data.redirect)) {
             if (data.redirect) {
                 location.assign(data.redirect);
@@ -102,14 +116,14 @@ export const request = async ({
                 if ($dialog) {
                     $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
                     // Вызываем hideLoader так же как в основном компоненте - до функции show()
-                    if (shouldHideLoader && !isLoaderHidden) {
+                    if (loader) {
                         hideLoader();
-                        isLoaderHidden = true;
+                        hideLoaderOnSuccess = false;
                     }
                     await showDialog($dialog);
                     initRequestContent($dialog);
                 } else {
-                    console.error(`Диалоговое окно с id ${elementId?.replace(/^#/, '')} не найдено`);
+                    console.warn(`Диалоговое окно с id ${elementId?.replace(/^#/, '')} не найдено`);
                 }
             }
 
@@ -145,14 +159,14 @@ export const request = async ({
                 if ($sidebar) {
                     $sidebar.innerHTML = data.sidebar.content;
                     // Вызываем hideLoader так же как в основном компоненте - до функции show()
-                    if (shouldHideLoader && !isLoaderHidden) {
+                    if (loader) {
                         hideLoader();
-                        isLoaderHidden = true;
+                        hideLoaderOnSuccess = false;
                     }
                     await showSidebar($sidebar);
                     initRequestContent($sidebar);
                 } else {
-                    console.error(`Сайдбар с id ${elementId?.replace(/^#/, '')} не найден`);
+                    console.warn(`Сайдбар с id ${elementId?.replace(/^#/, '')} не найден`);
                 }
             }
 
@@ -187,7 +201,7 @@ export const request = async ({
                 if ($trigger) {
                     $trigger.click();
                 } else {
-                    console.error(`Элемент с селектором ${data.trigger} не найден`);
+                    console.warn(`Элемент с селектором ${data.trigger} не найден`);
                     if (loader) {
                         hideLoader();
                     }
@@ -195,7 +209,7 @@ export const request = async ({
             }
         }
 
-        if (shouldHideLoader && !isLoaderHidden) {
+        if (loader && hideLoaderOnSuccess) {
             hideLoader(isString(data.redirect) ? 3000 : undefined);
         }
 

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

@@ -19,7 +19,7 @@ $b: '.suggest-input';
         border-top-right-radius: $input-radius;
         container-type: size;
         height: $input-height - $input-border-width * 2;
-        padding: math.div($input-height - 4px * 5, 2);
+        padding: math.div($input-height - 20px, 2);
         position: absolute;
         right: $input-border-width;
         top: $input-border-width;
@@ -28,7 +28,7 @@ $b: '.suggest-input';
 
         .input_small ~ & {
             height: $input-small-height - $input-border-width * 2;
-            padding: math.div($input-small-height - 4px * 4, 2);
+            padding: math.div($input-small-height - 16px, 2);
             width: $input-small-height - $input-border-width * 2;
         }
     }
@@ -65,12 +65,12 @@ $b: '.suggest-input';
 
     &__clear-icon {
         fill: currentcolor;
-        height: 4px * 4;
-        width: 4px * 4;
+        height: 16px;
+        width: 16px;
 
         .input_small ~ #{$b}__clear & {
-            height: 4px * 3;
-            width: 4px * 3;
+            height: 12px;
+            width: 12px;
         }
     }
 
@@ -90,9 +90,9 @@ $b: '.suggest-input';
         @include dark-border-disable((top));
 
         @if $input-radius != 0 {
-            margin-top: -4px * 2;
-            max-height: $suggest-input-item-height * 5 + 4px * 2;
-            padding-top: 4px * 2;
+            margin-top: -8px;
+            max-height: $suggest-input-item-height * 5 + 8px;
+            padding-top: 8px;
         } @else {
             max-height: $suggest-input-item-height * 5;
         }

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

@@ -1,21 +1,21 @@
 <template>
     <div ref="$root" class="suggest-input" @keydown.esc="esc()">
         <input
-            :id="id"
+            :id="props.id"
             ref="$input"
             v-model="model"
             class="suggest-input__input input"
             :class="[
                 showSuggests ? 'suggest-input__input_active' : '',
-                small ? 'input_small' : '',
-                error ? 'input_error' : '',
-                ...inputCssClasses,
+                props.small ? 'input_small' : '',
+                props.error ? 'input_error' : '',
+                ...props.inputCssClasses,
             ]"
             type="text"
-            :name="name"
-            :required="required"
-            :disabled="disabled"
-            :placeholder="placeholder"
+            :name="props.name"
+            :required="props.required"
+            :disabled="props.disabled"
+            :placeholder="props.placeholder"
             autocomplete="off"
             @input="handleInput()"
             @focusin="focusin()"
@@ -36,22 +36,22 @@
                     tabindex="0"
                     @click="select(item)"
                 >
-                    <span v-if="hightlightMatches" v-html="item.formatted_label"></span>
+                    <span v-if="props.hightlightMatches" v-html="item.formatted_label"></span>
                     <span v-else v-html="item.label"></span>
                 </div>
             </template>
-            <div v-else class="suggest-input__not-found" v-html="notFoundMessage"></div>
+            <div v-else class="suggest-input__not-found" v-html="props.notFoundMessage"></div>
         </div>
         <slot name="content"></slot>
     </div>
 </template>
 
 <script setup>
-/* globals BX */
+import { cssVar } from '@advdominion/css-var';
+import { debounce } from 'es-toolkit';
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
 
-import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue';
-
-import { errorHandler } from '../../utils/error-handler.js';
+import { request } from '../request/index.js';
 
 const ICONS_PATH = window.ICONS_PATH;
 
@@ -90,9 +90,11 @@ const props = defineProps({
         type: Number,
         default: 3,
     },
-    throttle: {
+    inputDelay: {
         type: Number,
-        default: 1000,
+        default() {
+            return cssVar('--input-delay');
+        },
     },
     inputCssClasses: {
         type: Array,
@@ -113,28 +115,30 @@ const props = defineProps({
     error: {
         type: Boolean,
     },
+    loaderDelay: {
+        type: Number,
+        default() {
+            return cssVar('--loader-delay-min');
+        },
+    },
+    loaderMinTime: {
+        type: Number,
+        default() {
+            return cssVar('--loader-min-time');
+        },
+    },
+    suggestsTimeout: {
+        type: Number,
+        default() {
+            return cssVar('--fallback-timeout');
+        },
+    },
 });
 
-const {
-    id,
-    name,
-    placeholder,
-    required,
-    disabled,
-    action,
-    queryName,
-    minlength,
-    throttle,
-    inputCssClasses,
-    hightlightMatches,
-    small,
-    notFoundMessage,
-} = toRefs(props);
-
-const $root = ref();
-const $input = ref();
-const $list = ref();
-const $clear = ref();
+const $root = useTemplateRef('$root');
+const $input = useTemplateRef('$input');
+const $list = useTemplateRef('$list');
+const $clear = useTemplateRef('$clear');
 
 const suggests = ref([]);
 const formattedSuggests = ref([]);
@@ -144,7 +148,7 @@ watch(suggests, () => {
     focusSuggestIndex.value = -1;
     const regexp = new RegExp(model.value, 'i');
     formattedSuggests.value = suggests.value.map((item) => {
-        if (hightlightMatches.value) {
+        if (props.hightlightMatches) {
             const match = regexp.exec(item.label);
             item.formatted_label = match ? item.label.replace(match[0], `<mark>${match[0]}</mark>`) : item.label;
         }
@@ -191,41 +195,84 @@ const indexesToScroll = computed(() => {
 });
 
 const isLoading = ref(false);
-const isClearVisible = computed(() => model.value.length >= minlength.value && !isLoading.value);
+const isClearVisible = computed(() => model.value.length >= props.minlength && !isLoading.value);
 
-let throttleTimeout;
+let controllerDaData;
+let abortTimeout;
+let loaderTimeout;
+let loaderStartTime = 0;
 
-const handleInput = () => {
-    clearTimeout(throttleTimeout);
-    if (model.value.length >= minlength.value) {
-        throttleTimeout = setTimeout(async () => {
+const getSuggests = async (query) => {
+    const currentController = new AbortController();
+    controllerDaData = currentController;
+
+    clearTimeout(abortTimeout);
+    abortTimeout = setTimeout(() => {
+        currentController.abort();
+    }, props.suggestsTimeout);
+
+    // Добавляем небольшую задержку, чтобы лодер не показывался на быстрых ответах
+    clearTimeout(loaderTimeout);
+    loaderTimeout = setTimeout(() => {
+        if (currentController === controllerDaData) {
             isLoading.value = true;
-            const url = new URL(action.value, location.origin);
-            url.searchParams.append(queryName.value, model.value);
-            try {
-                const response = await fetch(url, {
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest',
-                        'X-Session-Id': BX.message('bitrix_sessid'),
-                    },
-                });
-                if (!response.ok) {
-                    throw response;
-                }
-                const data = await response.json();
-                isLoading.value = false;
-                suggests.value = data;
-                showSuggests.value = true;
-            } catch (error) {
-                if (error.status === 401) {
-                    location.reload();
-                } else {
+            loaderStartTime = Date.now();
+        }
+    }, props.loaderDelay);
+
+    try {
+        const url = new URL(props.action, location.origin);
+        url.searchParams.append(props.queryName, query);
+
+        const data = await request({
+            url,
+            loader: false,
+            interceptData: false,
+            signal: currentController.signal,
+        });
+
+        if (currentController !== controllerDaData) {
+            return;
+        }
+
+        if (data) {
+            suggests.value = data;
+            showSuggests.value = true;
+        }
+    } finally {
+        if (currentController === controllerDaData) {
+            clearTimeout(abortTimeout);
+            controllerDaData = undefined;
+
+            clearTimeout(loaderTimeout);
+            if (isLoading.value) {
+                // Если показали лоадер, то убеждаемся, что он будет показываться какое-то мин. время, чтобы избежать миганий
+                const displayTime = Date.now() - loaderStartTime;
+                const remainingTime = Math.max(0, props.loaderMinTime - displayTime);
+                setTimeout(() => {
                     isLoading.value = false;
-                    errorHandler(error);
-                }
+                    loaderStartTime = 0;
+                }, remainingTime);
             }
-        }, throttle.value);
+        }
+    }
+};
+
+const _debouncedGetSuggests = debounce(getSuggests, props.inputDelay);
+
+const cancelRequest = () => {
+    _debouncedGetSuggests.cancel();
+    controllerDaData?.abort();
+    clearTimeout(abortTimeout);
+    clearTimeout(loaderTimeout);
+    isLoading.value = false;
+};
+
+const handleInput = () => {
+    if (model.value.length >= props.minlength) {
+        _debouncedGetSuggests(model.value);
     } else {
+        cancelRequest();
         showSuggests.value = false;
     }
 };
@@ -238,6 +285,7 @@ const focusin = async () => {
 
 const focusout = async ({ relatedTarget }) => {
     if (!relatedTarget || (!$list.value.contains(relatedTarget) && !$clear.value.contains(relatedTarget))) {
+        cancelRequest();
         showSuggests.value = false;
     }
     await nextTick();
@@ -245,6 +293,7 @@ const focusout = async ({ relatedTarget }) => {
 };
 
 const esc = () => {
+    cancelRequest();
     // Ждём, чтобы событие нажатия Esc сработало у других обработчиков (например, в диалоговых окнах)
     setTimeout(() => {
         showSuggests.value = false;
@@ -252,12 +301,13 @@ const esc = () => {
 };
 
 const clear = () => {
-    clearTimeout(throttleTimeout);
+    cancelRequest();
     model.value = '';
     showSuggests.value = false;
 };
 
 const select = ({ label, value }) => {
+    cancelRequest();
     model.value = label;
     showSuggests.value = false;
     emit('select', {