@formixru/b2b-ui 4.5.2 → 4.6.0

package/package.json

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

package/src/components/tabs/index.js

@@ -17,14 +17,25 @@ const setLeftWidth = async ($line, $el) => {
     }).finished;
 };
 
+const setActive = ($el, active) => {
+    if ($el.tagName === 'BUTTON') {
+        $el.disabled = active;
+    } else if (active) {
+        $el.dataset.disabled = '';
+    } else {
+        delete $el.dataset.disabled;
+    }
+};
+
 export const setInitLineStyles = ($b) => {
     const $nav = $b.querySelector('.tabs__nav');
     const $items = $nav.querySelectorAll('.tabs__item');
     const $line = $nav.querySelector('.tabs__line');
 
-    const $el = [...$items].find((el) => {
-        return el.disabled || (el.tagName !== 'BUTTON' && !el.href);
-    });
+    const $el =
+        [...$items].find((el) => {
+            return el.tagName === 'BUTTON' ? el.disabled : el.dataset.disabled !== undefined;
+        }) || $items[0];
 
     setLeftWidth($line, $el);
     // Прокручиваем до нужного таба
@@ -47,7 +58,7 @@ const changeTab = ($el) => {
     const index = [...$items].indexOf($el);
 
     for (const [i, $item] of $items.entries()) {
-        $item.disabled = i === index;
+        setActive($item, i === index);
     }
 
     for (const [i, $c] of $content.entries()) {
@@ -78,25 +89,28 @@ export const init = async ($b) => {
     const handleItemClick = async (e) => {
         const $el = e.currentTarget;
         const index = [...$items].indexOf($el);
-        if ($el.tagName === 'BUTTON') {
-            if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
-                const { content } = await request({ url: $el.dataset.tabsFetch });
-                // Вставляем полученный HTML
-                $content[index].innerHTML = content;
-                // Переключаем таб
-                changeTab($el);
-            } else {
-                // Переключаем таб
-                changeTab($el);
-            }
 
-            if ($nav.swiper) {
-                $nav.swiper.slideTo(index);
-            }
+        if ($el.tagName === 'A') {
+            e.preventDefault();
+        }
 
-            if ($line) {
-                setLeftWidth($line, $el);
-            }
+        if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
+            const { content } = await request({ url: $el.dataset.tabsFetch });
+            // Вставляем полученный HTML
+            $content[index].innerHTML = content;
+            // Переключаем таб
+            changeTab($el);
+        } else {
+            // Переключаем таб
+            changeTab($el);
+        }
+
+        if ($nav.swiper) {
+            $nav.swiper.slideTo(index);
+        }
+
+        if ($line) {
+            setLeftWidth($line, $el);
         }
     };
 

package/src/components/tabs/index.scss

@@ -111,6 +111,11 @@ $b: '.tabs';
         &.swiper-slide {
             width: auto;
         }
+
+        &[data-disabled] {
+            color: $font-color-primary;
+            pointer-events: none;
+        }
     }
 
     &__label {
@@ -132,6 +137,10 @@ $b: '.tabs';
         top: -1px;
 
         @include font($tabs-counter-font);
+
+        &:empty {
+            display: none;
+        }
     }
 
     &__line {

package/src/components/total/index.scss

@@ -146,12 +146,14 @@ $b: '.total';
     &__amount-label {
         color: $total-amount-label-color;
         margin-right: 24px;
+        max-width: 200px;
 
         @include font($total-amount-label-font);
     }
 
     &__amount-value {
         color: $total-amount-value-color;
+        max-width: 200px;
         text-align: right;
 
         @include font($total-amount-value-font);