@formixru/b2b-ui 1.0.0

package/src/components/tabs/index.js

@@ -0,0 +1,192 @@
+/* globals BX */
+
+import { cssVar } from '../../helpers/css-var.js';
+import { errorHandler } from '../../helpers/error-handler.js';
+import { isInViewport } from '../../helpers/is-in-viewport.js';
+import { scrollTo } from '../../helpers/scroll-to.js';
+import { hide as hideLoader, show as showLoader } from '../loader/index.js';
+
+const setLeftWidth = async ($line, $el) => {
+    const $label = $el.querySelector('.tabs__label');
+    const styles = {
+        width: $label.getBoundingClientRect().width,
+        left: $label.offsetLeft,
+    };
+    await $line.animate([{ transform: `translateX(${styles.left}px)`, width: `${styles.width}px` }], {
+        duration: cssVar('--duration-effect-s'),
+        easing: cssVar('--easing-standard'),
+        fill: 'forwards',
+    }).finished;
+};
+
+export const setInitLineStyles = ($b) => {
+    const $nav = $b.querySelector('.tabs__nav');
+    const $item = $nav.querySelectorAll('.tabs__item');
+    const $line = $nav.querySelector('.tabs__line');
+
+    const $el = [...$item].find((el) => {
+        return el.disabled || (el.tagName !== 'BUTTON' && !el.href);
+    });
+
+    setLeftWidth($line, $el);
+    // Прокручиваем до нужного таба
+    if ($nav.swiper) {
+        $nav.swiper.slideTo([...$item].indexOf($el));
+    }
+};
+
+const initTabsContent = ($b) => {
+    try {
+        window.__FORMIX__TABS__INIT_CONTENT($b);
+    } catch {
+        console.warn('Функция __FORMIX__TABS__INIT_CONTENT не установлена');
+    }
+};
+
+export const init = async ($b) => {
+    const $nav = $b.querySelector('.tabs__nav');
+    const $list = $nav.querySelector('.tabs__list');
+    const $item = $nav.querySelectorAll('.tabs__item');
+    const $line = $nav.querySelector('.tabs__line');
+    const $content = $b.querySelectorAll('.tabs__content');
+
+    // Переключаем табы и меняем стили для линии
+    const handleItemClick = async (e) => {
+        const $el = e.currentTarget;
+        const index = [...$item].indexOf($el);
+        if ($el.tagName === 'BUTTON') {
+            if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
+                showLoader();
+                try {
+                    const response = await fetch($el.dataset.tabsFetch, {
+                        method: 'GET',
+                        headers: {
+                            'X-Requested-With': 'XMLHttpRequest',
+                            'X-Session-Id': BX.message('bitrix_sessid'),
+                        },
+                    });
+                    if (!response.ok) {
+                        throw response;
+                    }
+                    const data = await response.text();
+                    hideLoader();
+                    // Вставляем полученный HTML
+                    $content[index].innerHTML = data;
+                    // Переключаем таб
+                    for (const i of $item) i.disabled = false;
+                    $el.disabled = true;
+                    for (const [i, c] of $content.entries()) {
+                        if (i === index) {
+                            c.hidden = false;
+                            for (const swiperEl of c.querySelectorAll('.swiper')) {
+                                if (swiperEl.swiper) {
+                                    swiperEl.swiper.update();
+                                }
+                            }
+                            for (const tabsEl of c.querySelectorAll('.tabs')) {
+                                setInitLineStyles(tabsEl);
+                            }
+                            // Инициализируем полученный HTML
+                            initTabsContent($content[index]);
+                        } else {
+                            c.hidden = true;
+                        }
+                    }
+                } catch (error) {
+                    hideLoader();
+                    if (error.status === 401) {
+                        location.reload();
+                    } else {
+                        errorHandler(error);
+                    }
+                }
+            } else {
+                // Переключаем таб
+                for (const i of $item) i.disabled = false;
+                $el.disabled = true;
+                for (const [i, c] of $content.entries()) {
+                    if (i === index) {
+                        c.hidden = false;
+                        for (const swiperEl of c.querySelectorAll('.swiper')) {
+                            if (swiperEl.swiper) {
+                                swiperEl.swiper.update();
+                            }
+                        }
+                        for (const tabsEl of c.querySelectorAll('.tabs')) {
+                            setInitLineStyles(tabsEl);
+                        }
+                        // Инициализируем полученный HTML
+                        initTabsContent($content[index]);
+                    } else {
+                        c.hidden = true;
+                    }
+                }
+            }
+
+            if ($nav.swiper) {
+                $nav.swiper.slideTo(index);
+            }
+
+            if ($line) {
+                setLeftWidth($line, $el);
+            }
+        }
+    };
+
+    if ($nav.swiper) {
+        $nav.swiper.destroy();
+        for (const i of $item) i.removeEventListener('click', handleItemClick);
+    }
+
+    const { default: Swiper } = await import('swiper');
+
+    $nav.classList.add('swiper');
+    $list.classList.add('swiper-wrapper');
+    for (const i of $item) i.classList.add('swiper-slide');
+
+    new Swiper($nav, {
+        speed: cssVar('--duration-effect-s'),
+        slidesPerView: 'auto',
+        freeMode: true,
+        on: {
+            init() {
+                if (!this.isBeginning) {
+                    $nav.classList.toggle('tabs__nav_shadow-start', true);
+                }
+                if (!this.isEnd) {
+                    $nav.classList.toggle('tabs__nav_shadow-end', true);
+                }
+            },
+            sliderMove() {
+                $nav.classList.toggle('tabs__nav_shadow-start', !this.isBeginning);
+                $nav.classList.toggle('tabs__nav_shadow-end', !this.isEnd);
+            },
+            transitionStart() {
+                $nav.classList.toggle('tabs__nav_shadow-start', !this.isBeginning);
+                $nav.classList.toggle('tabs__nav_shadow-end', !this.isEnd);
+            },
+        },
+    });
+
+    // Устанавливаем стили для линии при загрузке страницы
+    if ($line) {
+        setTimeout(() => {
+            setInitLineStyles($b);
+        });
+    }
+
+    for (const i of $item) i.addEventListener('click', handleItemClick);
+};
+
+document.body.addEventListener('click', async (e) => {
+    if (e.target.closest('[data-tab-name]')) {
+        e.preventDefault();
+        const name = e.target.dataset.tabName;
+        const $tabItem = document.querySelector(`.tabs__item[data-name="${name}"]`);
+        const $tabs = $tabItem.closest('.tabs');
+        if (!isInViewport($tabs)) {
+            await scrollTo($tabs, 15);
+        }
+        $tabItem.click();
+    }
+});

package/src/components/tabs/index.scss

@@ -0,0 +1,137 @@
+@use '../../variables' as *;
+
+$b: '.tabs';
+
+#{$b} {
+    &_white-bg {
+    }
+
+    &__nav {
+        margin-top: -10px; // Не -12, потому что у вкладки может быть элемент sup
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+
+        @media (--tablet-portrait-down) {
+            margin-left: -4px * 4;
+            margin-right: -4px * 4;
+            padding-left: 4px * 4;
+            padding-right: 4px * 4;
+            width: calc(100% + 32px);
+        }
+
+        .account & {
+            @media (--tablet-portrait-down) {
+                margin-left: -4px * 6;
+                margin-right: -4px * 6;
+                padding-left: 4px * 6;
+                padding-right: 4px * 6;
+            }
+        }
+
+        &_shadow-start {
+            &::before {
+                @media (--tablet-landscape-up) {
+                    background-image: linear-gradient(-90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
+                    content: '';
+                    height: calc(100% - #{$tabs-border-width});
+                    left: 0;
+                    position: absolute;
+                    top: 0;
+                    width: 4px * 4;
+                    z-index: 2;
+                }
+
+                #{$b}_white-bg & {
+                    @media (--tablet-landscape-up) {
+                        background-image: linear-gradient(-90deg, rgba($content-bg, 0%), $content-bg);
+                    }
+                }
+            }
+        }
+
+        &_shadow-end {
+            &::after {
+                @media (--tablet-landscape-up) {
+                    background-image: linear-gradient(90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
+                    content: '';
+                    height: calc(100% - #{$tabs-border-width});
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    width: 4px * 4;
+                    z-index: 2;
+                }
+
+                #{$b}_white-bg & {
+                    @media (--tablet-landscape-up) {
+                        background-image: linear-gradient(90deg, rgba($content-bg, 0%), $content-bg);
+                    }
+                }
+            }
+        }
+    }
+
+    &__list {
+        border-bottom: $tabs-border-width solid $tabs-border-color;
+        display: flex;
+        position: relative;
+    }
+
+    &__item {
+        border-bottom: $tabs-border-width solid $tabs-border-color;
+        display: block;
+        margin-bottom: $tabs-border-width * -1;
+        padding: 0 4px * 4;
+        padding-bottom: 4px * 3;
+        padding-top: 4px * 3;
+
+        &:first-of-type {
+            padding-left: 0;
+        }
+
+        &:last-of-type {
+            padding-right: 0;
+        }
+
+        div#{$b}__item + &:any-link,
+        div#{$b}__item + &:enabled {
+            padding-left: 4px * 4;
+        }
+
+        &.swiper-slide {
+            width: auto;
+        }
+    }
+
+    &__label {
+        white-space: nowrap;
+
+        @include font($tabs-label-font);
+    }
+
+    &__counter {
+        background-color: $tabs-counter-bg;
+        border-radius: $tabs-counter-radius;
+        color: $tabs-counter-color;
+        height: 4px * 5;
+        padding-bottom: 2px;
+        padding-left: 4px * 2;
+        padding-right: 4px * 2;
+        padding-top: 3px;
+
+        @include font($tabs-counter-font);
+    }
+
+    &__line {
+        background-color: $tabs-line-color;
+        bottom: $tabs-border-width * -1;
+        display: block;
+        height: $tabs-border-width;
+        left: 0;
+        position: absolute;
+    }
+
+    &__content {
+    }
+}

package/src/components/time-select/index.scss

@@ -0,0 +1,27 @@
+@use '../../variables' as *;
+
+.time-select {
+    align-items: center;
+    display: flex;
+
+    &::before {
+        background-color: $time-select-dash-color;
+        content: '';
+        height: 1px;
+        margin: 0 4px * 3;
+        order: 2;
+        width: 4px * 4;
+    }
+
+    &__item {
+        width: 4px * 28;
+
+        &:first-child {
+            order: 1;
+        }
+
+        &:last-child {
+            order: 3;
+        }
+    }
+}

package/src/components/toggle/index.scss

@@ -0,0 +1,76 @@
+@use '../../variables' as *;
+
+$b: '.toggle';
+
+#{$b} {
+    align-items: center;
+    display: flex;
+
+    &__input {
+        background-color: $toggle-bg;
+        border: $toggle-border-width solid $toggle-border-color;
+        border-radius: $toggle-radius;
+        cursor: pointer;
+        flex-shrink: 0;
+        height: 4px * 6;
+        position: relative;
+        transition-duration: var(--duration-micro-m);
+        transition-property: background-color, border-color;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 12;
+
+        #{$b}__label + & {
+            margin-left: 4px * 3;
+        }
+
+        :disabled ~ & {
+            background-color: $toggle-disabled-bg;
+            border-color: $toggle-disabled-border-color;
+            cursor: default;
+        }
+
+        :checked ~ & {
+            background-color: $toggle-active-bg;
+            border-color: $toggle-active-border-color;
+        }
+
+        :checked:disabled ~ & {
+            background-color: $toggle-active-disabled-bg;
+            border-color: $toggle-active-disabled-border-color;
+        }
+
+        &::before {
+            background-color: $toggle-check-color;
+            border-radius: $toggle-check-radius;
+            content: '';
+            height: 4px * 5;
+            left: 1px;
+            position: absolute;
+            top: 1px;
+            transition-duration: var(--duration-micro-m);
+            transition-property: background-color, transform;
+            transition-timing-function: var(--easing-standard);
+            width: 4px * 5;
+
+            :disabled ~ & {
+                background-color: $toggle-disabled-check-color;
+            }
+
+            :checked ~ & {
+                background-color: $toggle-active-check-color;
+                transform: translateX(24px);
+            }
+
+            :checked:disabled ~ & {
+                background-color: $toggle-active-disabled-check-color;
+            }
+        }
+    }
+
+    &__label {
+        color: $toggle-label-color;
+        margin-left: 4px * 3;
+
+        @include font($toggle-label-font);
+    }
+}

package/src/components/tooltip/index.js

@@ -0,0 +1,69 @@
+/* globals BX */
+
+import { cssVar } from '../../helpers/css-var.js';
+import { errorHandler } from '../../helpers/error-handler.js';
+
+export const init = async ($b) => {
+    const { createTooltip } = await import('@advdominion/tooltip');
+    const title = $b.dataset.tooltipTitle;
+    const content = title ? `<div class="tooltip__title">${title}</div>${$b.dataset.tooltip}` : $b.dataset.tooltip;
+
+    return new Promise((resolve) => {
+        if ($b._tooltip) {
+            $b._tooltip.setContent(content);
+            return resolve();
+        }
+
+        const tooltipFetch = $b.dataset.tooltipFetch;
+
+        let appendTo = document.body;
+        const $special = $b.closest('.dialog, .sidebar, .filter, .compare-pane');
+        if ($special) {
+            appendTo = $special;
+        }
+
+        createTooltip($b, content, {
+            appendTo,
+            delay: [cssVar('--duration-micro-s'), cssVar('--duration-micro-s')],
+            duration: [cssVar('--duration-enter-s'), cssVar('--duration-leave-s')],
+            easing: [cssVar('--easing-deceleration'), cssVar('--easing-acceleration')],
+            theme: 'small-light',
+            onCreate(instance) {
+                if (tooltipFetch) {
+                    instance._isFetching = false;
+                    instance._isFetched = false;
+                }
+                resolve();
+            },
+            async onShow(instance) {
+                if (tooltipFetch && !instance._isFetching && !instance._isFetched) {
+                    instance.setContent('Загрузка...');
+                    instance._isFetching = true;
+                    try {
+                        const response = await fetch(tooltipFetch, {
+                            method: 'GET',
+                            headers: {
+                                'X-Requested-With': 'XMLHttpRequest',
+                                'X-Session-Id': BX.message('bitrix_sessid'),
+                            },
+                        });
+                        if (!response.ok) {
+                            throw response;
+                        }
+                        const data = await response.text();
+                        instance._isFetching = false;
+                        instance._isFetched = true;
+                        instance.setContent(data);
+                    } catch (error) {
+                        if (error.status === 401) {
+                            location.reload();
+                        } else {
+                            instance._isFetching = false;
+                            errorHandler(error);
+                        }
+                    }
+                }
+            },
+        });
+    });
+};

package/src/components/tooltip/index.scss

@@ -0,0 +1,112 @@
+@use '../../variables' as *;
+
+$b: '.tooltip';
+
+#{$b} {
+    left: 0;
+    max-width: calc(100vw - 32px);
+    position: absolute;
+    top: 0;
+    width: max-content;
+    z-index: 200;
+
+    @media (--tablet-portrait-up) {
+        max-width: 300px;
+    }
+
+    &__arrow {
+        #{$b}_theme_light &,
+        #{$b}_theme_small-light &,
+        #{$b}_theme_actions & {
+            background-color: $tooltip-light-bg;
+
+            @include dark-border;
+        }
+
+        #{$b}_theme_light#{$b}_side_top &,
+        #{$b}_theme_small-light#{$b}_side_top &,
+        #{$b}_theme_actions#{$b}_side_top & {
+            @include dark-border-disable((top, left));
+        }
+
+        #{$b}_theme_light#{$b}_side_bottom &,
+        #{$b}_theme_small-light#{$b}_side_bottom &,
+        #{$b}_theme_actions#{$b}_side_bottom & {
+            @include dark-border-disable((right, bottom));
+        }
+
+        #{$b}_theme_light#{$b}_side_left &,
+        #{$b}_theme_small-light#{$b}_side_left &,
+        #{$b}_theme_actions#{$b}_side_left & {
+            @include dark-border-disable((bottom, left));
+        }
+
+        #{$b}_theme_light#{$b}_side_right &,
+        #{$b}_theme_small-light#{$b}_side_right &,
+        #{$b}_theme_actions#{$b}_side_right & {
+            @include dark-border-disable((top, right));
+        }
+
+        #{$b}_theme_dark &,
+        #{$b}_theme_small-dark & {
+            background-color: $tooltip-dark-bg;
+        }
+
+        #{$b}_theme_light &,
+        #{$b}_theme_dark &,
+        #{$b}_theme_actions & {
+            height: 10px;
+            width: 10px;
+        }
+
+        #{$b}_theme_small-light &,
+        #{$b}_theme_small-dark & {
+            height: 8px;
+            width: 8px;
+        }
+    }
+
+    &__container {
+        #{$b}_theme_light &,
+        #{$b}_theme_small-light &,
+        #{$b}_theme_actions & {
+            background-color: $tooltip-light-bg;
+            border-radius: $tooltip-radius;
+            box-shadow: $tooltip-shadow;
+            color: $tooltip-light-color;
+
+            @include dark-border;
+        }
+
+        #{$b}_theme_dark &,
+        #{$b}_theme_small-dark & {
+            background-color: $tooltip-dark-bg;
+            border-radius: $tooltip-radius;
+            color: $tooltip-dark-color;
+        }
+
+        #{$b}_theme_light &,
+        #{$b}_theme_dark & {
+            padding: 16px 24px;
+
+            @include font($tooltip-font);
+        }
+
+        #{$b}_theme_small-light &,
+        #{$b}_theme_small-dark & {
+            padding: 12px 16px;
+
+            @include font($tooltip-small-font);
+        }
+
+        #{$b}_theme_actions & {
+            @include font($tooltip-font);
+        }
+    }
+
+    &__title {
+        margin-bottom: 4px * 2;
+
+        @include font($tooltip-title-font);
+    }
+}