@formixru/b2b-ui 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "3.2.0",
+    "version": "3.3.0",
     "type": "module",
     "repository": {
         "type": "git",

package/src/components/tabs/index.js

@@ -1,11 +1,8 @@
-/* globals BX */
-
 import { scrollTo } from '@advdominion/scroll-to';
 
 import { cssVar } from '../../utils/css-var.js';
-import { errorHandler } from '../../utils/error-handler.js';
 import { isInViewport } from '../../utils/is-in-viewport.js';
-import { hide as hideLoader, show as showLoader } from '../loader/index.js';
+import { request } from '../request/index.js';
 
 const setLeftWidth = async ($line, $el) => {
     const $label = $el.querySelector('.tabs__label');
@@ -42,6 +39,34 @@ const initTabsContent = ($b) => {
     }
 };
 
+const changeTab = ($el) => {
+    const $b = $el.closest('.tabs');
+    const $items = $b.querySelectorAll('.tabs__item');
+    const $content = $b.querySelectorAll('.tabs__content');
+
+    const index = [...$items].indexOf($el);
+
+    for (const [i, $item] of $items.entries()) {
+        $item.disabled = i === index;
+    }
+
+    for (const [i, $c] of $content.entries()) {
+        if (i === index) {
+            $c.hidden = false;
+            for (const $el of $c.querySelectorAll('.swiper')) {
+                $el.swiper?.update();
+            }
+            for (const $el of $c.querySelectorAll('.tabs')) {
+                setInitLineStyles($el);
+            }
+            // Инициализируем полученный HTML
+            initTabsContent($content[index]);
+        } else {
+            $c.hidden = true;
+        }
+    }
+};
+
 export const init = async ($b) => {
     const $nav = $b.querySelector('.tabs__nav');
     const $list = $nav.querySelector('.tabs__list');
@@ -55,71 +80,14 @@ export const init = async ($b) => {
         const index = [...$items].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 $items) 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);
-                    }
-                }
+                const { content } = await request({ url: $el.dataset.tabsFetch });
+                // Вставляем полученный HTML
+                $content[index].innerHTML = content;
+                // Переключаем таб
+                changeTab($el);
             } else {
                 // Переключаем таб
-                for (const i of $items) 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;
-                    }
-                }
+                changeTab($el);
             }
 
             if ($nav.swiper) {
@@ -134,41 +102,47 @@ export const init = async ($b) => {
 
     if ($nav.swiper) {
         $nav.swiper.destroy();
-        for (const i of $items) i.removeEventListener('click', handleItemClick);
+        for (const $item of $items) {
+            $item.removeEventListener('click', handleItemClick);
+        }
     }
 
     const { default: Swiper } = await import('swiper');
 
     $nav.classList.add('swiper');
     $list.classList.add('swiper-wrapper');
-    for (const i of $items) i.classList.add('swiper-slide');
+    for (const $item of $items) {
+        $item.classList.add('swiper-slide');
+    }
 
     new Swiper($nav, {
         speed: cssVar('--duration-effect-s'),
         slidesPerView: 'auto',
         freeMode: true,
         on: {
-            init() {
+            init(swiper) {
                 setInitLineStyles($b); // Устанавливаем стили для линии при загрузке страницы
-                if (!this.isBeginning) {
+                if (!swiper.isBeginning) {
                     $nav.classList.toggle('tabs__nav_shadow-start', true);
                 }
-                if (!this.isEnd) {
+                if (!swiper.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);
+            sliderMove(swiper) {
+                $nav.classList.toggle('tabs__nav_shadow-start', !swiper.isBeginning);
+                $nav.classList.toggle('tabs__nav_shadow-end', !swiper.isEnd);
             },
-            transitionStart() {
-                $nav.classList.toggle('tabs__nav_shadow-start', !this.isBeginning);
-                $nav.classList.toggle('tabs__nav_shadow-end', !this.isEnd);
+            transitionStart(swiper) {
+                $nav.classList.toggle('tabs__nav_shadow-start', !swiper.isBeginning);
+                $nav.classList.toggle('tabs__nav_shadow-end', !swiper.isEnd);
             },
         },
     });
 
-    for (const i of $items) i.addEventListener('click', handleItemClick);
+    for (const $item of $items) {
+        $item.addEventListener('click', handleItemClick);
+    }
 };
 
 document.body.addEventListener('click', async (e) => {

package/src/components/total/index.scss

@@ -7,7 +7,7 @@ $b: '.total';
     border-radius: $total-radius;
     display: flex;
     flex-direction: column;
-    padding: 4px * 6 4px * 4;
+    padding: 24px 16px;
 
     @include dark-border;
     @include font($total-font);
@@ -16,8 +16,7 @@ $b: '.total';
         align-items: center;
         flex-direction: row;
         justify-content: space-between;
-        padding-left: 4px * 8;
-        padding-right: 4px * 8;
+        padding: 24px;
     }
 
     &_shadow {
@@ -35,11 +34,11 @@ $b: '.total';
     &__wrapper {
         display: flex;
         flex-direction: column;
-        margin-top: 4px * 6;
+        margin-top: 24px;
 
         @media (--tablet-landscape-up) {
             flex-direction: row;
-            margin-left: 4px * 8;
+            margin-left: 32px;
             margin-top: 0;
         }
     }
@@ -56,18 +55,18 @@ $b: '.total';
         justify-content: space-between;
 
         &:not(:first-child) {
-            margin-top: 4px * 3;
+            margin-top: 12px;
         }
     }
 
     &__specs-label {
         color: $total-specs-label-color;
-        margin-right: 4px * 6;
+        margin-right: 24px;
 
         @include font($total-specs-label-font);
 
         @media (--tablet-landscape-up) {
-            max-width: 4px * 25;
+            max-width: 100px;
         }
     }
 
@@ -87,13 +86,13 @@ $b: '.total';
         justify-content: center;
 
         &:not(:first-child) {
-            margin-top: 4px * 3;
+            margin-top: 12px;
 
             @media (--tablet-landscape-up) {
                 border-left: $total-amount-list-separator-width solid $total-amount-list-separator-color;
-                margin-left: 4px * 6;
+                margin-left: 24px;
                 margin-top: 0;
-                padding-left: 4px * 6;
+                padding-left: 24px;
             }
         }
     }
@@ -104,7 +103,7 @@ $b: '.total';
         justify-content: space-between;
 
         &:not(:first-child) {
-            margin-top: 4px * 4;
+            margin-top: 16px;
         }
 
         &_big {
@@ -114,7 +113,7 @@ $b: '.total';
 
     &__amount-label {
         color: $total-amount-label-color;
-        margin-right: 4px * 6;
+        margin-right: 24px;
 
         @include font($total-amount-label-font);
     }
@@ -153,10 +152,10 @@ $b: '.total';
     }
 
     &__promocode {
-        margin-top: 4px * 4;
+        margin-top: 16px;
 
         @media (--tablet-landscape-up) {
-            width: 4px * 85;
+            width: 340px;
         }
     }
 }