@formixru/b2b-ui 1.0.0

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

@@ -0,0 +1,109 @@
+@use 'sass:math';
+@use '../../variables' as *;
+
+$b: '.range-input';
+
+#{$b} {
+    &__track {
+        &.noUi-target {
+            background-color: $range-input-track-color;
+            border-bottom-style: none;
+            border-left-style: none;
+            border-radius: 0;
+            border-right-style: none;
+            border-top-style: none;
+            box-shadow: none;
+            cursor: pointer;
+        }
+
+        .noUi-base {
+            width: calc(100% - $range-input-handle-size);
+        }
+
+        .noUi-connects {
+            border-radius: 0;
+        }
+
+        .noUi-connect {
+            background-color: $range-input-connect-color;
+        }
+
+        .noUi-handle {
+            background-color: $range-input-handle-color;
+            border-bottom-style: none;
+            border-left-style: none;
+            border-radius: 10000px;
+            border-right-style: none;
+            border-top-style: none;
+            box-shadow: none;
+            transition-duration: var(--duration-micro-s);
+            transition-property: background-color;
+            transition-timing-function: var(--easing-standard);
+
+            &::before,
+            &::after {
+                content: none;
+            }
+
+            &:hover {
+                background-color: $range-input-handle-active-color;
+            }
+        }
+
+        &.noUi-horizontal {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            height: $range-input-track-height;
+
+            .noUi-handle {
+                height: $range-input-handle-size;
+                top: math.div($range-input-handle-size - $range-input-track-height, 2) * -1;
+                width: $range-input-handle-size;
+
+                html:not([dir='rtl']) &-lower,
+                html:not([dir='rtl']) &-upper {
+                    right: math.div($range-input-handle-size, 2) * -1;
+                }
+            }
+        }
+
+        &[disabled='true'] {
+            &.noUi-target {
+                background-color: $range-input-track-disabled-color;
+            }
+
+            .noUi-connect {
+                background-color: $range-input-connect-disabled-color;
+            }
+
+            .noUi-handle {
+                background-color: $range-input-handle-disabled-color;
+            }
+        }
+    }
+
+    &__wrapper {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 24px;
+        position: relative;
+
+        &::before {
+            background-color: $range-input-separator-color;
+            content: '';
+            height: 1px;
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translateX(-50%);
+            width: 1em;
+        }
+    }
+
+    &__input {
+        &.input {
+            width: calc(50% - (1em + 12px) / 2);
+        }
+    }
+}

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/rating-input/index.js

@@ -0,0 +1,32 @@
+export const init = ($b) => {
+    const $stars = $b.querySelectorAll('.rating-input__star');
+
+    for (const $star of $stars) {
+        $star.addEventListener('mouseenter', (event) => {
+            const $active = event.target;
+            const activeIndex = [...$active.parentNode.children].indexOf($active);
+            for (const [index, $el] of Object.entries($stars)) {
+                $el.classList.toggle('rating-input__star_active', Number(index) <= activeIndex);
+            }
+        });
+
+        $star.addEventListener('mouseleave', (event) => {
+            if (
+                !event.relatedTarget.classList.contains('rating-input') &&
+                !event.relatedTarget.closest('.related-input')
+            ) {
+                const $active = $b.querySelector('.rating-input__star-input:checked');
+                if ($active) {
+                    const activeIndex = [...$active.closest('.rating-input__star').parentNode.children].indexOf(
+                        $active.closest('.rating-input__star'),
+                    );
+                    for (const [index, $el] of Object.entries($stars)) {
+                        $el.classList.toggle('rating-input__star_active', Number(index) <= activeIndex);
+                    }
+                } else {
+                    $star.classList.remove('rating-input__star_active');
+                }
+            }
+        });
+    }
+};

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

@@ -0,0 +1,36 @@
+@use '../../variables' as *;
+
+$b: '.rating-input';
+
+#{$b} {
+    align-items: center;
+    display: inline-flex;
+    margin-left: -2px;
+    margin-right: -2px;
+
+    &__star {
+        cursor: pointer;
+        padding-left: 2px;
+        padding-right: 2px;
+
+        &_active {
+        }
+    }
+
+    &__star-input {
+    }
+
+    &__star-icon {
+        fill: $rating-input-star-icon-color;
+        height: 4px * 4;
+        transition-duration: var(--duration-micro-s);
+        transition-property: fill;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 4;
+
+        #{$b}__star:hover &,
+        #{$b}__star_active & {
+            fill: $rating-input-star-icon-active-color;
+        }
+    }
+}

package/src/components/select/index.js

@@ -0,0 +1,6 @@
+document.body.addEventListener('change', (event) => {
+    const $select = event.target.closest('.select');
+    if ($select && $select.classList.contains('select_error')) {
+        $select.classList.remove('select_error');
+    }
+});

package/src/components/select/index.scss

@@ -0,0 +1,84 @@
+@use 'sass:math';
+@use '../../variables' as *;
+
+// https://www.filamentgroup.com/lab/select-css.html
+
+$b: '.select';
+
+#{$b} {
+    appearance: none;
+    background-color: $select-bg;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+    background-position: right $select-padding top 50%;
+    background-repeat: no-repeat;
+    background-size: 6px auto;
+    border: $select-border-width solid $select-border-color;
+    border-radius: $select-radius;
+    color: $select-color;
+    cursor: pointer;
+    display: block;
+    height: $select-height;
+    padding-left: $select-padding;
+    padding-right: $select-padding * 2 + 6px;
+    transition-duration: var(--duration-micro-s);
+    transition-property: background-color, border-color, color;
+    transition-timing-function: var(--easing-standard);
+    width: 100%;
+
+    @include font($select-font);
+
+    &[multiple] {
+        background-image: none;
+        height: auto;
+        padding: 0;
+
+        option {
+            padding: math.div($select-padding, 2) $select-padding;
+        }
+    }
+
+    &::-ms-expand {
+        display: none;
+    }
+
+    &:disabled {
+        background-color: $select-disabled-bg;
+        border-color: $select-disabled-border-color;
+        color: $select-disabled-color;
+        cursor: default;
+    }
+
+    &:focus-visible {
+        background-color: $select-active-bg;
+        border-color: $select-active-border-color;
+        color: $select-active-color;
+    }
+
+    &:invalid {
+        color: $select-placeholder-color;
+    }
+
+    &_small {
+        height: $select-small-height;
+        padding-left: $select-small-padding;
+        padding-right: $select-small-padding * 2 + 6px;
+
+        @include font($select-small-font);
+
+        &[multiple] {
+            option {
+                padding: math.div($select-small-padding, 2) $select-small-padding;
+            }
+        }
+    }
+
+    &_error {
+        background-color: $select-error-bg;
+        border-color: $select-error-border-color;
+        color: $select-error-color;
+
+        &:focus-visible {
+            border-color: $select-error-border-color;
+        }
+    }
+}

package/src/components/sidebar/index.js

@@ -0,0 +1,174 @@
+/* globals BX */
+
+import { is } from '@advdominion/is';
+
+import { cssVar } from '../../helpers/css-var.js';
+import { errorHandler } from '../../helpers/error-handler.js';
+import { mm } from '../../helpers/mm.js';
+import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
+import { disableScroll, enableScroll, hide as hideOverlay, show as showOverlay } from '../overlay/index.js';
+
+export const show = async ($b) => {
+    if ($b.id !== 'settings-generator') {
+        disableScroll();
+    }
+    $b.hidden = false;
+    showOverlay();
+    let width = mm('tablet-landscape-up')
+        ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
+        : $b.offsetWidth;
+    if ($b.classList.contains('sidebar_left')) {
+        width = width * -1;
+    }
+    await $b.animate([{ transform: `translateX(${width}px)` }, { transform: 'translateX(0px)' }], {
+        duration: cssVar('--duration-enter-m'),
+        easing: cssVar('--easing-deceleration'),
+    }).finished;
+};
+
+export const hide = async ($b) => {
+    hideOverlay();
+    let width = mm('tablet-landscape-up')
+        ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
+        : $b.offsetWidth;
+    if ($b.classList.contains('sidebar_left')) {
+        width = width * -1;
+    }
+    await $b.animate([{ transform: 'translateX(0px)' }, { transform: `translateX(${width}px)` }], {
+        duration: cssVar('--duration-leave-m'),
+        easing: cssVar('--easing-acceleration'),
+    }).finished;
+    $b.hidden = true;
+    if ($b.id !== 'settings-generator') {
+        enableScroll();
+    }
+};
+
+export const initSidebarContent = ($b) => {
+    try {
+        window.__FORMIX__SIDEBAR__INIT_CONTENT($b);
+    } catch {
+        console.warn('Функция __FORMIX__SIDEBAR__INIT_CONTENT не установлена');
+    }
+};
+
+export const get = async (id, url, showLoaderDelay) => {
+    if (url && url !== '#') {
+        showLoader(showLoaderDelay);
+        try {
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-Session-Id': BX.message('bitrix_sessid'),
+                },
+            });
+            if (!response.ok) {
+                throw response;
+            }
+            let data = await response.text();
+            try {
+                data = JSON.parse(data);
+                if (is(data.redirect, 'String')) {
+                    if (data.redirect) {
+                        location.assign(data.redirect);
+                        clearLoaderTimeout();
+                    } else {
+                        location.reload();
+                    }
+                } else {
+                    try {
+                        await window.__FORMIX__SIDEBAR__INTERCEPT_DATA(data);
+                    } catch {
+                        console.warn('Функция __FORMIX__SIDEBAR__INTERCEPT_DATA не установлена');
+                    }
+                    data = data.content || '';
+                }
+            } catch {} // eslint-disable-line no-empty
+            if (data.length > 0) {
+                const $b = document.querySelector(id);
+                $b.innerHTML = data;
+                show($b).then(() => {
+                    hideLoader();
+                    initSidebarContent($b);
+                });
+            } else {
+                hideLoader();
+            }
+        } catch (error) {
+            if (error.status === 401) {
+                location.reload();
+            } else {
+                hideLoader();
+                errorHandler(error);
+            }
+        }
+    } else {
+        const $b = document.querySelector(id);
+        show($b);
+    }
+};
+
+const $sidebars = document.querySelectorAll('.sidebar');
+for (const $el of $sidebars) {
+    // Отключаем скролл у body, если при загрузке на странице есть открытый сайдбар
+    if (!$el.hidden) {
+        if ($el.id !== 'settings-generator') {
+            disableScroll();
+        }
+        showOverlay();
+    }
+}
+
+document.body.addEventListener('click', (e) => {
+    const $el = e.target.closest('[data-sidebar]');
+    if ($el) {
+        e.preventDefault();
+        let url = $el.dataset.sidebarFetch || $el.href;
+        if (url) {
+            url = new URL(url, location.origin);
+        }
+        get($el.dataset.sidebar, url);
+    }
+});
+
+document.body.addEventListener('click', (e) => {
+    const $b = e.target.closest('[data-sidebar-close]')?.closest('.sidebar');
+    if ($b) {
+        hide($b);
+    }
+});
+
+document.body.addEventListener('click', (e) => {
+    if (e.target.classList.contains('overlay')) {
+        const $sidebars = document.querySelectorAll('.sidebar:not([hidden])');
+        for (const $el of $sidebars) {
+            hide($el);
+        }
+    }
+});
+
+document.body.addEventListener('keyup', (e) => {
+    if (e.key === 'Escape') {
+        const $sidebars = document.querySelectorAll('.sidebar:not([hidden])');
+        for (const $el of $sidebars) {
+            hide($el);
+        }
+    }
+});
+
+document.body.addEventListener('click', (e) => {
+    const $el = e.target.closest('button.sidebar__tab');
+    if ($el) {
+        const $b = $el.closest('.sidebar');
+        const $tabs = $b.querySelectorAll('.sidebar__tab');
+        const index = [...$tabs].indexOf($el);
+        for (const [i, $tab] of $tabs.entries()) {
+            $tab.disabled = i === index;
+        }
+        const $containers = $b.querySelectorAll('.sidebar__container');
+        for (const [i, $container] of $containers.entries()) {
+            $container.hidden = i !== index;
+        }
+    }
+});