@formixru/b2b-ui 3.0.2 → 3.0.4

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

@@ -0,0 +1,185 @@
+<template>
+    <div v-once ref="$root" class="range-input">
+        <div class="range-input__wrapper">
+            <input
+                ref="$from"
+                class="range-input__input input"
+                type="number"
+                :placeholder="`от ${initMin}`"
+                :min="initMin"
+                :value="initFromValue"
+                :step="initStep"
+                :name="fromName"
+                :disabled="initDisabled"
+            />
+            <input
+                ref="$to"
+                class="range-input__input input"
+                type="number"
+                :placeholder="`до ${initMax}`"
+                :max="initMax"
+                :value="initToValue"
+                :step="initStep"
+                :name="toName"
+                :disabled="initDisabled"
+            />
+        </div>
+        <div ref="$track" class="range-input__track"></div>
+    </div>
+</template>
+
+<script setup>
+import noUiSlider from 'nouislider';
+import { onMounted, ref, toRefs } from 'vue';
+
+const emit = defineEmits(['input']);
+
+const props = defineProps({
+    fromName: {
+        type: String,
+        default: '',
+    },
+    toName: {
+        type: String,
+        default: '',
+    },
+    initFromValue: {
+        type: Number,
+        default: undefined,
+    },
+    initToValue: {
+        type: Number,
+        default: undefined,
+    },
+    initMin: {
+        type: Number,
+        required: true,
+    },
+    initMax: {
+        type: Number,
+        required: true,
+    },
+    initStep: {
+        type: Number,
+        default: 1,
+    },
+    initDisabled: {
+        type: Boolean,
+    },
+    throttle: {
+        type: Number,
+        default: 1000,
+    },
+});
+
+const { fromName, toName, initFromValue, initToValue, initMin, initMax, initStep, initDisabled, throttle } =
+    toRefs(props);
+
+const $root = ref();
+const $track = ref();
+const $from = ref();
+const $to = ref();
+
+onMounted(() => {
+    const setTrackValue = () => {
+        const min = Number($from.value.min);
+        const max = Number($to.value.max);
+
+        let from;
+        let to;
+
+        // Иначе, если мин. и макс. одинаковые, ползунок перемещается в конец трека
+        if (min !== max) {
+            from = $from.value.value.length > 0 ? Number($from.value.value) : min;
+            to = $to.value.value.length > 0 ? Number($to.value.value) : max;
+        }
+
+        $track.value.noUiSlider.set([from, to]);
+    };
+
+    const setFromTo = () => {
+        const value = $track.value.noUiSlider.get();
+        if ($from.value.value.length > 0 || Number(value[0]) > Number($from.value.min)) {
+            $from.value.value = Number(value[0]);
+        }
+        if ($to.value.value.length > 0 || Number(value[1]) < Number($to.value.max)) {
+            $to.value.value = Number(value[1]);
+        }
+    };
+
+    noUiSlider.create($track.value, {
+        start: [
+            initFromValue.value === undefined ? initMin.value : initFromValue.value,
+            initToValue.value === undefined ? initMax.value : initToValue.value,
+        ],
+        step: initStep.value,
+        range: {
+            min: [initMin.value],
+            max: [initMax.value],
+        },
+        connect: true,
+    });
+
+    if (initDisabled.value) {
+        $track.value.noUiSlider.target.setAttribute('disabled', true);
+    }
+
+    $track.value.noUiSlider.on('slide', () => {
+        setFromTo();
+    });
+
+    $track.value.noUiSlider.on('change', () => {
+        emit('input');
+    });
+
+    let throttleTimeout;
+
+    for (const $el of [$from.value, $to.value]) {
+        // Обновляем параметры ползунка при изменении атрибутов полей
+        const observer = new MutationObserver((mutations) => {
+            for (const { attributeName } of mutations) {
+                if (attributeName === 'step') {
+                    $track.value.noUiSlider.updateOptions({
+                        step: Number($el.step),
+                    });
+                } else if (attributeName === 'disabled') {
+                    if ($el.disabled) {
+                        $track.value.noUiSlider.target.setAttribute('disabled', true);
+                    } else {
+                        $track.value.noUiSlider.target.removeAttribute('disabled');
+                    }
+                } else {
+                    $track.value.noUiSlider.updateOptions({
+                        range: {
+                            min: [Number($from.value.min)],
+                            max: [Number($to.value.max)],
+                        },
+                    });
+                    setTrackValue();
+                    // Обновляем подсказки от/до
+                    $from.value.placeholder = `от ${$from.value.min}`;
+                    $to.value.placeholder = `до ${$to.value.max}`;
+                }
+            }
+        });
+        observer.observe($el, {
+            attributes: true,
+            attributeFilter: ['min', 'max', 'step', 'disabled'],
+        });
+
+        $el.addEventListener('input', () => {
+            setTrackValue();
+            const $filterItem = $root.value.closest('.filter__item');
+            $filterItem._tooltip?.hide();
+            clearTimeout(throttleTimeout);
+            throttleTimeout = setTimeout(() => {
+                emit('input');
+            }, throttle.value);
+        });
+
+        $el.addEventListener('change', () => {
+            setFromTo();
+        });
+    }
+});
+</script>

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

@@ -0,0 +1,328 @@
+<template>
+    <div ref="$root" class="suggest-input" @keydown.esc="esc()">
+        <input
+            :id="id"
+            ref="$input"
+            v-model="model"
+            class="suggest-input__input input"
+            :class="[
+                showSuggests ? 'suggest-input__input_active' : '',
+                small ? 'input_small' : '',
+                error ? 'input_error' : '',
+                ...inputCssClasses,
+            ]"
+            type="text"
+            :name="name"
+            :required="required"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            autocomplete="off"
+            @input="handleInput()"
+            @focusin="focusin()"
+            @focusout="focusout($event)"
+            @keydown="arrowNavigation($event)"
+        />
+        <div v-show="isLoading" class="suggest-input__loader"><div class="spinner"></div></div>
+        <button v-show="isClearVisible" 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">
+            <template v-if="suggests.length > 0">
+                <div
+                    v-for="(item, index) in formattedSuggests"
+                    :key="index"
+                    class="suggest-input__list-item"
+                    :class="{ 'suggest-input__list-item_focus': index === focusSuggestIndex }"
+                    tabindex="0"
+                    @click="select(item)"
+                >
+                    <span v-if="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>
+        <slot name="content"></slot>
+    </div>
+</template>
+
+<script setup>
+/* globals BX */
+
+import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue';
+
+import { errorHandler } from '../../utils/error-handler.js';
+
+const ICONS_PATH = window.ICONS_PATH;
+
+const emit = defineEmits(['focusin', 'focusout', 'select']);
+
+const model = defineModel({ type: String, default: '' });
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: '',
+    },
+    name: {
+        type: String,
+        default: '',
+    },
+    placeholder: {
+        type: String,
+        default: ' ',
+    },
+    required: {
+        type: Boolean,
+    },
+    disabled: {
+        type: Boolean,
+    },
+    action: {
+        type: String,
+        required: true,
+    },
+    queryName: {
+        type: String,
+        default: 'query',
+    },
+    minlength: {
+        type: Number,
+        default: 3,
+    },
+    throttle: {
+        type: Number,
+        default: 1000,
+    },
+    inputCssClasses: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+    hightlightMatches: {
+        type: Boolean,
+    },
+    notFoundMessage: {
+        type: String,
+        default: 'По&nbsp;вашему запросу ничего не&nbsp;найдено',
+    },
+    small: {
+        type: Boolean,
+    },
+    error: {
+        type: Boolean,
+    },
+});
+
+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 suggests = ref([]);
+const formattedSuggests = ref([]);
+const focusSuggestIndex = ref(-1);
+
+watch(suggests, () => {
+    focusSuggestIndex.value = -1;
+    const regexp = new RegExp(model.value, 'i');
+    formattedSuggests.value = suggests.value.map((item) => {
+        if (hightlightMatches.value) {
+            const match = regexp.exec(item.label);
+            item.formatted_label = match ? item.label.replace(match[0], `<mark>${match[0]}</mark>`) : item.label;
+        }
+        return item;
+    });
+});
+
+const showSuggests = ref(false);
+const itemHeight = ref(0);
+
+watch(showSuggests, async (value) => {
+    if (value && suggests.value.length > 0) {
+        await nextTick();
+        itemHeight.value = $list.value.querySelector('.suggest-input__list-item').offsetHeight;
+    } else {
+        suggests.value = [];
+        await nextTick();
+        itemHeight.value = 0;
+    }
+});
+
+const maxItemsWithoutScroll = computed(() => {
+    if (itemHeight.value) {
+        return Math.floor($list.value.offsetHeight / itemHeight.value);
+    }
+    return 0;
+});
+
+const indexesToScroll = computed(() => {
+    if (maxItemsWithoutScroll.value) {
+        const indexes = [0];
+        for (const index of suggests.value.keys()) {
+            const nextIndex = indexes.at(-1) + maxItemsWithoutScroll.value;
+            if (nextIndex > suggests.value.length) {
+                break;
+            }
+            if (index === nextIndex) {
+                indexes.push(index);
+            }
+        }
+        return indexes;
+    }
+    return [];
+});
+
+const isLoading = ref(false);
+const isClearVisible = computed(() => model.value.length >= minlength.value && !isLoading.value);
+
+let throttleTimeout;
+
+const handleInput = () => {
+    clearTimeout(throttleTimeout);
+    if (model.value.length >= minlength.value) {
+        throttleTimeout = setTimeout(async () => {
+            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 {
+                    isLoading.value = false;
+                    errorHandler(error);
+                }
+            }
+        }, throttle.value);
+    } else {
+        showSuggests.value = false;
+    }
+};
+
+const focusin = async () => {
+    emit('focusin');
+    await nextTick();
+    handleInput();
+};
+
+const focusout = async ({ relatedTarget }) => {
+    if (!relatedTarget || (!$list.value.contains(relatedTarget) && !$clear.value.contains(relatedTarget))) {
+        showSuggests.value = false;
+    }
+    await nextTick();
+    emit('focusout');
+};
+
+const esc = () => {
+    // Ждём, чтобы событие нажатия Esc сработало у других обработчиков (например, в диалоговых окнах)
+    setTimeout(() => {
+        showSuggests.value = false;
+    });
+};
+
+const clear = () => {
+    clearTimeout(throttleTimeout);
+    model.value = '';
+    showSuggests.value = false;
+};
+
+const select = ({ label, value }) => {
+    model.value = label;
+    showSuggests.value = false;
+    emit('select', {
+        input: model.value,
+        value,
+    });
+};
+
+const arrowNavigation = (event) => {
+    if (showSuggests.value) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const selectionStart = $input.value.selectionStart;
+            const selectionEnd = $input.value.selectionEnd;
+            setTimeout(() => {
+                $input.value.setSelectionRange(selectionStart, selectionEnd);
+            });
+            switch (event.key) {
+                case 'ArrowDown': {
+                    focusSuggestIndex.value =
+                        suggests.value.length === focusSuggestIndex.value + 1 ? 0 : focusSuggestIndex.value + 1;
+                    if (
+                        focusSuggestIndex.value !== 0 &&
+                        focusSuggestIndex.value !== suggests.value.length - 1 &&
+                        indexesToScroll.value.includes(focusSuggestIndex.value)
+                    ) {
+                        $list.value.scrollTop += maxItemsWithoutScroll.value * itemHeight.value;
+                    } else if (focusSuggestIndex.value === 0) {
+                        $list.value.scrollTop = 0;
+                    }
+                    break;
+                }
+                case 'ArrowUp': {
+                    focusSuggestIndex.value =
+                        focusSuggestIndex.value <= 0 ? suggests.value.length - 1 : focusSuggestIndex.value - 1;
+                    if (
+                        focusSuggestIndex.value !== 0 &&
+                        focusSuggestIndex.value !== suggests.value.length - 1 &&
+                        indexesToScroll.value.includes(focusSuggestIndex.value + 1)
+                    ) {
+                        $list.value.scrollTop -= maxItemsWithoutScroll.value * itemHeight.value;
+                    } else if (focusSuggestIndex.value === suggests.value.length - 1) {
+                        $list.value.scrollTop = suggests.value.length * itemHeight.value;
+                    }
+                    break;
+                }
+            }
+        }
+        if (event.key === 'Enter' && focusSuggestIndex.value >= 0) {
+            // Ждём, чтобы событие нажатия Enter сработало у других обработчиков (например, в формах)
+            setTimeout(() => {
+                select(suggests.value[focusSuggestIndex.value]);
+            });
+        }
+    }
+};
+
+onMounted(() => {
+    $root.value.closest('.form')?.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' && focusSuggestIndex.value >= 0) {
+            event.preventDefault();
+        }
+    });
+});
+
+defineExpose({
+    clear,
+});
+</script>

package/src/components/warning-message/index.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="warning-message" :class="classes">
+        <svg v-if="!noIcon" class="warning-message__icon"><use :href="`${ICONS_PATH}#${icon}`" /></svg>
+        <div class="warning-message__wrapper">
+            <div class="warning-message__content">
+                <div v-if="title" class="warning-message__title" v-html="title"></div>
+                <div v-if="descr" class="warning-message__descr" v-html="descr"></div>
+            </div>
+            <a
+                v-if="actionUrl.length > 0"
+                class="warning-message__action button"
+                :class="{
+                    button_inverted: solid && type !== 'light-info',
+                    button_alt: !solid || type === 'light-info',
+                }"
+                :href="actionUrl"
+            >
+                <svg v-if="actionIcon.length > 0" class="button__icon">
+                    <use :href="`${ICONS_PATH}#${actionIcon}`" />
+                </svg>
+                Ссылка
+            </a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+
+const ICONS_PATH = window.ICONS_PATH;
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'warning',
+        validator(value) {
+            return ['warning', 'success', 'info', 'light-info', 'error'].includes(value);
+        },
+    },
+    small: {
+        type: Boolean,
+    },
+    solid: {
+        type: Boolean,
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    descr: {
+        type: String,
+        default: '',
+    },
+    actionUrl: {
+        type: String,
+        default: '',
+    },
+    actionIcon: {
+        type: String,
+        default: '',
+    },
+    noIcon: {
+        type: Boolean,
+    },
+});
+
+const { type, small, solid, title, descr, actionUrl, actionIcon, noIcon } = toRefs(props);
+
+const classes = computed(() => {
+    return {
+        'warning-message_small': small.value,
+        'warning-message_solid': solid.value,
+        'warning-message_success': type.value === 'success',
+        'warning-message_info': type.value === 'info',
+        'warning-message_light-info': type.value === 'light-info',
+        'warning-message_error': type.value === 'error',
+    };
+});
+
+const icon = computed(() => {
+    let icon;
+    switch (type.value) {
+        case 'success': {
+            icon = 'check';
+            break;
+        }
+        case 'info': {
+            icon = 'info';
+            break;
+        }
+        case 'error': {
+            icon = 'delete';
+            break;
+        }
+        default: {
+            icon = 'warning';
+        }
+    }
+    return icon;
+});
+</script>

package/src/variables.scss

@@ -978,7 +978,7 @@ $tabs-label-font: ('font-weight': bold, 'font-size': $font-size, 'line-height':
 
 $tabs-counter-bg: $color-grey-80 !default;
 $tabs-counter-color: $font-color-primary !default;
-$tabs-counter-font: ('font-size': $font-size-xs) !default;
+$tabs-counter-font: ('font-size': 9px) !default;
 $tabs-counter-radius: $radius-s !default;
 
 /********** Всплывающие подсказки / Tooltips **********/