@formixru/b2b-ui 2.4.0 → 3.0.0

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

@@ -1,185 +0,0 @@
-<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

@@ -1,328 +0,0 @@
-<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 && 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 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();
-        }
-    });
-});
-
-defineExpose({
-    clear,
-});
-</script>

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

@@ -1,101 +0,0 @@
-<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/vite.config.js

@@ -1,75 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { createRequire } from 'node:module';
-import path from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-
-import vue from '@vitejs/plugin-vue';
-import { defineConfig } from 'vite';
-
-const require = createRequire(import.meta.url);
-
-export default defineConfig({
-    plugins: [
-        vue({
-            template: {
-                transformAssetUrls: {
-                    video: [],
-                    source: [],
-                    img: [],
-                    image: [],
-                    use: [],
-                },
-            },
-        }),
-    ],
-    css: {
-        preprocessorOptions: {
-            scss: {
-                api: 'modern-compiler',
-                importers: [
-                    {
-                        canonicalize(url, context) {
-                            if (url.startsWith('pkg:')) {
-                                return pathToFileURL(require.resolve(url.replace('pkg:', '')));
-                            }
-                            // Обработка относительных путей внутри pkg:
-                            if (context.containingUrl?.href.includes('node_modules')) {
-                                const basePath = path.dirname(fileURLToPath(context.containingUrl));
-                                const resolvedPath = path.resolve(basePath, url);
-
-                                // Пробуем найти файл с нужным названием (проверка на пустую строку нужна для случаев, когда в URL уже стоит файл с расширением)
-                                const extensions = ['', '.scss'];
-                                for (const ext of extensions) {
-                                    const fullPath = resolvedPath + ext;
-                                    try {
-                                        if (readFileSync(fullPath)) {
-                                            return pathToFileURL(fullPath);
-                                        }
-                                    } catch {} // eslint-disable-line no-empty
-                                }
-
-                                // Если не нашли файл с нужным названием, пробуем найти index
-                                for (const ext of ['.scss']) {
-                                    const indexPath = path.join(resolvedPath, `index${ext}`);
-                                    try {
-                                        if (readFileSync(indexPath)) {
-                                            return pathToFileURL(indexPath);
-                                        }
-                                    } catch {} // eslint-disable-line no-empty
-                                }
-                            }
-                            // eslint-disable-next-line unicorn/no-null
-                            return null;
-                        },
-                        load(canonicalUrl) {
-                            return {
-                                contents: readFileSync(fileURLToPath(canonicalUrl), 'utf8'),
-                                syntax: 'scss',
-                            };
-                        },
-                    },
-                ],
-            },
-        },
-    },
-});