@formixru/b2b-ui 1.0.0

package/src/components/steps/index.scss

@@ -0,0 +1,155 @@
+@use '../../variables' as *;
+
+$b: '.steps';
+
+#{$b} {
+    overflow: hidden;
+    position: relative;
+
+    &::before {
+        background-image: linear-gradient(-90deg, rgba($content-bg, 0%), $content-bg);
+        content: none;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 4px * 8;
+        z-index: 1;
+
+        .content_fill_grey &,
+        .content__block_fill_grey & {
+            background-image: linear-gradient(-90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
+        }
+    }
+
+    &::after {
+        background-image: linear-gradient(90deg, rgba($content-bg, 0%), $content-bg);
+        content: '';
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 4px * 8;
+        z-index: 1;
+
+        @media (--tablet-landscape-up) {
+            content: none;
+        }
+
+        .content_fill_grey &,
+        .content__block_fill_grey & {
+            background-image: linear-gradient(90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
+        }
+    }
+
+    &_1 {
+    }
+
+    &_2 {
+        &::before {
+            content: '';
+
+            @media (--tablet-landscape-up) {
+                content: none;
+            }
+        }
+    }
+
+    &_3 {
+        &::before {
+            content: '';
+
+            @media (--tablet-landscape-up) {
+                content: none;
+            }
+        }
+    }
+
+    &__list {
+        counter-reset: index;
+        display: flex;
+        position: relative;
+
+        #{$b}_1 & {
+            left: 0;
+        }
+
+        #{$b}_2 & {
+            left: -25%;
+
+            @media (--tablet-landscape-up) {
+                left: 0;
+            }
+        }
+
+        #{$b}_3 & {
+            left: -50%;
+
+            @media (--tablet-landscape-up) {
+                left: 0;
+            }
+        }
+    }
+
+    &__item {
+        align-items: center;
+        display: flex;
+
+        &:not(:first-child) {
+            margin-left: 4px * 2;
+        }
+
+        &:last-child {
+            &::after {
+                content: none;
+            }
+        }
+
+        &::before {
+            align-items: center;
+            background-color: $steps-item-number-bg;
+            border: $steps-item-number-border-width solid $steps-item-number-border-color;
+            border-radius: 50%;
+            color: $steps-item-number-color;
+            content: counter(index);
+            counter-increment: index;
+            display: flex;
+            flex-shrink: 0;
+            height: 4px * 6;
+            justify-content: center;
+            width: 4px * 6;
+        }
+
+        &::after {
+            border-bottom: 2px solid $steps-item-arrow-bg;
+            border-right: 2px solid $steps-item-arrow-bg;
+            content: '';
+            height: 4px * 1.5;
+            margin-left: 4px * 1.5;
+            transform: rotate(-45deg);
+            width: 4px * 1.5;
+        }
+
+        &_active {
+            &::before {
+                background-color: $steps-item-active-number-bg;
+                color: $steps-item-active-number-color;
+
+                @include dark-border-disable;
+            }
+
+            &::after {
+                border-bottom-color: $steps-item-active-arrow-bg;
+                border-right-color: $steps-item-active-arrow-bg;
+            }
+        }
+    }
+
+    &__label {
+        color: $steps-label-color;
+        margin-left: 4px * 2;
+        white-space: nowrap;
+
+        @include font($steps-label-font);
+    }
+}

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

@@ -0,0 +1,141 @@
+@use 'sass:math';
+@use '../../variables' as *;
+
+$b: '.suggest-input';
+
+#{$b} {
+    position: relative;
+
+    &__input {
+        position: relative;
+
+        &_active {
+            z-index: 11;
+        }
+    }
+
+    &__loader {
+        border-bottom-right-radius: $input-radius;
+        border-top-right-radius: $input-radius;
+        container-type: size;
+        height: $input-height - $input-border-width * 2;
+        padding: math.div($input-height - 4px * 5, 2);
+        position: absolute;
+        right: $input-border-width;
+        top: $input-border-width;
+        width: $input-height - $input-border-width * 2;
+        z-index: 11;
+
+        .input_small ~ & {
+            height: $input-small-height - $input-border-width * 2;
+            padding: math.div($input-small-height - 4px * 4, 2);
+            width: $input-small-height - $input-border-width * 2;
+        }
+    }
+
+    &__clear {
+        align-items: center;
+        background-color: $input-bg;
+        border-bottom-right-radius: $input-radius;
+        border-top-right-radius: $input-radius;
+        color: $suggest-input-clear-color;
+        cursor: pointer;
+        display: flex;
+        height: $input-height - $input-border-width * 2;
+        justify-content: center;
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        transition-duration: var(--duration-micro-s);
+        transition-property: color;
+        transition-timing-function: var(--easing-standard);
+        width: $input-height - $input-border-width * 2;
+        z-index: 11;
+
+        &:hover,
+        &:focus-visible {
+            color: $suggest-input-clear-active-color;
+        }
+
+        .input_small ~ & {
+            height: $input-small-height - $input-border-width * 2;
+            width: $input-small-height - $input-border-width * 2;
+        }
+    }
+
+    &__clear-icon {
+        fill: currentcolor;
+        height: 4px * 4;
+        width: 4px * 4;
+
+        .input_small ~ #{$b}__clear & {
+            height: 4px * 3;
+            width: 4px * 3;
+        }
+    }
+
+    &__list {
+        background-color: $suggest-input-list-bg;
+        border-bottom-left-radius: $suggest-input-list-radius;
+        border-bottom-right-radius: $suggest-input-list-radius;
+        box-shadow: $suggest-input-list-shadow;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        position: absolute;
+        top: $input-height;
+        width: 100%;
+        z-index: 10;
+
+        @include dark-border($width: 1px);
+        @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;
+        } @else {
+            max-height: $suggest-input-item-height * 5;
+        }
+
+        .input_small ~ & {
+            top: $input-small-height;
+        }
+    }
+
+    &__list-item {
+        align-items: center;
+        color: $suggest-input-item-color;
+        cursor: pointer;
+        display: flex;
+        min-height: $suggest-input-item-height;
+        padding: 4px $input-padding-x;
+        transition-duration: var(--duration-micro-s);
+        transition-property: background-color, color;
+        transition-timing-function: var(--easing-standard);
+
+        @include font($suggest-input-item-font);
+
+        &_focus,
+        &:hover {
+            background-color: $suggest-input-item-active-bg;
+            color: $suggest-input-item-active-color;
+        }
+
+        mark {
+            background-color: transparent;
+            color: $suggest-input-item-mark-color;
+
+            @include font($suggest-input-item-mark-font);
+        }
+    }
+
+    &__not-found {
+        align-items: center;
+        color: $suggest-input-not-found-color;
+        display: flex;
+        min-height: $suggest-input-item-height;
+        padding: 4px $input-padding-x;
+
+        @include font($suggest-input-not-found-font);
+    }
+}

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

@@ -0,0 +1,324 @@
+<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 '../../helpers/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) {
+        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 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]);
+            });
+        }
+    }
+};
+
+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,
+    });
+};
+
+onMounted(() => {
+    $root.value.closest('.form')?.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' && focusSuggestIndex.value >= 0) {
+            event.preventDefault();
+        }
+    });
+});
+</script>